@nil-/doc 0.2.53 → 0.2.55

package/CHANGELOG.md

@@ -1,26 +1,41 @@
 # @nil-/doc
 
+## 0.2.55
+
+### Patch Changes
+
+-   [all][fix] separate eslint configuration ([#96](https://github.com/njaldea/mono/pull/96))
+
+-   [doc][docu] fix switch -> toggle ([#96](https://github.com/njaldea/mono/pull/96))
+
+-   [all][patch] update deps ([#96](https://github.com/njaldea/mono/pull/96))
+
+-   [doc][new] added special prop control "button" ([#96](https://github.com/njaldea/mono/pull/96))
+
+## 0.2.54
+
+### Patch Changes
+
+-   [doc][fix] dynamic import of vanilla-picker to avoid ssr document access ([#94](https://github.com/njaldea/mono/pull/94))
+-   [doc][patch] temporarily used svelte-toggle for checkbox/toggle ([#94](https://github.com/njaldea/mono/pull/94))
+
 ## 0.2.53
 
 ### Patch Changes
 
 -   [doc][break] removed "scale" prop ([#92](https://github.com/njaldea/mono/pull/92))
-    [doc][fix] better block scrollable handling
-    [doc][fix] better style to vanilla-color popup
+-   [doc][fix] better block scrollable handling ([#92](https://github.com/njaldea/mono/pull/92))
+-   [doc][fix] better style to vanilla-color popup ([#92](https://github.com/njaldea/mono/pull/92))
 
 ## 0.2.52
 
 ### Patch Changes
 
 -   [doc][fix] fix layout scrollable sections ([#90](https://github.com/njaldea/mono/pull/90))
-
 -   [doc][patch] restructure code ([#90](https://github.com/njaldea/mono/pull/90))
-
 -   [doc][patch] use vannilla-color library for color picker ([#90](https://github.com/njaldea/mono/pull/90))
-    [doc][fix] removed position relative and overflow scroll for misc (controls)
-
+-   [doc][fix] removed position relative and overflow scroll for misc (controls) ([#90](https://github.com/njaldea/mono/pull/90))
 -   [doc][fix] content fill width/height ([#90](https://github.com/njaldea/mono/pull/90))
-
 -   [doc][new] added offset Layout.svelte and sveltekit for keeping state ([#90](https://github.com/njaldea/mono/pull/90))
 
 ## 0.2.51
@@ -28,21 +43,18 @@
 ### Patch Changes
 
 -   [doc][fix] components now rely on root font-size ([#88](https://github.com/njaldea/mono/pull/88))
-
 -   [doc][fix] fix object prop control ([#88](https://github.com/njaldea/mono/pull/88))
-
 -   [doc][new] block button controls ([#88](https://github.com/njaldea/mono/pull/88))
-    [doc][new] centralized custom css
-
+-   [doc][new] centralized custom css ([#88](https://github.com/njaldea/mono/pull/88))
 -   [doc][misc] change styling ([#88](https://github.com/njaldea/mono/pull/88))
-    [doc][fix] scrolling content of container
+-   [doc][fix] scrolling content of container ([#88](https://github.com/njaldea/mono/pull/88))
 
 ## 0.2.50
 
 ### Patch Changes
 
 -   [doc][new] removed default nil icon ([#86](https://github.com/njaldea/mono/pull/86))
-    [doc][new] allow override of theme icon
+-   [doc][new] allow override of theme icon ([#86](https://github.com/njaldea/mono/pull/86))
 
 ## 0.2.49
 
@@ -61,7 +73,6 @@
 ### Patch Changes
 
 -   [doc][docu] minor adjustments to documentation ([#79](https://github.com/njaldea/mono/pull/79))
-
 -   [doc][new] added support for flattened prop schema ([#79](https://github.com/njaldea/mono/pull/79))
 
 ## 0.2.46
@@ -87,7 +98,6 @@
 ### Patch Changes
 
 -   [doc][fix] disable Range.svelte tooltip when disabled ([#70](https://github.com/njaldea/mono/pull/70))
-
 -   [doc][new] added auto scroll when content of layout is only one component ([#70](https://github.com/njaldea/mono/pull/70))
 
 ## 0.2.42
@@ -107,13 +117,9 @@
 ### Patch Changes
 
 -   [doc][new] added scale flag prop for Instance/Template componen ([#63](https://github.com/njaldea/mono/pull/63))
-
 -   [doc][patch] fixed jsdoc link for public components ([#63](https://github.com/njaldea/mono/pull/63))
-
 -   [doc][docu] moved Sorting and Renaming section to their own pages ([#63](https://github.com/njaldea/mono/pull/63))
-
 -   [doc][new] added placeholder to search bar ([#63](https://github.com/njaldea/mono/pull/63))
-
 -   [doc][docu] added admonitions plugin ([#63](https://github.com/njaldea/mono/pull/63))
 
 ## 0.2.39
@@ -121,13 +127,9 @@
 ### Patch Changes
 
 -   [doc][fix] force state of navigation expand icon when filtering ([#61](https://github.com/njaldea/mono/pull/61))
-
 -   [doc][patch] tighter eslint ([#61](https://github.com/njaldea/mono/pull/61))
-
 -   [doc][patch] added tests for non-UI related code ([#61](https://github.com/njaldea/mono/pull/61))
-
 -   [doc][patch] moved type definition ([#61](https://github.com/njaldea/mono/pull/61))
-
 -   [doc][patch] enabled typescript eslint rules ([#61](https://github.com/njaldea/mono/pull/61))
 
 ## 0.2.38
@@ -191,7 +193,6 @@
 ### Patch Changes
 
 -   [doc] Added color transition in Layout ([#43](https://github.com/njaldea/mono/pull/43))
-
 -   [doc] added Instance component ([#43](https://github.com/njaldea/mono/pull/43))
 
 ## 0.2.29
@@ -199,7 +200,7 @@
 ### Patch Changes
 
 -   [doc][feature] ThemeIcon ([#41](https://github.com/njaldea/mono/pull/41))
-    [doc][feature] added top bar to separate title and other controls
+-   [doc][feature] added top bar to separate title and other controls ([#41](https://github.com/njaldea/mono/pull/41))
 
 ## 0.2.28
 

package/components/Base.svelte

@@ -8,10 +8,8 @@ export let fill = false;
 
 <!-- prettier-ignore -->
 <style>
-    @import url("https://fonts.googleapis.com/css?family=Fira%20Code");
-
     div {
-        font-family: "Fira Code", "Courier New", Courier, monospace;
+        font-family: var(--nil-doc-font-family, ""), Verdana, Geneva, Tahoma, sans-serif;
     }
 
     .fill {

package/components/block/Controls.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Prop } from "./controls/types";
+import type { SpecialProp, Prop } from "./controls/types";
 declare const __propDef: {
     props: {
-        props?: Prop[] | undefined;
+        props?: (Prop | SpecialProp)[] | undefined;
         events?: string[] | undefined;
-        position?: "bottom" | "right" | "hidden" | undefined;
+        position?: "right" | "bottom" | "hidden" | undefined;
         mode?: "prop" | "event" | undefined;
     };
     events: {

package/components/block/Instance.svelte

@@ -42,7 +42,7 @@ let handlers = {};
                 visible={$controlsState.mode === "prop"}
             >
                 <div>
-                    <div>Properties</div>
+                    <div>Name</div>
                     <div>Value</div>
                     <div>Use</div>
                 </div>

package/components/block/context.d.ts

@@ -1,5 +1,5 @@
 import type { Writable } from "svelte/store";
-import type { Prop, Event } from "./controls/types";
+import type { SpecialProp, Prop, Event } from "./controls/types";
 import type { ValueType } from "./types";
 export type Params = {
     id: number;
@@ -12,7 +12,7 @@ export type ControlState = {
 };
 export declare const initParams: () => Writable<Params[]>, getParams: () => Writable<Params[]>;
 type Controls = {
-    props: Prop[];
+    props: (Prop | SpecialProp)[];
     events: Event[];
 };
 export declare const initControls: () => Writable<Controls>, getControls: () => Writable<Controls>;

package/components/block/controls/Styler.svelte

@@ -42,11 +42,15 @@
         place-items: center;
     }
 
-    div.props > :global(div > div:not(:first-child)) {
+    div.props > :global(div > div:nth-child(2)) {
         display: grid;
         place-items: center;
     }
 
+    div.props > :global(div > div:nth-child(3)) {
+        margin: auto;
+    }
+
     div > :global(div > div:not(:first-child) > *) {
         width: 100%;
         height: 80%;

package/components/block/controls/props/Button.svelte

@@ -0,0 +1,17 @@
+<script>import { getClick, getName } from "./misc/utils";
+export let info;
+$:
+  click = getClick(info)();
+</script>
+
+<div>
+    <button on:click={click}>{getName(info)}</button>
+</div>
+
+<style>
+    button {
+        grid-column: 1 / 4;
+        box-sizing: border-box;
+        margin: 0.15rem 0.3rem;
+    }
+</style>

package/components/block/controls/props/Button.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Unionized, PropType } from "../types";
+declare const __propDef: {
+    props: {
+        info: Unionized<PropType<"button">>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/components/block/controls/props/Color.svelte

@@ -1,5 +1,4 @@
-<script context="module">import Picker from "vanilla-picker";
-const colorSetter = (format, color) => {
+<script context="module">const colorSetter = (format, color) => {
   switch (format) {
     case "hex":
       return color.hex.substring(0, 7);
@@ -20,6 +19,7 @@ const colorSetter = (format, color) => {
 <script>import { getName, getFormat } from "./misc/utils";
 import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
+import Toggle from "svelte-toggle";
 export let value;
 export let info;
 export let depth;
@@ -27,13 +27,13 @@ export let disabled = false;
 export let visible = false;
 let ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
-const action = (d, format) => {
+const action = (d, { format, P }) => {
   d.style.borderColor = ivalue;
-  const picker = new Picker({
+  const picker = new P({
     parent: d,
     popup: "left",
     editorFormat: format.substring(0, 3),
-    editor: false,
+    editor: true,
     alpha: format.length === 4,
     onChange: (color) => {
       ivalue = colorSetter(getFormat(info), color);
@@ -58,10 +58,12 @@ $:
 {#if visible}
     <div>
         <NameHeader name={getName(info)} {depth} />
-        <button use:action={getFormat(info)} disabled={!enabled || disabled}>
-            {ivalue}
-        </button>
-        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+        {#await import("vanilla-picker") then { default: P }}
+            <button use:action={{ format: getFormat(info), P }} disabled={!enabled || disabled}>
+                {ivalue}
+            </button>
+        {/await}
+        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
     </div>
 {/if}
 

package/components/block/controls/props/Component.svelte

@@ -1,7 +1,7 @@
 <script>import Text from "./Text.svelte";
 import Number from "./Number.svelte";
 import Range from "./Range.svelte";
-import Switch from "./Switch.svelte";
+import Toggle from "./Toggle.svelte";
 import Select from "./Select.svelte";
 import Tuple from "./Tuple.svelte";
 import Object from "./Object.svelte";
@@ -29,8 +29,10 @@ export let visible = false;
         <Range {info} bind:value {depth} {disabled} {visible} />
     {:else if "select" === type}
         <Select {info} bind:value {depth} {disabled} {visible} />
-    {:else if "switch" === type}
-        <Switch {info} bind:value {depth} {disabled} {visible} />
+    {:else if "toggle" === type}
+        <Toggle {info} bind:value {depth} {disabled} {visible} />
+    {:else if "button" === type}
+        button
     {/if}
 {:else}
     {@const type = info.type}
@@ -48,7 +50,9 @@ export let visible = false;
         <Range {info} bind:value {depth} {disabled} {visible} />
     {:else if "select" === type}
         <Select {info} bind:value {depth} {disabled} {visible} />
-    {:else if "switch" === type}
-        <Switch {info} bind:value {depth} {disabled} {visible} />
+    {:else if "toggle" === type}
+        <Toggle {info} bind:value {depth} {disabled} {visible} />
+    {:else if "button" === type}
+        button
     {/if}
 {/if}

package/components/block/controls/props/Component.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Prop } from "../types";
+import type { SpecialProp, Prop } from "../types";
 declare const __propDef: {
     props: {
         value: any;
-        info: Prop;
+        info: Prop | SpecialProp;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;

package/components/block/controls/props/Number.svelte

@@ -1,6 +1,7 @@
 <script>import { getName } from "./misc/utils";
 import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
+import Toggle from "svelte-toggle";
 export let value;
 export let info;
 export let depth;
@@ -16,6 +17,6 @@ $:
     <div>
         <NameHeader name={getName(info)} {depth} />
         <div><input type="number" bind:value={ivalue} disabled={!enabled || disabled} /></div>
-        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
     </div>
 {/if}

package/components/block/controls/props/Props.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ValueType } from "../../types";
-import type { Prop } from "../types";
+import type { SpecialProp, Prop } from "../types";
 declare const __propDef: {
     props: {
-        infos: Prop[];
+        infos: (SpecialProp | Prop)[];
         values: Record<string, ValueType>;
         visible: boolean;
     };

package/components/block/controls/props/Range.svelte

@@ -1,6 +1,7 @@
 <script>import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
 import { nformat } from "./misc/nformat";
+import Toggle from "svelte-toggle";
 export let value;
 export let info;
 export let depth;
@@ -27,8 +28,8 @@ $:
 {#if visible}
     <div>
         <NameHeader name={i.name} {depth} />
-        <div class="input">
-            <div class="tooltip" class:disabled={!enabled || disabled}>
+        <div class="input" class:disabled={!enabled || disabled}>
+            <div class="tooltip">
                 Value: {nformat(ivalue, 6, 11)}
             </div>
             <div>{nformat(ivalue, 3, 5)}</div>
@@ -41,12 +42,14 @@ $:
                 disabled={!enabled || disabled}
             />
         </div>
-        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
     </div>
 {/if}
 
 <style>
     .input {
+        /* TODO: align color schema for toggle */
+        color-scheme: light;
         width: 100%;
         display: grid;
         grid-template-columns: 4rem 1fr;
@@ -76,7 +79,11 @@ $:
         place-items: center;
     }
 
-    .input:hover > .tooltip:not(.disabled) {
+    .input.disabled > div {
+        filter: contrast(0%);
+    }
+
+    .input:not(.disabled):hover > .tooltip {
         visibility: visible;
     }
 </style>

package/components/block/controls/props/Select.svelte

@@ -1,6 +1,7 @@
 <script>import { defaulter } from "./misc/defaulter";
 import { getValues, getName } from "./misc/utils";
 import NameHeader from "./misc/Name.svelte";
+import Toggle from "svelte-toggle";
 export let value;
 export let info;
 export let depth;
@@ -22,7 +23,7 @@ $:
                 {/each}
             </select>
         </div>
-        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
     </div>
 {/if}
 

package/components/block/controls/props/Text.svelte

@@ -1,6 +1,7 @@
 <script>import { getName } from "./misc/utils";
 import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
+import Toggle from "svelte-toggle";
 export let value;
 export let info;
 export let depth;
@@ -16,6 +17,6 @@ $:
     <div>
         <NameHeader name={getName(info)} {depth} />
         <div><input type="text" bind:value={ivalue} disabled={!enabled || disabled} /></div>
-        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
     </div>
 {/if}

package/components/block/controls/props/{Switch.svelte → Toggle.svelte}

@@ -1,6 +1,7 @@
 <script>import { getName } from "./misc/utils";
 import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
+import Toggle from "svelte-toggle";
 export let value;
 export let info;
 export let depth;
@@ -15,7 +16,9 @@ $:
 {#if visible}
     <div>
         <NameHeader name={getName(info)} {depth} />
-        <div><input type="checkbox" bind:checked={ivalue} disabled={!enabled || disabled} /></div>
-        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+        <div style="margin: auto">
+            <Toggle bind:toggled={ivalue} disabled={!enabled || disabled} hideLabel small />
+        </div>
+        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small /></div>
     </div>
 {/if}

package/components/block/controls/props/{Switch.svelte.d.ts → Toggle.svelte.d.ts}

@@ -3,7 +3,7 @@ import type { Unionized, PropType } from "../types";
 declare const __propDef: {
     props: {
         value: boolean | undefined;
-        info: Unionized<PropType<"switch">>;
+        info: Unionized<PropType<"toggle">>;
         depth: number;
         disabled?: boolean | undefined;
         visible?: boolean | undefined;
@@ -13,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type SwitchProps = typeof __propDef.props;
-export type SwitchEvents = typeof __propDef.events;
-export type SwitchSlots = typeof __propDef.slots;
-export default class Switch extends SvelteComponentTyped<SwitchProps, SwitchEvents, SwitchSlots> {
+export type ToggleProps = typeof __propDef.props;
+export type ToggleEvents = typeof __propDef.events;
+export type ToggleSlots = typeof __propDef.slots;
+export default class Toggle extends SvelteComponentTyped<ToggleProps, ToggleEvents, ToggleSlots> {
 }
 export {};

package/components/block/controls/props/misc/GroupHeader.svelte

@@ -1,4 +1,5 @@
 <script>import Name from "./Name.svelte";
+import Toggle from "svelte-toggle";
 export let name;
 export let depth;
 export let checked;
@@ -23,7 +24,13 @@ const flip = () => {
         />
         <div class="value">-</div>
         <div>
-            <input type="checkbox" {disabled} bind:checked on:click={(e) => e.stopPropagation()} />
+            <Toggle
+                bind:toggled={checked}
+                {disabled}
+                hideLabel
+                small
+                on:click={(e) => e.stopPropagation()}
+            />
         </div>
     </div>
 {/if}

package/components/block/controls/props/misc/defaulter.d.ts

@@ -6,6 +6,6 @@ export declare function defaulter(i: Unionized<PropType<"number">>): number;
 export declare function defaulter(i: Unionized<PropType<"range">>): number;
 export declare function defaulter(i: Unionized<PropType<"select">>): string;
 export declare function defaulter(i: Unionized<PropType<"text">>): string;
-export declare function defaulter(i: Unionized<PropType<"switch">>): boolean;
+export declare function defaulter(i: Unionized<PropType<"toggle">>): boolean;
 export declare function defaulter(i: Unionized<PropType<"color">>): string;
 export declare function defaulter(i: Prop): ValueType;

package/components/block/controls/props/misc/defaulter.js

@@ -18,7 +18,6 @@ export function defaulter(i) {
             return 0;
         case "range":
             return getMin(i);
-        case "switch":
         default:
             return false;
     }

package/components/block/controls/props/misc/utils.d.ts

@@ -1,12 +1,13 @@
-import type { Detailed, Unionized, PropType, Prop, NonNamedProp } from "../../types";
+import type { Detailed, Unionized, PropType, Prop, NonNamedProp, SpecialProp } from "../../types";
 type TypesWithValue = "object" | "tuple" | "select";
 type Values<T extends TypesWithValue> = Detailed<PropType<T>>["values"];
 export declare function getValues(info: Unionized<PropType<"select">>): Values<"select">;
 export declare function getValues(info: Unionized<PropType<"object">>): Values<"object">;
 export declare function getValues(info: Unionized<PropType<"tuple">>): Values<"tuple">;
 export declare const getMin: (info: Unionized<PropType<"range">>) => number;
-export declare const getType: (info: Prop) => "number" | "object" | "select" | "text" | "switch" | "range" | "tuple" | "color";
+export declare const getType: (info: Prop | SpecialProp) => "number" | "object" | "select" | "toggle" | "button" | "text" | "range" | "tuple" | "color";
 export declare const getFormat: (info: Unionized<PropType<"color">>) => import("../../types").ColorFormat;
-export declare const getName: (info: Prop) => string;
+export declare const getName: (info: Prop | SpecialProp) => string;
+export declare const getClick: (info: SpecialProp) => () => () => void;
 export declare const addName: (name: string, info: NonNamedProp) => Prop;
 export {};

package/components/block/controls/props/misc/utils.js

@@ -29,6 +29,12 @@ export const getName = (info) => {
     }
     return info.name;
 };
+export const getClick = (info) => {
+    if (info instanceof Array) {
+        return info[2];
+    }
+    return info.click;
+};
 export const addName = (name, info) => {
     if (info instanceof Array) {
         return [name, ...info];

package/components/block/controls/types.d.ts

@@ -1,5 +1,13 @@
-type Types = "text" | "color" | "number" | "select" | "range" | "switch" | "tuple" | "object";
-
+type Types =
+    | "text"
+    | "color"
+    | "number"
+    | "select"
+    | "range"
+    | "toggle"
+    | "tuple"
+    | "object"
+    | "button";
 type ColorFormat = "hsl" | "hsla" | "rgb" | "rgba" | "hex" | "hexa";
 
 // prettier-ignore
@@ -16,7 +24,7 @@ export type PropType<T extends Types> =
         [ name: string, type: T ],
         { name: string; type: T; }
     ]
-    : T extends "switch" ? [
+    : T extends "toggle" ? [
         [ name: string, type: T ],
         { name: string; type: T; }
     ]
@@ -40,6 +48,10 @@ export type PropType<T extends Types> =
         // eslint-disable-next-line no-use-before-define
         { name: string; type: T; values: Prop[]; }
     ]
+    : T extends "button" ? [
+        [ name: string, type: "button", click: () => (() => void) ],
+        { name: string; type: "button"; click: () => (() => void); }
+    ]
     : never;
 
 export type Flattened<T extends PropType> = T[0];
@@ -54,8 +66,8 @@ export type Prop =
     | { name: string; type: "color"; format: ColorFormat; }
     | [ name: string, type: "number" ]
     | { name: string; type: "number"; }
-    | [ name: string, type: "switch" ]
-    | { name: string; type: "switch"; }
+    | [ name: string, type: "toggle" ]
+    | { name: string; type: "toggle"; }
     | [ name: string, type: "select", values: string[] ]
     | { name: string; type: "select"; values: string[]; }
     | [ name: string, type: "range", min: number, max: number, step: number ]
@@ -67,6 +79,10 @@ export type Prop =
     | [ name: string, type: "object", values: Prop[] ]
     | { name: string; type: "object"; values: Prop[]; };
 
+export type SpecialProp =
+    | [name: string, type: "button", click: () => () => void]
+    | { name: string; type: "button"; click: () => () => void };
+
 // prettier-ignore
 export type NonNamedProp =
     | [ type: "text" ]
@@ -75,8 +91,8 @@ export type NonNamedProp =
     | { type: "color"; format: ColorFormat; }
     | [ type: "number" ]
     | { type: "number"; }
-    | [ type: "switch" ]
-    | { type: "switch"; }
+    | [ type: "toggle" ]
+    | { type: "toggle"; }
     | [ type: "select", values: string[] ]
     | { type: "select"; values: string[]; }
     | [ type: "range", min: number, max: number, step: number ]

package/components/block/icons/Position.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        position?: "bottom" | "right" | "hidden" | undefined;
+        position?: "right" | "bottom" | "hidden" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.53",
+  "version": "0.2.55",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
@@ -8,7 +8,7 @@
   "license": "ISC",
   "devDependencies": {
     "@sveltejs/adapter-vercel": "^1.0.6",
-    "@sveltejs/kit": "^1.5.5",
+    "@sveltejs/kit": "^1.8.8",
     "@sveltejs/package": "^1.0.2",
     "@vitest/coverage-c8": "^0.26.3",
     "mdsvex": "^0.10.6",
@@ -16,8 +16,13 @@
     "svelte-check": "^2.10.3",
     "tslib": "^2.5.0",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1",
-    "vitest": "^0.26.3"
+    "vite": "^4.1.4",
+    "vitest": "^0.26.3",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-svelte3": "^4.0.0"
   },
   "peerDependencies": {
     "svelte": "^3.55.1"
@@ -32,6 +37,7 @@
   ],
   "type": "module",
   "dependencies": {
+    "svelte-toggle": "^3.1.0",
     "vanilla-picker": "^2.12.1"
   },
   "exports": {