@likable-hair/svelte 3.1.19 → 3.1.21

package/dist/components/layouts/UnstableDividedSideBarLayout.svelte

@@ -5,6 +5,7 @@ import Icon from "../simple/media/Icon.svelte";
 import { createEventDispatcher } from "svelte";
 import { clickOutside } from "../../utils/clickOutside";
 import ColorInvertedSelector, {} from "../simple/lists/ColorInvertedSelector.svelte";
+import { sidebarOpened } from "../../stores/layouts/unstableSidebarOpened";
 let clazz = {};
 export { clazz as class };
 export let drawerOpened = false, expandOn = "hover", options = [], selectedIndex = void 0;
@@ -26,6 +27,8 @@ function handleMenuSelection(option) {
   });
 }
 let sidebarExpanded = false;
+$:
+  $sidebarOpened = sidebarExpanded;
 </script>
 
 <MediaQuery let:mAndDown>
@@ -63,6 +66,8 @@ let sidebarExpanded = false;
       use:clickOutside 
       on:clickoutside={() => {if(expandOn == 'click') sidebarExpanded = false}}
       class="side-bar {clazz.header || ''}"
+      role="presentation"
+      tabindex="-1"
     >
       <div class="side-bar-content">
         <slot name="sidebar" hamburgerVisible={mAndDown} {sidebarExpanded}>

package/dist/components/simple/common/Menu.svelte

@@ -2,6 +2,7 @@
 import {
   fly
 } from "svelte/transition";
+import { sidebarOpened } from "../../../stores/layouts/unstableSidebarOpened";
 export let _top = void 0, _left = void 0, _width = "auto", _height = "auto", _maxHeight = void 0, _minWidth = void 0, _overflow = "auto", _boxShadow = void 0, _borderRadius = void 0, _activatorGap = 5;
 export let open = false, refreshPosition = false, activator = void 0, anchor = "bottom", closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
   duration: 100,
@@ -209,7 +210,7 @@ function getParentInstanceFromViewport(activatorParent) {
   }
   return { top, left, fixedParent, validStickyParent: isStickyValid ? stickyParent : void 0 };
 }
-function handleWindowScrollOrResize() {
+function refreshMenuPosition() {
   if (open && !!menuElement && !!activator)
     calculateMenuPosition({ menuElement, activator });
 }
@@ -230,9 +231,12 @@ function handleMenuClick(e, zIndex2) {
     }
   });
 }
+$:
+  if ($sidebarOpened !== void 0)
+    setTimeout(refreshMenuPosition, 300);
 </script>
 
-<svelte:window on:scroll={handleWindowScrollOrResize} on:resize={handleWindowScrollOrResize} ></svelte:window>
+<svelte:window on:scroll={refreshMenuPosition} on:resize={refreshMenuPosition} ></svelte:window>
 
 <div
   class="controller"
@@ -242,6 +246,8 @@ function handleMenuClick(e, zIndex2) {
   on:click={handleCloseControllerClick}
   on:keypress={handleCloseControllerClick}
   bind:this={closeController}
+  role="presentation"
+  tabindex="-1"
 ></div>
 {#if open}
   <div

package/dist/components/simple/forms/Autocomplete.svelte

@@ -150,7 +150,7 @@ $:
 $:
   if (!!input) {
     if (!disabled && values.length != 0) {
-      input.style.width = Math.max(searchText?.length || 0, 1) + "ch";
+      input.style.width = Math.max(searchText?.length || placeholder?.length, 1) + "ch";
     } else {
       input.style.width = "auto";
     }

package/dist/stores/layouts/unstableSidebarOpened.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+export declare let sidebarOpened: import("svelte/store").Writable<boolean>;

package/dist/stores/layouts/unstableSidebarOpened.js

@@ -0,0 +1,2 @@
+import { writable } from "svelte/store";
+export let sidebarOpened = writable(false);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.1.19",
+  "version": "3.1.21",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",