@lilydesignsystem/svelte-headless 0.5.1 → 0.6.1

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 The format is loosely based on [Keep a Changelog](https://keepachangelog.com/)
 and the package follows [Semantic Versioning](https://semver.org/).
 
+## 0.6.0 — 2026-10-23 (three components)
+
+- New: `HeatmapChartWithYearOfDays`, `MiddleTruncation`, `WheelPicker`.
+- `HeatmapChartWithYearOfDays`: a `HeatmapChart` for one year of days (required `year` and `weekStart`, reflected as `data-year` and `data-week-start`; a week-column by weekday-row layout contract).
+- `MiddleTruncation`: a string shortened in the middle to fit its width, keeping the start and the end; the shortened text is `aria-hidden` and the full text stays in the accessibility tree; `ellipsis` is required and has no default.
+- `WheelPicker`: a vertical single-select listbox where the selection follows the cursor (arrows, Home/End, Page keys, type-ahead, optional loop).
+- Contract fix: `Slider`'s documented root is `<input type="range">` (the docs said `<div>`); `aria-valuetext` documented. `Button` documents the pending-action pattern (`aria-busy`, `aria-disabled`, never `disabled`).
+- The 57 reference themes style the new components. See the repository CHANGELOG (2026-10-23).
+
 ## 0.5.1 — 2026-10-18 (Editable accessible name)
 
 - `Editable`: the display-mode button is named "value, label" (the label alone when the value is empty) so its visible text is part of its accessible name (WCAG 2.5.3).

package/dist/components/AlertDialog/AlertDialog.svelte

@@ -65,6 +65,7 @@
     //   - WAI-ARIA Alert and Message Dialogs Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
 
     import type { Snippet } from "svelte";
+    import { modalDialog } from "../Dialog/modal.js";
 
     let {
         class: className = "",
@@ -95,7 +96,12 @@
 {#if open}
     <dialog
         class={`alert-dialog ${className}`}
-        open
+        use:modalDialog={true}
+        oncancel={(event) => {
+            event.preventDefault();
+            open = false;
+        }}
+        onclose={() => (open = false)}
         role="alertdialog"
         aria-labelledby={titleId}
         aria-describedby={description ? descriptionId : undefined}

package/dist/components/BreadcrumbListItem/BreadcrumbListItem.svelte

@@ -3,7 +3,7 @@
     //
     // A single step in a breadcrumb navigation trail. Renders as a semantic <li>
     // element designed to be placed inside a BreadcrumbList component. Supports
-    // aria-current="page" to indicate the user's current location. Typically
+    // data-current to indicate the user's current location. Typically
     // contains a link for ancestor pages, or plain text for the current page.
     //
     // Props:
@@ -27,7 +27,7 @@
     //
     // Accessibility:
     //   - Implicit listitem role from the semantic <li> element
-    //   - aria-current="page" set when current is true, indicating the user's location
+    //   - data-current set when current is true, indicating the user's location
     //
     // Internationalization:
     //   - All text comes through children snippet; no hardcoded strings
@@ -58,7 +58,7 @@
 <!-- BreadcrumbListItem.svelte -->
 <li
     class={`breadcrumb-list-item ${className}`}
-    aria-current={current ? "page" : undefined}
+    data-current={current ? "" : undefined}
     {...restProps}
 >
     {@render children?.()}

package/dist/components/ConvertDiv/ConvertDiv.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    // ConvertDiv component
+    //
+    // A headless part of ConvertDiv: a group that converts a value from one unit into another, such as dollars into euros or miles into kilometres. Contract: a plain <div> with the base class and children; role="group" named by `label`.
+    // Converts nothing and carries no strings of its own; the consumer supplies the controls.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        children,
+        ...restProps
+    }: {
+        /** Accessible name of the group (required). */
+        label: string;
+
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ConvertDiv.svelte -->
+<div
+    class={`convert-div ${className}`} role="group" aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/ConvertDiv/ConvertDiv.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name of the group (required). */
+    label: string;
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ConvertDiv: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConvertDiv = ReturnType<typeof ConvertDiv>;
+export default ConvertDiv;

package/dist/components/ConvertFromDiv/ConvertFromDiv.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    // ConvertFromDiv component
+    //
+    // A headless part of ConvertDiv: the source side of a conversion, holding the value and unit to convert from. Contract: a plain <div> with the base class and children.
+    // Converts nothing and carries no strings of its own; the consumer supplies the controls.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ConvertFromDiv.svelte -->
+<div
+    class={`convert-from-div ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/ConvertFromDiv/ConvertFromDiv.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ConvertFromDiv: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConvertFromDiv = ReturnType<typeof ConvertFromDiv>;
+export default ConvertFromDiv;

package/dist/components/ConvertFromUnitDiv/ConvertFromUnitDiv.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    // ConvertFromUnitDiv component
+    //
+    // A headless part of ConvertDiv: the unit to convert from, such as a select box of currencies or lengths. Contract: a plain <div> with the base class and children.
+    // Converts nothing and carries no strings of its own; the consumer supplies the controls.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ConvertFromUnitDiv.svelte -->
+<div
+    class={`convert-from-unit-div ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/ConvertFromUnitDiv/ConvertFromUnitDiv.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ConvertFromUnitDiv: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConvertFromUnitDiv = ReturnType<typeof ConvertFromUnitDiv>;
+export default ConvertFromUnitDiv;

package/dist/components/ConvertFromValueDiv/ConvertFromValueDiv.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    // ConvertFromValueDiv component
+    //
+    // A headless part of ConvertDiv: the value to convert from, such as a text input holding the number of dollars. Contract: a plain <div> with the base class and children.
+    // Converts nothing and carries no strings of its own; the consumer supplies the controls.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ConvertFromValueDiv.svelte -->
+<div
+    class={`convert-from-value-div ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/ConvertFromValueDiv/ConvertFromValueDiv.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ConvertFromValueDiv: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConvertFromValueDiv = ReturnType<typeof ConvertFromValueDiv>;
+export default ConvertFromValueDiv;

package/dist/components/ConvertIntoDiv/ConvertIntoDiv.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    // ConvertIntoDiv component
+    //
+    // A headless part of ConvertDiv: the target side of a conversion, holding the value and unit to convert into. Contract: a plain <div> with the base class and children.
+    // Converts nothing and carries no strings of its own; the consumer supplies the controls.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ConvertIntoDiv.svelte -->
+<div
+    class={`convert-into-div ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/ConvertIntoDiv/ConvertIntoDiv.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ConvertIntoDiv: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConvertIntoDiv = ReturnType<typeof ConvertIntoDiv>;
+export default ConvertIntoDiv;

package/dist/components/ConvertIntoUnitDiv/ConvertIntoUnitDiv.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    // ConvertIntoUnitDiv component
+    //
+    // A headless part of ConvertDiv: the unit to convert into, such as a select box of currencies or lengths. Contract: a plain <div> with the base class and children.
+    // Converts nothing and carries no strings of its own; the consumer supplies the controls.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ConvertIntoUnitDiv.svelte -->
+<div
+    class={`convert-into-unit-div ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/ConvertIntoUnitDiv/ConvertIntoUnitDiv.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ConvertIntoUnitDiv: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConvertIntoUnitDiv = ReturnType<typeof ConvertIntoUnitDiv>;
+export default ConvertIntoUnitDiv;

package/dist/components/ConvertIntoValueDiv/ConvertIntoValueDiv.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    // ConvertIntoValueDiv component
+    //
+    // A headless part of ConvertDiv: the converted value, such as a text input showing the number of euros. Contract: a plain <div> with the base class and children.
+    // Converts nothing and carries no strings of its own; the consumer supplies the controls.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ConvertIntoValueDiv.svelte -->
+<div
+    class={`convert-into-value-div ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/ConvertIntoValueDiv/ConvertIntoValueDiv.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ConvertIntoValueDiv: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConvertIntoValueDiv = ReturnType<typeof ConvertIntoValueDiv>;
+export default ConvertIntoValueDiv;

package/dist/components/Dialog/Dialog.svelte

@@ -54,6 +54,7 @@
     //   - WAI-ARIA dialog role: https://www.w3.org/TR/wai-aria-1.2/#dialog
 
     import type { Snippet } from "svelte";
+    import { modalDialog } from "./modal.js";
 
     let {
         class: className = "",
@@ -80,17 +81,29 @@
             open = false;
         }
     }
+    function oncancel(event: Event) {
+        event.preventDefault();
+        open = false;
+    }
+    function onclose() {
+        open = false;
+    }
 </script>
 
 <!-- Dialog.svelte -->
 {#if open}
+    <!-- A modal dialog is opened by `showModal()` (see modal.ts), so the `open` attribute is only rendered for a
+         non-modal one; the keydown and cancel handlers keep `open` in step with a native Escape or `<form method="dialog">`. -->
     <dialog
         class={`dialog ${className}`}
-        open
+        open={modal ? undefined : true}
         tabindex="-1"
         aria-label={label}
         aria-modal={modal || undefined}
+        use:modalDialog={modal}
         {onkeydown}
+        oncancel={oncancel}
+        onclose={onclose}
         {...restProps}
     >
         {@render children?.()}

package/dist/components/Dialog/modal.d.ts

@@ -0,0 +1,4 @@
+export declare function modalDialog(node: HTMLDialogElement, enabled: boolean): {
+    update(next: boolean): void;
+    destroy(): void;
+};

package/dist/components/Dialog/modal.js

@@ -0,0 +1,47 @@
+// Show a <dialog> as a real modal, or as a plain open dialog.
+//
+// A modal dialog is opened with `showModal()`: the browser puts it in the top layer, makes the rest of the page
+// inert (no pointer, no keyboard, no assistive-technology access behind it), traps Tab inside it, moves focus to
+// it and returns focus to the opener when it closes. Setting the `open` attribute does none of that, so a dialog
+// that only sets `open` and says `aria-modal="true"` claims a modality it does not have.
+//
+// Where `showModal` is missing (jsdom, very old browsers) the dialog falls back to the `open` attribute, which
+// keeps it visible and testable. Used as `use:modalDialog={modal}`.
+export function modalDialog(node, enabled) {
+    let modal = enabled;
+    // Where focus was when the dialog opened. A native close() would hand focus back there, but Svelte takes the element
+    // out of the page before this action's cleanup runs, so by then the browser can no longer do it: we do.
+    const opener = typeof document === "undefined" ? null : document.activeElement;
+    function show() {
+        if (node.open)
+            return;
+        if (modal && typeof node.showModal === "function")
+            node.showModal();
+        else
+            node.setAttribute("open", "");
+    }
+    function hide() {
+        if (!node.open)
+            return;
+        if (typeof node.close === "function")
+            node.close();
+        else
+            node.removeAttribute("open");
+    }
+    show();
+    return {
+        update(next) {
+            if (next === modal)
+                return;
+            // Modal and non-modal are different openings: close the old one and open the new one.
+            hide();
+            modal = next;
+            show();
+        },
+        destroy() {
+            hide();
+            if (opener && opener !== document.body && opener.isConnected)
+                opener.focus();
+        },
+    };
+}

package/dist/components/FileDialog/FileDialog.svelte

@@ -47,6 +47,7 @@
     //   - WAI-ARIA Dialog Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
     //   - MDN dialog element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
     import type { Snippet } from "svelte";
+    import { modalDialog } from "../Dialog/modal.js";
     let {
         class: className = "",
         label,
@@ -71,7 +72,12 @@
 {#if open}
     <dialog
         class={`file-dialog ${className}`}
-        open
+        use:modalDialog={true}
+        oncancel={(event) => {
+            event.preventDefault();
+            open = false;
+        }}
+        onclose={() => (open = false)}
         tabindex="-1"
         aria-label={label}
         {onkeydown}

package/dist/components/HeatmapChartWithYearOfDays/HeatmapChartWithYearOfDays.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    // HeatmapChartWithYearOfDays component
+    //
+    // A headless chart container. The consumer supplies the inline svg as
+    // `children`; the component draws nothing. The graphic is a
+    // role="img" wrapper named by `label`. The optional `dataTable` snippet
+    // renders the accessible table alternative as a SIBLING of that image
+    // wrapper, never inside it: a role="img" element makes its descendants
+    // presentational, so a table placed inside would be invisible to
+    // assistive technology.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   label — string, required. Accessible name of the chart image.
+    //   year — number, required. The calendar year the chart shows (data-year).
+    //   weekStart — number, required. First weekday row, 0 = Sunday … 6 = Saturday
+    //     (data-week-start). Locale-dependent, so there is no default.
+    //   children — Snippet. The consumer-supplied inline svg.
+    //   dataTable — Snippet, optional. The accessible table alternative.
+    //   ...restProps — spread onto the root <figure>.
+    //
+    // Markup:
+    //   <figure class="heatmap-chart-with-year-of-days">
+    //     <div class="heatmap-chart-with-year-of-days-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="heatmap-chart-with-year-of-days-data-table">…table…</div>   (only when provided)
+    //   </figure>
+    //
+    // Keyboard: none on the graphic; the data table follows native table behaviour.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles; no drawing.
+    //   - No hardcoded user-facing strings.
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        year,
+        weekStart,
+        children,
+        dataTable,
+        ...restProps
+    }: {
+        /** Accessible name for the chart. */
+        label: string;
+        /** The calendar year shown. */
+        year: number;
+        /** First weekday row: 0 = Sunday … 6 = Saturday. */
+        weekStart: number;
+        /** The consumer-supplied inline svg. */
+        children: Snippet;
+        /** Optional accessible data table alternative. */
+        dataTable?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- HeatmapChartWithYearOfDays.svelte -->
+<figure
+    class={`heatmap-chart-with-year-of-days ${className}`}
+    data-year={year}
+    data-week-start={weekStart}
+    {...restProps}
+>
+    <div class="heatmap-chart-with-year-of-days-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="heatmap-chart-with-year-of-days-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

package/dist/components/HeatmapChartWithYearOfDays/HeatmapChartWithYearOfDays.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name for the chart. */
+    label: string;
+    /** The calendar year shown. */
+    year: number;
+    /** First weekday row: 0 = Sunday … 6 = Saturday. */
+    weekStart: number;
+    /** The consumer-supplied inline svg. */
+    children: Snippet;
+    /** Optional accessible data table alternative. */
+    dataTable?: Snippet;
+    [key: string]: unknown;
+};
+declare const HeatmapChartWithYearOfDays: import("svelte").Component<$$ComponentProps, {}, "">;
+type HeatmapChartWithYearOfDays = ReturnType<typeof HeatmapChartWithYearOfDays>;
+export default HeatmapChartWithYearOfDays;

package/dist/components/MiddleTruncation/MiddleTruncation.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    // MiddleTruncation component
+    //
+    // A string shortened in the middle to fit the width its container gives it ("report-fi…q3.pdf"), keeping the start and the
+    // end. The width is measured in the browser (canvas text metrics in the element's own font) and re-measured when the
+    // container resizes; until then, and on the server, the full text is shown.
+    //
+    // The full text always stays in the accessibility tree: the shortened string is aria-hidden and the whole text sits in a
+    // sibling the consumer visually hides. A screen reader, find-in-page and copy therefore get the real text, which a
+    // title attribute (hover only) or a text-only truncation would lose.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   text — string, required. The full text.
+    //   ellipsis — string, required. The cut marker. No default: the headless layer ships no text.
+    //   strategy — "even" | "fixed-end" | "min-end", default "even".
+    //     even: start and end share the room. fixed-end: exactly `end` characters at the end. min-end: even, but at least `end` at the end.
+    //   end — number, optional. Characters kept at the end for "fixed-end" and "min-end".
+    //   ...restProps — spread onto the root <span>.
+    //
+    // Markup:
+    //   <span class="middle-truncation" data-strategy data-truncated?>
+    //     <span class="middle-truncation-visual" aria-hidden="true">report-fi…q3.pdf</span>
+    //     <span class="middle-truncation-full">report-final-q3.pdf</span>
+    //   </span>
+    //
+    // Consumer CSS (the component ships none): the root must be a block with a bounded width, `overflow: hidden` and
+    // `white-space: nowrap`, and `.middle-truncation-full` must be visually hidden (clipped, not display:none).
+    //
+    // Keyboard: none.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles.
+    //   - No hardcoded user-facing strings: the ellipsis is a required prop.
+
+    import { onMount } from "svelte";
+    import { truncateMiddle, type TruncationStrategy } from "./middle-truncation";
+
+    let {
+        class: className = "",
+        text,
+        ellipsis,
+        strategy = "even",
+        end,
+        ...restProps
+    }: {
+        /** The full text. */
+        text: string;
+        /** The cut marker; no default. */
+        ellipsis: string;
+        /** How the room is shared between start and end. */
+        strategy?: TruncationStrategy;
+        /** Characters kept at the end for "fixed-end" and "min-end". */
+        end?: number;
+        [key: string]: unknown;
+    } = $props();
+
+    let root: HTMLSpanElement | undefined = $state();
+    let shown: string | null = $state(null);
+    const displayed = $derived(shown ?? text);
+
+    let context: CanvasRenderingContext2D | null | undefined;
+
+    function recalculate(): void {
+        if (!root) return;
+        const width = root.clientWidth;
+        if (context === undefined) context = document.createElement("canvas").getContext("2d");
+        if (!context || width <= 0) {
+            shown = null;
+            return;
+        }
+        const style = getComputedStyle(root);
+        context.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+        const ctx = context;
+        const result = truncateMiddle(text, { ellipsis, strategy, end, maxWidth: width, measure: (s) => ctx.measureText(s).width });
+        shown = result === text ? null : result;
+    }
+
+    // Re-measure whenever the text or the options change.
+    $effect(() => {
+        text; ellipsis; strategy; end;
+        recalculate();
+    });
+
+    // Re-measure when the container resizes, at most once per animation frame.
+    onMount(() => {
+        if (!root || typeof ResizeObserver === "undefined") return;
+        let frame = 0;
+        const observer = new ResizeObserver(() => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(recalculate);
+        });
+        observer.observe(root);
+        return () => {
+            cancelAnimationFrame(frame);
+            observer.disconnect();
+        };
+    });
+</script>
+
+<!-- MiddleTruncation.svelte -->
+<span
+    bind:this={root}
+    class={`middle-truncation ${className}`}
+    data-strategy={strategy}
+    data-truncated={shown === null ? undefined : ""}
+    {...restProps}
+><span class="middle-truncation-visual" aria-hidden="true">{displayed}</span><span class="middle-truncation-full">{text}</span></span>