@humandialog/forms.svelte 0.4.45 → 0.5.1

package/components/list/list.svelte

@@ -1,39 +1,49 @@
 <script>import { setContext, getContext, afterUpdate, tick, onMount } from "svelte";
-import { data_tick_store, context_items_store, context_types_store, page_title } from "../../stores";
-import { activate_item, get_active, clear_active_item, parse_width_directive } from "../../utils";
+import { data_tick_store, contextItemsStore, contextTypesStore, page_title } from "../../stores";
+import { activateItem, getActive, clearActiveItem, parseWidthDirective, getPrev, getNext, swapElements, getLast, insertAfter } from "../../utils";
 import { rList_definition } from "./List";
 import List_element from "./internal/list.element.svelte";
 import Inserter from "./internal/list.inserter.svelte";
+import { informModification, pushChanges } from "../../updates";
 export let title = "";
 export let self = null;
 export let a = "";
 export let objects = void 0;
+export let orderAttrib = void 0;
 export let context = "";
 export let typename = "";
 export let c = "";
-export let toolbar_operations;
-export let context_menu;
+export let toolbarOperations;
+export let contextMenu;
 export let key = "";
+export const CLEAR_SELECTION = 0;
+export const KEEP_SELECTION = -1;
+export const SELECT_PREVIOUS = -2;
+export const SELECT_NEXT = -3;
+export const KEEP_OR_SELECT_NEXT = -4;
+export const ORDER_STEP = 64;
+export const MIN_ORDER = 0;
 let definition = new rList_definition();
 setContext("rList-definition", definition);
 setContext("rIs-table-component", true);
 let item = null;
 let items = void 0;
 let ctx = context ? context : getContext("ctx");
-let cs = c ? parse_width_directive(c) : "w-full min-w-full";
+let cs = c ? parseWidthDirective(c) : "w-full min-w-full";
 let show_insertion_row_after_element = null;
 const END_OF_LIST = {};
 let rows = [];
 let activate_after_dom_update = null;
 let inserter;
 let item_key = "";
-clear_active_item("props");
+let item_type = "";
+clearActiveItem("props");
 let last_tick = -1;
 $:
-  setup($data_tick_store, $context_items_store);
+  setup($data_tick_store, $contextItemsStore);
 function setup(...args) {
   last_tick = $data_tick_store;
-  item = self ?? $context_items_store[ctx];
+  item = self ?? $contextItemsStore[ctx];
   items = void 0;
   if (objects) {
     items = objects;
@@ -56,7 +66,7 @@ function setup(...args) {
       item_key = "";
   }
   if (!typename)
-    typename = $context_types_store[ctx];
+    typename = $contextTypesStore[ctx];
 }
 afterUpdate(() => {
   if (activate_after_dom_update) {
@@ -67,25 +77,101 @@ afterUpdate(() => {
     }
   }
 });
-export function refresh() {
+export function rereder() {
   setup();
 }
-export function update_objects(_objects) {
-  objects = _objects;
-  setup();
+export function reload(data, selectElement = KEEP_SELECTION) {
+  let currentSelectedItem = getActive("props");
+  let selectElementId = 0;
+  let altSelectElementId = 0;
+  switch (selectElement) {
+    case CLEAR_SELECTION:
+      selectElementId = 0;
+      break;
+    case KEEP_SELECTION:
+      selectElementId = currentSelectedItem.Id ?? 0;
+      break;
+    case SELECT_PREVIOUS:
+      if (currentSelectedItem) {
+        const selectedItemIdx = items?.findIndex((e) => e == currentSelectedItem);
+        if (selectedItemIdx && selectedItemIdx > 0)
+          selectElementId = items[selectedItemIdx - 1].Id ?? 0;
+      }
+      break;
+    case SELECT_NEXT:
+      if (currentSelectedItem) {
+        const selectedItemIdx = items?.findIndex((e) => e == currentSelectedItem);
+        if (selectedItemIdx && selectedItemIdx < items.length - 1)
+          selectElementId = items[selectedItemIdx + 1].Id ?? 0;
+      }
+      break;
+    case KEEP_OR_SELECT_NEXT:
+      {
+        selectElementId = currentSelectedItem.Id ?? 0;
+        if (currentSelectedItem) {
+          const selectedItemIdx = items?.findIndex((e) => e == currentSelectedItem);
+          if (selectedItemIdx && selectedItemIdx < items.length - 1)
+            altSelectElementId = items[selectedItemIdx + 1].Id ?? 0;
+        }
+      }
+      break;
+    default:
+      if (typeof selectElement === "object" && !Array.isArray(selectElement) && selectElement !== null)
+        selectElementId = selectElement.Id;
+      else
+        selectElementId = selectElement;
+  }
+  if (Array.isArray(data))
+    objects = data;
+  else
+    self = data;
+  rereder();
+  if (selectElementId > 0) {
+    let itemToActivate = items?.find((e) => e.Id == selectElementId);
+    if (itemToActivate) {
+      activate_after_dom_update = itemToActivate;
+    } else if (altSelectElementId > 0) {
+      itemToActivate = items?.find((e) => e.Id == altSelectElementId);
+      if (itemToActivate) {
+        activate_after_dom_update = itemToActivate;
+      }
+    }
+  }
+  if (!activate_after_dom_update)
+    activateItem("props", null, []);
 }
-export function update_self(_self) {
-  self = _self;
-  setup();
+export function moveUp(element) {
+  if (!orderAttrib)
+    return;
+  let prev = getPrev(items, element);
+  if (!prev)
+    return;
+  items = swapElements(items, element, prev);
+  [element[orderAttrib], prev[orderAttrib]] = [prev[orderAttrib], element[orderAttrib]];
+  informModification(element, orderAttrib);
+  informModification(prev, orderAttrib);
+  pushChanges();
+}
+export function moveDown(element) {
+  if (!orderAttrib)
+    return;
+  let next = getNext(items, element);
+  if (!next)
+    return;
+  items = swapElements(items, element, next);
+  [element[orderAttrib], next[orderAttrib]] = [next[orderAttrib], element[orderAttrib]];
+  informModification(element, orderAttrib);
+  informModification(next, orderAttrib);
+  pushChanges();
 }
 let last_activated_element = null;
-export async function add(after = null) {
+export async function addRowAfter(after = null) {
   if (!definition.can_insert)
     return;
   show_insertion_row_after_element = after ?? END_OF_LIST;
-  last_activated_element = get_active("props");
+  last_activated_element = getActive("props");
   let fake_item = {};
-  activate_item("props", fake_item);
+  activateItem("props", fake_item);
   await tick();
   if (!inserter)
     return;
@@ -95,29 +181,22 @@ export async function add(after = null) {
       activate_after_dom_update = last_activated_element;
     else {
       if (detail.incremental) {
-        let current_active = get_active("props");
-        await add(current_active);
+        let current_active = getActive("props");
+        await addRowAfter(current_active);
       }
     }
   });
 }
-async function insert(title2, after) {
-  let new_element = await definition.oninsert(title2, after);
-  if (!new_element)
-    return;
-  activate_after_dom_update = new_element;
-  refresh();
-}
 export function remove(element) {
   let removing_idx = items?.findIndex((e) => e == element);
   if (removing_idx < 0)
     return;
-  let active_element = get_active("props");
+  let active_element = getActive("props");
   if (active_element == element) {
     if (removing_idx + 1 < items.length)
       rows[removing_idx + 1].activate();
     else
-      activate_item("props", null, []);
+      activateItem("props", null, []);
   }
   items = items.filter((t) => t != element);
 }
@@ -125,7 +204,66 @@ export function edit(element, property_name) {
   let editing_idx = items?.findIndex((e) => e == element);
   if (editing_idx < 0)
     return;
-  rows[editing_idx].edit_property(property_name);
+  rows[editing_idx].editProperty(property_name);
+}
+function reorderElements(items2, from = null) {
+  console.log(from);
+  let fromIdx;
+  let fromOrder;
+  if (from) {
+    fromOrder = from[orderAttrib];
+    fromIdx = items2.findIndex((e) => e == from);
+  } else {
+    fromOrder = MIN_ORDER;
+    fromIdx = 0;
+  }
+  console.log("reorder: ", fromOrder, fromIdx, items2);
+  let order = fromOrder;
+  for (let i = fromIdx; i < items2.length; i++) {
+    let el = items2[i];
+    console.log("reoder el: ", el, order, i);
+    el[orderAttrib] = order;
+    informModification(el, orderAttrib);
+    order += ORDER_STEP;
+  }
+  pushChanges();
+}
+async function insert(title2, after) {
+  let newElement = {
+    [definition.title]: title2
+  };
+  if (after && orderAttrib) {
+    const leftElement = after;
+    const leftOrder = leftElement[orderAttrib];
+    const rightElement = getNext(items, leftElement);
+    if (rightElement) {
+      let rightOrder = rightElement[orderAttrib];
+      if (rightOrder - leftOrder >= 2)
+        newElement[orderAttrib] = leftOrder + Math.floor((rightOrder - leftOrder) / 2);
+      else {
+        reorderElements(items, leftElement);
+        rightOrder = rightElement[orderAttrib];
+        newElement[orderAttrib] = leftOrder + Math.floor((rightOrder - leftOrder) / 2);
+      }
+    } else
+      newElement[orderAttrib] = leftOrder + ORDER_STEP;
+  } else if (orderAttrib) {
+    const lastElement = getLast(items);
+    if (lastElement) {
+      const lastOrder = lastElement[orderAttrib];
+      newElement[orderAttrib] = lastOrder + ORDER_STEP;
+    } else
+      newElement[orderAttrib] = MIN_ORDER;
+  }
+  let insertedElement = await definition.onInsert(newElement);
+  if (!insertedElement)
+    return;
+  if (after)
+    insertAfter(items, after, insertedElement);
+  else
+    items.push(insertedElement);
+  activate_after_dom_update = insertedElement;
+  rereder();
 }
 </script>
 
@@ -143,8 +281,8 @@ export function edit(element, property_name) {
     {#each items as element, i (element[item_key])}
         
         <List_element   item={element} 
-                        {toolbar_operations}
-                        {context_menu}
+                        {toolbarOperations}
+                        {contextMenu}
                         bind:this={rows[i]}
                         >
           
@@ -154,7 +292,7 @@ export function edit(element, property_name) {
         </List_element>
         
         {#if show_insertion_row_after_element == element}
-            <Inserter   oninsert={async (text) => {await insert(text, show_insertion_row_after_element)}}
+            <Inserter   onInsert={async (text) => {await insert(text, show_insertion_row_after_element)}}
                         icon={definition.inserter_icon}
                         bind:this={inserter}    />
         {/if}
@@ -162,7 +300,7 @@ export function edit(element, property_name) {
 {/if}
 
 {#if show_insertion_row_after_element == END_OF_LIST}
-    <Inserter   oninsert={async (text) => {await insert(text, null)}}
+    <Inserter   onInsert={async (text) => {await insert(text, null)}}
                 icon={definition.inserter_icon}
                 bind:this={inserter}    />
 {/if}

package/components/list/list.svelte.d.ts

@@ -5,16 +5,25 @@ declare const __propDef: {
         self?: object | null | undefined;
         a?: string | undefined;
         objects?: object[] | undefined;
+        orderAttrib?: string | undefined;
         context?: string | undefined;
         typename?: string | undefined;
         c?: string | undefined;
-        toolbar_operations: any;
-        context_menu: any;
+        toolbarOperations: any;
+        contextMenu: any;
         key?: string | undefined;
-        refresh?: (() => void) | undefined;
-        update_objects?: ((_objects: object[]) => void) | undefined;
-        update_self?: ((_self: object) => void) | undefined;
-        add?: ((after?: object | null) => Promise<void>) | undefined;
+        CLEAR_SELECTION?: 0 | undefined;
+        KEEP_SELECTION?: -1 | undefined;
+        SELECT_PREVIOUS?: -2 | undefined;
+        SELECT_NEXT?: -3 | undefined;
+        KEEP_OR_SELECT_NEXT?: -4 | undefined;
+        ORDER_STEP?: 64 | undefined;
+        MIN_ORDER?: 0 | undefined;
+        rereder?: (() => void) | undefined;
+        reload?: ((data: object | object[], selectElement?: number) => void) | undefined;
+        moveUp?: ((element: object) => void) | undefined;
+        moveDown?: ((element: object) => void) | undefined;
+        addRowAfter?: ((after?: object | null) => Promise<void>) | undefined;
         remove?: ((element: object) => void) | undefined;
         edit?: ((element: object, property_name: string) => void) | undefined;
     };
@@ -32,10 +41,18 @@ export type ListProps = typeof __propDef.props;
 export type ListEvents = typeof __propDef.events;
 export type ListSlots = typeof __propDef.slots;
 export default class List extends SvelteComponentTyped<ListProps, ListEvents, ListSlots> {
-    get refresh(): () => void;
-    get update_objects(): (_objects: object[]) => void;
-    get update_self(): (_self: object) => void;
-    get add(): (after?: object | null) => Promise<void>;
+    get CLEAR_SELECTION(): 0;
+    get KEEP_SELECTION(): -1;
+    get SELECT_PREVIOUS(): -2;
+    get SELECT_NEXT(): -3;
+    get KEEP_OR_SELECT_NEXT(): -4;
+    get ORDER_STEP(): 64;
+    get MIN_ORDER(): 0;
+    get rereder(): () => void;
+    get reload(): (data: object | object[], selectElement?: number) => void;
+    get moveUp(): (element: object) => void;
+    get moveDown(): (element: object) => void;
+    get addRowAfter(): (after?: object | null) => Promise<void>;
     get remove(): (element: object) => void;
     get edit(): (element: object, property_name: string) => void;
 }

package/components/list/list.title.svelte

@@ -1,11 +1,15 @@
 <script>import { getContext } from "svelte";
 export let a;
 export let editable = false;
-export let on_change = void 0;
+export let onChange = void 0;
 export let readonly = false;
+export let href = void 0;
+export let hrefFunc = void 0;
 let definition = getContext("rList-definition");
 definition.title = a;
 definition.title_editable = editable;
-definition.on_title_changed = on_change;
+definition.on_title_changed = onChange;
 definition.title_readonly = readonly;
+definition.title_href = href;
+definition.title_href_func = hrefFunc;
 </script>

package/components/list/list.title.svelte.d.ts

@@ -3,8 +3,10 @@ declare const __propDef: {
     props: {
         a: string;
         editable?: boolean | undefined;
-        on_change?: Function | undefined;
+        onChange?: Function | undefined;
         readonly?: boolean | undefined;
+        href?: string | undefined;
+        hrefFunc?: Function | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/menu.d.ts

@@ -1,4 +1,4 @@
-export declare function show_menu(around: DOMRect | DOMPoint, operations: any): void;
-export declare function hide_whole_context_menu(): void;
-export declare function show_floating_toolbar(around: DOMRect | DOMPoint, toolbar: any, props?: {}): void;
-export declare function show_grid_menu(around: DOMRect | DOMPoint, operations: any): void;
+export declare function showMenu(around: DOMRect | DOMPoint, operations: any): void;
+export declare function hideWholeContextMenu(): void;
+export declare function showFloatingToolbar(around: DOMRect | DOMPoint, toolbar: any, props?: {}): void;
+export declare function showGridMenu(around: DOMRect | DOMPoint, operations: any): void;

package/components/menu.js

@@ -3,7 +3,7 @@ import Floating_container from './Floating_container.svelte';
 import Grid from './Grid.menu.svelte';
 let menu_comopnent = null;
 let toolbar_component = null;
-export function show_menu(around, operations) {
+export function showMenu(around, operations) {
     let menu_element = document.getElementById("__hd_svelte_contextmenu");
     if (!menu_element) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
@@ -14,7 +14,7 @@ export function show_menu(around, operations) {
         menu_comopnent.show(around, operations);
     }
     else if (menu_comopnent) {
-        if (menu_comopnent.is_visible())
+        if (menu_comopnent.isVisible())
             menu_comopnent.hide();
         else
             menu_comopnent.show(around, operations);
@@ -22,13 +22,13 @@ export function show_menu(around, operations) {
     else
         console.error('what now?');
 }
-export function hide_whole_context_menu() {
+export function hideWholeContextMenu() {
     if (menu_comopnent) {
-        if (menu_comopnent.is_visible())
+        if (menu_comopnent.isVisible())
             menu_comopnent.hide();
     }
 }
-export function show_floating_toolbar(around, toolbar, props = {}) {
+export function showFloatingToolbar(around, toolbar, props = {}) {
     let floating_container = document.getElementById("__hd_svelte_floating_container");
     if (!floating_container) {
         let app_div = document.getElementById("__hd_svelte_layout_root");
@@ -39,16 +39,18 @@ export function show_floating_toolbar(around, toolbar, props = {}) {
         toolbar_component.show(around, toolbar, props);
     }
     else if (toolbar_component) {
-        if (toolbar_component.is_visible()) {
-            toolbar_component.hide();
-        }
-        else {
-            toolbar_component.show(around, toolbar, props);
-        }
+        //if(toolbar_component.isVisible())
+        //{
+        //    toolbar_component.hide();
+        //}
+        //else
+        //{
+        toolbar_component.show(around, toolbar, props);
+        //}
     }
     else
         console.error('what now?');
 }
-export function show_grid_menu(around, operations) {
-    show_floating_toolbar(around, Grid, { operations: operations });
+export function showGridMenu(around, operations) {
+    showFloatingToolbar(around, Grid, { operations: operations });
 }

package/components/radio.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from "svelte";
-import { data_tick_store, context_items_store, context_types_store } from "../stores.js";
-import { inform_modification, push_changes } from "../updates.js";
-import { parse_width_directive } from "../utils.js";
+import { data_tick_store, contextItemsStore, contextTypesStore } from "../stores.js";
+import { informModification, pushChanges } from "../updates.js";
+import { parseWidthDirective } from "../utils.js";
 export let value;
 export let disabled = false;
 export let self = null;
@@ -9,11 +9,12 @@ export let a = "";
 export let context = "";
 export let typename = "";
 export let c = "";
+export let pushChangesImmediately = true;
 let item = null;
 let additional_class = $$restProps.class ?? "";
 let ctx = context ? context : getContext("ctx");
-let cs = parse_width_directive(c);
-let color_style = disabled ? "text-gray-400 dark:text-gray-500" : "text-gray-900 dark:text-gray-300";
+let cs = parseWidthDirective(c);
+let color_style = disabled ? "text-stone-400 dark:text-stone-500" : "text-stone-900 dark:text-stone-300";
 let name;
 let last_tick = -1;
 $:
@@ -22,17 +23,18 @@ function setup(data_tick_store2) {
   if (data_tick_store2 <= last_tick)
     return;
   last_tick = data_tick_store2;
-  item = self ?? $context_items_store[ctx];
+  item = self ?? $contextItemsStore[ctx];
   if (!typename)
-    typename = $context_types_store[ctx];
+    typename = $contextTypesStore[ctx];
   name = `${typename}_${item.Id}_${a}`;
 }
 function on_changed() {
   if (item && a) {
     if (typename) {
-      inform_modification(item, a, typename);
+      informModification(item, a, typename);
       $data_tick_store = $data_tick_store + 1;
-      push_changes();
+      if (pushChangesImmediately)
+        pushChanges();
     }
   }
 }
@@ -45,7 +47,7 @@ function on_changed() {
             {name}
             on:change={on_changed}
             {disabled} 
-            class="w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 mr-2 dark:bg-gray-700 dark:border-gray-600 rounded text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"/>
+            class="w-4 h-4 bg-stone-100 border-stone-300 dark:ring-offset-stone-800 focus:ring-2 mr-2 dark:bg-stone-700 dark:border-stone-600 rounded text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"/>
     <span class="text-sm font-medium ml-1">
         <slot/>
     </span>

package/components/radio.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         context?: string | undefined;
         typename?: string | undefined;
         c?: string | undefined;
+        pushChangesImmediately?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/sidebar/sidebar.group.svelte

@@ -1,21 +1,9 @@
 <script>
-    import Icon from '../icon.svelte'
-    import Edit from '../edit.field.svelte'
-    import {FaPlus} from 'svelte-icons/fa'
-
     export let border = false;
-    export let inserter = undefined;
-    export let inserter_placeholder = 'New'
 
-    let border_class = border ? " pt-4 mt-4 border-t border-gray-200 dark:border-gray-700" : ""
+    let border_class = border ? " pt-4 mt-4 border-t border-stone-200 dark:border-stone-700" : ""
 </script>
 
 <ul class="space-y-2 {border_class}">
     <slot/>
-
-    {#if inserter}
-        <Edit class="p-3 sm:p-2 text-lg sm:text-base font-normal text-gray-500 rounded-lg dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700" on_enter={inserter} placeholder={inserter_placeholder} inserter={true}>
-            <Icon size={5} component={FaPlus} class="mr-3"/>
-        </Edit>
-    {/if}
 </ul>

package/components/sidebar/sidebar.group.svelte.d.ts

@@ -2,9 +2,7 @@
 /** @typedef {typeof __propDef.events}  SidebarEvents */
 /** @typedef {typeof __propDef.slots}  SidebarSlots */
 export default class Sidebar extends SvelteComponentTyped<{
-    inserter?: any;
     border?: boolean | undefined;
-    inserter_placeholder?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -17,9 +15,7 @@ export type SidebarSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        inserter?: any;
         border?: boolean | undefined;
-        inserter_placeholder?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/sidebar/sidebar.item.svelte

@@ -1,13 +1,13 @@
 <script>import Icon from "../icon.svelte";
-import { context_items_store, auto_hide_sidebar, context_toolbar_operations } from "../../stores";
+import { contextItemsStore, auto_hide_sidebar, contextToolbarOperations } from "../../stores";
 import FaBars from "svelte-icons/fa/FaBars.svelte";
 import {
   selectable as _selectable,
-  is_selected,
+  isSelected,
   editable as _editable,
-  handle_select
+  handleSelect
 } from "../../utils";
-import { show_menu } from "../menu";
+import { showMenu } from "../menu";
 export let href;
 export let icon = void 0;
 export let active = false;
@@ -15,7 +15,7 @@ export let selectable = void 0;
 export let editable = void 0;
 export let operations = void 0;
 $:
-  context_data = $context_items_store;
+  context_data = $contextItemsStore;
 let user_class = $$props.class ?? "";
 let root;
 function selectable_if_needed(node, selectable2) {
@@ -23,7 +23,7 @@ function selectable_if_needed(node, selectable2) {
     _selectable(node, selectable2);
 }
 function selected(itm, context_data2) {
-  if (is_selected(itm))
+  if (isSelected(itm))
     return true;
   else
     return false;
@@ -35,7 +35,7 @@ function editable_if_needed(node, editable2) {
 function on_link_clicked(e) {
   auto_hide_sidebar();
   if (selectable)
-    handle_select(e);
+    handleSelect(e);
   e.stopPropagation();
 }
 function on_contextmenu(e) {
@@ -46,7 +46,7 @@ function on_contextmenu(e) {
     return;
   if (operations_list.length == 0)
     return;
-  show_menu(new DOMPoint(e.clientX, e.clientY), operations_list);
+  showMenu(new DOMPoint(e.clientX, e.clientY), operations_list);
   e.preventDefault();
 }
 function can_show_context_menu(itm, context_data2) {
@@ -68,7 +68,7 @@ function on_show_menu(e) {
     return;
   if (operations_list.length == 0)
     return;
-  show_menu(rect, operations_list);
+  showMenu(rect, operations_list);
 }
 </script>
 
@@ -81,11 +81,11 @@ function on_show_menu(e) {
         on:keyup
         class="     border border-transparent rounded-lg
                     text-lg sm:text-base font-normal 
-                    text-gray-900 sm:hover:bg-gray-100  
-                    dark:text-white sm:dark:hover:bg-gray-700 {user_class}
+                    text-stone-900 sm:hover:bg-stone-100  
+                    dark:text-white sm:dark:hover:bg-stone-700 {user_class}
                     flex flex-row justify-between"
-        class:bg-gray-200={active}
-        class:dark:bg-gray-700={active}
+        class:bg-stone-200={active}
+        class:dark:bg-stone-700={active}
         class:selected={selected(selectable, context_data)}>
             <a  href={href} 
                 on:click={on_link_clicked}