@classic-homes/theme-svelte 1.33.0 → 1.34.0

package/dist/lib/components/layout/sidebar/SidebarNavItem.svelte

@@ -13,6 +13,7 @@
   import type { Snippet } from 'svelte';
   import type { NavItem } from '../../../types/layout.js';
   import { cn } from '../../../utils.js';
+  import { truncateTitle } from '../../../utils/truncate-title.js';
   import { sidebarStore } from '../../../stores/sidebar.svelte.js';
   import Icon, { type IconName } from '../../Icon.svelte';
   import SidebarNavItem from './SidebarNavItem.svelte';
@@ -195,13 +196,13 @@
   highlight: { before: string; match: string; after: string } | null
 )}
   {#if highlight}
-    <span class="flex-1 min-w-0 truncate">
+    <span class="flex-1 min-w-0 truncate" use:truncateTitle={name}>
       {highlight.before}<mark class="bg-yellow-200 dark:bg-yellow-900 text-inherit rounded px-0.5"
         >{highlight.match}</mark
       >{highlight.after}
     </span>
   {:else}
-    <span class="flex-1 min-w-0 truncate">{name}</span>
+    <span class="flex-1 min-w-0 truncate" use:truncateTitle={name}>{name}</span>
   {/if}
 {/snippet}
 

package/dist/lib/components/layout/sidebar/SidebarSection.svelte

@@ -9,6 +9,7 @@
   import type { Snippet } from 'svelte';
   import type { NavSection, NavItem } from '../../../types/layout.js';
   import { cn } from '../../../utils.js';
+  import { truncateTitle } from '../../../utils/truncate-title.js';
   import { sidebarStore } from '../../../stores/sidebar.svelte.js';
   import SidebarNavItem from './SidebarNavItem.svelte';
 
@@ -93,7 +94,7 @@
         aria-expanded={isExpanded}
         aria-controls={`sidebar-section-${section.id}`}
       >
-        <span class="truncate">{section.title}</span>
+        <span class="truncate" use:truncateTitle={section.title}>{section.title}</span>
         <svg
           class={cn(
             'h-4 w-4 shrink-0',
@@ -119,6 +120,7 @@
           'mb-2 px-4 text-xs font-semibold uppercase tracking-wider overflow-hidden truncate',
           isLight ? 'text-muted-foreground' : 'text-sidebar-foreground/60'
         )}
+        use:truncateTitle={section.title}
       >
         {section.title}
       </h2>

package/dist/lib/utils/truncate-title.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Full-text tooltip for `truncate`d labels.
+ */
+import type { Action } from 'svelte/action';
+/**
+ * Sets the element's native `title` to `text` while its content is cut off
+ * by an ellipsis, and removes it when the text fits. Measured on hover rather
+ * than observed, so it costs nothing until someone points at it and stays
+ * right as the container resizes. (The accessible name is the text itself,
+ * so screen readers already get the full label.)
+ */
+export declare const truncateTitle: Action<HTMLElement, string>;

package/dist/lib/utils/truncate-title.js

@@ -0,0 +1,30 @@
+/**
+ * Full-text tooltip for `truncate`d labels.
+ */
+/**
+ * Sets the element's native `title` to `text` while its content is cut off
+ * by an ellipsis, and removes it when the text fits. Measured on hover rather
+ * than observed, so it costs nothing until someone points at it and stays
+ * right as the container resizes. (The accessible name is the text itself,
+ * so screen readers already get the full label.)
+ */
+export const truncateTitle = (node, text) => {
+    let current = text;
+    function sync() {
+        if (node.scrollWidth > node.clientWidth)
+            node.title = current;
+        else
+            node.removeAttribute('title');
+    }
+    node.addEventListener('pointerenter', sync);
+    return {
+        update(next) {
+            current = next;
+            if (node.hasAttribute('title'))
+                sync();
+        },
+        destroy() {
+            node.removeEventListener('pointerenter', sync);
+        },
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.33.0",
+  "version": "1.34.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",