@dosgato/dialog 1.4.3 → 1.4.5

package/dist/Button.svelte

@@ -19,7 +19,7 @@
 
 <style>
   button.reset {
-    padding: 0.5em 1em;
+    padding: 0.5em 15px;
     border: 0;
     border-radius: 0.25em;
     background-color: var(--dg-button-bg, #501214);
@@ -30,7 +30,8 @@
     line-height: 1;
   }
   button.reset.compact {
-    padding: 0.1em;
+    padding: 0.2em 5px 0.1em 5px;
+    font-size: 0.9em;
   }
   button.reset[disabled] {
     opacity: 0.6;

package/dist/Icon.svelte

@@ -5,8 +5,10 @@
 -->
 <script lang="ts">
   import type { IconifyIcon } from '@iconify/svelte'
+  import type { GlueAlignOpts } from '@txstate-mws/svelte-components'
   import { randomid } from 'txstate-utils'
   import Tooltip from './Tooltip.svelte'
+
   export let icon: IconifyIcon | undefined
   /** Label used in a `<ScreenReaderOnly>`. */
   export let hiddenLabel: string | undefined = undefined
@@ -14,6 +16,7 @@
   export let width: string | number | undefined = undefined
   export let height: string | number | undefined = undefined
   export let tooltip: string | undefined = undefined
+  export let tooltipAlign: GlueAlignOpts = 'automiddle'
   let className: string | undefined = undefined
   export { className as class }
 
@@ -48,7 +51,7 @@
 </script>
 
 {#if icon}
-  <Tooltip tip={tooltip} top>
+  <Tooltip tip={tooltip} align={tooltipAlign}>
     <svg role="img" class={className} viewBox="{icon.left ?? 0} {icon.top ?? 0} {icon.width ?? 256} {icon.height ?? 256}" class:vFlip={icon.vFlip} class:hFlip={icon.hFlip} class:inline {width} {height} aria-hidden={!hiddenLabel} aria-label={hiddenLabel} xmlns="http://www.w3.org/2000/svg">
       {@html svgBody(icon)}
     </svg>

package/dist/Icon.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { IconifyIcon } from '@iconify/svelte';
+import type { GlueAlignOpts } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
         icon: IconifyIcon | undefined;
@@ -8,6 +9,7 @@ declare const __propDef: {
         width?: string | number | undefined;
         height?: string | number | undefined;
         tooltip?: string | undefined;
+        tooltipAlign?: GlueAlignOpts;
         class?: string | undefined;
     };
     events: {

package/dist/Tooltip.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { tick } from 'svelte'
-  import { ScreenReaderOnly } from '@txstate-mws/svelte-components'
+  import { glue, ScreenReaderOnly, type GlueAlignOpts } from '@txstate-mws/svelte-components'
   import { randomid } from 'txstate-utils'
 
   export let tip: string | undefined = undefined
@@ -8,16 +8,20 @@
   export let right: boolean = false
   export let bottom: boolean = false
   export let left: boolean = false
+  export let align: GlueAlignOpts | undefined = undefined
   export let active: boolean = false
 
   const tooltipId = randomid()
-  let triggerEl: HTMLSpanElement
+  const anchorName = `--tip-${tooltipId}`
+  let slotwrapper: HTMLSpanElement
+
   let hasFocusableChild = false
+  $: resolvedAlign = align ?? (top ? 'top' : right ? 'right' : bottom ? 'bottom' : left ? 'left' : 'auto') as GlueAlignOpts
 
   async function reactToTip (..._: any[]) {
     await tick()
-    if (!triggerEl) return
-    const focusable = triggerEl.querySelector('a[href], button, input, select, textarea, [tabindex]')
+    if (!slotwrapper) return
+    const focusable = slotwrapper.querySelector('a[href], button, input, select, textarea, [tabindex]')
     if (focusable) {
       hasFocusableChild = true
       focusable.setAttribute('aria-describedby', tooltipId)
@@ -30,7 +34,7 @@
 
 {#if tip}
 <div class="tooltip-wrapper">
-  <span class="tooltip-slot" bind:this={triggerEl}>
+  <span bind:this={slotwrapper} class="tooltip-slot">
     <slot />
     {#if !hasFocusableChild}<ScreenReaderOnly>tooltip: {tip}</ScreenReaderOnly>{/if}
   </span>
@@ -39,10 +43,7 @@
     role="tooltip"
     class="tooltip"
     class:active
-    class:left
-    class:right
-    class:bottom
-    class:top>
+    use:glue={{ target: slotwrapper, align: resolvedAlign, gap: 5 }}>
       <div class="default-tip tip">{tip}</div>
   </div>
 </div>
@@ -53,7 +54,6 @@
 <style>
   .tooltip {
     opacity: 0;
-    position: absolute;
     z-index: 1;
     visibility: hidden;
     transition: opacity 150ms, visibility 150ms;
@@ -63,10 +63,6 @@
     border-radius: 6px;
     color: inherit;
   }
-  .tooltip.top {
-    transform: translate(-40%, -100%);
-    margin-top: -20px;
-  }
   .tooltip.active {
     opacity: 1;
     visibility: initial;

package/dist/Tooltip.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import { type GlueAlignOpts } from '@txstate-mws/svelte-components';
 declare const __propDef: {
     props: {
         tip?: string | undefined;
@@ -6,6 +7,7 @@ declare const __propDef: {
         right?: boolean;
         bottom?: boolean;
         left?: boolean;
+        align?: GlueAlignOpts | undefined;
         active?: boolean;
     };
     events: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dosgato/dialog",
   "description": "A component library for building forms that edit a JSON document.",
-  "version": "1.4.3",
+  "version": "1.4.5",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",