@sveltia/ui 0.4.0 → 0.6.0

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

@@ -6,11 +6,11 @@
  * @see https://w3c.github.io/aria/#switch
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/switch/
  */
-export default class Switch extends SvelteComponentTyped<{
+export default class Switch extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     label?: string;
     disabled?: boolean;
-    class?: string;
     checked?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -21,13 +21,13 @@ export default class Switch extends SvelteComponentTyped<{
 export type SwitchProps = typeof __propDef.props;
 export type SwitchEvents = typeof __propDef.events;
 export type SwitchSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         label?: string;
         disabled?: boolean;
-        class?: string;
         checked?: boolean;
     };
     events: {

package/package/components/table/table-body.svelte.d.ts

@@ -6,7 +6,7 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
  * @see https://w3c.github.io/aria/#rowgroup
  */
-export default class TableBody extends SvelteComponentTyped<{
+export default class TableBody extends SvelteComponent<{
     [x: string]: any;
     class?: string;
 }, {
@@ -18,7 +18,7 @@ export default class TableBody extends SvelteComponentTyped<{
 export type TableBodyProps = typeof __propDef.props;
 export type TableBodyEvents = typeof __propDef.events;
 export type TableBodySlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/table/table-cell.svelte.d.ts

@@ -6,7 +6,7 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
  * @see https://w3c.github.io/aria/#gridcell
  */
-export default class TableCell extends SvelteComponentTyped<{
+export default class TableCell extends SvelteComponent<{
     [x: string]: any;
     class?: string;
 }, {
@@ -18,7 +18,7 @@ export default class TableCell extends SvelteComponentTyped<{
 export type TableCellProps = typeof __propDef.props;
 export type TableCellEvents = typeof __propDef.events;
 export type TableCellSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/table/table-col-header.svelte.d.ts

@@ -6,7 +6,7 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
  * @see https://w3c.github.io/aria/#columnheader
  */
-export default class TableColHeader extends SvelteComponentTyped<{
+export default class TableColHeader extends SvelteComponent<{
     [x: string]: any;
     class?: string;
 }, {
@@ -18,7 +18,7 @@ export default class TableColHeader extends SvelteComponentTyped<{
 export type TableColHeaderProps = typeof __propDef.props;
 export type TableColHeaderEvents = typeof __propDef.events;
 export type TableColHeaderSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/table/table-foot.svelte.d.ts

@@ -6,7 +6,7 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
  * @see https://w3c.github.io/aria/#rowgroup
  */
-export default class TableFoot extends SvelteComponentTyped<{
+export default class TableFoot extends SvelteComponent<{
     [x: string]: any;
     class?: string;
 }, {
@@ -18,7 +18,7 @@ export default class TableFoot extends SvelteComponentTyped<{
 export type TableFootProps = typeof __propDef.props;
 export type TableFootEvents = typeof __propDef.events;
 export type TableFootSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/table/table-head.svelte.d.ts

@@ -6,7 +6,7 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
  * @see https://w3c.github.io/aria/#rowgroup
  */
-export default class TableHead extends SvelteComponentTyped<{
+export default class TableHead extends SvelteComponent<{
     [x: string]: any;
     class?: string;
 }, {
@@ -18,7 +18,7 @@ export default class TableHead extends SvelteComponentTyped<{
 export type TableHeadProps = typeof __propDef.props;
 export type TableHeadEvents = typeof __propDef.events;
 export type TableHeadSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/table/table-row-header.svelte.d.ts

@@ -6,7 +6,7 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
  * @see https://w3c.github.io/aria/#rowheader
  */
-export default class TableRowHeader extends SvelteComponentTyped<{
+export default class TableRowHeader extends SvelteComponent<{
     [x: string]: any;
     class?: string;
 }, {
@@ -18,7 +18,7 @@ export default class TableRowHeader extends SvelteComponentTyped<{
 export type TableRowHeaderProps = typeof __propDef.props;
 export type TableRowHeaderEvents = typeof __propDef.events;
 export type TableRowHeaderSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/table/table-row.svelte.d.ts

@@ -6,7 +6,7 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
  * @see https://w3c.github.io/aria/#row
  */
-export default class TableRow extends SvelteComponentTyped<{
+export default class TableRow extends SvelteComponent<{
     [x: string]: any;
     class?: string;
 }, {
@@ -20,7 +20,7 @@ export default class TableRow extends SvelteComponentTyped<{
 export type TableRowProps = typeof __propDef.props;
 export type TableRowEvents = typeof __propDef.events;
 export type TableRowSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/table/table.svelte

@@ -39,6 +39,6 @@
 .table:global(.data) :global(.table-col-header),
 .table:global(.data) :global(.table-row-header),
 .table:global(.data) :global(.table-cell) {
-  border: 1px solid var(--secondary-border-color);
+  border: 1px solid var(--sui-secondary-border-color);
   padding: 8px 8px;
 }</style>

package/package/components/table/table.svelte.d.ts

@@ -6,7 +6,7 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
  * @see https://w3c.github.io/aria/#grid
  */
-export default class Table extends SvelteComponentTyped<{
+export default class Table extends SvelteComponent<{
     [x: string]: any;
     class?: string;
     element?: HTMLElement;
@@ -19,7 +19,7 @@ export default class Table extends SvelteComponentTyped<{
 export type TableProps = typeof __propDef.props;
 export type TableEvents = typeof __propDef.events;
 export type TableSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -42,7 +42,7 @@
 <style>.tab-list {
   display: flex;
   align-items: center;
-  border-color: var(--control-border-color);
+  border-color: var(--sui-control-border-color);
 }
 .tab-list[aria-orientation=horizontal] {
   gap: 16px;
@@ -70,8 +70,8 @@
   border-color: transparent;
   padding: 0;
   border-radius: 0;
-  height: var(--tab--medium--height);
+  height: var(--sui-tab-medium-height);
 }
 .tab-list :global(button[aria-selected="true"]) {
-  border-color: var(--primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color-lighter);
 }</style>

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

@@ -6,10 +6,10 @@
  * @see https://w3c.github.io/aria/#tablist
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
-export default class TabList extends SvelteComponentTyped<{
+export default class TabList extends SvelteComponent<{
     [x: string]: any;
-    name?: string;
     class?: string;
+    name?: string;
     element?: HTMLElement;
     orientation?: "vertical" | "horizontal";
 }, {
@@ -35,12 +35,12 @@ export default class TabList extends SvelteComponentTyped<{
 export type TabListProps = typeof __propDef.props;
 export type TabListEvents = typeof __propDef.events;
 export type TabListSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        name?: string;
         class?: string;
+        name?: string;
         element?: HTMLElement | null;
         orientation?: ('horizontal' | 'vertical');
     };

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

@@ -6,7 +6,7 @@
  * @see https://w3c.github.io/aria/#tabpanel
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
-export default class TabPanel extends SvelteComponentTyped<{
+export default class TabPanel extends SvelteComponent<{
     [x: string]: any;
     class?: string;
 }, {
@@ -18,7 +18,7 @@ export default class TabPanel extends SvelteComponentTyped<{
 export type TabPanelProps = typeof __propDef.props;
 export type TabPanelEvents = typeof __propDef.events;
 export type TabPanelSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -6,7 +6,7 @@
  * @see https://w3c.github.io/aria/#tab
  * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
  */
-export default class Tab extends SvelteComponentTyped<{
+export default class Tab extends SvelteComponent<{
     [x: string]: any;
     class?: string;
 }, {
@@ -24,7 +24,7 @@ export default class Tab extends SvelteComponentTyped<{
 export type TabProps = typeof __propDef.props;
 export type TabEvents = typeof __propDef.events;
 export type TabSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

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

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

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  MarkdownEditorEvents */
 /** @typedef {typeof __propDef.slots}  MarkdownEditorSlots */
 /** A Markdown text editor. */
-export default class MarkdownEditor extends SvelteComponentTyped<{
+export default class MarkdownEditor extends SvelteComponent<{
     disabled?: boolean;
     value?: string;
 }, {
@@ -12,7 +12,7 @@ export default class MarkdownEditor extends SvelteComponentTyped<{
 export type MarkdownEditorProps = typeof __propDef.props;
 export type MarkdownEditorEvents = typeof __propDef.events;
 export type MarkdownEditorSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         disabled?: boolean;

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

@@ -112,9 +112,9 @@
 .number-input :global(button) {
   flex: none;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--sui-control-border-color);
   width: 32px;
-  height: var(--input--medium--height);
+  height: var(--sui-input-medium-height);
 }
 .number-input :global(button):first-of-type {
   border-radius: 0;
@@ -124,5 +124,5 @@
   border-radius: 0 4px 4px 0;
 }
 .number-input :global(button) :global(.icon) {
-  font-size: var(--font-size--xx-large);
+  font-size: var(--sui-font-size-xx-large);
 }</style>

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

@@ -6,11 +6,11 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
  * @see https://w3c.github.io/aria/#textbox
  */
-export default class NumberInput extends SvelteComponentTyped<{
+export default class NumberInput extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     disabled?: boolean;
     value?: string;
-    class?: string;
     min?: any;
     max?: any;
     step?: number;
@@ -24,13 +24,13 @@ export default class NumberInput extends SvelteComponentTyped<{
 export type NumberInputProps = typeof __propDef.props;
 export type NumberInputEvents = typeof __propDef.events;
 export type NumberInputSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         disabled?: boolean;
         value?: string | null;
-        class?: string;
         min?: any;
         max?: any;
         step?: number;

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

@@ -72,13 +72,13 @@
   flex: none;
   margin-left: -1px;
   border-width: 1px;
-  border-color: var(--control-border-color);
-  height: var(--input--medium--height);
+  border-color: var(--sui-control-border-color);
+  height: var(--sui-input-medium-height);
   aspect-ratio: 1/1;
 }
 .password-input :global(button):last-child {
   border-radius: 0 4px 4px 0;
 }
 .password-input :global(button) :global(.icon) {
-  font-size: var(--font-size--xx-large);
+  font-size: var(--sui-font-size-xx-large);
 }</style>

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

@@ -7,10 +7,10 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
  * @see https://w3c.github.io/aria/#textbox
  */
-export default class PasswordInput extends SvelteComponentTyped<{
+export default class PasswordInput extends SvelteComponent<{
     [x: string]: any;
-    value?: string;
     class?: string;
+    value?: string;
 }, {
     input: Event;
     keypress: KeyboardEvent;
@@ -22,12 +22,12 @@ export default class PasswordInput extends SvelteComponentTyped<{
 export type PasswordInputProps = typeof __propDef.props;
 export type PasswordInputEvents = typeof __propDef.events;
 export type PasswordInputSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: string | null;
         class?: string;
+        value?: string | null;
     };
     events: {
         input: Event;

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

@@ -71,7 +71,7 @@
   position: relative;
 }
 [role=search] :global(.icon) {
-  font-size: var(--font-size--xx-large);
+  font-size: var(--sui-font-size-xx-large);
   opacity: 0.5;
 }
 [role=search] > :global(.icon) {
@@ -83,7 +83,7 @@
   position: absolute;
   inset: 0 0 auto auto;
   z-index: 2;
-  height: var(--button--medium--height);
+  height: var(--sui-button-medium-height);
 }
 [role=search] :global(.label) {
   inset: 0 36px;

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

@@ -7,11 +7,11 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
  * @see https://w3c.github.io/aria/#search
  */
-export default class SearchBar extends SvelteComponentTyped<{
+export default class SearchBar extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     focus?: () => void;
     value?: string;
-    class?: string;
 }, {
     input: Event;
     keydown: KeyboardEvent;
@@ -32,13 +32,13 @@ export default class SearchBar extends SvelteComponentTyped<{
 export type SearchBarProps = typeof __propDef.props;
 export type SearchBarEvents = typeof __propDef.events;
 export type SearchBarSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         focus?: () => void;
         value?: string;
-        class?: string;
     };
     events: {
         input: Event;

package/package/components/text-field/text-area.svelte

@@ -103,9 +103,9 @@ textarea {
   display: block;
   margin: 0;
   border-width: 1px;
-  border-color: var(--control-border-color);
-  border-radius: var(--input--medium--border-radius);
-  background-color: var(--control-background-color);
+  border-color: var(--sui-control-border-color);
+  border-radius: var(--sui-input-medium-border-radius);
+  background-color: var(--sui-control-background-color);
   padding: 8px;
   width: 100%;
   min-height: 8em;
@@ -120,10 +120,10 @@ textarea.resizing {
   transition-duration: 0ms;
 }
 textarea:focus {
-  border-color: var(--primary-accent-color);
+  border-color: var(--sui-primary-accent-color);
 }
 textarea:disabled {
-  background-color: var(--disabled-background-color);
+  background-color: var(--sui-disabled-background-color);
   opacity: 0.4;
   cursor: default;
 }</style>

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

@@ -6,11 +6,11 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
  * @see https://w3c.github.io/aria/#textbox
  */
-export default class TextArea extends SvelteComponentTyped<{
+export default class TextArea extends SvelteComponent<{
     [x: string]: any;
+    class?: string;
     name?: string;
     value?: string;
-    class?: string;
     element?: HTMLTextAreaElement;
     autoResize?: boolean;
 }, {
@@ -39,13 +39,13 @@ export default class TextArea extends SvelteComponentTyped<{
 export type TextAreaProps = typeof __propDef.props;
 export type TextAreaEvents = typeof __propDef.events;
 export type TextAreaSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        class?: string;
         name?: string;
         value?: string | null;
-        class?: string;
         element?: HTMLTextAreaElement | null;
         autoResize?: boolean;
     };

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

@@ -86,12 +86,12 @@ input {
   display: inline-block;
   flex: auto;
   border-width: 1px;
-  border-color: var(--control-border-color);
-  border-radius: var(--input--medium--border-radius);
+  border-color: var(--sui-control-border-color);
+  border-radius: var(--sui-input-medium-border-radius);
   padding: 0 8px;
   min-width: 0;
-  height: var(--input--medium--height);
-  background-color: var(--control-background-color);
+  height: var(--sui-input-medium-height);
+  background-color: var(--sui-control-background-color);
   color: inherit;
   font-family: inherit;
   font-size: inherit;
@@ -99,14 +99,14 @@ input {
   transition: all 200ms;
 }
 input:focus {
-  border-color: var(--primary-accent-color);
+  border-color: var(--sui-primary-accent-color);
 }
 input:read-only {
-  color: var(--tertiary-foreground-color);
-  border-color: var(--control-border-color) !important;
+  color: var(--sui-tertiary-foreground-color);
+  border-color: var(--sui-control-border-color) !important;
 }
 input:disabled {
-  background-color: var(--disabled-background-color);
+  background-color: var(--sui-disabled-background-color);
   opacity: 0.4;
   cursor: default;
 }
@@ -117,15 +117,15 @@ input ~ :global(button) {
   flex: none;
   margin-left: -1px;
   border-width: 1px;
-  border-color: var(--control-border-color);
-  height: var(--input--medium--height);
+  border-color: var(--sui-control-border-color);
+  height: var(--sui-input-medium-height);
   aspect-ratio: 1/1;
 }
 input ~ :global(button):last-child {
   border-radius: 0 4px 4px 0;
 }
 input ~ :global(button) :global(.icon) {
-  font-size: var(--font-size--xx-large);
+  font-size: var(--sui-font-size-xx-large);
 }
 
 .label {
@@ -133,9 +133,9 @@ input ~ :global(button) :global(.icon) {
   inset: 0 8px;
   z-index: 2;
   display: flex;
-  justify-content: var(--input-label-align, flex-start);
+  justify-content: var(--sui-input-label-align, flex-start);
   align-items: center;
-  color: var(--primary-foreground-color);
+  color: var(--sui-primary-foreground-color);
   opacity: 0.5;
   pointer-events: none;
 }

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

@@ -6,12 +6,12 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
  * @see https://w3c.github.io/aria/#textbox
  */
-export default class TextInput extends SvelteComponentTyped<{
+export default class TextInput extends SvelteComponent<{
     [x: string]: any;
-    disabled?: boolean;
+    class?: string;
     name?: string;
+    disabled?: boolean;
     value?: string | number;
-    class?: string;
     element?: HTMLInputElement;
     role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
     readOnly?: boolean;
@@ -49,14 +49,14 @@ export default class TextInput extends SvelteComponentTyped<{
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;
 export type TextInputSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        disabled?: boolean;
+        class?: string;
         name?: string;
+        disabled?: boolean;
         value?: (string | number | undefined);
-        class?: string;
         element?: HTMLInputElement | null;
         role?: ('textbox' | 'searchbox' | 'combobox' | 'spinbutton');
         readOnly?: boolean;

package/package/components/toolbar/toolbar.svelte

@@ -39,10 +39,10 @@
 }
 [role=toolbar].primary {
   --toolbar-size: 48px;
-  background-color: var(--secondary-background-color);
+  background-color: var(--sui-secondary-background-color);
 }
 [role=toolbar].secondary {
-  background-color: var(--tertiary-background-color);
+  background-color: var(--sui-tertiary-background-color);
 }
 [role=toolbar][aria-orientation=horizontal] {
   height: var(--toolbar-size);
@@ -53,11 +53,11 @@
 }
 [role=toolbar]:not(:last-child) {
   border-width: 0 0 1px;
-  border-color: var(--primary-border-color);
+  border-color: var(--sui-primary-border-color);
 }
 [role=toolbar] :global(button[role="button"][aria-pressed="true"]),
 [role=toolbar] :global(button[role="button"][aria-checked="true"]) {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 [role=toolbar] :global(h2) {
   display: flex;
@@ -65,10 +65,10 @@
   gap: 8px;
   margin: 0;
   padding: 0 8px;
-  font-size: var(--font-size--large);
+  font-size: var(--sui-font-size-large);
 }
 [role=toolbar] :global(h2) :global(span) {
-  font-size: var(--font-size--small);
+  font-size: var(--sui-font-size-small);
   font-weight: normal;
   opacity: 0.8;
 }</style>