zabi-components 8.1.0 → 9.0.0

package/dist/atoms/Textarea.svelte

@@ -3,7 +3,7 @@
     import type { SemanticVariant, SizeVariant } from '../types/variants.js';
     import { generateId } from "../util/ssr-safe.js";
     import { cn } from "../util/cn.js";
-    import { fieldDescribedBy, fieldMessageState } from "../util/field.js";
+    import { fieldDescribedBy, fieldMessageState, type TextareaCount } from "../util/field.js";
     import FieldMessages from "./FieldMessages.svelte";
 
     /**
@@ -34,6 +34,16 @@
         disabled?: boolean;
         loading?: boolean;
         rows?: number;
+        /**
+         * The resize grip. `auto` (default): the browser's vertical grip with a mouse or
+         * trackpad, none on a touch screen, where dragging it scrolls the page. `vertical`
+         * shows it everywhere, `none` never. With `autogrow` there is no grip.
+         */
+        resize?: 'auto' | 'none' | 'vertical';
+        /** The field grows with its content, from `rows` up to `maxRows`, and scrolls after that. */
+        autogrow?: boolean;
+        /** The tallest an `autogrow` field gets, in rows. Without it the field has no limit. */
+        maxRows?: number;
         size?: SizeVariant;
         variant?: SemanticVariant;
         /** Status text under the field. Shown with a `success`, `warning` or `error` variant; for neutral help, use `hint`. */
@@ -42,6 +52,16 @@
         hint?: string;
         /** An error under the field. It marks the field invalid and is announced; it wins over `variant` and `message`. */
         error?: string;
+        /**
+         * A character count under the field, at the end of the line the hint is on. It needs
+         * `maxlength`; without one nothing is shown. It is part of the field's description
+         * (`aria-describedby`) and is not a live region, so it is not read out at every key.
+         */
+        count?: boolean;
+        /** The count is shown from this many characters on. `0` (default): always. */
+        countFrom?: number;
+        /** The words of the count, for the page's language. Default: "12 / 2000". */
+        countText?: (count: TextareaCount) => string;
         oninput?: (event: Event) => void;
         /** Ids of other elements that describe the field. The hint and the message are added after them. */
         "aria-describedby"?: string | null;
@@ -59,11 +79,17 @@
         disabled = false,
         loading = false,
         rows = 4,
+        resize = 'auto',
+        autogrow = false,
+        maxRows,
         size = 'md',
         variant = 'default',
         message = '',
         hint = '',
         error = '',
+        count = false,
+        countFrom = 0,
+        countText,
         oninput,
         'aria-describedby': describedBy,
         ...restProps
@@ -86,6 +112,26 @@
 
     const status = $derived(fieldMessageState({ variant, message, hint, error }));
 
+    // The count: only with a `maxlength`, and only once `countFrom` is reached.
+    // The length is the one `maxlength` counts (UTF-16 units).
+    const countMax = $derived(Number(restProps.maxlength));
+    const countLength = $derived((value ?? '').length);
+    const showCount = $derived(
+        count && Number.isFinite(countMax) && countMax > 0 && countLength >= countFrom,
+    );
+    const countLabel = $derived.by(() => {
+        if (!showCount) return '';
+        const state = { length: countLength, max: countMax, remaining: Math.max(0, countMax - countLength) };
+        return countText ? countText(state) : `${state.length} / ${state.max}`;
+    });
+    const countId = $derived(`${textareaId}-count`);
+    // The caller's ids, the hint and the message, then the count.
+    const fieldDescription = $derived(
+        [fieldDescribedBy(textareaId, status, describedBy), showCount ? countId : '']
+            .filter(Boolean)
+            .join(' ') || undefined,
+    );
+
     const variantClass = $derived(() => {
         return status.variant === 'success'
             ? 'border-success focus-visible:border-success'
@@ -96,12 +142,44 @@
                 : 'border-input-border enabled:hover:border-input-border-hover';
     });
 
+    const resizeClass = $derived(
+        autogrow || resize === 'none'
+            ? 'resize-none'
+            : resize === 'vertical'
+              ? 'resize-y'
+              : 'resize-y pointer-coarse:resize-none',
+    );
+
+    // Autogrow: `field-sizing: content` where the browser has it, held between
+    // `rows` and `maxRows` lines (`leading-6`, plus `py-2` and the two borders,
+    // since the box is border-box). Elsewhere the height is measured from the
+    // content after each change; the same two limits clamp it.
+    const linesHeight = (lines: number) => `calc(${lines * 1.5 + 1}rem + 2px)`;
+    const minHeight = $derived(autogrow ? linesHeight(Math.max(1, rows)) : undefined);
+    const maxHeight = $derived(
+        autogrow && maxRows !== undefined ? linesHeight(Math.max(rows, maxRows)) : undefined,
+    );
+
+    let element: HTMLTextAreaElement | undefined = $state();
+
+    $effect(() => {
+        void value;
+        if (!autogrow || !element) return;
+        if (typeof CSS !== 'undefined' && CSS.supports?.('field-sizing', 'content')) return;
+        const field = element;
+        field.style.height = 'auto';
+        field.style.height = `${field.scrollHeight + field.offsetHeight - field.clientHeight}px`;
+        return () => {
+            field.style.height = '';
+        };
+    });
+
     // 16px below `sm`: iOS Safari zooms the page when a focused field is smaller.
     const textareaClasses = $derived(() => {
         const baseClasses =
-            'focus-ring w-full border bg-input hover:bg-input-hover focus-visible:bg-input-focus disabled:bg-input-disabled rounded-control transition-colors duration-150 placeholder:text-input-placeholder text-body focus:outline-none focus-visible:outline-none disabled:text-action-disabled-text disabled:cursor-not-allowed resize-y px-3 py-2 text-sm max-sm:text-base leading-6';
+            'focus-ring w-full border bg-input hover:bg-input-hover focus-visible:bg-input-focus disabled:bg-input-disabled rounded-control transition-colors duration-150 placeholder:text-input-placeholder text-body focus:outline-none focus-visible:outline-none disabled:text-action-disabled-text disabled:cursor-not-allowed px-3 py-2 text-sm max-sm:text-base leading-6';
 
-        return cn(`${baseClasses} ${variantClass()} ${className}`);
+        return cn(`${baseClasses} ${resizeClass} ${variantClass()} ${className}`);
     });
 
     const labelClasses = $derived(
@@ -121,6 +199,7 @@
     {/if}
     <div class="relative">
         <textarea
+            bind:this={element}
             id={textareaId}
             {name}
             bind:value
@@ -129,11 +208,15 @@
             disabled={isDisabled}
             {rows}
             class={textareaClasses()}
+            style:field-sizing={autogrow ? 'content' : undefined}
+            style:min-height={minHeight}
+            style:max-height={maxHeight}
+            style:overflow-y={maxHeight ? 'auto' : undefined}
             oninput={handleInput}
             aria-invalid={status.variant === 'error' ? 'true' : undefined}
             aria-required={required ? 'true' : undefined}
             aria-busy={loading ? 'true' : undefined}
-            aria-describedby={fieldDescribedBy(textareaId, status, describedBy)}
+            aria-describedby={fieldDescription}
             {...restProps}
         ></textarea>
         {#if loading}
@@ -147,5 +230,17 @@
             </span>
         {/if}
     </div>
-    <FieldMessages fieldId={textareaId} {status} {hint} gap="mt-1" />
+    {#if showCount}
+        <!-- The count ends the line the hint starts. Not a live region: it is read with the field. -->
+        <div class="flex items-start gap-3">
+            <div class="min-w-0 flex-1">
+                <FieldMessages fieldId={textareaId} {status} {hint} gap="mt-1" />
+            </div>
+            <p id={countId} class="mt-1 shrink-0 text-sm text-description tabular-nums" data-textarea-count>
+                {countLabel}
+            </p>
+        </div>
+    {:else}
+        <FieldMessages fieldId={textareaId} {status} {hint} gap="mt-1" />
+    {/if}
 </div>

package/dist/atoms/Textarea.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
 import type { SemanticVariant, SizeVariant } from '../types/variants.js';
+import { type TextareaCount } from "../util/field.js";
 /**
  * Other attributes (`autocomplete`, `inputmode`, `maxlength`,
  * `enterkeyhint`, `data-*`, `onchange`, ...) land on the `<textarea>`.
@@ -16,6 +17,16 @@ type Props = Omit<HTMLTextareaAttributes, 'class' | 'value' | 'id' | 'name' | 'p
     disabled?: boolean;
     loading?: boolean;
     rows?: number;
+    /**
+     * The resize grip. `auto` (default): the browser's vertical grip with a mouse or
+     * trackpad, none on a touch screen, where dragging it scrolls the page. `vertical`
+     * shows it everywhere, `none` never. With `autogrow` there is no grip.
+     */
+    resize?: 'auto' | 'none' | 'vertical';
+    /** The field grows with its content, from `rows` up to `maxRows`, and scrolls after that. */
+    autogrow?: boolean;
+    /** The tallest an `autogrow` field gets, in rows. Without it the field has no limit. */
+    maxRows?: number;
     size?: SizeVariant;
     variant?: SemanticVariant;
     /** Status text under the field. Shown with a `success`, `warning` or `error` variant; for neutral help, use `hint`. */
@@ -24,6 +35,16 @@ type Props = Omit<HTMLTextareaAttributes, 'class' | 'value' | 'id' | 'name' | 'p
     hint?: string;
     /** An error under the field. It marks the field invalid and is announced; it wins over `variant` and `message`. */
     error?: string;
+    /**
+     * A character count under the field, at the end of the line the hint is on. It needs
+     * `maxlength`; without one nothing is shown. It is part of the field's description
+     * (`aria-describedby`) and is not a live region, so it is not read out at every key.
+     */
+    count?: boolean;
+    /** The count is shown from this many characters on. `0` (default): always. */
+    countFrom?: number;
+    /** The words of the count, for the page's language. Default: "12 / 2000". */
+    countText?: (count: TextareaCount) => string;
     oninput?: (event: Event) => void;
     /** Ids of other elements that describe the field. The hint and the message are added after them. */
     "aria-describedby"?: string | null;

package/dist/atoms/TimeColumn.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">
+    import { onMount, tick } from "svelte";
+    import { cn } from "../util/cn.js";
+    import type { TimeChoice } from "../util/temporal-field.js";
+
+    /**
+     * One scrollable column of the time picker in TimeField: the hours, or the
+     * minutes. Internal: it is not exported from the package.
+     *
+     * A listbox of 44px rows. One row is the Tab stop (the chosen one, else
+     * the first); Up and Down, Home and End move between rows, Enter and
+     * Space choose the focused one, and typing digits jumps to a row. A row
+     * that is out of range stays focusable and says `aria-disabled`. With
+     * nothing chosen, `openAt` is the row the column stands at and the keyboard
+     * starts from; it is not marked chosen.
+     */
+    interface Props {
+        /** Accessible name of the listbox. */
+        label: string;
+        options: TimeChoice[];
+        /** The `value` of the chosen option, or `""`. */
+        selected: string;
+        onselect: (value: string) => void;
+        /** The `value` of the row to stand at while nothing is chosen. It is not chosen. */
+        openAt?: string;
+    }
+
+    let { label, options, selected, onselect, openAt = "" }: Props = $props();
+
+    let box: HTMLDivElement | undefined = $state();
+    /** The row that takes Tab: where the keyboard was last, else the chosen one, else the first. */
+    let focusedValue = $state<string | null>(null);
+
+    const tabStop = $derived(
+        options.some((option) => option.value === focusedValue)
+            ? focusedValue
+            : options.some((option) => option.value === selected)
+              ? selected
+              : options.some((option) => option.value === openAt)
+                ? openAt
+                : (options[0]?.value ?? null),
+    );
+
+    /**
+     * The chosen row, else the `openAt` one, is put in the middle of the
+     * column as it opens, and again when the choice changes (a new hour can move the minute). Measured
+     * from the two boxes, not `offsetTop`, which counts from the sheet. Set
+     * straight on `scrollTop`: nothing here scrolls smoothly, so there is no
+     * motion for `prefers-reduced-motion` to remove.
+     */
+    function centreSelected() {
+        const column = box;
+        const row =
+            column?.querySelector<HTMLElement>('[aria-selected="true"]') ??
+            (openAt ? rows().find((element) => element.dataset.value === openAt) : undefined);
+        if (!column || !row || !column.clientHeight) return;
+        const offset = row.getBoundingClientRect().top - column.getBoundingClientRect().top;
+        column.scrollTop += offset - (column.clientHeight - row.offsetHeight) / 2;
+    }
+
+    onMount(centreSelected);
+
+    $effect(() => {
+        void selected;
+        void tick().then(centreSelected);
+    });
+
+    const rows = () => [...(box?.querySelectorAll<HTMLElement>('[role="option"]') ?? [])];
+
+    function focusRow(value: string | undefined) {
+        if (value === undefined) return;
+        focusedValue = value;
+        const row = rows().find((element) => element.dataset.value === value);
+        row?.focus();
+        row?.scrollIntoView?.({ block: "nearest" });
+    }
+
+    let typed = "";
+    let typedTimer: ReturnType<typeof setTimeout> | undefined;
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.altKey || event.ctrlKey || event.metaKey) return;
+        const values = options.map((option) => option.value);
+        const current = values.indexOf((event.target as HTMLElement | null)?.closest<HTMLElement>("[data-value]")?.dataset.value ?? "");
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            focusRow(values[Math.min(current + 1, values.length - 1)]);
+        } else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            focusRow(values[Math.max(current - 1, 0)]);
+        } else if (event.key === "Home") {
+            event.preventDefault();
+            focusRow(values[0]);
+        } else if (event.key === "End") {
+            event.preventDefault();
+            focusRow(values[values.length - 1]);
+        } else if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            const option = options[current];
+            if (option && !option.disabled) onselect(option.value);
+        } else if (/^[0-9]$/.test(event.key)) {
+            event.preventDefault();
+            typed += event.key;
+            clearTimeout(typedTimer);
+            typedTimer = setTimeout(() => (typed = ""), 800);
+            // "7" is 07, "30" is 30, "1" then "9" is 19. The value is the 24-hour one, whatever the label says.
+            const hit =
+                options.find((option) => option.value.startsWith(typed)) ??
+                options.find((option) => Number(option.value) === Number(typed)) ??
+                options.find((option) => option.value.startsWith(typed.slice(-1)));
+            if (hit) focusRow(hit.value);
+        }
+    }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+    bind:this={box}
+    role="listbox"
+    aria-label={label}
+    tabindex="-1"
+    data-time-column
+    data-sheet-no-drag
+    class="h-44 min-w-0 flex-1 overflow-y-auto overscroll-contain rounded-control border border-input-border bg-input p-1"
+    onkeydown={handleKeydown}
+>
+    {#each options as option (option.value)}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <div
+            role="option"
+            data-value={option.value}
+            aria-selected={option.value === selected}
+            aria-disabled={option.disabled ? "true" : undefined}
+            tabindex={option.value === tabStop ? 0 : -1}
+            class={cn(
+                "focus-ring flex h-11 shrink-0 cursor-pointer items-center justify-center rounded-control text-base transition-colors duration-(--duration-base) motion-reduce:transition-none focus:outline-none focus-visible:outline-none",
+                // Two class lists, never both: the hand-written colour classes
+                // sit outside the cascade layers, so a variant cannot beat them.
+                option.value === selected
+                    ? "bg-action-primary text-action-primary font-semibold"
+                    : "text-body hover:bg-input-hover",
+                "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent",
+            )}
+            onfocus={() => (focusedValue = option.value)}
+            onclick={() => !option.disabled && onselect(option.value)}
+        >
+            {option.label}
+        </div>
+    {/each}
+</div>

package/dist/atoms/TimeColumn.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { TimeChoice } from "../util/temporal-field.js";
+/**
+ * One scrollable column of the time picker in TimeField: the hours, or the
+ * minutes. Internal: it is not exported from the package.
+ *
+ * A listbox of 44px rows. One row is the Tab stop (the chosen one, else
+ * the first); Up and Down, Home and End move between rows, Enter and
+ * Space choose the focused one, and typing digits jumps to a row. A row
+ * that is out of range stays focusable and says `aria-disabled`. With
+ * nothing chosen, `openAt` is the row the column stands at and the keyboard
+ * starts from; it is not marked chosen.
+ */
+interface Props {
+    /** Accessible name of the listbox. */
+    label: string;
+    options: TimeChoice[];
+    /** The `value` of the chosen option, or `""`. */
+    selected: string;
+    onselect: (value: string) => void;
+    /** The `value` of the row to stand at while nothing is chosen. It is not chosen. */
+    openAt?: string;
+}
+declare const TimeColumn: import("svelte").Component<Props, {}, "">;
+type TimeColumn = ReturnType<typeof TimeColumn>;
+export default TimeColumn;

package/dist/atoms/TimeField.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { HTMLInputAttributes } from "svelte/elements";
     import type { SizeVariant } from "../types/variants.js";
+    import type { TimeFieldStrings } from "../util/temporal-field.js";
     import TemporalField from "./TemporalField.svelte";
 
     /**
@@ -11,15 +12,25 @@
      * `HH:mm` (`HH:mm:ss` when `step` asks for seconds), or `""` while empty,
      * whatever the field shows.
      *
-     * What the field shows is the browser's decision: 24-hour or 12-hour
-     * with AM and PM, by the settings of the browser or device, not of the
-     * page. To show a time as text in the page's language, use `formatTime`:
+     * What the field shows is the browser's decision, unless it has a
+     * `locale`: without one, 24-hour or 12-hour with AM and PM, by the
+     * settings of the browser or device, not of the page. To show a time as
+     * text in the page's language, use `formatTime`:
      *
      * ```svelte
      * <TimeField label="Starts" bind:value={time} step={300} />
      * <p>{formatTime(time, "sv")}</p>  <!-- 19:00 -->
      * ```
      *
+     * With `locale`, the field shows the value in that language ("18:30" in
+     * Swedish, never "06:30 PM") and its own picker opens: two columns in a
+     * BottomSheet, hours (written as the locale writes an hour) and minutes
+     * (every `step`, five minutes without one), and Done. A value that is not
+     * on the step is kept as its own minute. A `step` under 60 seconds, or
+     * `"any"`, uses the platform's picker instead, as does `picker="native"`.
+     * Until the page has run, and without scripts, it is the native input
+     * as above and submits as before.
+     *
      * Other attributes (`autocomplete`, `data-*`, `onchange`, ...) land on the
      * `<input>`.
      */
@@ -54,6 +65,26 @@
         size?: SizeVariant;
         /** Extra classes for the `<input>`. */
         class?: string;
+        /**
+         * Language of the field, as a BCP 47 tag (`sv`, `en-GB`) or a list of them. With it the
+         * field shows the value in that language, whatever the browser's is, and opens the
+         * library's own picker; see above. Left out, the field is the native input.
+         */
+        locale?: string | string[];
+        /** With `locale`: how the value is shown, as options of `Intl.DateTimeFormat`. Default: formatTime gives for the locale. */
+        format?: Intl.DateTimeFormatOptions;
+        /** With `locale`: shown in the placeholder colour while the field is empty. */
+        placeholder?: string;
+        /** With `locale`: `library` (default) opens the library's time columns in a sheet; `native` opens the platform's own picker. */
+        picker?: "library" | "native";
+        /** With `locale`: the words the field says; replace any of them to translate. */
+        strings?: Partial<TimeFieldStrings>;
+        /**
+         * With `locale`, while the field is empty: the time the library's columns stand at when
+         * the sheet opens, as `HH:mm` (`"18:30"`). It is only where to scroll to: no row is
+         * chosen and `value` stays empty until the person chooses. Left out: now, on the step.
+         */
+        openAt?: string;
     };
 
     let {
@@ -72,6 +103,12 @@
         readonly = false,
         size = "md",
         class: className = "",
+        locale,
+        format,
+        placeholder,
+        picker = "library",
+        strings,
+        openAt,
         ...restProps
     }: Props = $props();
 
@@ -104,5 +141,11 @@
     {readonly}
     {size}
     class={className}
+    {locale}
+    {format}
+    {placeholder}
+    {picker}
+    {strings}
+    {openAt}
     {...restProps}
 />

package/dist/atoms/TimeField.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { HTMLInputAttributes } from "svelte/elements";
 import type { SizeVariant } from "../types/variants.js";
+import type { TimeFieldStrings } from "../util/temporal-field.js";
 /**
  * A time of day, picked with the device's own time picker and styled
  * like Input.
@@ -8,15 +9,25 @@ import type { SizeVariant } from "../types/variants.js";
  * `HH:mm` (`HH:mm:ss` when `step` asks for seconds), or `""` while empty,
  * whatever the field shows.
  *
- * What the field shows is the browser's decision: 24-hour or 12-hour
- * with AM and PM, by the settings of the browser or device, not of the
- * page. To show a time as text in the page's language, use `formatTime`:
+ * What the field shows is the browser's decision, unless it has a
+ * `locale`: without one, 24-hour or 12-hour with AM and PM, by the
+ * settings of the browser or device, not of the page. To show a time as
+ * text in the page's language, use `formatTime`:
  *
  * ```svelte
  * <TimeField label="Starts" bind:value={time} step={300} />
  * <p>{formatTime(time, "sv")}</p>  <!-- 19:00 -->
  * ```
  *
+ * With `locale`, the field shows the value in that language ("18:30" in
+ * Swedish, never "06:30 PM") and its own picker opens: two columns in a
+ * BottomSheet, hours (written as the locale writes an hour) and minutes
+ * (every `step`, five minutes without one), and Done. A value that is not
+ * on the step is kept as its own minute. A `step` under 60 seconds, or
+ * `"any"`, uses the platform's picker instead, as does `picker="native"`.
+ * Until the page has run, and without scripts, it is the native input
+ * as above and submits as before.
+ *
  * Other attributes (`autocomplete`, `data-*`, `onchange`, ...) land on the
  * `<input>`.
  */
@@ -48,6 +59,26 @@ type Props = Omit<HTMLInputAttributes, "class" | "type" | "value" | "size" | "mi
     size?: SizeVariant;
     /** Extra classes for the `<input>`. */
     class?: string;
+    /**
+     * Language of the field, as a BCP 47 tag (`sv`, `en-GB`) or a list of them. With it the
+     * field shows the value in that language, whatever the browser's is, and opens the
+     * library's own picker; see above. Left out, the field is the native input.
+     */
+    locale?: string | string[];
+    /** With `locale`: how the value is shown, as options of `Intl.DateTimeFormat`. Default: formatTime gives for the locale. */
+    format?: Intl.DateTimeFormatOptions;
+    /** With `locale`: shown in the placeholder colour while the field is empty. */
+    placeholder?: string;
+    /** With `locale`: `library` (default) opens the library's time columns in a sheet; `native` opens the platform's own picker. */
+    picker?: "library" | "native";
+    /** With `locale`: the words the field says; replace any of them to translate. */
+    strings?: Partial<TimeFieldStrings>;
+    /**
+     * With `locale`, while the field is empty: the time the library's columns stand at when
+     * the sheet opens, as `HH:mm` (`"18:30"`). It is only where to scroll to: no row is
+     * chosen and `value` stays empty until the person chooses. Left out: now, on the step.
+     */
+    openAt?: string;
 };
 declare const TimeField: import("svelte").Component<Props, {}, "value">;
 type TimeField = ReturnType<typeof TimeField>;

package/dist/atoms/Toast.svelte

@@ -33,15 +33,16 @@
     let isVisible = $state(true);
 
     const typeClasses: Record<NonNullable<Props['type']>, string> = {
-        success: 'border-success bg-surface-overlay text-success',
-        error: 'border-error bg-surface-overlay text-error',
-        warning: 'border-warning bg-surface-overlay text-warning',
-        info: 'border-border bg-surface-overlay text-body',
+        success: 'border-success text-success-text',
+        error: 'border-error text-error-text',
+        warning: 'border-warning text-warning-text',
+        // The material has its own rim: no second edge on the neutral toast.
+        info: 'border-transparent text-body',
     };
 
     // `min(18rem, 100%)`: 18rem is wider than a 320px screen once the text is enlarged.
     const cardClasses =
-        'box-border w-full min-w-[min(18rem,100%)] max-w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-control border p-4 shadow-lg';
+        'box-border w-full min-w-[min(18rem,100%)] max-w-[min(24rem,calc(100vw-2rem))] overflow-hidden rounded-control border p-4 material-thick';
 
     function closeToast(event: Event) {
         isVisible = false;