@loidolt/theme-svelte 0.2.0 → 0.3.0

package/dist/components/Drawer.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { DialogContentProps } from 'bits-ui';
+  import type { HeadingLevel, TriggerChildProps } from '../types.js';
+  import { cx } from '../utils.js';
+
+  type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** Edge the panel is anchored to. `left`/`right` size by width, `top`/`bottom` by height. */
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    /** Trigger contents, rendered inside a button styled with `triggerClass`. */
+    trigger?: Snippet;
+    /** Full control of the trigger element — receives the props Bits needs on it. */
+    triggerChild?: Snippet<[TriggerChildProps]>;
+    triggerClass?: string;
+    children: Snippet;
+    footer?: Snippet;
+    headingLevel?: HeadingLevel;
+    showClose?: boolean;
+    closeLabel?: string;
+    /** `class` lands on the portaled Content element. */
+    class?: string;
+    overlayClass?: string;
+    onOpenChange?: (open: boolean) => void;
+    ref?: HTMLElement | null;
+  };
+
+  let {
+    open = $bindable(false),
+    title,
+    description,
+    side = 'left',
+    trigger,
+    triggerChild,
+    triggerClass = 'ldt-button',
+    children,
+    footer,
+    headingLevel = 2,
+    showClose = true,
+    closeLabel = 'Close',
+    class: className,
+    overlayClass,
+    onOpenChange,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<!--
+  A modal panel anchored to one edge — the narrow-viewport form of a sidebar, and the usual home
+  for navigation that has no room to sit in the topbar. Same primitive as `Dialog`, so focus is
+  trapped, Escape closes, and the page behind is inert; set `--ldt-drawer-size` for the measure
+  across the anchored edge.
+-->
+<DialogPrimitive.Root bind:open {onOpenChange}>
+  {#if triggerChild}<DialogPrimitive.Trigger
+      >{#snippet child(childProps)}{@render triggerChild(
+          childProps
+        )}{/snippet}</DialogPrimitive.Trigger
+    >{:else if trigger}<DialogPrimitive.Trigger class={triggerClass}
+      >{@render trigger()}</DialogPrimitive.Trigger
+    >{/if}
+  <DialogPrimitive.Portal>
+    <DialogPrimitive.Overlay class={cx('ldt-overlay', overlayClass)} />
+    <DialogPrimitive.Content
+      bind:ref
+      class={cx('ldt-drawer', `ldt-drawer--${side}`, className)}
+      {...rest}
+    >
+      <header class="ldt-drawer__header">
+        <div>
+          <DialogPrimitive.Title level={headingLevel} class="ldt-drawer__title"
+            >{title}</DialogPrimitive.Title
+          >{#if description}<DialogPrimitive.Description class="ldt-drawer__description"
+              >{description}</DialogPrimitive.Description
+            >{/if}
+        </div>
+        {#if showClose}<DialogPrimitive.Close
+            class="ldt-button ldt-icon-button ldt-button--ghost"
+            aria-label={closeLabel}>×</DialogPrimitive.Close
+          >{/if}
+      </header>
+      <div class="ldt-drawer__body ldt-scrollbar">{@render children()}</div>
+      {#if footer}<footer class="ldt-drawer__footer">{@render footer()}</footer>{/if}
+    </DialogPrimitive.Content>
+  </DialogPrimitive.Portal>
+</DialogPrimitive.Root>

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

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { DialogContentProps } from 'bits-ui';
+import type { HeadingLevel, TriggerChildProps } from '../types.js';
+type Props = Omit<DialogContentProps, 'children' | 'class' | 'child'> & {
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** Edge the panel is anchored to. `left`/`right` size by width, `top`/`bottom` by height. */
+    side?: 'left' | 'right' | 'top' | 'bottom';
+    /** Trigger contents, rendered inside a button styled with `triggerClass`. */
+    trigger?: Snippet;
+    /** Full control of the trigger element — receives the props Bits needs on it. */
+    triggerChild?: Snippet<[TriggerChildProps]>;
+    triggerClass?: string;
+    children: Snippet;
+    footer?: Snippet;
+    headingLevel?: HeadingLevel;
+    showClose?: boolean;
+    closeLabel?: string;
+    /** `class` lands on the portaled Content element. */
+    class?: string;
+    overlayClass?: string;
+    onOpenChange?: (open: boolean) => void;
+    ref?: HTMLElement | null;
+};
+declare const Drawer: import("svelte").Component<Props, {}, "ref" | "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/DropdownMenu.svelte

@@ -58,13 +58,13 @@
         {#if item.href}
           <a {...props} href={item.href}
             >{#if item.icon}{@render item.icon()}{/if}<span>{item.label}</span>{#if item.hint}<span
-                aria-hidden="true">{item.hint}</span
+                class="ldt-menu__hint">{item.hint}</span
               >{/if}</a
           >
         {:else}
           <button {...props} type="button"
             >{#if item.icon}{@render item.icon()}{/if}<span>{item.label}</span>{#if item.hint}<span
-                aria-hidden="true">{item.hint}</span
+                class="ldt-menu__hint">{item.hint}</span
               >{/if}</button
           >
         {/if}

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

@@ -2,7 +2,7 @@ import { DropdownMenu as MenuPrimitive } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import type { Alignment, MenuItem, Placement, TriggerChildProps } from '../types.js';
 declare function $$render<T extends string = string>(): {
-    props: Omit<MenuPrimitive.ContentProps, "class" | "children" | "child"> & {
+    props: Omit<MenuPrimitive.ContentProps, "children" | "class" | "child"> & {
         open?: boolean;
         /** Heading rendered above `items`, associated with them via a menu group. */
         groupLabel?: string;

package/dist/components/EmptyState.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { HeadingLevel } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    /** What to do about it. An empty state without a next step is just a blank screen. */
+    description?: string;
+    /** Leading visual, sized by the consumer. */
+    icon?: Snippet;
+    /** Buttons or links offering the next step. */
+    actions?: Snippet;
+    headingLevel?: HeadingLevel;
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    title,
+    description,
+    icon,
+    actions,
+    headingLevel = 3,
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<div bind:this={ref} class={cx('ldt-empty-state', className)} {...rest}>
+  {#if icon}<div class="ldt-empty-state__icon" aria-hidden="true">{@render icon()}</div>{/if}
+  <svelte:element this={`h${headingLevel}`} class="ldt-empty-state__title">{title}</svelte:element>
+  {#if description}<p class="ldt-empty-state__description">{description}</p>{/if}
+  {#if children}{@render children()}{/if}
+  {#if actions}<div class="ldt-empty-state__actions">{@render actions()}</div>{/if}
+</div>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { HeadingLevel } from '../types.js';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    title: string;
+    /** What to do about it. An empty state without a next step is just a blank screen. */
+    description?: string;
+    /** Leading visual, sized by the consumer. */
+    icon?: Snippet;
+    /** Buttons or links offering the next step. */
+    actions?: Snippet;
+    headingLevel?: HeadingLevel;
+    class?: string;
+    children?: Snippet;
+    ref?: HTMLDivElement | null;
+}
+declare const EmptyState: import("svelte").Component<Props, {}, "ref">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/Fieldset.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLFieldsetAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends HTMLFieldsetAttributes {
+    /** Defaults to an SSR-stable generated id, used to wire the description and error. */
+    id?: string;
+    /** Visible group label, rendered as a `<legend>`. */
+    legend: string;
+    description?: string;
+    error?: string;
+    optional?: boolean;
+    /** Text of the "optional" marker, for localisation. */
+    optionalText?: string;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLFieldSetElement | null;
+  }
+
+  const generatedId = $props.id();
+
+  let {
+    id = generatedId,
+    legend,
+    description,
+    error,
+    optional = false,
+    optionalText = 'Optional',
+    class: className,
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const describedBy = $derived(
+    [description && `${id}-description`, error && `${id}-error`].filter(Boolean).join(' ') ||
+      undefined
+  );
+</script>
+
+<!--
+  `Field` wires one control; `Fieldset` wires a group of them. The description and error hang off
+  the `<fieldset>` rather than off each control: grouping context is announced once on entry, so
+  a shared message stays shared instead of repeating on every checkbox in the set.
+-->
+<fieldset
+  bind:this={ref}
+  {id}
+  class={cx('ldt-fieldset', className)}
+  aria-describedby={describedBy}
+  {...rest}
+>
+  <legend class="ldt-legend"
+    ><span>{legend}</span>{#if optional}<small>{optionalText}</small>{/if}</legend
+  >
+  <div class="ldt-fieldset__body">{@render children()}</div>
+  {#if description}<p class="ldt-field__description" id={`${id}-description`}>{description}</p>{/if}
+  {#if error}<p class="ldt-field__error" id={`${id}-error`} role="alert">{error}</p>{/if}
+</fieldset>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLFieldsetAttributes } from 'svelte/elements';
+interface Props extends HTMLFieldsetAttributes {
+    /** Defaults to an SSR-stable generated id, used to wire the description and error. */
+    id?: string;
+    /** Visible group label, rendered as a `<legend>`. */
+    legend: string;
+    description?: string;
+    error?: string;
+    optional?: boolean;
+    /** Text of the "optional" marker, for localisation. */
+    optionalText?: string;
+    class?: string;
+    children: Snippet;
+    ref?: HTMLFieldSetElement | null;
+}
+declare const Fieldset: import("svelte").Component<Props, {}, "ref">;
+type Fieldset = ReturnType<typeof Fieldset>;
+export default Fieldset;

package/dist/components/IconButton.svelte

@@ -34,7 +34,7 @@
   {disabled}
   class={cx(
     'ldt-button ldt-icon-button',
-    `ldt-button--${variant}`,
+    variant !== 'default' && `ldt-button--${variant}`,
     size !== 'md' && `ldt-button--${size}`,
     className
   )}

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

@@ -6,6 +6,6 @@ interface Props extends Omit<HTMLInputAttributes, 'value'> {
     class?: string;
     ref?: HTMLInputElement | null;
 }
-declare const Input: import("svelte").Component<Props, {}, "ref" | "value">;
+declare const Input: import("svelte").Component<Props, {}, "value" | "ref">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/NavMenu.svelte

@@ -1,10 +1,11 @@
 <script lang="ts" generics="T extends string = string">
   import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
   import DropdownMenu from './DropdownMenu.svelte';
   import type { Alignment, MenuItem, Placement } from '../types.js';
   import { cx } from '../utils.js';
 
-  interface Props {
+  interface Props extends Omit<HTMLButtonAttributes, 'children' | 'class' | 'type'> {
     open?: boolean;
     /** Trigger text. */
     label: string;
@@ -36,11 +37,15 @@
     menuClass,
     onSelect,
     onOpenChange,
+    ...rest
   }: Props = $props();
 </script>
 
 {#snippet navTrigger({ props }: { props: Record<string, unknown> })}
+  <!-- `rest` first: the menu's trigger wiring (from `props`) and this component's own
+       attributes are policy and must win over forwarded attributes. -->
   <button
+    {...rest}
     {...props}
     type="button"
     class={cx('ldt-nav-menu', active && 'ldt-nav-menu--active', className)}

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

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { Alignment, MenuItem, Placement } from '../types.js';
 declare function $$render<T extends string = string>(): {
-    props: {
+    props: Omit<HTMLButtonAttributes, "children" | "class" | "type"> & {
         open?: boolean;
         /** Trigger text. */
         label: string;

package/dist/components/NumberField.svelte

@@ -29,7 +29,9 @@
     decrementLabel = (name) => `Decrease ${name}`,
     incrementLabel = (name) => `Increase ${name}`,
     boxed = false,
+    disabled = false,
     onValueChange,
+    onchange,
     class: className,
     inputClass,
     ref = $bindable(null),
@@ -52,6 +54,7 @@
   <button
     class="ldt-number-field__button"
     type="button"
+    {disabled}
     aria-label={decrementLabel(label)}
     aria-disabled={atMin || undefined}
     onclick={() => !atMin && set(value - step)}>−</button
@@ -64,13 +67,21 @@
     min={Number.isFinite(min) ? min : undefined}
     max={Number.isFinite(max) ? max : undefined}
     {step}
+    {disabled}
     aria-label={label}
     {...rest}
-    onchange={(event) => set(Number(event.currentTarget.value))}
+    onchange={(event) => {
+      // `Number('')` is 0, not NaN — a cleared field must hit the documented fallback,
+      // not silently clamp to zero.
+      const raw = event.currentTarget.value;
+      set(raw === '' ? NaN : Number(raw));
+      onchange?.(event);
+    }}
   />
   <button
     class="ldt-number-field__button"
     type="button"
+    {disabled}
     aria-label={incrementLabel(label)}
     aria-disabled={atMax || undefined}
     onclick={() => !atMax && set(value + step)}>+</button

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

@@ -16,6 +16,6 @@ interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'min' | 'ma
     inputClass?: string;
     ref?: HTMLInputElement | null;
 }
-declare const NumberField: import("svelte").Component<Props, {}, "ref" | "value">;
+declare const NumberField: import("svelte").Component<Props, {}, "value" | "ref">;
 type NumberField = ReturnType<typeof NumberField>;
 export default NumberField;

package/dist/components/Pagination.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { Pagination as PaginationPrimitive } from 'bits-ui';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Total number of items being paged through — not the number of pages. */
+    count: number;
+    perPage?: number;
+    /** 1-based current page. */
+    page?: number;
+    /** Pages kept either side of the current one before the trail turns into an ellipsis. */
+    siblingCount?: number;
+    /** Accessible name of the landmark. */
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Accessible name for a page button, e.g. `(page) => `Page ${page}``. */
+    pageLabel?: (page: number) => string;
+    onPageChange?: (page: number) => void;
+    class?: string;
+    ref?: HTMLElement | null;
+  }
+
+  let {
+    count,
+    perPage = 10,
+    page = $bindable(1),
+    siblingCount = 1,
+    label = 'Pagination',
+    previousLabel = 'Previous',
+    nextLabel = 'Next',
+    pageLabel = (value: number) => `Page ${value}`,
+    onPageChange,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+</script>
+
+<!--
+  Bits' Root is a `<div>`; the landmark is ours, so the control set is reachable as "Pagination"
+  from a rotor without the page having to add one.
+-->
+<nav bind:this={ref} class={cx('ldt-pagination', className)} aria-label={label} {...rest}>
+  <PaginationPrimitive.Root
+    {count}
+    {perPage}
+    {siblingCount}
+    bind:page
+    onPageChange={(next) => onPageChange?.(next)}
+    class="ldt-pagination__list"
+  >
+    {#snippet children({ pages, currentPage })}
+      <PaginationPrimitive.PrevButton class="ldt-button ldt-button--quiet ldt-button--sm"
+        >{previousLabel}</PaginationPrimitive.PrevButton
+      >
+      {#each pages as item (item.key)}
+        {#if item.type === 'ellipsis'}
+          <!-- Presentational: the gap is a rendering device, and "…" read aloud between page
+               numbers is noise. The page buttons either side already say where the trail jumps. -->
+          <span class="ldt-pagination__ellipsis" aria-hidden="true">…</span>
+        {:else}
+          <!--
+            Rendered through Bits' `child` snippet rather than as a styled primitive: the
+            primitive merges its own `aria-label` last and would overwrite `pageLabel`. Spreading
+            `props` first leaves its behaviour intact while the naming stays ours.
+          -->
+          <PaginationPrimitive.Page page={item}>
+            {#snippet child({ props })}
+              <button
+                {...props}
+                class="ldt-button ldt-button--quiet ldt-button--sm ldt-pagination__page"
+                aria-label={pageLabel(item.value)}
+                aria-current={item.value === currentPage ? 'page' : undefined}>{item.value}</button
+              >
+            {/snippet}
+          </PaginationPrimitive.Page>
+        {/if}
+      {/each}
+      <PaginationPrimitive.NextButton class="ldt-button ldt-button--quiet ldt-button--sm"
+        >{nextLabel}</PaginationPrimitive.NextButton
+      >
+    {/snippet}
+  </PaginationPrimitive.Root>
+</nav>

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

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Total number of items being paged through — not the number of pages. */
+    count: number;
+    perPage?: number;
+    /** 1-based current page. */
+    page?: number;
+    /** Pages kept either side of the current one before the trail turns into an ellipsis. */
+    siblingCount?: number;
+    /** Accessible name of the landmark. */
+    label?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    /** Accessible name for a page button, e.g. `(page) => `Page ${page}``. */
+    pageLabel?: (page: number) => string;
+    onPageChange?: (page: number) => void;
+    class?: string;
+    ref?: HTMLElement | null;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "ref" | "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

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

@@ -14,7 +14,7 @@ declare function $$render<T extends string = string>(): {
         ref?: HTMLFieldSetElement | null;
     };
     exports: {};
-    bindings: "ref" | "value";
+    bindings: "value" | "ref";
     slots: {};
     events: {};
 };
@@ -22,7 +22,7 @@ declare class __sveltets_Render<T extends string = string> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "ref" | "value";
+    bindings(): "value" | "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

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

@@ -18,7 +18,7 @@ declare function $$render<T extends string = string>(): {
         ref?: HTMLSelectElement | null;
     };
     exports: {};
-    bindings: "ref" | "value";
+    bindings: "value" | "ref";
     slots: {};
     events: {};
 };
@@ -26,7 +26,7 @@ declare class __sveltets_Render<T extends string = string> {
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "ref" | "value";
+    bindings(): "value" | "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/Table.svelte

@@ -8,6 +8,19 @@
     caption?: string;
     /** Accessible name for the scroll region when there is no `caption`. */
     regionLabel?: string;
+    /**
+     * Pins the header row while the body scrolls. Needs a bounded scroll container — set
+     * `--ldt-table-height` on the wrapper, or the page scrolls instead and nothing sticks.
+     */
+    sticky?: boolean;
+    /**
+     * Rendered in place of the rows, as a single full-width cell. Pass it only when there is
+     * nothing to show — `empty={rows.length === 0 ? nothingYet : undefined}` — since the
+     * component cannot see inside `children` to count rows.
+     */
+    empty?: Snippet;
+    /** Columns the empty cell spans. Defaults to the whole row. */
+    columns?: number;
     /** `class` lands on the `<table>`; use `wrapperClass` for the scroll container. */
     class?: string;
     wrapperClass?: string;
@@ -19,6 +32,9 @@
   let {
     caption,
     regionLabel = 'Data table',
+    sticky = false,
+    empty,
+    columns,
     class: className,
     wrapperClass,
     children,
@@ -32,12 +48,23 @@
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
   bind:this={wrapperRef}
-  class={cx('ldt-table-wrap', wrapperClass)}
+  class={cx('ldt-table-wrap', sticky && 'ldt-table-wrap--sticky', wrapperClass)}
   role="region"
   tabindex="0"
   aria-label={caption ?? regionLabel}
 >
-  <table bind:this={ref} class={cx('ldt-table', className)} {...rest}>
-    {#if caption}<caption class="ldt-sr-only">{caption}</caption>{/if}{@render children()}
+  <table
+    bind:this={ref}
+    class={cx('ldt-table', sticky && 'ldt-table--sticky', className)}
+    {...rest}
+  >
+    {#if caption}<caption class="ldt-sr-only">{caption}</caption
+      >{/if}{@render children()}{#if empty}<tbody class="ldt-table__empty">
+        <tr>
+          <!-- `colspan` defaults to the row-spanning maximum so the cell never leaves a gap
+               beside it, whatever the column count turns out to be. -->
+          <td colspan={columns ?? 1000}>{@render empty()}</td>
+        </tr>
+      </tbody>{/if}
   </table>
 </div>

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

@@ -5,6 +5,19 @@ interface Props extends HTMLTableAttributes {
     caption?: string;
     /** Accessible name for the scroll region when there is no `caption`. */
     regionLabel?: string;
+    /**
+     * Pins the header row while the body scrolls. Needs a bounded scroll container — set
+     * `--ldt-table-height` on the wrapper, or the page scrolls instead and nothing sticks.
+     */
+    sticky?: boolean;
+    /**
+     * Rendered in place of the rows, as a single full-width cell. Pass it only when there is
+     * nothing to show — `empty={rows.length === 0 ? nothingYet : undefined}` — since the
+     * component cannot see inside `children` to count rows.
+     */
+    empty?: Snippet;
+    /** Columns the empty cell spans. Defaults to the whole row. */
+    columns?: number;
     /** `class` lands on the `<table>`; use `wrapperClass` for the scroll container. */
     class?: string;
     wrapperClass?: string;