@sveltia/ui 0.1.5 → 0.2.1

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

@@ -1,11 +1,18 @@
 /** @typedef {typeof __propDef.props}  IconProps */
 /** @typedef {typeof __propDef.events}  IconEvents */
 /** @typedef {typeof __propDef.slots}  IconSlots */
-export default class Icon {
+export default class Icon extends SvelteComponentTyped<{
+    label?: string;
+    class?: string;
+    name?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
 }
 export type IconProps = typeof __propDef.props;
 export type IconEvents = typeof __propDef.events;
 export type IconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label?: string;

package/package/components/core/menu-button.svelte.d.ts

@@ -2,11 +2,27 @@
 /** @typedef {typeof __propDef.events}  MenuButtonEvents */
 /** @typedef {typeof __propDef.slots}  MenuButtonSlots */
 /** @see https://w3c.github.io/aria-practices/#menubutton */
-export default class MenuButton {
+export default class MenuButton extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    popupPosition?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'start-icon': {
+        slot: string;
+    };
+    default: {};
+    'end-icon': {
+        slot: string;
+    };
+    popup: {};
+}> {
 }
 export type MenuButtonProps = typeof __propDef.props;
 export type MenuButtonEvents = typeof __propDef.events;
 export type MenuButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/core/menu-item-checkbox.svelte.d.ts

@@ -2,18 +2,28 @@
 /** @typedef {typeof __propDef.events}  MenuItemCheckboxEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemCheckboxSlots */
 /** @see https://w3c.github.io/aria/#menuitemcheckbox */
-export default class MenuItemCheckbox {
+export default class MenuItemCheckbox extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type MenuItemCheckboxProps = typeof __propDef.props;
 export type MenuItemCheckboxEvents = typeof __propDef.events;
 export type MenuItemCheckboxSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
     };
     events: {
-        click: any;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/core/menu-item-radio.svelte.d.ts

@@ -2,18 +2,28 @@
 /** @typedef {typeof __propDef.events}  MenuItemRadioEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemRadioSlots */
 /** @see https://w3c.github.io/aria/#menuitemradio */
-export default class MenuItemRadio {
+export default class MenuItemRadio extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type MenuItemRadioProps = typeof __propDef.props;
 export type MenuItemRadioEvents = typeof __propDef.events;
 export type MenuItemRadioSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string;
     };
     events: {
-        click: any;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/core/menu-item.svelte.d.ts

@@ -2,11 +2,26 @@
 /** @typedef {typeof __propDef.events}  MenuItemEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemSlots */
 /** @see https://w3c.github.io/aria/#menuitem */
-export default class MenuItem {
+export default class MenuItem extends SvelteComponentTyped<{
+    [x: string]: any;
+    label?: string;
+    class?: string;
+    role?: "menuitem" | "menuitemcheckbox" | "menuitemradio";
+    checked?: boolean;
+    iconName?: string;
+    iconLabel?: string;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type MenuItemProps = typeof __propDef.props;
 export type MenuItemEvents = typeof __propDef.events;
 export type MenuItemSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -18,7 +33,7 @@ declare const __propDef: {
         iconLabel?: string;
     };
     events: {
-        click: any;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -108,5 +108,5 @@
   border-radius: 0 4px 4px 0;
 }
 .number-input :global(button) :global(.icon) {
-  font-size: 20px;
+  font-size: var(--font-size--xx-large);
 }</style>

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

@@ -2,11 +2,25 @@
 /** @typedef {typeof __propDef.events}  NumberInputEvents */
 /** @typedef {typeof __propDef.slots}  NumberInputSlots */
 /** @see https://w3c.github.io/aria/#textbox */
-export default class NumberInput {
+export default class NumberInput extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    disabled?: boolean;
+    value?: string;
+    min?: any;
+    max?: any;
+    step?: number;
+}, {
+    keypress: KeyboardEvent;
+    input: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
 }
 export type NumberInputProps = typeof __propDef.props;
 export type NumberInputEvents = typeof __propDef.events;
 export type NumberInputSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -18,8 +32,8 @@ declare const __propDef: {
         step?: number;
     };
     events: {
-        keypress: any;
-        input: any;
+        keypress: KeyboardEvent;
+        input: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/core/option.svelte

@@ -14,6 +14,8 @@
 
   export { className as class };
 
+  export let label = '';
+  export let value = undefined;
   export let selected = false;
 </script>
 
@@ -21,6 +23,9 @@
   <Button
     role="option"
     aria-selected={selected}
+    {label}
+    {value}
+    data-type={typeof value}
     {...$$restProps}
     on:click
     on:dragover
@@ -49,6 +54,7 @@
   padding: 0 8px 0 16px;
   width: 100%;
   height: var(--option--medium--height);
+  white-space: nowrap;
 }
 .option :global([role="option"]:hover) {
   color: var(--highlight-foreground-color);

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

@@ -2,23 +2,48 @@
 /** @typedef {typeof __propDef.events}  OptionEvents */
 /** @typedef {typeof __propDef.slots}  OptionSlots */
 /** @see https://w3c.github.io/aria/#option */
-export default class Option {
+export default class Option extends SvelteComponentTyped<{
+    [x: string]: any;
+    label?: string;
+    class?: string;
+    value?: any;
+    selected?: boolean;
+}, {
+    click: MouseEvent;
+    dragover: DragEvent;
+    dragleave: DragEvent;
+    dragend: DragEvent;
+    drop: DragEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'start-icon': {
+        slot: string;
+    };
+    default: {};
+    'end-icon': {
+        slot: string;
+    };
+}> {
 }
 export type OptionProps = typeof __propDef.props;
 export type OptionEvents = typeof __propDef.events;
 export type OptionSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        label?: string;
         class?: string;
+        value?: any;
         selected?: boolean;
     };
     events: {
-        click: any;
-        dragover: any;
-        dragleave: any;
-        dragend: any;
-        drop: any;
+        click: MouseEvent;
+        dragover: DragEvent;
+        dragleave: DragEvent;
+        dragend: DragEvent;
+        drop: DragEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -77,5 +77,5 @@
   border-radius: 0 4px 4px 0;
 }
 .password-input :global(button) :global(.icon) {
-  font-size: 20px;
+  font-size: var(--font-size--xx-large);
 }</style>

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

@@ -2,11 +2,22 @@
 /** @typedef {typeof __propDef.events}  PasswordInputEvents */
 /** @typedef {typeof __propDef.slots}  PasswordInputSlots */
 /** @see https://w3c.github.io/aria/#textbox */
-export default class PasswordInput {
+export default class PasswordInput extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    value?: string;
+}, {
+    input: Event;
+    keypress: KeyboardEvent;
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
 }
 export type PasswordInputProps = typeof __propDef.props;
 export type PasswordInputEvents = typeof __propDef.events;
 export type PasswordInputSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -14,9 +25,9 @@ declare const __propDef: {
         value?: (string | undefined);
     };
     events: {
-        input: any;
-        keypress: any;
-        change: any;
+        input: Event;
+        keypress: KeyboardEvent;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/core/radio-button.svelte

@@ -82,7 +82,7 @@
   transition: all 200ms;
 }
 .radio-button :global(button) :global(.icon) {
-  font-size: 16px;
+  font-size: var(--font-size--large);
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
 }
 .radio-button :global(button[aria-checked="true"]) {

package/package/components/core/radio-button.svelte.d.ts

@@ -5,11 +5,21 @@
  * @see https://w3c.github.io/aria/#radio
  * @see https://w3c.github.io/aria-practices/#radiobutton
  */
-export default class RadioButton {
+export default class RadioButton extends SvelteComponentTyped<{
+    class?: string;
+    name?: string;
+    value?: string;
+    selected?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type RadioButtonProps = typeof __propDef.props;
 export type RadioButtonEvents = typeof __propDef.events;
 export type RadioButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

package/package/components/core/row-group.svelte.d.ts

@@ -1,11 +1,19 @@
 /** @typedef {typeof __propDef.props}  RowGroupProps */
 /** @typedef {typeof __propDef.events}  RowGroupEvents */
 /** @typedef {typeof __propDef.slots}  RowGroupSlots */
-export default class RowGroup {
+export default class RowGroup extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type RowGroupProps = typeof __propDef.props;
 export type RowGroupEvents = typeof __propDef.events;
 export type RowGroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -1,11 +1,21 @@
 /** @typedef {typeof __propDef.props}  RowProps */
 /** @typedef {typeof __propDef.events}  RowEvents */
 /** @typedef {typeof __propDef.slots}  RowSlots */
-export default class Row {
+export default class Row extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type RowProps = typeof __propDef.props;
 export type RowEvents = typeof __propDef.events;
 export type RowSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/core/search-bar.svelte

@@ -46,7 +46,7 @@
   />
   {#if value}
     <Button
-      class="ternary iconic"
+      class="iconic"
       on:click={() => {
         value = '';
         input.element.focus();
@@ -68,7 +68,7 @@
   position: relative;
 }
 [role=search] :global(.icon) {
-  font-size: 20px;
+  font-size: var(--font-size--xx-large);
   opacity: 0.5;
 }
 [role=search] > :global(.icon) {
@@ -80,6 +80,7 @@
   position: absolute;
   inset: 0 0 auto auto;
   z-index: 2;
+  height: var(--button--medium--height);
 }
 [role=search] :global(.label) {
   inset: 0 36px;

package/package/components/core/search-bar.svelte.d.ts

@@ -2,18 +2,32 @@
 /** @typedef {typeof __propDef.events}  SearchBarEvents */
 /** @typedef {typeof __propDef.slots}  SearchBarSlots */
 /** @see https://w3c.github.io/aria/#search */
-export default class SearchBar {
-    get focus(): any;
+export default class SearchBar extends SvelteComponentTyped<{
+    [x: string]: any;
+    focus?: () => void;
+    class?: string;
+    value?: string;
+}, {
+    input: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get focus(): () => void;
     /**accessor*/
-    set class(arg: any);
-    get class(): any;
+    set class(arg: string);
+    get class(): string;
     /**accessor*/
-    set value(arg: any);
-    get value(): any;
+    set value(arg: string);
+    get value(): string;
 }
 export type SearchBarProps = typeof __propDef.props;
 export type SearchBarEvents = typeof __propDef.events;
 export type SearchBarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -22,11 +36,11 @@ declare const __propDef: {
         value?: string;
     };
     events: {
-        input: any;
-        keydown: any;
-        keyup: any;
-        keypress: any;
-        change: any;
+        input: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+        change: Event;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/core/select-button.svelte.d.ts

@@ -6,11 +6,28 @@
  * @see https://w3c.github.io/aria/#radio
  * @see https://w3c.github.io/aria-practices/#radiobutton
  */
-export default class SelectButton {
+export default class SelectButton extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    selected?: boolean;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'start-icon': {
+        slot: string;
+    };
+    default: {};
+    'end-icon': {
+        slot: string;
+    };
+}> {
 }
 export type SelectButtonProps = typeof __propDef.props;
 export type SelectButtonEvents = typeof __propDef.events;
 export type SelectButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -18,7 +35,7 @@ declare const __propDef: {
         selected?: boolean;
     };
     events: {
-        click: any;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -2,11 +2,17 @@
 /** @typedef {typeof __propDef.events}  SeparatorEvents */
 /** @typedef {typeof __propDef.slots}  SeparatorSlots */
 /** @see https://w3c.github.io/aria/#separator */
-export default class Separator {
+export default class Separator extends SvelteComponentTyped<{
+    class?: string;
+    orientation?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
 }
 export type SeparatorProps = typeof __propDef.props;
 export type SeparatorEvents = typeof __propDef.events;
 export type SeparatorSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

package/package/components/core/slider.svelte

@@ -254,6 +254,7 @@
 [role=slider] {
   position: absolute;
   top: 0;
+  border: 2px solid var(--primary-accent-color-lighter);
   border-radius: 8px;
   width: 16px;
   height: 16px;
@@ -266,5 +267,5 @@
   position: absolute;
   top: 12px;
   transform: translateX(-50%);
-  font-size: 10px;
+  font-size: var(--font-size--x-small);
 }</style>

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

@@ -7,11 +7,27 @@
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider/
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
  */
-export default class Slider {
+export default class Slider extends SvelteComponentTyped<{
+    class?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    sliderLabel?: string;
+    values?: any;
+    sliderLabels?: any[];
+    optionLabels?: any[];
+}, {
+    click: MouseEvent;
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
 }
 export type SliderProps = typeof __propDef.props;
 export type SliderEvents = typeof __propDef.events;
 export type SliderSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

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

@@ -1,11 +1,17 @@
 /** @typedef {typeof __propDef.props}  SpacerProps */
 /** @typedef {typeof __propDef.events}  SpacerEvents */
 /** @typedef {typeof __propDef.slots}  SpacerSlots */
-export default class Spacer {
+export default class Spacer extends SvelteComponentTyped<{
+    class?: string;
+    flex?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
 }
 export type SpacerProps = typeof __propDef.props;
 export type SpacerEvents = typeof __propDef.events;
 export type SpacerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

package/package/components/core/switch.svelte

@@ -45,6 +45,9 @@ input {
   position: absolute;
   left: -99999px;
 }
+input:focus + span {
+  background-color: var(--highlight-background-color);
+}
 
 input:checked + span {
   background-color: var(--primary-accent-color);
@@ -69,6 +72,9 @@ span {
   background-color: var(--control-border-color);
   transition: all 200ms;
 }
+span:hover {
+  background-color: var(--highlight-background-color);
+}
 span::before {
   display: inline-block;
   width: 16px;

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

@@ -5,11 +5,21 @@
  * @see https://w3c.github.io/aria/#switch
  * @see https://w3c.github.io/aria-practices/#switch
  */
-export default class Switch {
+export default class Switch extends SvelteComponentTyped<{
+    label?: string;
+    class?: string;
+    disabled?: boolean;
+    checked?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 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: {
         label?: string;

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

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