@molecule/app-ui-svelte

Svelte UI class generators for molecule.dev.

Unlike the React and Vue packages, which export framework components, this package exports pure TypeScript CLASS GENERATORS (plus variant maps and helpers like cn and getIconData) that your own Svelte components call to produce UIClassMap-resolved class strings: getButtonClasses, getCardClasses, getModalContentClasses, getInputClasses, and one generator family per @molecule/app-ui component interface.

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

<script lang="ts">
  import { setClassMap } from '@molecule/app-ui'
  import { classMap } from '@molecule/app-ui-tailwind'
  import { getButtonClasses } from '@molecule/app-ui-svelte'

  // Once at app startup (root layout), before anything renders:
  setClassMap(classMap)

  export let variant: 'solid' | 'outline' = 'solid'
  $: classes = getButtonClasses({ variant, color: 'primary', size: 'md' })
</script>

<button class={classes} on:click><slot /></button>

Type

framework

Installation

npm install @molecule/app-ui-svelte @molecule/app-i18n @molecule/app-icons @molecule/app-ui svelte

API

Interfaces

CSSProperties

Framework-agnostic CSS properties. Mirrors React.CSSProperties but without React dependency.

interface CSSProperties {
  [key: string]: string | number | undefined
}

BaseProps

Base props shared by all components.

interface BaseProps {
  /**
   * Additional CSS class name(s).
   */
  className?: string
  /**
   * Inline styles.
   */
  style?: CSSProperties
  /**
   * Test ID for automated testing.
   */
  testId?: string
  /**
   * Automation ID for AI agents and E2E tests. Maps to the `data-mol-id`
   * HTML attribute. Use `molId()` from `./automation.js` to generate
   * semantic IDs. (Tooling only — screen readers do not expose `data-*`
   * attributes; accessible names come from labels/`aria-*`.)
   */
  automationId?: string
  /**
   * Whether the component is disabled.
   */
  disabled?: boolean
}

HTMLElementProps

Base props for HTML elements. Framework bindings should extend this with framework-specific attributes.

interface HTMLElementProps extends BaseProps {
  id?: string
  title?: string
  tabIndex?: number
  role?: string
  'aria-label'?: string
  'aria-labelledby'?: string
  'aria-describedby'?: string
  'aria-hidden'?: boolean
  'aria-disabled'?: boolean
  'aria-expanded'?: boolean
  'aria-selected'?: boolean
  'aria-checked'?: boolean | 'mixed'
  'aria-pressed'?: boolean | 'mixed'
  'aria-invalid'?: boolean
  'aria-required'?: boolean
  'aria-readonly'?: boolean
  'aria-busy'?: boolean
  'aria-live'?: 'off' | 'polite' | 'assertive'
  onClick?: MouseEventHandler
  onDoubleClick?: MouseEventHandler
  onMouseEnter?: MouseEventHandler
  onMouseLeave?: MouseEventHandler
  onFocus?: FocusEventHandler
  onBlur?: FocusEventHandler
  onKeyDown?: KeyboardEventHandler
  onKeyUp?: KeyboardEventHandler
  onKeyPress?: KeyboardEventHandler
}

InputElementProps

Base props for input elements.

interface InputElementProps extends HTMLElementProps {
  name?: string
  value?: string | number | readonly string[]
  defaultValue?: string | number | readonly string[]
  placeholder?: string
  required?: boolean
  readOnly?: boolean
  autoFocus?: boolean
  autoComplete?: string
  maxLength?: number
  minLength?: number
  pattern?: string
  onChange?: ChangeEventHandler
  onInput?: FormEventHandler
}

ButtonElementProps

Base props for button elements.

interface ButtonElementProps extends HTMLElementProps {
  /**
   * Defaults to `'button'` in every framework binding, so a button never submits a
   * form by accident. A form's primary action must set `type="submit"`: Enter then
   * submits the form, and tests that select `button[type="submit"]` find it.
   */
  type?: 'button' | 'submit' | 'reset'
  name?: string
  value?: string
  form?: string
}

TextareaElementProps

Base props for textarea elements.

interface TextareaElementProps extends HTMLElementProps {
  name?: string
  value?: string
  defaultValue?: string
  placeholder?: string
  required?: boolean
  readOnly?: boolean
  autoFocus?: boolean
  rows?: number
  cols?: number
  maxLength?: number
  minLength?: number
  wrap?: 'hard' | 'soft' | 'off'
  onChange?: ChangeEventHandler
  onInput?: FormEventHandler
}

SelectElementProps

Base props for select elements.

interface SelectElementProps extends HTMLElementProps {
  name?: string
  required?: boolean
  autoFocus?: boolean
  multiple?: boolean
  onChange?: ChangeEventHandler
}

FormElementProps

Base props for form elements.

interface FormElementProps extends HTMLElementProps {
  action?: string
  method?: 'get' | 'post'
  encType?: string
  target?: string
  noValidate?: boolean
  autoComplete?: 'on' | 'off'
  onSubmit?: FormEventHandler
  onReset?: FormEventHandler
}

ButtonProps

Props for the Button component.

interface ButtonProps extends ButtonElementProps {
  /**
   * Button content.
   */
  children?: Children
  /**
   * Visual variant.
   */
  variant?: ButtonVariant
  /**
   * Color scheme.
   */
  color?: ColorVariant
  /**
   * Button size.
   */
  size?: ButtonSize
  /**
   * Whether the button is in a loading state.
   */
  loading?: boolean
  /**
   * Loading text to display.
   */
  loadingText?: string
  /**
   * Whether the button takes full width.
   */
  fullWidth?: boolean
  /**
   * Icon to display before the label.
   */
  leftIcon?: Children
  /**
   * Icon to display after the label.
   */
  rightIcon?: Children
}

InputProps

Props for the Input component (text field, email, password, etc.).

interface InputProps extends InputElementProps {
  /**
   * Input type.
   */
  type?: InputType
  /**
   * Input size.
   */
  size?: Size
  /**
   * Horizontal text alignment inside the input (see
   * `InputClassOptions.align`). Defaults to the bond's own style.
   */
  align?: 'left' | 'center'
  /**
   * Label text.
   */
  label?: string
  /**
   * Error message.
   */
  error?: string
  /**
   * Hint/help text.
   */
  hint?: string
  /**
   * Element to display on the left.
   */
  leftElement?: Children
  /**
   * Element to display on the right.
   */
  rightElement?: Children
  /**
   * Whether to show a clear button.
   */
  clearable?: boolean
  /**
   * Called when the clear button is clicked.
   */
  onClear?: () => void
  /**
   * Accessible label for the clear button.
   * @default 'Clear'
   */
  clearLabel?: string
}

TextareaProps

Props for the Textarea component.

interface TextareaProps extends TextareaElementProps {
  /**
   * Text size tier (see `TextareaClassOptions.size`) — pass the same
   * `size` as a neighboring Input for identical font sizes.
   */
  size?: Size
  /**
   * Label text.
   */
  label?: string
  /**
   * Error message.
   */
  error?: string
  /**
   * Hint/help text.
   */
  hint?: string
  /**
   * Whether the textarea auto-resizes.
   */
  autoResize?: boolean
  /**
   * Minimum number of rows.
   */
  minRows?: number
  /**
   * Maximum number of rows.
   */
  maxRows?: number
}

SelectOption

A single option in a Select dropdown.

interface SelectOption<T = string> {
  /**
   * Option value.
   */
  value: T
  /**
   * Display label.
   */
  label: string
  /**
   * Whether the option is disabled.
   */
  disabled?: boolean
  /**
   * Option group (for grouped selects).
   */
  group?: string
}

SelectProps

Props for the Select dropdown component (single or multi-select).

interface SelectProps<T = string> extends SelectElementProps {
  /**
   * Select options.
   */
  options: SelectOption<T>[]
  /**
   * Current value.
   */
  value?: T
  /**
   * Change handler (with typed value).
   */
  onValueChange?: (value: T) => void
  /**
   * Select size.
   */
  size?: Size
  /**
   * Label text.
   */
  label?: string
  /**
   * Placeholder text.
   */
  placeholder?: string
  /**
   * Error message.
   */
  error?: string
  /**
   * Hint/help text.
   */
  hint?: string
  /**
   * Whether to allow clearing the selection.
   */
  clearable?: boolean
}

CheckboxProps

Props for the Checkbox component.

interface CheckboxProps extends InputElementProps {
  /**
   * Checkbox label.
   */
  label?: Children
  /**
   * Whether the checkbox is checked.
   */
  checked?: boolean
  /**
   * Whether the checkbox is in an indeterminate state.
   */
  indeterminate?: boolean
  /**
   * Checkbox size.
   */
  size?: Size
  /**
   * Error message.
   */
  error?: string
}

RadioOption

A single option in a RadioGroup.

interface RadioOption<T = string> {
  /**
   * Option value.
   */
  value: T
  /**
   * Display label.
   */
  label: Children
  /**
   * Whether the option is disabled.
   */
  disabled?: boolean
}

RadioGroupProps

Props for the RadioGroup component.

interface RadioGroupProps<T = string> extends BaseProps {
  /**
   * Radio options.
   */
  options: RadioOption<T>[]
  /**
   * Current value.
   */
  value?: T
  /**
   * Change handler.
   */
  onChange?: (value: T) => void
  /**
   * Radio size.
   */
  size?: Size
  /**
   * Group label.
   */
  label?: string
  /**
   * Shared `name` attribute for the group's radio inputs (used for native
   * form submission). When omitted, a unique per-instance name is generated
   * so separate groups never merge — the visible `label` is deliberately
   * NOT used as the name, because two groups with the same label (e.g. two
   * "Size" pickers) would otherwise form ONE native radio group and
   * deselect each other.
   */
  name?: string
  /**
   * Layout direction.
   */
  direction?: 'horizontal' | 'vertical'
  /**
   * Error message.
   */
  error?: string
}

SwitchProps

Props for the Switch/Toggle component.

interface SwitchProps extends InputElementProps {
  /**
   * Switch label.
   */
  label?: Children
  /**
   * Whether the switch is on.
   */
  checked?: boolean
  /**
   * Switch size.
   */
  size?: Size
  /**
   * Color when on.
   */
  color?: ColorVariant
}

ModalProps

Props for the Modal/Dialog component.

interface ModalProps extends HTMLElementProps {
  /**
   * Whether the modal is open.
   */
  open: boolean
  /**
   * Called when the modal should close.
   */
  onClose: () => void
  /**
   * Modal title.
   */
  title?: string
  /**
   * Modal content.
   */
  children?: Children
  /**
   * Modal size.
   */
  size?: ModalSize
  /**
   * Whether to show a close button.
   */
  showCloseButton?: boolean
  /**
   * Whether clicking the overlay closes the modal.
   */
  closeOnOverlayClick?: boolean
  /**
   * Whether pressing Escape closes the modal.
   */
  closeOnEscape?: boolean
  /**
   * Footer content (typically action buttons).
   */
  footer?: Children
  /**
   * Whether the modal is centered vertically.
   */
  centered?: boolean
  /**
   * Whether to prevent body scroll when open.
   */
  preventScroll?: boolean
  /**
   * Accessible label for the close button.
   * @default 'Close'
   */
  closeLabel?: string
}

SpinnerProps

Props for the Spinner/loading indicator component.

interface SpinnerProps extends BaseProps {
  /**
   * Spinner size.
   */
  size?: Size
  /**
   * Spinner color.
   */
  color?: ColorVariant | string
  /**
   * Loading label (for accessibility).
   */
  label?: string
  /**
   * Spinner thickness.
   */
  thickness?: number
}

AvatarProps

Props for the Avatar component.

interface AvatarProps extends HTMLElementProps {
  /**
   * Image source URL.
   */
  src?: string
  /**
   * Alt text for the image.
   */
  alt?: string
  /**
   * Name for fallback initials.
   */
  name?: string
  /**
   * Avatar size.
   */
  size?: Size | number
  /**
   * Whether the avatar is rounded.
   */
  rounded?: boolean
  /**
   * Fallback element when no image.
   */
  fallback?: Children
}

BadgeProps

Props for the Badge component (status labels, counts, tags).

interface BadgeProps extends HTMLElementProps {
  /**
   * Badge content.
   */
  children?: Children
  /**
   * Badge color.
   */
  color?: ColorVariant
  /**
   * Badge variant.
   */
  variant?: 'solid' | 'outline' | 'subtle'
  /**
   * Badge size.
   */
  size?: Size
  /**
   * Whether the badge is rounded.
   */
  rounded?: boolean
}

TooltipProps

Props for the Tooltip component (hover/focus popover with informational text).

interface TooltipProps extends HTMLElementProps {
  /**
   * Tooltip content.
   */
  content: Children
  /**
   * Element that triggers the tooltip.
   */
  children: Children
  /**
   * Tooltip placement.
   */
  placement?: TooltipPlacement
  /**
   * Delay before showing (ms).
   */
  delay?: number
  /**
   * Whether the tooltip has an arrow.
   */
  hasArrow?: boolean
}

CardProps

Props for the Card container component (elevated, outlined, or filled surface).

interface CardProps extends HTMLElementProps {
  /**
   * Card content.
   */
  children?: Children
  /**
   * Card variant.
   */
  variant?: 'elevated' | 'outlined' | 'filled'
  /**
   * Whether the card is interactive (clickable).
   */
  interactive?: boolean
  /**
   * Padding size.
   */
  padding?: Size | 'none'
}

ContainerProps

Props for the Container layout component.

interface ContainerProps extends HTMLElementProps {
  /**
   * Container content.
   */
  children?: Children
  /**
   * Maximum width.
   */
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string
  /**
   * Whether to center the container.
   */
  centered?: boolean
  /**
   * Horizontal padding.
   */
  paddingX?: Size | string
}

FlexProps

Flex container props.

interface FlexProps extends HTMLElementProps {
  /**
   * Flex content.
   */
  children?: Children
  /**
   * Flex direction.
   */
  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
  /**
   * Justify content.
   */
  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
  /**
   * Align items.
   */
  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
  /**
   * Flex wrap.
   */
  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse'
  /**
   * Gap between items.
   */
  gap?: Size | string | number
}

GridProps

Grid container props.

interface GridProps extends HTMLElementProps {
  /**
   * Grid content.
   */
  children?: Children
  /**
   * Number of columns.
   */
  columns?: number | string
  /**
   * Number of rows.
   */
  rows?: number | string
  /**
   * Gap between items.
   */
  gap?: Size | string | number
  /**
   * Column gap.
   */
  columnGap?: Size | string | number
  /**
   * Row gap.
   */
  rowGap?: Size | string | number
}

SpacerProps

Props for the Spacer layout component (adds whitespace between elements).

interface SpacerProps extends BaseProps {
  /**
   * Space size.
   */
  size?: Size | string | number
  /**
   * Whether the spacer is horizontal.
   */
  horizontal?: boolean
}

FormProps

Props for the Form component (wraps inputs with submission handling and validation).

interface FormProps extends FormElementProps {
  /**
   * Form content.
   */
  children?: Children
  /**
   * Submit handler with form data.
   */
  onFormSubmit?: (data: Record<string, unknown>) => void | Promise<void>
  /**
   * Whether the form is submitting.
   */
  submitting?: boolean
}

FormFieldProps

Form field wrapper props.

interface FormFieldProps extends HTMLElementProps {
  /**
   * Field content.
   */
  children?: Children
  /**
   * Field label.
   */
  label?: string
  /**
   * Field name.
   */
  name?: string
  /**
   * Error message.
   */
  error?: string
  /**
   * Hint/help text.
   */
  hint?: string
  /**
   * Whether the field is required.
   */
  required?: boolean
}

AlertProps

Props for the Alert component.

interface AlertProps extends HTMLElementProps {
  /**
   * Alert content.
   */
  children?: Children
  /**
   * Alert title.
   */
  title?: string
  /**
   * Alert status/type.
   */
  status?: ColorVariant
  /**
   * Alert variant.
   */
  variant?: 'solid' | 'subtle' | 'outline' | 'left-accent'
  /**
   * Whether the alert is dismissible.
   */
  dismissible?: boolean
  /**
   * Called when dismissed.
   */
  onDismiss?: () => void
  /**
   * Icon to display.
   */
  icon?: Children
  /**
   * Accessible label for the dismiss button.
   * @default 'Dismiss'
   */
  dismissLabel?: string
}

ToastProps

Props for the Toast/notification component.

interface ToastProps extends HTMLElementProps {
  /**
   * Toast content.
   */
  children?: Children
  /**
   * Toast title.
   */
  title?: string
  /**
   * Toast description.
   */
  description?: string
  /**
   * Toast status/type.
   */
  status?: ColorVariant
  /**
   * Duration in milliseconds (0 for persistent).
   */
  duration?: number
  /**
   * Whether the toast is dismissible.
   */
  dismissible?: boolean
  /**
   * Called when dismissed.
   */
  onDismiss?: () => void
  /**
   * Toast position.
   */
  position?: 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left'
  /**
   * Accessible label for the close button.
   * @default 'Close'
   */
  closeLabel?: string
}

TabItem

A single tab in a Tabs component.

interface TabItem<T = string> {
  /**
   * Tab value/id.
   */
  value: T
  /**
   * Tab label.
   */
  label: Children
  /**
   * Tab content.
   */
  content?: Children
  /**
   * Whether the tab is disabled.
   */
  disabled?: boolean
  /**
   * Icon to display.
   */
  icon?: Children
}

TabsProps

Props for the Tabs component (switchable tabbed content panels).

interface TabsProps<T = string> extends BaseProps {
  /**
   * Tab items.
   */
  items: TabItem<T>[]
  /**
   * Current active tab.
   */
  value?: T
  /**
   * Default active tab.
   */
  defaultValue?: T
  /**
   * Change handler.
   */
  onChange?: (value: T) => void
  /**
   * Tab variant.
   */
  variant?: 'line' | 'enclosed' | 'soft-rounded' | 'solid-rounded'
  /**
   * Tab size.
   */
  size?: Size
  /**
   * Whether tabs are fitted (take full width).
   */
  fitted?: boolean
}

AccordionItem

A single item in an Accordion component.

interface AccordionItem<T = string> {
  /**
   * Item value/id.
   */
  value: T
  /**
   * Item header/trigger.
   */
  header: Children
  /**
   * Item content.
   */
  content: Children
  /**
   * Whether the item is disabled.
   */
  disabled?: boolean
}

AccordionProps

Props for the Accordion component.

interface AccordionProps<T = string> extends BaseProps {
  /**
   * Accordion items.
   */
  items: AccordionItem<T>[]
  /**
   * Expanded item(s).
   */
  value?: T | T[]
  /**
   * Default expanded item(s).
   */
  defaultValue?: T | T[]
  /**
   * Change handler.
   */
  onChange?: (value: T | T[]) => void
  /**
   * Whether multiple items can be expanded.
   */
  multiple?: boolean
  /**
   * Whether items can be collapsed.
   */
  collapsible?: boolean
}

TableColumn

Table column definition.

interface TableColumn<T> {
  /**
   * Column key (data property).
   */
  key: keyof T | string
  /**
   * Column header.
   */
  header: Children
  /**
   * Custom cell renderer.
   */
  render?: (value: unknown, row: T, index: number) => Children
  /**
   * Column width.
   */
  width?: string | number
  /**
   * Whether the column is sortable.
   */
  sortable?: boolean
  /**
   * Text alignment.
   */
  align?: 'left' | 'center' | 'right'
}

TableProps

Props for the Table component.

interface TableProps<T> extends HTMLElementProps {
  /**
   * Table data.
   */
  data: T[]
  /**
   * Column definitions.
   */
  columns: TableColumn<T>[]
  /**
   * Row key extractor.
   */
  rowKey?: keyof T | ((row: T) => string | number)
  /**
   * Whether to show borders.
   */
  bordered?: boolean
  /**
   * Whether rows are striped.
   */
  striped?: boolean
  /**
   * Whether rows are hoverable.
   */
  hoverable?: boolean
  /**
   * Table size.
   */
  size?: Size
  /**
   * Empty state content.
   */
  emptyContent?: Children
  /**
   * Loading state.
   */
  loading?: boolean
  /**
   * Sort configuration.
   */
  sort?: {
    key: string
    direction: 'asc' | 'desc'
  }
  /**
   * Sort change handler.
   */
  onSort?: (key: string, direction: 'asc' | 'desc') => void
  /**
   * Row click handler.
   */
  onRowClick?: (row: T, index: number) => void
}

PaginationProps

Props for the Pagination component (page navigation with current page, total, page size, and change callbacks).

interface PaginationProps extends BaseProps {
  /**
   * Current page (1-indexed).
   */
  page: number
  /**
   * Total number of pages.
   */
  totalPages: number
  /**
   * Page change handler.
   */
  onChange: (page: number) => void
  /**
   * Number of sibling pages to show.
   */
  siblings?: number
  /**
   * Number of boundary pages to show.
   */
  boundaries?: number
  /**
   * Pagination size.
   */
  size?: Size
  /**
   * Whether to show first/last buttons.
   */
  showFirstLast?: boolean
  /**
   * Whether to show previous/next buttons.
   */
  showPrevNext?: boolean
  /**
   * Accessible labels for pagination controls.
   */
  labels?: {
    nav?: string
    first?: string
    previous?: string
    next?: string
    last?: string
    goToPage?: (page: number) => string
  }
}

SkeletonProps

Props for the Skeleton loading placeholder component.

interface SkeletonProps extends BaseProps {
  /**
   * Skeleton width.
   */
  width?: string | number
  /**
   * Skeleton height.
   */
  height?: string | number
  /**
   * Whether the skeleton is circular.
   */
  circle?: boolean
  /**
   * Border radius.
   */
  borderRadius?: string | number
  /**
   * Animation type.
   */
  animation?: 'pulse' | 'wave' | 'none'
}

SeparatorProps

Props for the Separator/Divider component.

interface SeparatorProps extends BaseProps {
  /**
   * Separator orientation.
   */
  orientation?: 'horizontal' | 'vertical'
  /**
   * Whether the separator is decorative only.
   */
  decorative?: boolean
}

DropdownItem

Dropdown menu item.

interface DropdownItem<T = string> {
  /**
   * Item value/id.
   */
  value: T
  /**
   * Display label.
   */
  label: Children
  /**
   * Whether the item is disabled.
   */
  disabled?: boolean
  /**
   * Icon to display.
   */
  icon?: Children
  /**
   * Keyboard shortcut display.
   */
  shortcut?: string
  /**
   * Whether this is a separator.
   */
  separator?: boolean
  /**
   * Nested items (for submenus).
   */
  items?: DropdownItem<T>[]
}

DropdownProps

Props for the Dropdown menu component.

interface DropdownProps<T = string> extends BaseProps {
  /**
   * Dropdown trigger element.
   */
  trigger: Children
  /**
   * Dropdown items.
   */
  items: DropdownItem<T>[]
  /**
   * Called when an item is selected.
   */
  onSelect?: (value: T) => void
  /**
   * Dropdown placement.
   */
  placement?:
    'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right'
  /**
   * Whether the dropdown is open (controlled).
   */
  open?: boolean
  /**
   * Called when open state changes.
   */
  onOpenChange?: (open: boolean) => void
  /**
   * Menu alignment.
   */
  align?: 'start' | 'center' | 'end'
  /**
   * Menu width.
   */
  width?: 'trigger' | 'auto' | number | string
}

AccordionClassOptions

Options for generating accordion classes.

interface AccordionClassOptions {
  className?: string
}

AlertClassOptions

Options for generating alert classes.

interface AlertClassOptions {
  status?: ColorVariant
  className?: string
}

AvatarClassOptions

Options for generating avatar classes.

interface AvatarClassOptions {
  size?: Size | number
  rounded?: boolean
  className?: string
}

BadgeClassOptions

Options for generating badge classes.

interface BadgeClassOptions {
  color?: ColorVariant
  variant?: 'solid' | 'outline' | 'subtle'
  size?: Size
  rounded?: boolean
  className?: string
}

ButtonClassOptions

Options for generating button classes.

interface ButtonClassOptions {
  variant?: ButtonVariant
  color?: ColorVariant
  size?: Size
  fullWidth?: boolean
  loading?: boolean
  disabled?: boolean
  className?: string
}

CardClassOptions

Options for generating card classes.

interface CardClassOptions {
  variant?: 'elevated' | 'outlined' | 'filled'
  padding?: Size | 'none'
  interactive?: boolean
  className?: string
}

CheckboxClassOptions

Options for generating checkbox classes.

interface CheckboxClassOptions {
  error?: string
  className?: string
}

ContainerClassOptions

Options for generating container classes.

interface ContainerClassOptions {
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | string
  centered?: boolean
  className?: string
}

DropdownPosition

Absolute top/left pixel position for a dropdown element.

interface DropdownPosition {
  top: number
  left: number
}

DropdownContentClassOptions

Options for generating dropdown content classes.

interface DropdownContentClassOptions {
  className?: string
}

FlexClassOptions

Options for generating flex classes.

interface FlexClassOptions {
  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse'
  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'
  align?: 'start' | 'end' | 'center' | 'baseline' | 'stretch'
  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse'
  gap?: Size | string | number
  className?: string
}

FormFieldClassOptions

Options for generating form field classes.

interface FormFieldClassOptions {
  className?: string
}

GridClassOptions

Options for generating grid classes.

interface GridClassOptions {
  columns?: number | string
  rows?: number | string
  gap?: Size | string | number
  columnGap?: Size | string | number
  rowGap?: Size | string | number
  className?: string
}

InputClassOptions

Options for generating input classes.

interface InputClassOptions {
  size?: Size
  error?: string
  hasLeftElement?: boolean
  hasRightElement?: boolean
  clearable?: boolean
  hasValue?: boolean
  required?: boolean
  className?: string
}

ModalClassOptions

Options for generating modal content classes.

interface ModalClassOptions {
  size?: ModalSize
  className?: string
}

PaginationClassOptions

Options for generating pagination classes.

interface PaginationClassOptions {
  className?: string
}

ProgressClassOptions

Options for generating progress classes.

interface ProgressClassOptions {
  size?: Size
  color?: ColorVariant
  indeterminate?: boolean
  className?: string
}

RadioClassOptions

Options for generating radio classes.

interface RadioClassOptions {
  error?: string
  className?: string
}

SelectClassOptions

Options for generating select classes.

interface SelectClassOptions {
  size?: Size
  error?: string
  required?: boolean
  className?: string
}

SeparatorClassOptions

Options for generating separator classes.

interface SeparatorClassOptions {
  orientation?: 'horizontal' | 'vertical'
  className?: string
}

SkeletonClassOptions

Options for generating skeleton classes.

interface SkeletonClassOptions {
  circle?: boolean
  animation?: 'pulse' | 'wave' | 'none'
  className?: string
}

SpacerClassOptions

Options for generating spacer classes.

interface SpacerClassOptions {
  size?: Size | string | number
  horizontal?: boolean
  className?: string
}

SpinnerClassOptions

Options for generating spinner classes.

interface SpinnerClassOptions {
  size?: Size
  color?: ColorVariant | string
  className?: string
}

SwitchClassOptions

Options for generating switch classes.

interface SwitchClassOptions {
  size?: Size
  checked?: boolean
  disabled?: boolean
  className?: string
}

TableClassOptions

Options for generating table classes.

interface TableClassOptions {
  bordered?: boolean
  className?: string
}

TabsListClassOptions

Options for generating tabs list classes.

interface TabsListClassOptions {
  fitted?: boolean
  className?: string
}

TextareaClassOptions

Options for generating textarea classes.

interface TextareaClassOptions {
  error?: string
  required?: boolean
  className?: string
}

ToastData

Toast data interface for programmatic toast management.

interface ToastData {
  id: string
  title?: string
  description?: string
  status?: ColorVariant
  duration?: number
  dismissible?: boolean
}

ToastClassOptions

Options for generating toast classes.

interface ToastClassOptions {
  status?: ColorVariant
  className?: string
}

TooltipPosition

Absolute top/left pixel position for a tooltip element.

interface TooltipPosition {
  top: number
  left: number
}

TooltipClassOptions

Options for generating tooltip classes.

interface TooltipClassOptions {
  className?: string
}

Types

Children

Framework-agnostic child content. Use unknown to allow any framework's node type (ReactNode, VNode, etc.).

type Children = unknown

EventHandler

Framework-agnostic event handler.

type EventHandler<E = Event> = (event: E) => void

• event — The DOM event object.

MouseEventHandler

Framework-agnostic mouse event handler.

type MouseEventHandler = EventHandler<MouseEvent>

KeyboardEventHandler

Framework-agnostic keyboard event handler.

type KeyboardEventHandler = EventHandler<KeyboardEvent>

FocusEventHandler

Framework-agnostic focus event handler.

type FocusEventHandler = EventHandler<FocusEvent>

ChangeEventHandler

Framework-agnostic change event handler.

type ChangeEventHandler = EventHandler<Event>

FormEventHandler

Framework-agnostic form event handler.

type FormEventHandler = EventHandler<Event>

Size

Standard size scale used across all molecule UI components (buttons, inputs, badges, etc.).

type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

ColorVariant

Semantic color variants used across components for status indication.

type ColorVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'

ButtonVariant

Button visual variant styles.

type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link'

InputType

Allowed HTML input type attribute values for the Input component.

type InputType =
  | 'text'
  | 'email'
  | 'password'
  | 'number'
  | 'tel'
  | 'url'
  | 'search'
  | 'date'
  | 'time'
  | 'datetime-local'

ModalSize

Modal size variants including full-screen.

type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'

TooltipPlacement

Position where a tooltip renders relative to its trigger element (top, bottom, left, right, and corner variants).

type TooltipPlacement =
  'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'

DropdownPlacement

Dropdown placement type.

type DropdownPlacement =
  'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right'

DropdownAlign

Dropdown alignment type.

type DropdownAlign = 'start' | 'center' | 'end'

ToastPosition

Toast position type.

type ToastPosition = 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left'

Functions

getAccordionClasses(options)

Generate classes for the accordion container.

Usage in Svelte:

<script>
  import {
    getAccordionClasses, getAccordionItemClass,
    getAccordionTriggerClasses, getAccordionContentClass, getAccordionContentInnerClass,
  } from '@molecule/app-ui-svelte'
  export let items = []
  let expandedItems = []
  $: containerClass = getAccordionClasses()
</script>
<div class={containerClass}>
  {#each items as item}
    <div class={getAccordionItemClass()} data-state={expandedItems.includes(item.value) ? 'open' : 'closed'}>
      <button class={getAccordionTriggerClasses()} data-state={...} on:click={() => toggle(item.value)}>
        {item.header}
        <svg class={cm.accordionChevron}>...</svg>
      </button>
      {#if expandedItems.includes(item.value)}
        <div class={getAccordionContentClass()}>
          <div class={getAccordionContentInnerClass()}>{item.content}</div>
        </div>
      {/if}
    </div>
  {/each}
</div>

function getAccordionClasses(options?: AccordionClassOptions): string

• options — The options.

Returns: The resulting string.

getAccordionItemClass()

Get the accordion item class string.

function getAccordionItemClass(): string

Returns: The accordion item class string.

getAccordionTriggerClasses(className)

Generate classes for an accordion trigger button.

function getAccordionTriggerClasses(className?: string): string

• className — Optional CSS class name to append.

Returns: The resulting class string.

getAccordionContentClass()

Get the accordion content wrapper class string.

function getAccordionContentClass(): string

Returns: The accordion content wrapper class string.

getAccordionContentInnerClass()

Get the accordion content inner padding class string.

function getAccordionContentInnerClass(): string

Returns: The accordion content inner padding class string.

getAccordionChevronClass()

Chevron icon class for accordion triggers.

function getAccordionChevronClass(): string

Returns: The accordion chevron class string.

getAccordionChevronIconData()

Get icon data for the accordion chevron.

function getAccordionChevronIconData(): IconData

Returns: Icon data for a downward chevron from the current icon set

toggleAccordionItem(expandedItems, itemValue, options)

Helper to manage accordion expanded state. Handles single/multiple expansion and collapsibility logic.

function toggleAccordionItem(
  expandedItems: string[],
  itemValue: string,
  options?: { multiple?: boolean; collapsible?: boolean },
): string[]

• expandedItems — The currently expanded item values.
• itemValue — The value of the item being toggled.
• options — Toggle behavior options.
• options.multiple — Whether multiple items can be expanded simultaneously.
• options.collapsible — Whether all items can be collapsed.

Returns: The updated array of expanded item values.

getAlertClasses(options)

Generate classes for an alert container.

Usage in Svelte:

<script>
  import { getAlertClasses, getAlertTitleClass, getAlertDescriptionClass } from '@molecule/app-ui-svelte'
  export let status = 'info'
  $: classes = getAlertClasses({ status })
</script>
<div role="alert" class={classes}>
  {#if title}<h5 class={getAlertTitleClass()}>{title}</h5>{/if}
  <div class={getAlertDescriptionClass()}><slot /></div>
</div>

function getAlertClasses(options?: AlertClassOptions): string

• options — The options.

Returns: The resulting string.

getAlertTitleClass()

Get the alert title class string.

function getAlertTitleClass(): string

Returns: The alert title class string.

getAlertDescriptionClass()

Get the alert description class string.

function getAlertDescriptionClass(): string

Returns: The alert description class string.

getAlertDismissClass()

Dismiss button class.

function getAlertDismissClass(): string

Returns: The alert dismiss button class string.

getAlertIconWrapperClass()

Icon container class.

function getAlertIconWrapperClass(): string

Returns: The resulting string.

getAlertContentClass()

Content wrapper class.

function getAlertContentClass(): string

Returns: The resulting string.

getAlertIconData(status)

Get icon data for an alert status.

function getAlertIconData(status: string): IconData | null

• status — Alert status variant (info, success, warning, error)

Returns: Icon data from the current icon set, or null if status is unknown

getAvatarClasses(options)

Generate classes for the avatar container.

Usage in Svelte:

<script>
  import { getAvatarClasses, getAvatarImageClass, getAvatarFallbackClass, getAvatarCustomSize } from '@molecule/app-ui-svelte'
  import { getInitials } from '@molecule/app-ui-svelte'
  import { t } from '@molecule/app-i18n'
  export let src = ''
  export let name = ''
  export let size = 'md'
  $: classes = getAvatarClasses({ size })
  $: customSize = getAvatarCustomSize(size)
  $: initials = name ? getInitials(name) : ''
</script>
<div class={classes} style={customSize}>
  {#if src}
    <img {src} alt={alt || name || t('ui.avatar.alt')} class={getAvatarImageClass()} />
  {:else}
    <div class={getAvatarFallbackClass()}>
      {#if name}<span class={cm.cn(cm.textSize('sm'), cm.fontWeight('medium'))}>{initials}</span>{/if}
    </div>
  {/if}
</div>

function getAvatarClasses(options?: AvatarClassOptions): string

• options — The options.

Returns: The resulting string.

getAvatarCustomSize(size)

Get inline style for custom (numeric) avatar size. Returns undefined if size is a named Size.

function getAvatarCustomSize(size: number | Size): Record<string, string> | undefined

• size — The avatar size value (named or numeric).

Returns: An inline style object, or undefined for named sizes.

getAvatarImageClass()

Get the avatar image class string.

function getAvatarImageClass(): string

Returns: The avatar image class string.

getAvatarFallbackClass()

Get the avatar fallback class string.

function getAvatarFallbackClass(): string

Returns: The resulting string.

getAvatarInitialsClass()

Avatar initials text class.

function getAvatarInitialsClass(): string

Returns: The avatar initials class string.

getAvatarFallbackIconClass()

Avatar fallback icon class.

function getAvatarFallbackIconClass(): string

Returns: The avatar fallback icon class string.

getBadgeClasses(options)

Generate classes for a badge element.

Usage in Svelte:

<script>
  import { getBadgeClasses } from '@molecule/app-ui-svelte'
  export let color = 'primary'
  export let variant = 'solid'
  $: classes = getBadgeClasses({ color, variant })
</script>
<span class={classes}><slot /></span>

function getBadgeClasses(options?: BadgeClassOptions): string

• options — The options.

Returns: The resulting string.

getButtonClasses(options)

Generate classes for a button component.

Usage in Svelte:

<script>
  import { getButtonClasses } from '@molecule/app-ui-svelte'
  export let variant = 'solid'
  export let color = 'primary'
  export let size = 'md'
  export let fullWidth = false
  $: classes = getButtonClasses({ variant, color, size, fullWidth })
</script>
<button class={classes} on:click><slot /></button>

function getButtonClasses(options?: ButtonClassOptions): string

• options — The options.

Returns: The resulting string.

getCardClasses(options)

Generate classes for a card container.

Usage in Svelte:

<script>
  import { getCardClasses, getCardHeaderClass, getCardTitleClass, getCardContentClass, getCardFooterClass } from '@molecule/app-ui-svelte'
  export let variant = 'elevated'
  export let padding = 'md'
  export let interactive = false
  $: classes = getCardClasses({ variant, padding, interactive })
</script>
<div class={classes} role={interactive ? 'button' : undefined} tabindex={interactive ? 0 : undefined}>
  <slot />
</div>

function getCardClasses(options?: CardClassOptions): string

• options — The options.

Returns: The resulting class string.

getCardHeaderClass()

Get the card header class string.

function getCardHeaderClass(): string

Returns: The card header class string.

getCardTitleClass()

Get the card title class string.

function getCardTitleClass(): string

Returns: The card title class string.

getCardDescriptionClass()

Get the card description class string.

function getCardDescriptionClass(): string

Returns: The card description class string.

getCardContentClass()

Get the card content class string.

function getCardContentClass(): string

Returns: The card content class string.

getCardFooterClass()

Get the card footer class string.

function getCardFooterClass(): string

Returns: The resulting string.

getCardPaddingMap()

Gets the card padding map.

function getCardPaddingMap(): Record<Size | 'none', string>

Returns: The result.

getCheckboxClasses(options)

Generate classes for a checkbox input element.

Usage in Svelte:

<script>
  import { getCheckboxClasses, checkboxLabelWrapperClass } from '@molecule/app-ui-svelte'
  export let error = ''
  export let checked = false
  $: classes = getCheckboxClasses({ error })
</script>
<label class={checkboxLabelWrapperClass}>
  <input type="checkbox" bind:checked class={classes} data-state={checked ? 'checked' : 'unchecked'} />
  <span class={cm.textSize('sm')}>{label}</span>
</label>

function getCheckboxClasses(options?: CheckboxClassOptions): string

• options — The options.

Returns: The resulting string.

getCheckboxLabelWrapperClass()

Wrapper class for the checkbox + label combination.

function getCheckboxLabelWrapperClass(): string

Returns: The checkbox label wrapper class string.

getCheckboxLabelTextClass(disabled)

Class for the checkbox label text.

function getCheckboxLabelTextClass(disabled?: boolean): string

• disabled — Whether the checkbox is disabled.

Returns: The checkbox label text class string.

getCheckboxErrorClass(className)

Error message class.

function getCheckboxErrorClass(className?: string): string

• className — Optional CSS class name to append.

Returns: The checkbox error class string.

getContainerClasses(options)

Generate classes for a container element.

Usage in Svelte:

<script>
  import { getContainerClasses, getContainerCustomStyle } from '@molecule/app-ui-svelte'
  export let maxWidth = 'lg'
  export let centered = true
  $: classes = getContainerClasses({ maxWidth, centered })
  $: customStyle = getContainerCustomStyle(maxWidth)
</script>
<div class={classes} style={customStyle}>
  <slot />
</div>

function getContainerClasses(options?: ContainerClassOptions): string

• options — The options.

Returns: The resulting string.

getContainerCustomStyle(maxWidth)

Get inline style for custom max-width values. Returns undefined if maxWidth is a standard named value.

function getContainerCustomStyle(maxWidth: string): Record<string, string> | undefined

• maxWidth — The max-width value to evaluate.

Returns: An inline style object, or undefined for standard sizes.

getDropdownContentClasses(options)

Generate classes for the dropdown menu content container.

Usage in Svelte:

<script>
  import {
    getDropdownContentClasses, getDropdownItemClasses, getDropdownSeparatorClass,
    calculateDropdownPosition, dropdownTriggerClass,
  } from '@molecule/app-ui-svelte'
  export let items = []
  export let placement = 'bottom-start'
  let open = false
  let triggerEl, menuEl
  let position = { top: 0, left: 0 }
  $: contentClass = getDropdownContentClasses()
</script>
<div bind:this={triggerEl} class={dropdownTriggerClass} on:click={() => open = !open}>
  <slot name="trigger" />
</div>
{#if open}
  <div bind:this={menuEl} role="menu" data-state="open" class={contentClass}
    style="position:absolute;top:{position.top}px;left:{position.left}px;z-index:50;">
    {#each items as item}
      {#if item.separator}
        <div class={getDropdownSeparatorClass()} role="separator" />
      {:else}
        <div role="menuitem" class={getDropdownItemClasses({ disabled: item.disabled })} on:click={() => onSelect(item.value)}>
          {item.label}
        </div>
      {/if}
    {/each}
  </div>
{/if}

function getDropdownContentClasses(options?: DropdownContentClassOptions): string

• options — The options.

Returns: The resulting string.

getDropdownItemClasses(options)

Generate classes for a dropdown menu item.

function getDropdownItemClasses(options?: { disabled?: boolean; className?: string }): string

• options — The options.
• options.disabled — Whether the item is disabled.
• options.className — Optional CSS class name to append.

Returns: The resulting class string.

getDropdownSeparatorClass()

Get the dropdown separator class string.

function getDropdownSeparatorClass(): string

Returns: The dropdown separator class string.

getDropdownLabelClass()

Get the dropdown label class string.

function getDropdownLabelClass(): string

Returns: The dropdown label class string.

getDropdownTriggerClass()

Dropdown trigger wrapper class.

function getDropdownTriggerClass(): string

Returns: The dropdown trigger class string.

getDropdownItemIconClass()

Dropdown item icon container class.

function getDropdownItemIconClass(): string

Returns: The dropdown item icon class string.

getDropdownItemLabelClass()

Dropdown item label class.

function getDropdownItemLabelClass(): string

Returns: The dropdown item label class string.

getDropdownItemShortcutClass()

Dropdown item shortcut class.

function getDropdownItemShortcutClass(): string

Returns: The resulting string.

calculateDropdownPosition(triggerRect, menuRect, placement, align, offset)

Calculate dropdown menu position based on trigger element and placement.

function calculateDropdownPosition(
  triggerRect: DOMRect,
  menuRect: DOMRect,
  placement: DropdownPlacement,
  align?: DropdownAlign,
  offset?: number,
): DropdownPosition

• triggerRect — The bounding rect of the trigger element.
• menuRect — The bounding rect of the menu element.
• placement — The desired placement of the dropdown.
• align — The alignment within the placement axis.
• offset — The pixel offset from the trigger element.

Returns: The calculated absolute position for the dropdown.

getFlexClasses(options)

Generate classes for a flex container.

Usage in Svelte:

<script>
  import { getFlexClasses, getFlexGapStyle } from '@molecule/app-ui-svelte'
  export let direction = 'row'
  export let justify = undefined
  export let align = undefined
  export let gap = undefined
  $: classes = getFlexClasses({ direction, justify, align, gap })
  $: gapStyle = getFlexGapStyle(gap)
</script>
<div class={classes} style={gapStyle}>
  <slot />
</div>

function getFlexClasses(options?: FlexClassOptions): string

• options — The options.

Returns: The resulting string.

getFlexGapStyle(gap)

Gets the flex gap style.

function getFlexGapStyle(gap?: string | number): Record<string, string> | undefined

• gap — The gap.

Returns: The result.

getFormFieldClasses(options)

Generate classes for a form field wrapper.

Usage in Svelte:

<script>
  import { getFormFieldClasses, getFormLabelClasses, getFormErrorClass, getFormHintClass } from '@molecule/app-ui-svelte'
</script>
<form on:submit|preventDefault={handleSubmit}>
  <fieldset disabled={submitting} class="contents">
    <div class={getFormFieldClasses()}>
      <label for={name} class={getFormLabelClasses({ required })}>{label}</label>
      <slot />
      {#if error}<p class={getFormErrorClass()}>{error}</p>{/if}
      {#if hint && !error}<p class={getFormHintClass()}>{hint}</p>{/if}
    </div>
  </fieldset>
</form>

function getFormFieldClasses(options?: FormFieldClassOptions): string

• options — The options.

Returns: The resulting string.

getFormLabelClasses(options)

Generate classes for a form label.

function getFormLabelClasses(options?: { required?: boolean; className?: string }): string

• options — The options.
• options.required — Whether the field is required.
• options.className — Optional CSS class name to append.

Returns: The resulting class string.

getFormFieldsetClass()

Form fieldset class (for disabled state wrapping).

function getFormFieldsetClass(): string

Returns: The form fieldset class string.

getFormErrorClass()

Get the form error message class string.

function getFormErrorClass(): string

Returns: The form error class string.

getFormHintClass()

Get the form hint message class string.

function getFormHintClass(): string

Returns: The resulting string.

getGridClasses(options)

Generate classes for a grid container.

Usage in Svelte:

<script>
  import { getGridClasses, getGridStyle } from '@molecule/app-ui-svelte'
  export let columns = 3
  export let gap = 'md'
  $: classes = getGridClasses({ columns, gap })
  $: style = getGridStyle({ columns, gap })
</script>
<div class={classes} style={style}>
  <slot />
</div>

function getGridClasses(options?: GridClassOptions): string

• options — The options.

Returns: The resulting string.

getGridStyle(options)

Generate inline style for a grid container. Handles custom column/row templates and non-standard gap values.

function getGridStyle(options?: GridClassOptions): string

• options — The grid style options.

Returns: The inline style string.

getInputClasses(options)

Generate classes for an input element.

Usage in Svelte:

<script>
  import { getInputClasses } from '@molecule/app-ui-svelte'
  export let size = 'md'
  export let error = ''
  $: classes = getInputClasses({ size, error })
</script>
<input class={classes} />

function getInputClasses(options?: InputClassOptions): string

• options — The options.

Returns: The resulting string.

getInputLabelClasses(options)

Generate classes for an input label.

function getInputLabelClasses(options?: { required?: boolean; className?: string }): string

• options — The options.
• options.required — Whether the field is required.
• options.className — Optional CSS class name to append.

Returns: The resulting class string.

getInputWrapperClass()

Input wrapper class.

function getInputWrapperClass(): string

Returns: The input wrapper class string.

getInputInnerClass()

Input relative container class (for left/right element positioning).

function getInputInnerClass(): string

Returns: The input inner class string.

getInputLeftElementClass()

Left element container class.

function getInputLeftElementClass(): string

Returns: The input left element class string.

getInputRightElementClass()

Right element container class.

function getInputRightElementClass(): string

Returns: The input right element class string.

getInputClearButtonClass()

Clear button class.

function getInputClearButtonClass(): string

Returns: The input clear button class string.

getInputErrorClass()

Get the error message class string.

function getInputErrorClass(): string

Returns: The resulting string.

getInputHintClass()

Get the hint message class string.

function getInputHintClass(): string

Returns: The input hint class string.

getModalContentClasses(options)

Generate classes for the modal content container.

Usage in Svelte:

<script>
  import { getModalContentClasses, getModalOverlayClass, getModalWrapperClass, getModalHeaderClass, getModalTitleClass, getModalCloseClass, getModalBodyClass } from '@molecule/app-ui-svelte'
  export let open = false
  export let size = 'md'
  $: contentClass = getModalContentClasses({ size })
</script>
{#if open}
  <div class={getModalOverlayClass()} aria-hidden="true"></div>
  <div class={getModalWrapperClass()} on:click={onOverlayClick}>
    <div role="dialog" aria-modal="true" class={contentClass} on:click|stopPropagation>
      <div class={getModalHeaderClass()}>
        <h2 class={getModalTitleClass()}>{title}</h2>
        <button class={getModalCloseClass()} on:click={onClose}>X</button>
      </div>
      <div class={getModalBodyClass()}><slot /></div>
    </div>
  </div>
{/if}

function getModalContentClasses(options?: ModalClassOptions): string

• options — The options.

Returns: The resulting string.

getModalOverlayClass()

Get the modal overlay class string.

function getModalOverlayClass(): string

Returns: The modal overlay class string.

getModalHeaderClass()

Get the modal header class string.

function getModalHeaderClass(): string

Returns: The modal header class string.

getModalFooterClass()

Get the modal footer class string.

function getModalFooterClass(): string

Returns: The modal footer class string.

getModalTitleClass()

Get the modal title class string.

function getModalTitleClass(): string

Returns: The resulting string.

getModalDescriptionClass()

Get the modal description class string.

function getModalDescriptionClass(): string

Returns: The resulting string.

getModalCloseClass()

Get the modal close button class string.

function getModalCloseClass(): string

Returns: The modal close button class string.

getModalWrapperClass()

Get the modal centering wrapper class string.

function getModalWrapperClass(): string

Returns: The modal wrapper class string.

getModalWrapperStyle(centered)

Get the inline style for the modal centering wrapper. dialogWrapper has no dedicated ClassMap resolver option (it's a fixed token, not a { centered }-parameterized one), so a top-anchored (non-centered) layout is expressed via the one inline-style exception the workspace styling rule allows for values ClassMap genuinely cannot express.

Usage in Svelte:

<script>
  import { getModalWrapperClass, getModalWrapperStyle } from '@molecule/app-ui-svelte'
  export let centered = true
  $: wrapperStyle = getModalWrapperStyle(centered)
</script>
<div class={getModalWrapperClass()} style={wrapperStyle} on:click={onOverlayClick}>
  ...
</div>

function getModalWrapperStyle(centered?: boolean): Record<string, string> | undefined

• centered — Whether the modal is vertically centered. Defaults to true.

Returns: An inline style object, or undefined when centered (the default).

getModalBodyClass()

Get the modal body class string.

function getModalBodyClass(): string

Returns: The modal body class string.

getPaginationClasses(options)

Generate classes for the pagination nav container.

Usage in Svelte:

<script>
  import {
    getPaginationClasses, getPaginationContentClass, getPaginationItemClasses,
    getPaginationEllipsisClass, generatePaginationRange,
  } from '@molecule/app-ui-svelte'
  import { t } from '@molecule/app-i18n'
  export let page = 1
  export let totalPages = 10
  export let siblings = 1
  export let boundaries = 1
  $: range = generatePaginationRange(page, totalPages, siblings, boundaries)
  $: navClass = getPaginationClasses()
</script>
<nav role="navigation" aria-label={t('ui.pagination.nav')} class={navClass}>
  <ul class={getPaginationContentClass()}>
    {#each range as item}
      {#if item === 'ellipsis'}
        <li><span class={getPaginationEllipsisClass()}>...</span></li>
      {:else}
        <li>
          <button class={getPaginationItemClasses({ active: item === page, size })} on:click={() => onChange(item)}>
            {item}
          </button>
        </li>
      {/if}
    {/each}
  </ul>
</nav>

function getPaginationClasses(options?: PaginationClassOptions): string

• options — The options.

Returns: The resulting string.

getPaginationContentClass()

Get the pagination content (ul) class string.

function getPaginationContentClass(): string

Returns: The pagination content class string.

getPaginationEllipsisClass()

Get the pagination ellipsis class string.

function getPaginationEllipsisClass(): string

Returns: The pagination ellipsis class string.

getPaginationItemClasses(options)

Generate classes for a pagination button item.

function getPaginationItemClasses(options?: {
  active?: boolean
  size?: Size
  className?: string
}): string

• options — The options.
• options.active — Whether the item is currently active.
• options.size — The size of the pagination item.
• options.className — Optional CSS class name to append.

Returns: The resulting class string.

getPaginationIconData(direction)

Get icon data for a pagination navigation direction.

function getPaginationIconData(direction: string): IconData

• direction — Navigation direction (first, prev, next, last, ellipsis)

Returns: Icon data from the current icon set

getProgressClasses(options)

Generate classes for the progress bar track.

Usage in Svelte:

<script>
  import { getProgressClasses, getProgressIndicatorClasses, getProgressPercentage } from '@molecule/app-ui-svelte'
  export let value = 0
  export let max = 100
  export let size = 'md'
  export let color = 'primary'
  $: percentage = getProgressPercentage(value, max)
  $: trackClass = getProgressClasses({ size })
  $: indicatorClass = getProgressIndicatorClasses({ color })
</script>
<div class={cm.w('full')}>
  <div class={trackClass} role="progressbar" aria-valuenow={value} aria-valuemin={0} aria-valuemax={max}>
    <div class={indicatorClass} style="transform: translateX(-{100 - percentage}%)" />
  </div>
</div>

function getProgressClasses(options?: ProgressClassOptions): string

• options — The options.

Returns: The resulting class string.

getProgressIndicatorClasses(options)

Generate classes for the progress indicator bar.

function getProgressIndicatorClasses(options?: {
  color?: ColorVariant
  indeterminate?: boolean
  className?: string
}): string

• options — The options.
• options.color — The color variant for the indicator.
• options.indeterminate — Whether the progress is indeterminate.
• options.className — Optional CSS class name to append.

Returns: The resulting class string.

getProgressPercentage(value, max)

Calculate the percentage of progress.

function getProgressPercentage(value: number, max?: number): number

• value — The current progress value.
• max — The maximum progress value.

Returns: The calculated percentage (0-100).

getProgressWrapperClass()

Progress wrapper class.

function getProgressWrapperClass(): string

Returns: The progress wrapper class string.

getProgressLabelContainerClass()

Progress label container class.

function getProgressLabelContainerClass(): string

Returns: The progress label container class string.

getProgressLabelTextClass()

Progress label text class.

function getProgressLabelTextClass(): string

Returns: The progress label text class string.

getRadioClasses(options)

Generate classes for a radio input element.

Usage in Svelte:

<script>
  import { getRadioClasses, getRadioGroupClasses } from '@molecule/app-ui-svelte'
  export let direction = 'vertical'
  export let error = ''
  $: radioClass = getRadioClasses({ error })
  $: groupClass = getRadioGroupClasses(direction)
</script>

function getRadioClasses(options?: RadioClassOptions): string

• options — The options.

Returns: The resulting string.

getRadioGroupLabelClasses(className)

Generate the group label classes.

function getRadioGroupLabelClasses(className?: string): string

• className — Optional CSS class name to append.

Returns: The resulting class string.

getRadioGroupClasses(direction)

Generate the flex container class for the radio options.

function getRadioGroupClasses(direction?: 'horizontal' | 'vertical'): string

• direction — The layout direction of the radio group.

Returns: The resulting class string.

getRadioOptionLabelClass(disabled)

Generate the option label wrapper class.

function getRadioOptionLabelClass(disabled?: boolean): string

• disabled — Whether the radio option is disabled.

Returns: The resulting class string.

getRadioOptionTextClass()

Radio option text class.

function getRadioOptionTextClass(): string

Returns: The radio option text class string.

getRadioErrorClass(className)

Error message class.

function getRadioErrorClass(className?: string): string

• className — Optional CSS class name to append.

Returns: The radio error class string.

getSelectClasses(options)

Generate classes for a select element.

Usage in Svelte:

<script>
  import { getSelectClasses } from '@molecule/app-ui-svelte'
  export let size = 'md'
  export let error = ''
  $: classes = getSelectClasses({ size, error })
</script>
<select class={classes}>
  <slot />
</select>

function getSelectClasses(options?: SelectClassOptions): string

• options — The options.

Returns: The resulting string.

getSelectLabelClasses(options)

Generate classes for a select label.

function getSelectLabelClasses(options?: { required?: boolean; className?: string }): string

• options — The options.
• options.required — Whether the field is required.
• options.className — Optional CSS class name to append.

Returns: The resulting class string.

getSelectChevronIconData()

Get icon data for the select dropdown chevron.

function getSelectChevronIconData(): IconData

Returns: Icon data for a downward chevron from the current icon set

groupSelectOptions(options)

Group options by their group field for optgroup rendering.

function groupSelectOptions(options: SelectOption<T>[]): Record<string, SelectOption<T>[]>

• options — The select options to group.

Returns: A record mapping group names to their options.

getSelectWrapperClass()

Select wrapper class.

function getSelectWrapperClass(): string

Returns: The select wrapper class string.

getSelectInnerClass()

Select relative container class.

function getSelectInnerClass(): string

Returns: The resulting string.

getSelectErrorClass()

Get the error message class string.

function getSelectErrorClass(): string

Returns: The select error class string.

getSelectHintClass()

Get the hint message class string.

function getSelectHintClass(): string

Returns: The resulting string.

getSeparatorClasses(options)

Generate classes for a separator element.

Usage in Svelte:

<script>
  import { getSeparatorClasses } from '@molecule/app-ui-svelte'
  export let orientation = 'horizontal'
  export let decorative = true
  $: classes = getSeparatorClasses({ orientation })
</script>
<div
  role={decorative ? 'none' : 'separator'}
  aria-orientation={decorative ? undefined : orientation}
  class={classes}
/>

function getSeparatorClasses(options?: SeparatorClassOptions): string

• options — The options.

Returns: The resulting string.

getSkeletonClasses(options)

Generate classes for a skeleton element.

Usage in Svelte:

<script>
  import { getSkeletonClasses, getSkeletonStyle } from '@molecule/app-ui-svelte'
  export let width = undefined
  export let height = undefined
  export let circle = false
  export let animation = 'pulse'
  $: classes = getSkeletonClasses({ circle, animation })
  $: style = getSkeletonStyle({ width, height, circle, borderRadius })
</script>
<div class={classes} style={style} />

function getSkeletonClasses(options?: SkeletonClassOptions): string

• options — The options.

Returns: The resulting string.

getSkeletonStyle(options)

Generate inline style for a skeleton element.

function getSkeletonStyle(options: {
  width?: string | number
  height?: string | number
  circle?: boolean
  borderRadius?: string | number
}): string

• options — The style options.
• options.width — The width of the skeleton element.
• options.height — The height of the skeleton element.
• options.circle — Whether the skeleton is circular.
• options.borderRadius — Custom border radius value.

Returns: The inline style string.

getSkeletonTextConfig(lines)

Generate classes and style for a SkeletonText component (multiple lines).

function getSkeletonTextConfig(lines?: number): { width: string; height: number }[]

• lines — The lines.

Returns: The result.

getSkeletonTextContainerClass()

Skeleton text container class.

function getSkeletonTextContainerClass(): string

Returns: The skeleton text container class string.

getSpacerClasses(options)

Generate classes for a spacer element.

Usage in Svelte:

<script>
  import { getSpacerClasses, getSpacerStyle } from '@molecule/app-ui-svelte'
  export let size = 'md'
  export let horizontal = false
  $: classes = getSpacerClasses({ size, horizontal })
  $: style = getSpacerStyle({ size, horizontal })
</script>
<div class={classes} style={style} />

function getSpacerClasses(options?: SpacerClassOptions): string

• options — The options.

Returns: The resulting class string.

getSpacerStyle(options)

Generate inline style for custom spacer sizes.

function getSpacerStyle(options?: SpacerClassOptions): string

• options — The spacer style options.

Returns: The inline style string.

getSpinnerClasses(options)

Generate classes for a spinner element.

Usage in Svelte:

<script>
  import { getSpinnerClasses, getSpinnerColorStyle } from '@molecule/app-ui-svelte'
  import { t } from '@molecule/app-i18n'
  export let size = 'md'
  export let color = undefined
  $: classes = getSpinnerClasses({ size })
  $: colorStyle = getSpinnerColorStyle(color)
</script>
<div role="status" aria-label={label || t('ui.spinner.loading')} class={classes} style={colorStyle}>
  {#if label}<span class="sr-only">{label}</span>{/if}
</div>

function getSpinnerClasses(options?: SpinnerClassOptions): string

• options — The options.

Returns: The resulting string.

getSpinnerColorStyle(color)

Get inline style for custom spinner color. Returns undefined if the color is a standard variant or not provided.

function getSpinnerColorStyle(color?: string): Record<string, string> | undefined

• color — The color variant or custom color string.

Returns: An inline style object, or undefined for standard variants.

getSpinnerSrOnlyClass()

Screen reader only class for spinner labels.

function getSpinnerSrOnlyClass(): string

Returns: The screen reader only class string.

getSwitchClasses(options)

Generate classes for the switch track element.

Usage in Svelte:

<script>
  import { getSwitchClasses, getSwitchThumbClasses, getSwitchWrapperClasses } from '@molecule/app-ui-svelte'
  export let checked = false
  export let size = 'md'
  export let disabled = false
  $: state = checked ? 'checked' : 'unchecked'
  $: trackClass = getSwitchClasses({ size })
  $: thumbClass = getSwitchThumbClasses({ size })
  $: wrapperClass = getSwitchWrapperClasses({ disabled })
</script>
<label class={wrapperClass}>
  <button type="button" role="switch" aria-checked={checked} data-state={state} class={trackClass} on:click>
    <span data-state={state} class={thumbClass} />
  </button>
  {#if label}<span class={cm.textSize('sm')}>{label}</span>{/if}
</label>

function getSwitchClasses(options?: SwitchClassOptions): string

• options — The options.

Returns: The resulting string.

getSwitchThumbClasses(options)

Generate classes for the switch thumb element.

function getSwitchThumbClasses(options?: { size?: Size }): string

• options — The options.
• options.size — The size of the switch thumb.

Returns: The resulting class string.

getSwitchWrapperClasses(options)

Generate classes for the switch wrapper (label element).

function getSwitchWrapperClasses(options?: { disabled?: boolean }): string

• options — The options.
• options.disabled — Whether the switch is disabled.

Returns: The resulting class string.

getSwitchLabelTextClass()

Switch label text class.

function getSwitchLabelTextClass(): string

Returns: The switch label text class string.

getTableClasses(options)

Generate classes for the table element.

Usage in Svelte:

<script>
  import {
    getTableClasses, getTableHeaderClass, getTableBodyClass,
    getTableRowClasses, getTableHeadClasses, getTableCellClasses,
  } from '@molecule/app-ui-svelte'
  export let bordered = false
  export let striped = false
  export let hoverable = true
  $: tableClass = getTableClasses({ bordered })
</script>
<div class={cm.tableWrapper}>
  <table class={tableClass}>
    <thead class={getTableHeaderClass()}>
      <tr class={getTableRowClasses()}>
        {#each columns as col}
          <th class={getTableHeadClasses({ align: col.align, sortable: col.sortable })}>{col.header}</th>
        {/each}
      </tr>
    </thead>
    <tbody class={getTableBodyClass()}>
      {#each data as row, i}
        <tr class={getTableRowClasses({ striped, hoverable, index: i })}>
          {#each columns as col}
            <td class={getTableCellClasses({ align: col.align })}>{row[col.key]}</td>
          {/each}
        </tr>
      {/each}
    </tbody>
  </table>
</div>

function getTableClasses(options?: TableClassOptions): string

• options — The options.

Returns: The resulting string.

getTableHeaderClass()

Get the table header class string.

function getTableHeaderClass(): string

Returns: The table header class string.

getTableBodyClass()

Get the table body class string.

function getTableBodyClass(): string

Returns: The table body class string.

getTableWrapperClass()

Table wrapper class.

function getTableWrapperClass(): string

Returns: The table wrapper class string.

getTableLoadingOverlayClass()

Loading overlay class.

function getTableLoadingOverlayClass(): string

Returns: The resulting string.

getTableEmptyCellClass()

Empty state cell class.

function getTableEmptyCellClass(): string

Returns: The resulting string.

getTableRowClasses(options)

Generate classes for a table row.

function getTableRowClasses(options?: {
  striped?: boolean
  hoverable?: boolean
  index?: number
  clickable?: boolean
  className?: string
}): string

• options — The options.
• options.striped — Whether striped row styling is enabled.
• options.hoverable — Whether hover styling is enabled.
• options.index — The row index for striped styling.
• options.clickable — Whether the row is clickable.
• options.className — Optional CSS class name to append.

Returns: The resulting class string.

getTableHeadClasses(options)

Generate classes for a table header cell.

function getTableHeadClasses(options?: {
  align?: 'left' | 'center' | 'right'
  sortable?: boolean
  className?: string
}): string

• options — The options.
• options.align — The text alignment of the header cell.
• options.sortable — Whether the column is sortable.
• options.className — Optional CSS class name to append.

Returns: The resulting class string.

getTableCellClasses(options)

Generate classes for a table data cell.

function getTableCellClasses(options?: {
  align?: 'left' | 'center' | 'right'
  className?: string
}): string

• options — The options.
• options.align — The text alignment of the cell.
• options.className — Optional CSS class name to append.

Returns: The resulting class string.

getTableSortWrapperClass()

Sort indicator container class.

function getTableSortWrapperClass(): string

Returns: The table sort wrapper class string.

getTableSortIconClass()

Sort icon class.

function getTableSortIconClass(): string

Returns: The table sort icon class string.

getSortIconData(direction)

Get icon data for a table sort direction indicator.

function getSortIconData(direction: 'asc' | 'desc'): IconData

• direction — Sort direction ('asc' or 'desc')

Returns: Icon data from the current icon set

getTabsListClasses(options)

Generate classes for the tabs list container.

Usage in Svelte:

<script>
  import { getTabsListClasses, getTabsTriggerClasses, getTabsContentClass } from '@molecule/app-ui-svelte'
  export let items = []
  export let value = ''
  export let fitted = false
  $: listClass = getTabsListClasses({ fitted })
</script>
<div class={listClass} role="tablist">
  {#each items as item}
    <button
      role="tab"
      aria-selected={value === item.value}
      data-state={value === item.value ? 'active' : 'inactive'}
      disabled={item.disabled}
      class={getTabsTriggerClasses({ fitted })}
      on:click={() => onChange(item.value)}
    >
      {item.label}
    </button>
  {/each}
</div>
{#if activeContent}
  <div role="tabpanel" class={getTabsContentClass()}>{activeContent}</div>
{/if}

function getTabsListClasses(options?: TabsListClassOptions): string

• options — The options.

Returns: The resulting string.

getTabsTriggerClasses(options)

Generate classes for a tab trigger button.

function getTabsTriggerClasses(options?: { fitted?: boolean; className?: string }): string

• options — The options.
• options.fitted — Whether the tab takes equal width.
• options.className — Optional CSS class name to append.

Returns: The resulting class string.

getTabsContentClass()

Get the tab content panel class string.

function getTabsContentClass(): string

Returns: The tabs content class string.

getTextareaClasses(options)

Generate classes for a textarea element.

Usage in Svelte:

<script>
  import { getTextareaClasses } from '@molecule/app-ui-svelte'
  export let error = ''
  $: classes = getTextareaClasses({ error })
</script>
<textarea class={classes} />

function getTextareaClasses(options?: TextareaClassOptions): string

• options — The options.

Returns: The resulting string.

getTextareaLabelClasses(options)

Generate classes for a textarea label.

function getTextareaLabelClasses(options?: { required?: boolean; className?: string }): string

• options — The options.
• options.required — Whether the field is required.
• options.className — Optional CSS class name to append.

Returns: The resulting class string.

getTextareaWrapperClass()

Textarea wrapper class.

function getTextareaWrapperClass(): string

Returns: The textarea wrapper class string.

getTextareaErrorClass()

Get the error message class string.

function getTextareaErrorClass(): string

Returns: The textarea error class string.

getTextareaHintClass()

Get the hint message class string.

function getTextareaHintClass(): string

Returns: The resulting string.

getToastClasses(options)

Generate classes for a toast element.

Usage in Svelte:

<script>
  import { getToastClasses, getToastTitleClass, getToastDescriptionClass, getToastCloseClass } from '@molecule/app-ui-svelte'
  import { t } from '@molecule/app-i18n'
  export let status = 'info'
  $: classes = getToastClasses({ status })
</script>
<div role="alert" data-state="open" class={classes}>
  <span class={cm.toastIconWrapper}>{@html icon}</span>
  <div class={cm.toastContentWrapper}>
    {#if title}<div class={getToastTitleClass()}>{title}</div>{/if}
    {#if description}<div class={getToastDescriptionClass()}>{description}</div>{/if}
  </div>
  {#if dismissible}
    <button class={getToastCloseClass()} on:click={onDismiss} aria-label={t('ui.toast.close')}>X</button>
  {/if}
</div>

function getToastClasses(options?: ToastClassOptions): string

• options — The options.

Returns: The resulting string.

getToastTitleClass()

Get the toast title class string.

function getToastTitleClass(): string

Returns: The toast title class string.

getToastDescriptionClass()

Get the toast description class string.

function getToastDescriptionClass(): string

Returns: The toast description class string.

getToastCloseClass()

Get the toast close button class string.

function getToastCloseClass(): string

Returns: The toast close button class string.

getToastIconWrapperClass()

Toast icon container class.

function getToastIconWrapperClass(): string

Returns: The resulting string.

getToastContentWrapperClass()

Toast content wrapper class.

function getToastContentWrapperClass(): string

Returns: The resulting string.

getToastContainerClasses(position, className)

Generate classes for the toast container.

function getToastContainerClasses(position?: ToastPosition, className?: string): string

• position — The position.
• className — The CSS class name.

Returns: The resulting string.

getToastIconData(status)

Get icon data for a toast status.

function getToastIconData(status: string): IconData | null

• status — Toast status variant (info, success, warning, error)

Returns: Icon data from the current icon set, or null if status is unknown

getToastCloseIconData()

Get icon data for the close/dismiss button.

function getToastCloseIconData(): IconData

Returns: Icon data for the X mark icon

generateToastId()

Generates toast id.

function generateToastId(): string

Returns: The created instance.

createToastHelpers()

Create a toast store helper for Svelte stores. Returns functions for managing toast state in a Svelte writable store.

function createToastHelpers(): {
  getToasts(): ToastData[]
  addToast(toast: Omit<ToastData, 'id'>): string
  removeToast(id: string): void
}

Returns: An object with getToasts, addToast, and removeToast methods.

getTooltipArrowStyle(placement)

Get the inline style for the tooltip's arrow element. tooltipContent has no dedicated ClassMap resolver for a directional pointer, so its shape/position is expressed via inline style — the sanctioned exception for values ClassMap cannot express. Its color is NOT hardcoded: var(--color-surface) / var(--color-border) are the same CSS custom properties the bg-surface/border classes in tooltipContent resolve to, so the arrow always matches the tooltip body in both themes. Render it as a SIBLING of the tooltip content box, not a descendant — tooltipContent sets overflow-hidden, which would clip an arrow meant to poke past the box's own edge.

Usage in Svelte:

<script>
  import { getTooltipClasses, getTooltipArrowStyle } from '@molecule/app-ui-svelte'
  export let placement = 'top'
  export let hasArrow = false
</script>
<div style="position:absolute;top:{position.top}px;left:{position.left}px;z-index:9999;">
  <div role="tooltip" class={getTooltipClasses()}>{content}</div>
  {#if hasArrow}
    <span aria-hidden="true" style={getTooltipArrowStyle(placement)}></span>
  {/if}
</div>

function getTooltipArrowStyle(placement: TooltipPlacement): Record<string, string>

• placement — The tooltip's resolved placement.

Returns: Inline style positioning the rotated-square arrow for that placement.

getTooltipClasses(options)

Generate classes for the tooltip content element.

Usage in Svelte:

<script>
  import { getTooltipClasses, calculateTooltipPosition } from '@molecule/app-ui-svelte'
  export let placement = 'top'
  let triggerEl, tooltipEl
  let visible = false
  let position = { top: 0, left: 0 }
  $: classes = getTooltipClasses()
</script>
<div bind:this={triggerEl} on:mouseenter={() => visible = true} on:mouseleave={() => visible = false}>
  <slot />
</div>
{#if visible}
  <div bind:this={tooltipEl} role="tooltip" class={classes} style="position:absolute;top:{position.top}px;left:{position.left}px;z-index:9999;">
    {content}
  </div>
{/if}

function getTooltipClasses(options?: TooltipClassOptions): string

• options — The options.

Returns: The resulting string.

getTooltipTriggerClass()

Tooltip trigger wrapper class.

function getTooltipTriggerClass(): string

Returns: The tooltip trigger class string.

calculateTooltipPosition(triggerRect, tooltipRect, placement, offset)

Calculate tooltip position based on trigger and tooltip element rects.

function calculateTooltipPosition(
  triggerRect: DOMRect,
  tooltipRect: DOMRect,
  placement: TooltipPlacement,
  offset?: number,
): TooltipPosition

• triggerRect — The bounding rect of the trigger element.
• tooltipRect — The bounding rect of the tooltip element.
• placement — The desired tooltip placement.
• offset — The pixel offset from the trigger element.

Returns: The calculated absolute position for the tooltip.

cn(inputs)

Merge class names, filtering out falsy values.

Use this in Svelte components to conditionally combine classes:

<script>
  import { cn } from '@molecule/app-ui-svelte'
  export let variant = 'solid'
  export let className = ''
  $: classes = cn('base-class', variant === 'solid' && 'solid-variant', className)
</script>
<button class={classes}><slot /></button>

function cn(inputs?: (string | false | null | undefined)[]): string

• inputs — Class name strings, or falsy values to be filtered out.

Returns: A single space-separated class string with falsy values removed.

getInitials(name)

Gets up to two uppercase initials from a name string. Used by the avatar component for fallback display.

function getInitials(name: string): string

• name — A full name to extract initials from (e.g. "John Doe").

Returns: The uppercase initials, at most two characters (e.g. "JD").

generatePaginationRange(currentPage, totalPages, siblings, boundaries)

Generate a pagination range with page numbers and 'ellipsis' markers. Used by pagination components to render page navigation controls.

function generatePaginationRange(
  currentPage: number,
  totalPages: number,
  siblings: number,
  boundaries: number,
): (number | 'ellipsis')[]

• currentPage — The currently active page number (1-indexed).
• totalPages — The total number of pages.
• siblings — Number of sibling pages to show on each side of the current page.
• boundaries — Number of pages to always show at the start and end.

Returns: Array of page numbers and 'ellipsis' string markers.

getIconData(name)

Gets icon data by name from the current icon set.

function getIconData(name: IconName): IconData

• name — Icon name

Returns: Icon data for SVG rendering in Svelte templates

Constants

accordionChevronClass (deprecated)

Accordion chevron class constant.

const accordionChevronClass: string

alertDismissClass (deprecated)

Alert dismiss class constant.

const alertDismissClass: string

alertIconClass

The alert icon class.

const alertIconClass: string

alertContentClass (deprecated)

Alert content class constant.

const alertContentClass: string

alertStatusVariantMap

Re-export status variant map for direct access.

const alertStatusVariantMap: Record<
  ColorVariant,
  'success' | 'warning' | 'error' | 'info' | 'default'
>

avatarInitialsClass (deprecated)

Avatar initials class constant.

const avatarInitialsClass: string

cardPaddingMap

Map of card padding.

const cardPaddingMap: Record<Size | 'none', string>

checkboxLabelWrapperClass (deprecated)

Checkbox label wrapper class constant.

const checkboxLabelWrapperClass: string

checkboxContainerClass

Container class for the checkbox component.

const checkboxContainerClass: string

dropdownTriggerClass

The dropdown trigger class.

const dropdownTriggerClass: string

dropdownItemIconClass (deprecated)

Dropdown item icon class constant.

const dropdownItemIconClass: string

dropdownItemLabelClass (deprecated)

Dropdown item label class constant.

const dropdownItemLabelClass: string

dropdownItemShortcutClass

Dropdown item shortcut class constant.

const dropdownItemShortcutClass: string

formFieldsetClass (deprecated)

Form fieldset class constant.

const formFieldsetClass: string

inputWrapperClass

The input wrapper class.

const inputWrapperClass: string

inputRelativeClass (deprecated)

Input relative class constant.

const inputRelativeClass: string

inputLeftElementClass (deprecated)

Input left element class constant.

const inputLeftElementClass: string

inputRightElementClass (deprecated)

Input right element class constant.

const inputRightElementClass: string

inputClearButtonClass (deprecated)

Input clear button class constant.

const inputClearButtonClass: string

modalBodyClass (deprecated)

Modal body class.

const modalBodyClass: string

progressWrapperClass (deprecated)

Progress wrapper class constant.

const progressWrapperClass: string

progressLabelContainerClass

The progress label container class.

const progressLabelContainerClass: string

progressLabelClass (deprecated)

Progress label class constant.

const progressLabelClass: string

progressSizeHeightMap (deprecated)

Progress size height map constant.

const progressSizeHeightMap: Record<Size, string>

progressColorMap (deprecated)

Progress color map constant.

const progressColorMap: Record<ColorVariant, string>

radioOptionTextClass (deprecated)

Radio option text class constant.

const radioOptionTextClass: string

selectWrapperClass

The select wrapper class.

const selectWrapperClass: string

Returns: The result.

selectRelativeClass (deprecated)

Select relative class constant.

const selectRelativeClass: string

skeletonTextContainerClass

The skeleton text container class.

const skeletonTextContainerClass: string

spacerSizeMap

Map of spacer size.

const spacerSizeMap: Record<Size, string>

switchLabelTextClass (deprecated)

Switch label text class constant.

const switchLabelTextClass: string

tableWrapperClass (deprecated)

Table wrapper class constant.

const tableWrapperClass: string

tableLoadingOverlayClass

The table loading overlay class.

const tableLoadingOverlayClass: string

Returns: The result.

tableEmptyCellClass (deprecated)

Table empty cell class constant.

const tableEmptyCellClass: string

tableSortIndicatorClass (deprecated)

Table sort indicator class constant.

const tableSortIndicatorClass: string

tableSortIconClass (deprecated)

Table sort icon class constant.

const tableSortIconClass: string

textareaWrapperClass (deprecated)

Textarea wrapper class constant.

const textareaWrapperClass: string

toastIconClass (deprecated)

Toast icon class constant.

const toastIconClass: string

toastContentClass

The toast content class.

const toastContentClass: string

Returns: The result.

toastPositionClasses

The toast position classes.

const toastPositionClasses: Record<ToastPosition, string>

toastStatusVariantMap

Re-export status variant map for direct access.

const toastStatusVariantMap: Record<
  ColorVariant,
  'success' | 'warning' | 'error' | 'info' | 'default'
>

tooltipTriggerClass (deprecated)

Tooltip trigger class constant.

const tooltipTriggerClass: string

statusIconMap

Status icon name mapping for Alert/Toast components.

const statusIconMap: Record<string, string>

Injection Notes

Requirements

Peer dependencies:

• @molecule/app-i18n ^1.0.1
• @molecule/app-icons ^1.0.1
• @molecule/app-ui ^1.0.1
• svelte ^4.0.0 || ^5.0.0

Runtime Dependencies

• @molecule/app-i18n

• @molecule/app-icons

• @molecule/app-ui

• svelte

• setClassMap() must run before the first generator call — every generator resolves through getClassMap() from @molecule/app-ui, which THROWS until a ClassMap bond (e.g. @molecule/app-ui-tailwind) is set. Do it in the root layout's module context or first component script.

• Recompute reactively: wrap generator calls in $: (or $derived in runes mode) so class strings update when props change — a plain const computes once.

• There are no prebuilt Svelte components here; per-component usage recipes are on each generator's docs below.

Translations

Translation strings are provided by @molecule/app-locales-ui.