@nil-/doc 0.2.52 → 0.2.54

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nil-/doc
 
+## 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
+
 ## 0.2.52
 
 ### Patch Changes

package/components/block/Block.svelte

@@ -61,27 +61,46 @@ const cycleMode = () => {
             </Button>
         </div>
     </div>
-    <div class="block" class:columns={$columns} class:dark={$dark}>
-        <slot />
+    <div class="outer">
+        <div class="scrollable block" class:columns={$columns}>
+            <slot />
+        </div>
     </div>
 </Base>
 
 <style>
-    .relative {
-        z-index: 10;
-        position: relative;
-    }
-
     .block {
         display: grid;
-        border-radius: 0.5rem;
         grid-auto-rows: 1fr;
         grid-auto-columns: auto;
         grid-auto-flow: row;
+    }
 
+    .outer {
+        border-radius: 0.5rem;
+        padding: 1.75rem 0.2rem 0.75rem 0.2rem;
         min-width: 10rem;
+        margin: 1px;
+        outline: solid 1px white;
+    }
+
+    .scrollable {
+        width: 100%;
+        height: 100%;
+        overflow: scroll;
+        /* Firefox */
+        scrollbar-width: none;
+        /* IE and Edge */
+        -ms-overflow-style: none;
+    }
+
+    .scrollable::-webkit-scrollbar {
+        display: none;
+    }
 
-        padding: 1.75rem 0.2rem 0.5rem 0.2rem;
+    .relative {
+        z-index: 10;
+        position: relative;
     }
 
     .buttons {
@@ -100,7 +119,7 @@ const cycleMode = () => {
         grid-auto-flow: column;
     }
 
-    .block {
+    .outer {
         color: var(--i-nil-doc-color);
         color-scheme: var(--i-nil-doc-color-scheme);
         background-color: var(--i-nil-doc-block-bg-color);
@@ -109,4 +128,8 @@ const cycleMode = () => {
         transition: color var(--i-nil-doc-transition-time),
             background-color var(--i-nil-doc-transition-time);
     }
+
+    .block {
+        outline: 1px solid var(--i-nil-doc-block-outline-color);
+    }
 </style>

package/components/block/Instance.svelte

@@ -9,7 +9,6 @@ $:
   expanded = $controlsState.position !== "hidden";
 export let defaults = void 0;
 export let noreset = false;
-export let scale = false;
 let key = false;
 beforeUpdate(() => key = !key);
 const resolveArgs = resolve;
@@ -25,8 +24,8 @@ let handlers = {};
     See [documentation](https://mono-doc.vercel.app/3-Components/2-Block/1-Content/1-Instance) for more details.
 -->
 
-<div class="instance" class:scale class:cside={expanded && "right" === $controlsState.position}>
-    <div class="content scrollable">
+<div class="instance" class:cside={expanded && "right" === $controlsState.position}>
+    <div class="content">
         {#if noreset}
             <slot props={resolveArgs(defaults ?? {}, bound)} events={handlers} {key} />
         {:else}
@@ -63,12 +62,9 @@ let handlers = {};
 </div>
 
 <style>
-    .instance.scale {
-        transition: transform var(--i-nil-doc-transition-time);
-    }
-
-    .instance.scale:hover {
-        transform: scale(1.015);
+    .instance {
+        width: 100%;
+        height: 100%;
     }
 
     .cside {
@@ -78,18 +74,9 @@ let handlers = {};
 
     .content {
         min-height: 6.25rem;
-        border-radius: 0.5rem;
     }
 
-    div:not(.cside) > .misc {
-        border-bottom-left-radius: 0.5rem;
-        border-bottom-right-radius: 0.5rem;
-        user-select: none;
-    }
-
-    .cside > .misc {
-        border-top-right-radius: 0.5rem;
-        border-bottom-right-radius: 0.5rem;
+    .misc {
         user-select: none;
     }
 
@@ -100,7 +87,7 @@ let handlers = {};
 
     /* colors */
     .instance {
-        transition: background-color 350ms;
+        transition: background-color var(--i-nil-doc-transition-time);
         color: var(--i-nil-doc-color);
         background-color: var(--i-nil-doc-bg-color);
     }

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

@@ -3,7 +3,6 @@ declare class __sveltets_Render<PropArgs> {
     props(): {
         defaults?: PropArgs | undefined;
         noreset?: boolean | undefined;
-        scale?: boolean | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/components/block/Template.svelte

@@ -8,7 +8,6 @@ const orientation = getOrientation();
 export let defaults = void 0;
 export let noreset = false;
 export let columns = false;
-export let scale = false;
 $:
   $defaultsStore = defaults ?? {};
 $:
@@ -28,7 +27,6 @@ const cast = (t) => t;
     <Instance
         defaults={resolveArgs($defaultsStore, param.values)}
         {noreset}
-        {scale}
         let:key
         let:props
         let:events

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

@@ -4,7 +4,6 @@ declare class __sveltets_Render<Args> {
         defaults?: Args | undefined;
         noreset?: boolean | undefined;
         columns?: boolean | undefined;
-        scale?: boolean | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/components/block/controls/{props/misc/Styler.svelte → Styler.svelte}

@@ -1,19 +1,7 @@
-<!--
-    <div> this component
-        <div> Header
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-        <div> Controls
-            <div></div>
-            <div></div>
-            <div></div>
-        </div>
-        ...
-    </div>
--->
-<div>
+<script>export let type;
+</script>
+
+<div class:props={type === "props"} class:events={type === "events"}>
     <slot />
 </div>
 
@@ -25,6 +13,10 @@
         box-sizing: border-box;
     }
 
+    div.events {
+        height: 22rem;
+    }
+
     div :global(*),
     div :global(*::before),
     div :global(*::after) {
@@ -34,23 +26,34 @@
 
     div > :global(div) {
         display: grid;
+    }
+
+    div.props > :global(div) {
         grid-template-columns: minmax(15rem, 1fr) 12.5rem 2.5rem;
     }
 
+    div.events > :global(div) {
+        grid-template-columns: 2fr 3fr;
+        align-items: center;
+    }
+
     div > :global(div:first-child) {
         font-weight: bold;
         place-items: center;
     }
 
-    div > :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%;
-        font-size: 1rem;
     }
 
     /* colors */

package/components/block/controls/{props/misc/Styler.svelte.d.ts → Styler.svelte.d.ts}

@@ -1,21 +1,7 @@
-/** @typedef {typeof __propDef.props}  StylerProps */
-/** @typedef {typeof __propDef.events}  StylerEvents */
-/** @typedef {typeof __propDef.slots}  StylerSlots */
-export default class Styler extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type StylerProps = typeof __propDef.props;
-export type StylerEvents = typeof __propDef.events;
-export type StylerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        type: "props" | "events";
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +10,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type StylerProps = typeof __propDef.props;
+export type StylerEvents = typeof __propDef.events;
+export type StylerSlots = typeof __propDef.slots;
+export default class Styler extends SvelteComponentTyped<StylerProps, StylerEvents, StylerSlots> {
+}
 export {};

package/components/block/controls/events/Events.svelte

@@ -1,4 +1,4 @@
-<script>import Styler from "./misc/Styler.svelte";
+<script>import Styler from "../Styler.svelte";
 export let visible;
 export let events;
 export let handlers;
@@ -41,7 +41,7 @@ $:
 </script>
 
 {#if visible}
-    <Styler>
+    <Styler type={"events"}>
         <slot />
         {#each history as { count, detail, name }, i (i)}
             <div>

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

@@ -14,28 +14,12 @@
       return color.rgbaString;
   }
 };
-const formatter = (format) => {
-  switch (format) {
-    case "hex":
-      return "hex";
-    case "hsl":
-      return "hsl";
-    case "rgb":
-      return "rgb";
-    case "hexa":
-      return "hex";
-    case "hsla":
-      return "hsl";
-    case "rgba":
-      return "rgb";
-  }
-};
 </script>
 
 <script>import { getName, getFormat } from "./misc/utils";
 import { defaulter } from "./misc/defaulter";
 import NameHeader from "./misc/Name.svelte";
-import Picker from "vanilla-picker";
+import Toggle from "svelte-toggle";
 export let value;
 export let info;
 export let depth;
@@ -43,21 +27,25 @@ export let disabled = false;
 export let visible = false;
 let ivalue = value ?? defaulter(info);
 let enabled = value !== void 0;
-const action = (div, format) => {
-  const picker = new Picker({
-    parent: div,
+const action = (d, { format, P }) => {
+  d.style.borderColor = ivalue;
+  const picker = new P({
+    parent: d,
     popup: "left",
-    editorFormat: formatter(format),
-    editor: false,
+    editorFormat: format.substring(0, 3),
+    editor: true,
     alpha: format.length === 4,
-    onChange: (color) => ivalue = colorSetter(getFormat(info), color),
+    onChange: (color) => {
+      ivalue = colorSetter(getFormat(info), color);
+      d.style.borderColor = ivalue;
+    },
     color: ivalue
   });
   return {
     update: (format2) => {
       picker.setOptions({
         alpha: format2.length === 4,
-        editorFormat: formatter(format2)
+        editorFormat: format2.substring(0, 3)
       });
     },
     destroy: () => picker.destroy()
@@ -70,17 +58,39 @@ $:
 {#if visible}
     <div>
         <NameHeader name={getName(info)} {depth} />
-        <div>
-            <button use:action={getFormat(info)} disabled={!enabled || disabled}>
-                {value}
+        {#await import("vanilla-picker") then { default: P }}
+            <button use:action={{ format: getFormat(info), P }} disabled={!enabled || disabled}>
+                {ivalue}
             </button>
-        </div>
-        <div><input type="checkbox" bind:checked={enabled} {disabled} /></div>
+        {/await}
+        <div><Toggle bind:toggled={enabled} {disabled} hideLabel small/></div>
     </div>
 {/if}
 
 <style>
-    div > div > button {
-        font-size: 0.7rem;
+    button {
+        font-size: 0.6rem;
+        border-top-width: 1px;
+        border-bottom-width: 1px;
+        border-left-width: 10px;
+        border-right-width: 10px;
+        border-style: solid;
+        background-color: var(--i-nil-doc-bg-color);
+        outline: 1px solid gray;
+        margin-top: 3px;
+        margin-bottom: 3px;
+    }
+
+    button :global(.picker_wrapper),
+    button :global(.picker_arrow),
+    button :global(.picker_arrow::before),
+    button :global(.picker_arrow::after) {
+        background-color: var(--i-nil-doc-bg-color) !important;
+    }
+
+    button :global(.picker_done > button) {
+        background-image: initial;
+        background-color: var(--i-nil-doc-bg-color);
+        color: var(--i-nil-doc-color);
     }
 </style>

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,8 @@ 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} />
     {/if}
 {:else}
     {@const type = info.type}
@@ -48,7 +48,7 @@ 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} />
     {/if}
 {/if}

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

@@ -1,12 +1,12 @@
 <script>import Component from "./Component.svelte";
-import Styler from "./misc/Styler.svelte";
+import Styler from "../Styler.svelte";
 import { getName } from "./misc/utils";
 export let infos;
 export let values;
 export let visible;
 </script>
 
-<Styler>
+<Styler type={"props"}>
     {#if visible}
         <slot />
     {/if}

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,7 @@ $:
 {#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;
@@ -22,9 +23,7 @@ const flip = () => {
             {depth}
         />
         <div class="value">-</div>
-        <div>
-            <input type="checkbox" {disabled} bind:checked on:click={(e) => e.stopPropagation()} />
-        </div>
+        <div><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,7 @@ export function defaulter(i) {
             return 0;
         case "range":
             return getMin(i);
-        case "switch":
+        case "toggle":
         default:
             return false;
     }

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

@@ -5,7 +5,7 @@ export declare function getValues(info: Unionized<PropType<"select">>): Values<"
 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) => "number" | "object" | "select" | "toggle" | "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 addName: (name: string, info: NonNamedProp) => Prop;

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

@@ -1,4 +1,4 @@
-type Types = "text" | "color" | "number" | "select" | "range" | "switch" | "tuple" | "object";
+type Types = "text" | "color" | "number" | "select" | "range" | "toggle" | "tuple" | "object";
 
 type ColorFormat = "hsl" | "hsla" | "rgb" | "rgba" | "hex" | "hexa";
 
@@ -16,7 +16,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; }
     ]
@@ -54,8 +54,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 ]
@@ -75,8 +75,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

@@ -14,7 +14,8 @@
     }
 
     rect:not(:first-child) {
-        transition: height 350ms, x 350ms, y 350ms;
+        transition: height var(--i-nil-doc-transition-time), x var(--i-nil-doc-transition-time),
+            y var(--i-nil-doc-transition-time);
         width: 60px;
         height: 0px;
         x: -30px;

package/components/layout/Scrollable.svelte

@@ -3,7 +3,6 @@
 </div>
 
 <style>
-    /* scrollable */
     div {
         width: 100%;
         height: 100%;

package/components/layout/icons/Theme.svelte

@@ -46,22 +46,22 @@ const index = indexer++;
     }
 
     svg {
-        transition: transform 350ms;
+        transition: transform var(--i-nil-doc-transition-time);
         transform: rotate(40deg);
     }
 
     svg > g {
-        transition: opacity 350ms;
+        transition: opacity var(--i-nil-doc-transition-time);
         opacity: 0;
     }
 
     svg > mask > circle {
-        transition: cy 350ms;
+        transition: cy var(--i-nil-doc-transition-time);
         cy: -8px;
     }
 
     svg > circle {
-        transition: r 350ms;
+        transition: r var(--i-nil-doc-transition-time);
         r: 10px;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nil-/doc",
-  "version": "0.2.52",
+  "version": "0.2.54",
   "author": {
     "email": "njaldea@gmail.com",
     "name": "Neil Aldea"
@@ -32,6 +32,7 @@
   ],
   "type": "module",
   "dependencies": {
+    "svelte-toggle": "^3.1.0",
     "vanilla-picker": "^2.12.1"
   },
   "exports": {

package/components/block/controls/events/misc/Styler.svelte

@@ -1,52 +0,0 @@
-<!--
-    <div> this component
-        <div> Header
-            <div></div>
-            <div></div>
-        </div>
-        <div> Controls
-            <div></div>
-            <div></div>
-        </div>
-        ...
-    </div>
--->
-<div>
-    <slot />
-</div>
-
-<style>
-    div {
-        display: grid;
-        height: 22rem;
-        min-width: 31.25rem;
-        grid-auto-rows: 2rem;
-    }
-
-    div > :global(div) {
-        display: grid;
-        grid-template-columns: 2fr 3fr;
-        align-items: center;
-    }
-
-    div > :global(div:first-child) {
-        font-weight: bold;
-        justify-items: center;
-    }
-
-    /* colors */
-    div {
-        transition: background-color var(--i-nil-doc-transition-time);
-        background-repeat: repeat;
-        background-size: 100% 4rem;
-        background-image: linear-gradient(
-            to bottom,
-            var(--i-nil-doc-controls-p) 2rem,
-            var(--i-nil-doc-controls-s) 2rem
-        );
-    }
-
-    div > :global(div:nth-child(n + 2):hover) {
-        background-color: var(--i-nil-doc-controls-hover);
-    }
-</style>

package/components/block/controls/events/misc/Styler.svelte.d.ts

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  StylerProps */
-/** @typedef {typeof __propDef.events}  StylerEvents */
-/** @typedef {typeof __propDef.slots}  StylerSlots */
-export default class Styler extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type StylerProps = typeof __propDef.props;
-export type StylerEvents = typeof __propDef.events;
-export type StylerSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};