zabi-components 8.0.0 → 9.0.0

package/dist/molecules/PhotoViewer.svelte.d.ts

@@ -0,0 +1,74 @@
+import type { HTMLAttributes } from "svelte/elements";
+import { type Photo, type PhotoViewerAction, type PhotoViewerCloseReason, type PhotoViewerStrings } from "../util/photo.js";
+/**
+ * Photos one at a time, on the whole screen: swipe or use the arrows to
+ * go between them, pinch or double tap to look closer, swipe down or
+ * press Escape to leave.
+ *
+ * ```svelte
+ * <PhotoGrid {photos} onopen={(at) => { index = at; open = true; }} />
+ * <PhotoViewer {photos} bind:index bind:isOpen={open} actions={[share, remove]} />
+ * ```
+ *
+ * It is a modal dialog, on the same footing as Modal, Drawer and
+ * BottomSheet. When it closes, focus goes to the tile of the photo that
+ * was showing, if the `PhotoGrid` it was opened from shows it; otherwise
+ * to whatever opened it.
+ *
+ * It is dark in both themes: the photos are on black. Nothing in it is
+ * written on that black: every control, the counter and the caption sit
+ * on plates in the theme's own surface colour, so they read over any
+ * photo in either theme.
+ *
+ * It does not take the browser's Back. A history entry made by a
+ * component conflicts with the app's router (SvelteKit warns against
+ * `history.pushState` outside `$app/navigation`), so open the viewer from
+ * the router's own state: push a state on open, read `isOpen` from it,
+ * and go back to close (Z-131).
+ *
+ * Other attributes (`id`, `data-*`, ...) land on the `role="dialog"` panel.
+ */
+type Props = Omit<HTMLAttributes<HTMLDivElement>, "class" | "onclose" | "aria-label"> & {
+    photos: Photo[];
+    /** Place in `photos` of the photo that is showing. Supports `bind:index`. */
+    index?: number;
+    isOpen?: boolean;
+    /**
+     * Things to do with the photo that is showing. Up to three are
+     * buttons in a bar under the photo; with more, two are, and the
+     * rest are in a menu. The viewer does nothing by itself: each action
+     * is your own function.
+     */
+    actions?: PhotoViewerAction[];
+    /**
+     * Render the overlay in `document.body`, so an ancestor with a
+     * transform, filter or clipped overflow cannot trap it; pass `false`
+     * to render in place.
+     */
+    portal?: boolean;
+    /** Fired when the viewer closes itself, with what the user did. */
+    onclose?: (detail: {
+        reason: PhotoViewerCloseReason;
+    }) => void;
+    /**
+     * Called once when a full image cannot be loaded, so the page can
+     * answer with a new address (a signed one that has run out). A new
+     * `src` for the same photo is tried at once.
+     */
+    onloaderror?: (photo: Photo, index: number) => void;
+    /**
+     * Called when "Try again" is pressed on a photo that failed, before
+     * the image is asked for again. Return a promise and the button waits
+     * for it, busy, so the page has time to fetch a fresh address.
+     */
+    onretry?: (photo: Photo, index: number) => void | Promise<void>;
+    /** Accessible name of the dialog. */
+    label?: string;
+    /** Overrides for the built-in strings. */
+    strings?: Partial<PhotoViewerStrings>;
+    /** Extra classes for the dialog panel. */
+    class?: string;
+};
+declare const PhotoViewer: import("svelte").Component<Props, {}, "index" | "isOpen">;
+type PhotoViewer = ReturnType<typeof PhotoViewer>;
+export default PhotoViewer;

package/dist/molecules/PieChart.svelte

@@ -0,0 +1,421 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import Table from "../atoms/Table.svelte";
+    import { cn } from "../util/cn.js";
+    import {
+        CHART_GLASS,
+        chartColors,
+        chartFormatter,
+        pieSlices,
+        shareFormatter,
+        slicePath,
+        type ChartDatum,
+        type ChartFormat,
+    } from "../util/chart.js";
+
+    /**
+     * A pie chart, or a ring with `donut`, drawn as plain SVG: parts of a
+     * whole, clockwise from twelve o'clock in the order given.
+     *
+     * It is a `figure`: the `label` is its caption, the drawing is hidden
+     * from assistive technology, and the same numbers are in a real table
+     * (off screen unless `showTable`). The key beside the drawing writes each
+     * slice's label, value and share, in the order of the slices, so no slice
+     * is told by its colour alone. Keep it to six slices or fewer: after six
+     * the colours repeat, and a pie with more is hard to read anyway.
+     *
+     * Beside the key when there is room for both, over it when there is not
+     * (the chart measures its own width, not the window's).
+     */
+    type Props = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+        /** The slices, in order: a `label`, a `value` (above zero), and a `color` of its own if it needs one. */
+        data: ChartDatum[];
+        /** A ring, not a full disc. */
+        donut?: boolean;
+        /** What stands in the middle of the ring (`donut`): the total, or the one share that matters. Read by assistive technology, so keep it to what the table does not already say or say it the same way. */
+        center?: Snippet;
+        /** How a value is written: `number` (default), `percent` (72 is "72 %"), or a function. */
+        format?: ChartFormat;
+        /** The widest the drawing gets, in px. It shrinks with its container. */
+        size?: number;
+        /** The caption, and what the chart is called. */
+        label: string;
+        /** Keeps the caption for assistive technology and takes it off the screen. */
+        labelHidden?: boolean;
+        /** The key beside the drawing: each slice's label, value and share. */
+        legend?: boolean;
+        /** Shows the data table under the chart; otherwise it is there for assistive technology only. */
+        showTable?: boolean;
+        /** The heading of the table's first column. */
+        categoryTitle?: string;
+        /** The heading of the table's value column. */
+        valueTitle?: string;
+        /** The heading of the table's share column. */
+        shareTitle?: string;
+        /** The language of the built-in number formats. Without it, the runtime's. */
+        locale?: string;
+        /** Stands the chart on a panel of the thick material (frosted glass), for a chart that floats over a wash, a tint or a picture. On a plain card it shows nothing: leave it off there. */
+        glass?: boolean;
+        class?: string;
+    };
+
+    let {
+        data,
+        donut = false,
+        center,
+        format = "number",
+        size = 192,
+        label,
+        labelHidden = false,
+        legend = true,
+        showTable = false,
+        categoryTitle = "Category",
+        valueTitle = "Value",
+        shareTitle = "Share",
+        locale,
+        glass = false,
+        class: className = "",
+        ...restProps
+    }: Props = $props();
+
+    const uid = $props.id();
+    const maskId = `${uid}-gaps`;
+    const clipId = `${uid}-shape`;
+    const veilId = `${uid}-veil`;
+    const shineId = `${uid}-shine`;
+    const lipId = `${uid}-lip`;
+    const softId = `${uid}-soft`;
+
+    const OUTER = 50;
+    /** How far inside the edge the sheen lies, in the drawing's own units (of 100). */
+    const SHEEN = 4;
+    /** The ring is a third of the radius: a band, with room in the middle for a figure. */
+    const inner = $derived(donut ? 33 : 0);
+    const write = $derived(chartFormatter(format, locale));
+    const share = $derived(shareFormatter(locale));
+    const isValue = (value: unknown): value is number => typeof value === "number" && Number.isFinite(value);
+
+    const colors = $derived(chartColors(data.map((datum) => datum.color)));
+    const slices = $derived(
+        pieSlices(data).map((slice) => ({
+            ...slice,
+            color: colors[slice.index],
+            text: isValue(slice.value) ? write(slice.value) : "",
+            shareText: share(slice.share),
+            path: slicePath(50, 50, OUTER, inner, slice.start, slice.end),
+        })),
+    );
+    const drawn = $derived(slices.filter((slice) => slice.path));
+    /** The whole disc or ring, as one shape: what the glass is laid over. */
+    const whole = $derived(slicePath(50, 50, OUTER, inner, 0, Math.PI * 2));
+    /** The width of the gap between two slices, in the drawing's own units (of 100). */
+    const GAP = 1;
+    const spot = (radius: number, angle: number) =>
+        `${Math.round((50 + radius * Math.sin(angle)) * 100) / 100} ${Math.round((50 - radius * Math.cos(angle)) * 100) / 100}`;
+    /**
+     * Where two slices meet, a thin gap is cut, so they part on any surface
+     * without a border colour. Every gap is one line of even width from the
+     * exact centre to the rim, with a round end, so in a full pie the gaps
+     * meet in one small round point in the middle and each is as wide at the
+     * centre as at the rim.
+     */
+    const cuts = $derived(drawn.length > 1 ? drawn.map((slice) => `M50 50L${spot(OUTER + 1, slice.start)}`) : []);
+</script>
+
+<figure class={cn("zabi-chart relative m-0 flex flex-col gap-3", glass && CHART_GLASS, className)} {...restProps}>
+    <figcaption class={cn("text-label text-sm font-medium", labelHidden && "sr-only")}>{label}</figcaption>
+
+    <div class="layout">
+        <div class="disc" style:max-inline-size="{size}px">
+            <svg class="pie block aspect-square w-full" viewBox="0 0 100 100" aria-hidden="true" focusable="false">
+                <defs>
+                    <clipPath id={clipId}><path d={whole} clip-rule="evenodd" /></clipPath>
+                    <linearGradient id={veilId} x1="0" y1="0" x2="0" y2="1">
+                        <stop class="veil-top" offset="0" />
+                        <stop class="veil-bottom" offset="1" />
+                    </linearGradient>
+                    <linearGradient id={shineId} x1="0" y1="0" x2="0" y2="1">
+                        <stop class="light" offset="0" />
+                        <stop class="light off" offset="0.35" />
+                    </linearGradient>
+                    <linearGradient id={lipId} x1="0" y1="0" x2="0" y2="1">
+                        <stop class="light off" offset="0.65" />
+                        <stop class="light" offset="1" />
+                    </linearGradient>
+                    <filter id={softId} x="-20%" y="-20%" width="140%" height="140%">
+                        <feGaussianBlur stdDeviation="1.6" />
+                    </filter>
+                </defs>
+                <mask id={maskId} maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
+                    <rect width="100" height="100" fill="white" />
+                    {#each cuts as cut, index (index)}
+                        <path class="cut" d={cut} fill="none" stroke="black" stroke-width={GAP} stroke-linecap="round" />
+                    {/each}
+                </mask>
+                {#if drawn.length === 0}
+                    <!-- Nothing to share out: the empty shape, so the chart keeps its place. -->
+                    <path class="none" d={whole} />
+                {/if}
+                <g mask="url(#{maskId})">
+                    {#each drawn as slice (slice.index)}
+                        <path class="slice" style:--_c={slice.color} d={slice.path}>
+                            <title>{slice.label}: {slice.text} ({slice.shareText})</title>
+                        </path>
+                    {/each}
+                    {#if drawn.length > 0}
+                        <!--
+                            The glass. The slices keep their colour, opaque; over all of them, as one
+                            piece, lie the veil of a solid control, a soft sheen under the top edge,
+                            and a hairline of light on the top of the rim and, on a ring, on the
+                            lower lip of the hole. Nothing is drawn along the sides of a slice. The
+                            gaps are cut through it with the slices. Decoration only: it takes no
+                            pointer, and it is not drawn where the materials are opaque.
+                        -->
+                        <g class="glass" clip-path="url(#{clipId})">
+                            <path class="veil" d={whole} fill="url(#{veilId})" />
+                            <circle class="sheen" cx="50" cy="50" r={OUTER - SHEEN} stroke="url(#{shineId})" filter="url(#{softId})" />
+                            <circle class="rim" cx="50" cy="50" r={OUTER} stroke="url(#{shineId})" />
+                            {#if inner > 0}
+                                <circle class="rim" cx="50" cy="50" r={inner} stroke="url(#{lipId})" />
+                            {/if}
+                        </g>
+                    {/if}
+                </g>
+            </svg>
+            {#if donut && center}
+                <div class="center text-headline">{@render center()}</div>
+            {/if}
+        </div>
+
+        {#if legend}
+            <!-- The table below says the same to assistive technology. -->
+            <ul class="key text-description m-0 list-none p-0 text-sm" aria-hidden="true">
+                {#each slices as slice (slice.index)}
+                    <li>
+                        <span class="swatch" style:--_c={slice.color}></span>
+                        <span class="name text-headline font-medium">{slice.label}</span>
+                        <span class="text-headline tabular-nums">{slice.text}</span>
+                        <span class="share tabular-nums">{slice.shareText}</span>
+                    </li>
+                {/each}
+            </ul>
+        {/if}
+    </div>
+
+    <!-- The library's own Table, so the numbers look like every other table in the app. -->
+    <Table class={showTable ? "" : "sr-only"}>
+        <thead class="border-border bg-surface-elevated border-b">
+            <tr>
+                <th class="text-headline px-4 py-3 text-start font-medium" scope="col">{categoryTitle}</th>
+                <th class="text-headline px-4 py-3 text-end font-medium" scope="col">{valueTitle}</th>
+                <th class="text-headline px-4 py-3 text-end font-medium" scope="col">{shareTitle}</th>
+            </tr>
+        </thead>
+        <tbody class="divide-border divide-y">
+            {#each slices as slice (slice.index)}
+                <tr>
+                    <th class="text-body px-4 py-3 text-start font-normal" scope="row">{slice.label}</th>
+                    <td class="text-body px-4 py-3 text-end tabular-nums">{slice.text}</td>
+                    <td class="text-body px-4 py-3 text-end tabular-nums">{slice.shareText}</td>
+                </tr>
+            {/each}
+        </tbody>
+    </Table>
+</figure>
+
+<style>
+    /*
+     * The series colours an app may set, on the chart or on anything around
+     * it; read with a fallback (in util/chart.ts) and never declared here:
+     *   --zabi-chart-1 … --zabi-chart-6
+     */
+    .zabi-chart {
+        container-type: inline-size;
+    }
+
+    /* Side by side: the drawing, then a key that takes the rest of the width,
+       as a List does. Both start where the caption starts. */
+    .layout {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem 2rem;
+    }
+
+    .disc {
+        position: relative;
+        flex: none;
+        inline-size: 100%;
+    }
+
+    /* The middle of the ring, for the app's figure: centred, and never wider than the hole. */
+    .center {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 22%;
+        text-align: center;
+        line-height: 1.2;
+        pointer-events: none;
+    }
+
+    .slice {
+        fill: var(--_c);
+    }
+
+    /*
+     * The marks are glass, drawn: an SVG shape takes no backdrop blur, so the
+     * slices stay their own colour and the depth comes from a soft gradient
+     * and a barely-there edge, in the library's own terms.
+     *   the veil     --color-control-gradient-accent-start / -end, the veil of
+     *                a solid control that is darken-only in light and light at
+     *                the top in dark, so a slice never loses contrast to it
+     *   the rim      one pixel of light on the top of the outer edge, fading out
+     *                a third of the way down, and on the lower lip of a ring's
+     *                hole: the lightest neutral at 30%, the same in light and
+     *                dark, since the first series colours are the same in both
+     *   the sheen    the same light at a third of that, blurred, just under the
+     *                top edge
+     *   the shadow   the two shadows of the library's middle step (--shadow-md)
+     */
+    .pie {
+        filter: drop-shadow(0 1px 3px rgb(var(--shadow-color) / var(--shadow-opacity-contact)))
+            drop-shadow(0 6px 14px rgb(var(--shadow-color) / var(--shadow-opacity)));
+    }
+
+    .glass {
+        pointer-events: none;
+    }
+
+    .veil-top {
+        stop-color: var(--color-control-gradient-accent-start);
+    }
+
+    .veil-bottom {
+        stop-color: var(--color-control-gradient-accent-end);
+    }
+
+    .light {
+        stop-color: color-mix(in srgb, var(--zabi-base-50) 30%, transparent);
+    }
+
+    .light.off {
+        stop-opacity: 0;
+    }
+
+    /* Drawn on the outline and clipped to the shape, so the inner half shows: one pixel. */
+    .rim {
+        fill: none;
+        stroke-width: 2px;
+        vector-effect: non-scaling-stroke;
+    }
+
+    .sheen {
+        fill: none;
+        stroke-width: 3.5;
+        opacity: 0.35;
+    }
+
+    /* Flat where the library's materials are opaque: the same switches, the same reasons. */
+    @media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
+        .glass {
+            display: none;
+        }
+
+        .pie {
+            filter: none;
+        }
+    }
+
+    :global([data-materials="opaque"]) .glass {
+        display: none;
+    }
+
+    :global([data-materials="opaque"]) .pie {
+        filter: none;
+    }
+
+    /* Nothing yet: the empty track of a Progress, in the round. */
+    .none {
+        fill: var(--color-progress-track);
+        stroke: var(--color-progress-track-border);
+        stroke-width: 1;
+        vector-effect: non-scaling-stroke;
+    }
+
+    /* The rows of a List: a mark, the name, and what it comes to at the far
+       end, in columns that line up down the key. */
+    .key {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto auto;
+        flex: 1 1 0;
+        min-inline-size: 0;
+    }
+
+    .key li {
+        display: grid;
+        grid-column: 1 / -1;
+        grid-template-columns: subgrid;
+        align-items: center;
+        -moz-column-gap: 0.75rem;
+             column-gap: 0.75rem;
+        padding-block: 0.75rem;
+        border-block-end: 1px solid var(--zabi-list-divider-color, var(--color-border));
+    }
+
+    .key li:last-child {
+        border-block-end: 0;
+    }
+
+    .name {
+        overflow-wrap: anywhere;
+    }
+
+    .share {
+        min-inline-size: 2.5rem;
+        text-align: end;
+    }
+
+    .swatch {
+        inline-size: 0.625rem;
+        block-size: 0.625rem;
+        border-radius: var(--radius-pill);
+        background-color: var(--_c);
+    }
+
+    /* No room for both: the drawing in the middle, the key under it at full width. */
+    @container (max-width: 26rem) {
+        .layout {
+            flex-direction: column;
+            align-items: stretch;
+        }
+
+        .disc {
+            align-self: center;
+        }
+
+        .key {
+            flex: none;
+        }
+    }
+
+    /* Forced colours: the slices are the system's text colour, parted by the
+       gaps; the key lists them in the same order, clockwise from the top. */
+    @media (forced-colors: active) {
+        .slice {
+            fill: CanvasText;
+        }
+
+        .none {
+            fill: GrayText;
+        }
+
+        .swatch {
+            forced-color-adjust: none;
+            background-color: CanvasText;
+        }
+    }
+</style>

package/dist/molecules/PieChart.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type ChartDatum, type ChartFormat } from "../util/chart.js";
+/**
+ * A pie chart, or a ring with `donut`, drawn as plain SVG: parts of a
+ * whole, clockwise from twelve o'clock in the order given.
+ *
+ * It is a `figure`: the `label` is its caption, the drawing is hidden
+ * from assistive technology, and the same numbers are in a real table
+ * (off screen unless `showTable`). The key beside the drawing writes each
+ * slice's label, value and share, in the order of the slices, so no slice
+ * is told by its colour alone. Keep it to six slices or fewer: after six
+ * the colours repeat, and a pie with more is hard to read anyway.
+ *
+ * Beside the key when there is room for both, over it when there is not
+ * (the chart measures its own width, not the window's).
+ */
+type Props = Omit<HTMLAttributes<HTMLElement>, "class"> & {
+    /** The slices, in order: a `label`, a `value` (above zero), and a `color` of its own if it needs one. */
+    data: ChartDatum[];
+    /** A ring, not a full disc. */
+    donut?: boolean;
+    /** What stands in the middle of the ring (`donut`): the total, or the one share that matters. Read by assistive technology, so keep it to what the table does not already say or say it the same way. */
+    center?: Snippet;
+    /** How a value is written: `number` (default), `percent` (72 is "72 %"), or a function. */
+    format?: ChartFormat;
+    /** The widest the drawing gets, in px. It shrinks with its container. */
+    size?: number;
+    /** The caption, and what the chart is called. */
+    label: string;
+    /** Keeps the caption for assistive technology and takes it off the screen. */
+    labelHidden?: boolean;
+    /** The key beside the drawing: each slice's label, value and share. */
+    legend?: boolean;
+    /** Shows the data table under the chart; otherwise it is there for assistive technology only. */
+    showTable?: boolean;
+    /** The heading of the table's first column. */
+    categoryTitle?: string;
+    /** The heading of the table's value column. */
+    valueTitle?: string;
+    /** The heading of the table's share column. */
+    shareTitle?: string;
+    /** The language of the built-in number formats. Without it, the runtime's. */
+    locale?: string;
+    /** Stands the chart on a panel of the thick material (frosted glass), for a chart that floats over a wash, a tint or a picture. On a plain card it shows nothing: leave it off there. */
+    glass?: boolean;
+    class?: string;
+};
+declare const PieChart: import("svelte").Component<Props, {}, "">;
+type PieChart = ReturnType<typeof PieChart>;
+export default PieChart;

package/dist/molecules/PropsTable.svelte

@@ -1,40 +1,52 @@
 <script lang="ts">
+    import { mergeStrings } from "../util/ready-made-strings.js";
+    import { zabiStringsFor } from "../util/zabi-strings.js";
     import type { ComponentProp } from "../types/page.types";
     import Table from "../atoms/Table.svelte";
     import { cn } from "../util/cn.js";
+    import {
+        DEFAULT_PROPS_TABLE_STRINGS,
+        type PropsTableStrings,
+    } from "../util/ready-made-strings.js";
 
     interface Props {
         /** Extra classes for the host element. */
         class?: string;
         props: ComponentProp[];
         caption?: string;
+        /** The column headings, Yes and No, and the line for an empty table. */
+        strings?: Partial<PropsTableStrings>;
     }
 
-    let { class: className = "", props, caption = "Props / API" }: Props = $props();
+    let { class: className = "", props, caption = "Props / API", strings }: Props = $props();
+
+    /** The app-wide words for this component, from a `ZabiStringsProvider` above it, if there is one. */
+    const provided = zabiStringsFor("propsTable");
+    const text = $derived(mergeStrings(DEFAULT_PROPS_TABLE_STRINGS, provided(), strings));
 </script>
 
 {#if props.length === 0}
-    <div class={cn("rounded-control border border-border bg-base-50 px-4 py-4 text-sm text-description", className)}>
-        No documented props.
+    <div class={cn("rounded-control border border-border bg-card px-4 py-4 text-sm text-description", className)}>
+        {text.empty}
     </div>
 {:else}
     <Table caption={caption}>
         <thead>
-            <tr class="bg-base-50">
+            <tr class="bg-surface-elevated">
                 <th class="border-b border-border px-4 py-3 text-left font-semibold text-headline">
-                    Name
+                    {text.name}
                 </th>
                 <th class="border-b border-border px-4 py-3 text-left font-semibold text-headline">
-                    Type
+                    {text.type}
                 </th>
                 <th class="border-b border-border px-4 py-3 text-left font-semibold text-headline">
-                    Required
+                    {text.required}
                 </th>
                 <th class="border-b border-border px-4 py-3 text-left font-semibold text-headline">
-                    Default
+                    {text.default}
                 </th>
                 <th class="border-b border-border px-4 py-3 text-left font-semibold text-headline">
-                    Description
+                    {text.description}
                 </th>
             </tr>
         </thead>
@@ -48,7 +60,7 @@
                         {prop.type}
                     </td>
                     <td class="border-b border-border px-4 py-3 text-description">
-                        {prop.required ? "Yes" : "No"}
+                        {prop.required ? text.yes : text.no}
                     </td>
                     <td class="border-b border-border px-4 py-3 text-description">
                         {prop.defaultValue || "—"}

package/dist/molecules/PropsTable.svelte.d.ts

@@ -1,9 +1,12 @@
 import type { ComponentProp } from "../types/page.types";
+import { type PropsTableStrings } from "../util/ready-made-strings.js";
 interface Props {
     /** Extra classes for the host element. */
     class?: string;
     props: ComponentProp[];
     caption?: string;
+    /** The column headings, Yes and No, and the line for an empty table. */
+    strings?: Partial<PropsTableStrings>;
 }
 declare const PropsTable: import("svelte").Component<Props, {}, "">;
 type PropsTable = ReturnType<typeof PropsTable>;