@sveltia/ui 0.4.0 → 0.6.0

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

@@ -5,11 +5,11 @@
  * A Material Symbols icon.
  * @see https://developers.google.com/fonts/docs/material_symbols
  */
-export default class Icon extends SvelteComponentTyped<{
+export default class Icon extends SvelteComponent<{
     [x: string]: any;
-    label?: string;
-    name?: string;
     class?: string;
+    name?: string;
+    label?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -17,13 +17,13 @@ export default class Icon extends SvelteComponentTyped<{
 export type IconProps = typeof __propDef.props;
 export type IconEvents = typeof __propDef.events;
 export type IconSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        label?: string;
-        name?: string;
         class?: string;
+        name?: string;
+        label?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/listbox/listbox.svelte

@@ -44,7 +44,7 @@
   color: inherit;
   margin: 0;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--sui-control-border-color);
   border-radius: 4px;
   padding: 4px;
   min-width: 160px;
@@ -55,7 +55,7 @@
 [role=listbox]:global(.tabs) {
   padding: 0;
   border-width: 0 1px 0 0;
-  border-color: var(--control-border-color);
+  border-color: var(--sui-control-border-color);
 }
 [role=listbox]:global(.tabs) :global(.option button) {
   justify-content: flex-start;
@@ -64,11 +64,11 @@
   padding: 0 12px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  height: var(--tab--medium--height);
+  height: var(--sui-tab-medium-height);
 }
 [role=listbox]:global(.tabs) :global(.option button) :global(.icon) {
   display: none;
 }
 [role=listbox]:global(.tabs) :global(.option button[aria-selected="true"]) {
-  border-color: var(--primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color-lighter);
 }</style>

package/package/components/listbox/listbox.svelte.d.ts

@@ -7,7 +7,7 @@
  * @see https://w3c.github.io/aria/#listbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
  */
-export default class Listbox extends SvelteComponentTyped<{
+export default class Listbox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     element?: HTMLElement;
@@ -33,7 +33,7 @@ export default class Listbox extends SvelteComponentTyped<{
 export type ListboxProps = typeof __propDef.props;
 export type ListboxEvents = typeof __propDef.events;
 export type ListboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/listbox/option-group.svelte

@@ -42,6 +42,6 @@
 
 .label {
   margin: 8px;
-  color: var(--secondary-foreground-color);
-  font-size: var(--font-size--small);
+  color: var(--sui-secondary-foreground-color);
+  font-size: var(--sui-font-size-small);
 }</style>

package/package/components/listbox/option-group.svelte.d.ts

@@ -8,10 +8,10 @@
  * @see https://w3c.github.io/aria/#listbox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
  */
-export default class OptionGroup extends SvelteComponentTyped<{
+export default class OptionGroup extends SvelteComponent<{
     [x: string]: any;
-    label?: string;
     class?: string;
+    label?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -21,12 +21,12 @@ export default class OptionGroup extends SvelteComponentTyped<{
 export type OptionGroupProps = typeof __propDef.props;
 export type OptionGroupEvents = typeof __propDef.events;
 export type OptionGroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        label?: string;
         class?: string;
+        label?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/listbox/option.svelte

@@ -84,14 +84,14 @@
   border-radius: 4px;
   padding: 0 8px 0 16px;
   width: 100%;
-  height: var(--option--medium--height);
+  height: var(--sui-option-medium-height);
   white-space: nowrap;
 }
 .option :global(.focused),
 .option :global([role="option"]:hover) {
-  color: var(--highlight-foreground-color);
-  background-color: var(--highlight-background-color);
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-highlight-background-color);
 }
 .option :global([role="option"][aria-selected="true"]) :global(.icon) {
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
 }</style>

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

@@ -6,11 +6,11 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
  * @see https://w3c.github.io/aria/#option
  */
-export default class Option extends SvelteComponentTyped<{
+export default class Option extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     label?: string;
     value?: any;
-    class?: string;
     selected?: boolean;
 }, {
     click: MouseEvent;
@@ -33,13 +33,13 @@ export default class Option extends SvelteComponentTyped<{
 export type OptionProps = typeof __propDef.props;
 export type OptionEvents = typeof __propDef.events;
 export type OptionSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         label?: string;
         value?: any;
-        class?: string;
         selected?: boolean;
     };
     events: {

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

@@ -5,7 +5,7 @@
  * A button to open a `<Menu>` widget.
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
  */
-export default class MenuButton extends SvelteComponentTyped<{
+export default class MenuButton extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     popupPosition?: PopupPosition;
@@ -25,7 +25,7 @@ export default class MenuButton extends SvelteComponentTyped<{
 export type MenuButtonProps = typeof __propDef.props;
 export type MenuButtonEvents = typeof __propDef.events;
 export type MenuButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -5,7 +5,7 @@
  * A menu item widget with a checkbox.
  * @see https://w3c.github.io/aria/#menuitemcheckbox
  */
-export default class MenuItemCheckbox extends SvelteComponentTyped<{
+export default class MenuItemCheckbox extends SvelteComponent<{
     [x: string]: any;
     class?: string;
 }, {
@@ -19,7 +19,7 @@ export default class MenuItemCheckbox extends SvelteComponentTyped<{
 export type MenuItemCheckboxProps = typeof __propDef.props;
 export type MenuItemCheckboxEvents = typeof __propDef.events;
 export type MenuItemCheckboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -2,10 +2,10 @@
 /** @typedef {typeof __propDef.events}  MenuItemGroupEvents */
 /** @typedef {typeof __propDef.slots}  MenuItemGroupSlots */
 /** A menu item group. */
-export default class MenuItemGroup extends SvelteComponentTyped<{
+export default class MenuItemGroup extends SvelteComponent<{
     [x: string]: any;
-    title?: string;
     class?: string;
+    title?: string;
     ariaLabel?: string;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -16,12 +16,12 @@ export default class MenuItemGroup extends SvelteComponentTyped<{
 export type MenuItemGroupProps = typeof __propDef.props;
 export type MenuItemGroupEvents = typeof __propDef.events;
 export type MenuItemGroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        title?: string;
         class?: string;
+        title?: string;
         ariaLabel?: string;
     };
     events: {

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

@@ -6,7 +6,7 @@
  * `<MenuItemGroup>` component.
  * @see https://w3c.github.io/aria/#menuitemradio
  */
-export default class MenuItemRadio extends SvelteComponentTyped<{
+export default class MenuItemRadio extends SvelteComponent<{
     [x: string]: any;
     class?: string;
 }, {
@@ -20,7 +20,7 @@ export default class MenuItemRadio extends SvelteComponentTyped<{
 export type MenuItemRadioProps = typeof __propDef.props;
 export type MenuItemRadioEvents = typeof __propDef.events;
 export type MenuItemRadioSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/menu/menu-item.svelte

@@ -86,14 +86,14 @@
   padding: 0 16px;
   width: 100%;
   min-width: 160px;
-  height: var(--option--medium--height);
+  height: var(--sui-option-medium-height);
 }
 .menuitem :global(button[aria-checked="true"]) :global(.icon) {
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
 }
 .menuitem :global(button:hover) {
-  color: var(--highlight-foreground-color);
-  background-color: var(--highlight-background-color);
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-highlight-background-color);
 }
 .menuitem:hover > :global([role="menu"]) {
   opacity: 1;

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

@@ -5,10 +5,10 @@
  * A menu item widget.
  * @see https://w3c.github.io/aria/#menuitem
  */
-export default class MenuItem extends SvelteComponentTyped<{
+export default class MenuItem extends SvelteComponent<{
     [x: string]: any;
-    label?: string;
     class?: string;
+    label?: string;
     role?: "menuitem" | "menuitemcheckbox" | "menuitemradio";
     checked?: boolean;
     iconName?: string;
@@ -24,12 +24,12 @@ export default class MenuItem extends SvelteComponentTyped<{
 export type MenuItemProps = typeof __propDef.props;
 export type MenuItemEvents = typeof __propDef.events;
 export type MenuItemSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        label?: string;
         class?: string;
+        label?: string;
         role?: ('menuitem' | 'menuitemcheckbox' | 'menuitemradio');
         checked?: boolean;
         iconName?: string;

package/package/components/menu/menu.svelte

@@ -36,7 +36,7 @@
   flex-direction: column;
   margin: 0;
   border-width: 1px;
-  border-color: var(--secondary-border-color);
+  border-color: var(--sui-secondary-border-color);
   border-radius: 4px;
   padding: 4px;
 }

package/package/components/menu/menu.svelte.d.ts

@@ -6,7 +6,7 @@
  * @see https://w3c.github.io/aria/#menu
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
  */
-export default class Menu extends SvelteComponentTyped<{
+export default class Menu extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     element?: HTMLElement;
@@ -25,7 +25,7 @@ export default class Menu extends SvelteComponentTyped<{
 export type MenuProps = typeof __propDef.props;
 export type MenuEvents = typeof __propDef.events;
 export type MenuSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/radio/radio-group.svelte.d.ts

@@ -6,7 +6,7 @@
  * @see https://w3c.github.io/aria/#radiogroup
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
-export default class RadioGroup extends SvelteComponentTyped<{
+export default class RadioGroup extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     element?: HTMLElement;
@@ -22,7 +22,7 @@ export default class RadioGroup extends SvelteComponentTyped<{
 export type RadioGroupProps = typeof __propDef.props;
 export type RadioGroupEvents = typeof __propDef.events;
 export type RadioGroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/radio/radio.svelte

@@ -92,17 +92,17 @@
   cursor: default;
 }
 .radio.disabled label {
-  color: var(--disabled-foreground-color);
+  color: var(--sui-disabled-foreground-color);
 }
 .radio :global(button) {
   justify-content: center;
   overflow: hidden;
   border-width: 2px;
-  border-color: var(--checkbox-border-color);
+  border-color: var(--sui-checkbox-border-color);
   border-radius: 24px;
   width: 20px;
   height: 20px;
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
   transition: all 200ms;
 }
 .radio :global(button) :global(.icon) {
@@ -110,8 +110,8 @@
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
 }
 .radio :global(button[aria-checked="true"]) {
-  border-color: var(--primary-accent-color-lighter);
-  color: var(--primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
 }
 .radio :global(button[aria-checked="false"]) {
   color: transparent;

package/package/components/radio/radio.svelte.d.ts

@@ -7,13 +7,13 @@
  * @see https://w3c.github.io/aria/#radio
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/radio/
  */
-export default class Radio extends SvelteComponentTyped<{
+export default class Radio extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
+    name?: string;
     label?: string;
     disabled?: boolean;
-    name?: string;
     value?: string;
-    class?: string;
     selected?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -24,15 +24,15 @@ export default class Radio extends SvelteComponentTyped<{
 export type RadioProps = typeof __propDef.props;
 export type RadioEvents = typeof __propDef.events;
 export type RadioSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
+        name?: string;
         label?: string | null;
         disabled?: boolean;
-        name?: string;
         value?: string | null;
-        class?: string;
         selected?: boolean;
     };
     events: {

package/package/components/select/combobox.svelte

@@ -138,10 +138,10 @@
   display: flex;
   align-items: center;
   position: relative;
-  min-width: var(--combobox-min-width, 160px);
+  min-width: var(--sui-combobox-min-width, 160px);
 }
 .combobox :global(.icon) {
-  font-size: var(--font-size--xx-large);
+  font-size: var(--sui-font-size-xx-large);
   opacity: 0.5;
 }
 .combobox > :global(.icon) {
@@ -163,12 +163,12 @@
   display: flex;
   align-items: center;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--sui-control-border-color);
   border-radius: 4px;
   padding: 0 32px 0 8px;
   width: 100%;
-  height: var(--input--medium--height);
-  background-color: var(--disabled-background-color);
+  height: var(--sui-input-medium-height);
+  background-color: var(--sui-disabled-background-color);
   -webkit-user-select: none;
   user-select: none;
   cursor: pointer;
@@ -178,10 +178,10 @@
   font-style: italic;
 }
 .combobox div[role=combobox]:hover, .combobox div[role=combobox]:focus {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 .combobox div[role=combobox][aria-disabled=true] {
-  background-color: var(--disabled-background-color);
+  background-color: var(--sui-disabled-background-color);
   opacity: 0.4;
   cursor: default;
 }
@@ -200,9 +200,9 @@
   position: fixed;
   z-index: 100;
   border-radius: 4px;
-  box-shadow: 0 8px 16px var(--popup-shadow-color);
+  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   overflow: auto;
-  background-color: var(--secondary-background-color);
+  background-color: var(--sui-secondary-background-color);
   backdrop-filter: blur(16px);
   transition: opacity 100ms 100ms;
 }

package/package/components/select/combobox.svelte.d.ts

@@ -6,13 +6,13 @@
  * @see https://w3c.github.io/aria/#combobox
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
  */
-export default class Combobox extends SvelteComponentTyped<{
+export default class Combobox extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     label?: string;
     position?: PopupPosition;
     disabled?: boolean;
     value?: string | number;
-    class?: string;
     readOnly?: boolean;
 }, {
     change: CustomEvent<any>;
@@ -25,15 +25,18 @@ export default class Combobox extends SvelteComponentTyped<{
 export type ComboboxProps = typeof __propDef.props;
 export type ComboboxEvents = typeof __propDef.events;
 export type ComboboxSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: {
+    /**
+       * Where to show the dropdown menu.
+       * @type {PopupPosition}
+       */ props: {
         [x: string]: any;
+        class?: string;
         label?: string;
         position?: PopupPosition;
         disabled?: boolean;
         value?: (string | number | undefined);
-        class?: string;
         readOnly?: boolean;
     };
     events: {

package/package/components/select/select.svelte.d.ts

@@ -6,11 +6,11 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
  * @see https://w3c.github.io/aria/#combobox
  */
-export default class Select extends SvelteComponentTyped<{
+export default class Select extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     label?: string;
     value?: string;
-    class?: string;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -22,13 +22,13 @@ export default class Select extends SvelteComponentTyped<{
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;
 export type SelectSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         label?: string;
         value?: string | null;
-        class?: string;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/slider/slider.svelte

@@ -288,10 +288,10 @@
 
 .base {
   position: relative;
-  width: var(--slider-base-width, 200px);
+  width: var(--sui-slider-base-width, 200px);
   height: 8px;
   border-radius: 8px;
-  background-color: var(--control-border-color);
+  background-color: var(--sui-control-border-color);
 }
 
 .bar {
@@ -299,17 +299,17 @@
   top: 0;
   height: 8px;
   border-radius: 8px;
-  background-color: var(--primary-accent-color-lighter);
+  background-color: var(--sui-primary-accent-color-lighter);
 }
 
 [role=slider] {
   position: absolute;
   top: 0;
-  border: 2px solid var(--primary-accent-color-lighter);
+  border: 2px solid var(--sui-primary-accent-color-lighter);
   border-radius: 8px;
   width: 16px;
   height: 16px;
-  background-color: var(--primary-accent-color-foreground);
+  background-color: var(--sui-primary-accent-color-foreground);
   cursor: pointer;
   transform: translate(-8px, -4px);
 }
@@ -318,5 +318,5 @@
   position: absolute;
   top: 12px;
   transform: translateX(-50%);
-  font-size: var(--font-size--x-small);
+  font-size: var(--sui-font-size-x-small);
 }</style>

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

@@ -9,10 +9,10 @@
  * @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 extends SvelteComponentTyped<{
+export default class Slider extends SvelteComponent<{
     [x: string]: any;
-    value?: number;
     class?: string;
+    value?: number;
     sliderLabel?: string;
     values?: [number, number];
     sliderLabels?: [string, string];
@@ -30,12 +30,12 @@ export default class Slider extends SvelteComponentTyped<{
 export type SliderProps = typeof __propDef.props;
 export type SliderEvents = typeof __propDef.events;
 export type SliderSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: number;
         class?: string;
+        value?: number;
         sliderLabel?: string;
         values?: [number, number];
         sliderLabels?: [string, string];

package/package/components/switch/switch.svelte

@@ -69,15 +69,15 @@ button:focus-visible span::before {
   outline-offset: 1px;
   outline-width: 2px;
   outline-style: solid;
-  outline-color: var(--primary-accent-color-lighter);
+  outline-color: var(--sui-primary-accent-color-lighter);
 }
 button[aria-checked=true] span {
-  background-color: var(--primary-accent-color);
+  background-color: var(--sui-primary-accent-color);
   border-color: transparent;
 }
 button[aria-checked=true] span::before {
   transform: translateX(22px);
-  background-color: var(--primary-accent-color-foreground);
+  background-color: var(--sui-primary-accent-color-foreground);
 }
 
 span {
@@ -87,18 +87,18 @@ span {
   padding: 2px;
   display: inline-block;
   border-radius: 16px;
-  background-color: var(--control-border-color);
+  background-color: var(--sui-control-border-color);
   transition: all 200ms;
 }
 span:hover {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 span::before {
   display: inline-block;
   width: 16px;
   height: 16px;
   border-radius: 16px;
-  background-color: var(--primary-accent-color-foreground);
+  background-color: var(--sui-primary-accent-color-foreground);
   transition: all 200ms;
   content: "";
 }</style>