@dosgato/dialog 1.4.2 → 1.4.4

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,16 +1,60 @@
 <script lang="ts">
+  import { tick } from 'svelte'
+  import { glue, ScreenReaderOnly, type GlueAlignOpts } from '@txstate-mws/svelte-components'
+  import { randomid } from 'txstate-utils'
+
   export let tip: string | undefined = undefined
   export let top: boolean = false
   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()
+  const anchorName = `--tip-${tooltipId}`
+  let triggerEl: HTMLSpanElement
+  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 (focusable) {
+      hasFocusableChild = true
+      focusable.setAttribute('aria-describedby', tooltipId)
+    } else {
+      hasFocusableChild = false
+    }
+  }
+  $: reactToTip(tip).catch(console.error)
 </script>
 
+{#if tip}
+<div class="tooltip-wrapper">
+  <span bind:this={slotwrapper} class="tooltip-slot" style:anchor-name={anchorName} bind:this={triggerEl}>
+    <slot />
+    {#if !hasFocusableChild}<ScreenReaderOnly>tooltip: {tip}</ScreenReaderOnly>{/if}
+  </span>
+  <div
+    id={tooltipId}
+    role="tooltip"
+    class="tooltip"
+    class:active
+    use:glue={{ target: slotwrapper, align: resolvedAlign, gap: 5 }}>
+      <div class="default-tip tip">{tip}</div>
+  </div>
+</div>
+{:else}
+  <slot />
+{/if}
+
 <style>
   .tooltip {
     opacity: 0;
-    position: absolute;
     z-index: 1;
     visibility: hidden;
     transition: opacity 150ms, visibility 150ms;
@@ -20,15 +64,12 @@
     border-radius: 6px;
     color: inherit;
   }
-  .tooltip.top {
-    transform: translate(-40%, -100%);
-    margin-top: -20px;
-  }
   .tooltip.active {
     opacity: 1;
     visibility: initial;
   }
-  .tooltip-slot:hover + .tooltip {
+  .tooltip-slot:hover + .tooltip,
+  .tooltip-slot:focus-within + .tooltip {
     opacity: 1;
     visibility: initial;
   }
@@ -37,22 +78,3 @@
     background-color: #fff;
   }
 </style>
-
-{#if tip}
-<div class="tooltip-wrapper">
-  <span class="tooltip-slot">
-    <slot />
-  </span>
-  <div
-    class="tooltip"
-    class:active
-    class:left
-    class:right
-    class:bottom
-    class:top>
-      <div class="default-tip tip">{tip}</div>
-  </div>
-</div>
-{:else}
-  <slot />
-{/if}

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/dist/index.d.ts

@@ -32,6 +32,7 @@ export { default as Radio } from './Radio.svelte';
 export { default as Switcher } from './Switcher.svelte';
 export { default as Tab } from './Tab.svelte';
 export { default as Tabs } from './Tabs.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
 export * from './chooser/index.js';
 export * from './fileIcons.js';
 export * from './errorIcons.js';

package/dist/index.js

@@ -32,6 +32,7 @@ export { default as Radio } from './Radio.svelte';
 export { default as Switcher } from './Switcher.svelte';
 export { default as Tab } from './Tab.svelte';
 export { default as Tabs } from './Tabs.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
 export * from './chooser/index.js';
 export * from './fileIcons.js';
 export * from './errorIcons.js';

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.2",
+  "version": "1.4.4",
   "scripts": {
     "prepublishOnly": "svelte-package",
     "dev": "vite dev --force",