fix: #958 (#959)

src/lib/list-group/ListgroupItem.svelte

@@ -60,7 +60,7 @@
 {:else}
   <button
     type="button"
-    class="inline-flex relative items-center text-left {itemClass}"
+    class="flex items-center text-left {itemClass}"
     {disabled}
     on:blur
     on:change

src/lib/speed-dial/SpeedDial.svelte

@@ -33,7 +33,10 @@
   $: divClass = twMerge(defaultClass, 'group', $$props.class);
 
   let poperClass: string;
-  $: poperClass = twMerge(popperDefaultClass, ['top', 'bottom'].includes(placement) && 'flex-col');
+  $: poperClass = twMerge(
+    popperDefaultClass,
+    ['top', 'bottom'].includes(placement.split('-')[0]) && 'flex-col'
+  );
 
   let open: boolean = false;
 </script>

src/lib/utils/Popper.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ComputePositionReturn, Placement, Side } from '@floating-ui/dom';
+  import type { ComputePositionReturn, Middleware, Placement, Side } from '@floating-ui/dom';
   import * as dom from '@floating-ui/dom';
   import { onMount, type ComponentProps } from 'svelte';
   import { twJoin } from 'tailwind-merge';
@@ -38,7 +38,7 @@
 
   let triggerEl: Element;
   let floatingEl: HTMLElement;
-  let arrowEl: HTMLElement;
+  let arrowEl: HTMLElement | null;
   let contentEl: HTMLElement;
   let triggerEls: HTMLElement[] = [];
 
@@ -62,7 +62,7 @@
   const hideHandler = (ev: Event) => {
     if (activeContent) {
       setTimeout(() => {
-        const elements = [triggerEl, floatingEl, arrowEl].filter((x) => x);
+        const elements = [triggerEl, floatingEl].filter((x) => x);
         if (ev.type === 'mouseleave' && elements.some(hasHover)) return;
         if (ev.type === 'focusout' && elements.some(hasFocus)) return;
         open = false;
@@ -78,24 +78,22 @@
     top: 'bottom'
   };
 
+  let middlewares: Middleware[];
+  $: middlewares = [dom.flip(), dom.shift(), dom.offset(+offset)];
+
   function updatePosition() {
+    const middleware = [...middlewares];
+
+    if (arrowEl) middleware.push(dom.arrow({ element: arrowEl, padding: 10 }));
+
     dom
-      .computePosition(triggerEl, floatingEl, {
-        placement,
-        strategy,
-        middleware: [
-          dom.flip(),
-          dom.shift(),
-          dom.offset(+offset),
-          arrowEl && dom.arrow({ element: arrowEl, padding: 10 })
-        ]
-      })
+      .computePosition(triggerEl, floatingEl, { placement, strategy, middleware })
       .then(({ x, y, middlewareData, placement, strategy }: ComputePositionReturn) => {
         floatingEl.style.position = strategy;
         floatingEl.style.left = yOnly ? '0' : px(x);
         floatingEl.style.top = px(y);
 
-        if (middlewareData.arrow && arrowEl) {
+        if (middlewareData.arrow && arrowEl instanceof HTMLDivElement) {
           arrowEl.style.left = px(middlewareData.arrow.x);
           arrowEl.style.top = px(middlewareData.arrow.y);
 
@@ -108,6 +106,7 @@
   function init(node: HTMLElement, _triggerEl: HTMLElement) {
     floatingEl = node;
     let cleanup = dom.autoUpdate(node, _triggerEl, updatePosition);
+
     return {
       update(_triggerEl: HTMLElement) {
         cleanup();
@@ -164,6 +163,15 @@
     $$props.border && arrowSide === 'right' && 'border-t border-r ',
     $$props.border && arrowSide === 'left' && 'border-b border-l '
   );
+
+  function initArrow(node: HTMLElement) {
+    arrowEl = node;
+    return {
+      destroy() {
+        arrowEl = null;
+      }
+    };
+  }
 </script>
 
 {#if !triggerEl}
@@ -182,7 +190,7 @@
     on:mouseleave={optional(activeContent && !clickable, hideHandler)}
     {...$$restProps}>
     <slot />
-    {#if arrow}<div class={arrowClass} bind:this={arrowEl} />{/if}
+    {#if arrow}<div use:initArrow class={arrowClass} />{/if}
   </Frame>
 {/if}
 

src/routes/docs/components/speed-dial.md

@@ -355,7 +355,7 @@ This example can be used to show an alternative style when showing a list of men
 
 <SpeedDial defaultClass="absolute right-24 bottom-6" tooltip="none" placement="top-end">
     <svg slot="icon" aria-hidden="true" class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path></svg>
-    <Listgroup class="w-24" active>
+    <Listgroup active>
         <ListgroupItem class="flex">
             <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path></svg>
             Share
@@ -376,7 +376,7 @@ This example can be used to show an alternative style when showing a list of men
 </SpeedDial>
 
 <SpeedDial defaultClass="absolute right-6 bottom-6" tooltip="none" pill={false} placement="top-end">
-    <Listgroup class="w-24" active>
+    <Listgroup active>
         <ListgroupItem class="flex">
             <svg aria-hidden="true" class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path></svg>
             Share