tessl/npm-vuetify

Vue Material Component Framework implementing Google's Material Design specification with comprehensive UI components, theming system, and accessibility features.

—

Pending

Overview

Eval results

Files

Feedback

Name: tessl/npm-vuetify
Author: tessl

Components for providing user feedback, displaying status, and handling user interactions through alerts, notifications, progress indicators, and modal dialogs.

Capabilities

VAlert

Alert component for displaying important messages and notifications with various severity levels.

/**
 * Alert component for notifications and messages
 */
const VAlert: Component;

interface AlertProps {
  /** Alert message text */
  text?: string;
  /** Alert title */
  title?: string;
  /** Alert type/color */
  type?: 'success' | 'info' | 'warning' | 'error';
  /** Alert color */
  color?: string;
  /** Alert variant */
  variant?: 'flat' | 'elevated' | 'tonal' | 'outlined' | 'text' | 'plain';
  /** Alert density */
  density?: 'default' | 'comfortable' | 'compact';
  /** Closable alert */
  closable?: boolean;
  /** Close icon */
  closeIcon?: string;
  /** Close label for accessibility */
  closeLabel?: string;
  /** Prepend icon */
  prependIcon?: string;
  /** Append icon */
  appendIcon?: string;
  /** Icon for the alert type */
  icon?: string | boolean;
  /** Border location */
  border?: boolean | 'top' | 'end' | 'bottom' | 'start';
  /** Prominent style */
  prominent?: boolean;
  /** Alert width */
  width?: string | number;
  /** Maximum width */
  maxWidth?: string | number;
  /** Minimum width */
  minWidth?: string | number;
  /** Alert height */
  height?: string | number;
  /** Maximum height */
  maxHeight?: string | number;
  /** Minimum height */
  minHeight?: string | number;
  /** Elevation level */
  elevation?: number | string;
  /** Rounded corners */
  rounded?: boolean | string | number;
  /** Tile style (no border radius) */
  tile?: boolean;
}

// Events
interface AlertEvents {
  'click:close': (event: MouseEvent) => void;
  'click:prepend': (event: MouseEvent) => void;
  'click:append': (event: MouseEvent) => void;
}

Usage Examples:

<template>
  <!-- Basic alerts -->
  <v-alert type="success" text="Operation completed successfully!" />
  
  <v-alert type="warning" title="Warning" text="Please review your settings." />
  
  <v-alert type="error" closable @click:close="handleClose">
    <v-alert-title>Error occurred</v-alert-title>
    Unable to save changes. Please try again.
  </v-alert>

  <!-- Custom styled alert -->
  <v-alert
    color="purple"
    variant="tonal"
    prominent
    border="start"
    icon="mdi-information"
  >
    <strong>Pro Tip:</strong> You can customize alerts with different variants and borders.
  </v-alert>

  <!-- Alert with actions -->
  <v-alert type="info" closable>
    <div class="d-flex align-center">
      <div class="flex-grow-1">New update available</div>
      <v-btn size="small" variant="outlined">Update</v-btn>
    </div>
  </v-alert>
</template>

<script setup>
const handleClose = () => {
  console.log('Alert closed');
};
</script>

VSnackbar

Toast notification component for displaying temporary messages with optional actions.

/**
 * Snackbar toast notification component
 */
const VSnackbar: Component;

interface SnackbarProps {
  /** Snackbar visibility */
  modelValue?: boolean;
  /** Snackbar text content */
  text?: string;
  /** Display timeout in milliseconds */
  timeout?: number | string;
  /** Multi-line layout */
  multiLine?: boolean;
  /** Vertical positioning */
  vertical?: boolean;
  /** Snackbar location */
  location?: 
    | 'top' | 'bottom' | 'left' | 'right' | 'center'
    | 'top left' | 'top right' | 'bottom left' | 'bottom right'
    | 'top center' | 'bottom center' | 'center left' | 'center right';
  /** Snackbar color */
  color?: string;
  /** Snackbar variant */
  variant?: 'flat' | 'elevated' | 'tonal' | 'outlined' | 'text' | 'plain';
  /** Rounded corners */
  rounded?: boolean | string | number;
  /** Tile style */
  tile?: boolean;
  /** Elevation level */
  elevation?: number | string;
  /** Minimum width */
  minWidth?: string | number;
  /** Maximum width */
  maxWidth?: string | number;
  /** Width */
  width?: string | number;
  /** Height */
  height?: string | number;
  /** Z-index */
  zIndex?: number | string;
  /** Close on content click */
  closeOnContentClick?: boolean;
  /** Close on back navigation */
  closeOnBack?: boolean;
}

// Events
interface SnackbarEvents {
  'update:modelValue': (visible: boolean) => void;
}

Usage Examples:

<template>
  <!-- Basic snackbar -->
  <v-snackbar
    v-model="snackbar"
    :timeout="3000"
  >
    {{ snackbarText }}
    <template #actions>
      <v-btn color="pink" variant="text" @click="snackbar = false">
        Close
      </v-btn>
    </template>
  </v-snackbar>

  <!-- Multi-line snackbar -->
  <v-snackbar
    v-model="multiLineSnackbar"
    multi-line
    location="top"
  >
    This is a multi-line snackbar message that can contain longer text content.
    <template #actions>
      <v-btn color="primary" variant="text" @click="handleAction">
        Action
      </v-btn>
      <v-btn variant="text" @click="multiLineSnackbar = false">
        Dismiss
      </v-btn>
    </template>
  </v-snackbar>

  <!-- Vertical snackbar -->
  <v-snackbar
    v-model="verticalSnackbar"
    vertical
    location="top right"
  >
    <div class="text-subtitle-1 pb-2">Notification</div>
    <p>Your changes have been saved successfully.</p>
    
    <template #actions>
      <v-btn color="success" variant="text" @click="verticalSnackbar = false">
        OK
      </v-btn>
    </template>
  </v-snackbar>
</template>

<script setup>
const snackbar = ref(false);
const snackbarText = ref('Operation completed');
const multiLineSnackbar = ref(false);
const verticalSnackbar = ref(false);

const showSnackbar = (message) => {
  snackbarText.value = message;
  snackbar.value = true;
};
</script>

VProgressLinear

Linear progress indicator for showing task completion or loading states.

/**
 * Linear progress indicator component
 */
const VProgressLinear: Component;

interface ProgressLinearProps {
  /** Progress value (0-100) */
  modelValue?: number | string;
  /** Buffer value for buffered progress */
  buffer?: number | string;
  /** Indeterminate progress animation */
  indeterminate?: boolean;
  /** Reverse progress direction */
  reverse?: boolean;
  /** Stream animation */
  stream?: boolean;
  /** Progress bar color */
  color?: string;
  /** Background color */
  bgColor?: string;
  /** Buffer color */
  bufferColor?: string;
  /** Progress bar height */
  height?: number | string;
  /** Rounded ends */
  rounded?: boolean;
  /** Striped pattern */
  striped?: boolean;
  /** Location on page */
  location?: 'top' | 'bottom';
  /** Absolute positioning */
  absolute?: boolean;
  /** Active state */
  active?: boolean;
}

// Events
interface ProgressLinearEvents {
  'update:modelValue': (value: number) => void;
}

Usage Examples:

<template>
  <!-- Basic progress bar -->
  <v-progress-linear
    v-model="progress"
    color="primary"
    height="8"
  />

  <!-- Indeterminate progress -->
  <v-progress-linear
    indeterminate
    color="cyan"
  />

  <!-- Buffered progress -->
  <v-progress-linear
    v-model="downloadProgress"
    :buffer="bufferProgress"
    color="success"
    height="6"
  />

  <!-- Striped progress -->
  <v-progress-linear
    v-model="uploadProgress"
    striped
    color="warning"
    height="10"
  />

  <!-- Top page loading indicator -->
  <v-progress-linear
    :model-value="pageLoadProgress"
    location="top"
    color="primary"
    :active="loading"
  />
</template>

<script setup>
const progress = ref(75);
const downloadProgress = ref(65);
const bufferProgress = ref(85);
const uploadProgress = ref(40);
const pageLoadProgress = ref(0);
const loading = ref(false);

// Simulate loading
const simulateProgress = () => {
  loading.value = true;
  pageLoadProgress.value = 0;
  
  const interval = setInterval(() => {
    pageLoadProgress.value += 10;
    if (pageLoadProgress.value >= 100) {
      clearInterval(interval);
      loading.value = false;
    }
  }, 100);
};
</script>

VProgressCircular

Circular progress indicator for loading states and progress visualization.

/**
 * Circular progress indicator component
 */
const VProgressCircular: Component;

interface ProgressCircularProps {
  /** Progress value (0-100) */
  modelValue?: number | string;
  /** Indeterminate progress animation */
  indeterminate?: boolean;
  /** Progress circle color */
  color?: string;
  /** Background color */
  bgColor?: string;
  /** Circle size */
  size?: number | string;
  /** Stroke width */
  width?: number | string;
  /** Rotate angle */
  rotate?: number | string;
}

// Events
interface ProgressCircularEvents {
  'update:modelValue': (value: number) => void;
}

Usage Examples:

<template>
  <!-- Basic circular progress -->
  <v-progress-circular
    v-model="circularProgress"
    color="primary"
  />

  <!-- Indeterminate spinner -->
  <v-progress-circular
    indeterminate
    color="purple"
    :size="64"
    :width="6"
  />

  <!-- Large progress with custom styling -->
  <v-progress-circular
    v-model="taskProgress"
    :size="120"
    :width="8"
    color="success"
  >
    {{ Math.ceil(taskProgress) }}%
  </v-progress-circular>

  <!-- Small loading spinner -->
  <v-progress-circular
    indeterminate
    :size="20"
    :width="2"
    color="grey"
  />
</template>

<script setup>
const circularProgress = ref(45);
const taskProgress = ref(78.5);
</script>

VSkeletonLoader

Skeleton loader for displaying placeholder content while data is loading.

/**
 * Skeleton loader for content placeholders
 */
const VSkeletonLoader: Component;

interface SkeletonLoaderProps {
  /** Loading state */
  loading?: boolean;
  /** Skeleton type/template */
  type?: string | string[];
  /** Boilerplate mode */
  boilerplate?: boolean;
  /** Skeleton color */
  color?: string;
  /** Skeleton width */
  width?: string | number;
  /** Skeleton height */
  height?: string | number;
  /** Maximum width */
  maxWidth?: string | number;
  /** Maximum height */
  maxHeight?: string | number;
  /** Minimum width */
  minWidth?: string | number;
  /** Minimum height */
  minHeight?: string | number;
  /** Elevation level */
  elevation?: number | string;
  /** Rounded corners */
  rounded?: boolean | string | number;
}

// Built-in skeleton types
type SkeletonType = 
  | 'text' | 'sentences' | 'paragraph'
  | 'heading' | 'subtitle' | 'chip'
  | 'button' | 'avatar' | 'thumbnail'
  | 'image' | 'card' | 'card-avatar'
  | 'article' | 'table' | 'table-heading'
  | 'table-tbody' | 'table-tfoot' | 'table-row-divider'
  | 'list-item' | 'list-item-avatar' | 'list-item-two-line'
  | 'list-item-avatar-two-line' | 'list-item-three-line'
  | 'list-item-avatar-three-line' | 'divider'
  | 'card-heading' | 'card-text' | 'card-actions';

Usage Examples:

<template>
  <!-- Basic skeleton loader -->
  <v-skeleton-loader
    :loading="loading"
    type="card"
  >
    <v-card>
      <v-card-title>{{ data.title }}</v-card-title>
      <v-card-text>{{ data.content }}</v-card-text>
    </v-card>
  </v-skeleton-loader>

  <!-- Multiple skeleton types -->
  <v-skeleton-loader
    :loading="loading"
    type="card-avatar, article, actions"
  >
    <div>
      <!-- Actual content when loaded -->
      <div class="d-flex align-center mb-4">
        <v-avatar>{{ user.initials }}</v-avatar>
        <div class="ml-3">
          <div class="text-h6">{{ user.name }}</div>
          <div class="text-caption">{{ user.role }}</div>
        </div>
      </div>
      <p>{{ article.content }}</p>
      <v-btn>Read More</v-btn>
    </div>
  </v-skeleton-loader>

  <!-- Custom skeleton -->
  <v-skeleton-loader
    :loading="loading"
    boilerplate
    type="heading, paragraph"
    width="300"
  >
    <div>
      <h2>{{ post.title }}</h2>
      <p>{{ post.excerpt }}</p>
    </div>
  </v-skeleton-loader>

  <!-- List skeleton -->
  <v-skeleton-loader
    :loading="loadingUsers"
    type="list-item-avatar-two-line"
    v-for="n in 5"
    :key="n"
  >
    <v-list-item
      v-for="user in users"
      :key="user.id"
      :prepend-avatar="user.avatar"
      :title="user.name"
      :subtitle="user.email"
    />
  </v-skeleton-loader>
</template>

<script setup>
const loading = ref(true);
const loadingUsers = ref(true);
const data = ref({});
const users = ref([]);

onMounted(async () => {
  // Simulate data loading
  await new Promise(resolve => setTimeout(resolve, 2000));
  loading.value = false;
  loadingUsers.value = false;
  
  data.value = {
    title: 'Loaded Content',
    content: 'This content was loaded after the skeleton.'
  };
});
</script>

VTooltip

Tooltip component for displaying contextual information on hover or focus.

/**
 * Tooltip overlay component
 */
const VTooltip: Component;

interface TooltipProps {
  /** Tooltip visibility */
  modelValue?: boolean;
  /** Tooltip text content */
  text?: string;
  /** Tooltip location relative to activator */
  location?: 
    | 'top' | 'bottom' | 'left' | 'right' | 'center'
    | 'top start' | 'top end' | 'bottom start' | 'bottom end'
    | 'left start' | 'left end' | 'right start' | 'right end';
  /** Tooltip offset from activator */
  offset?: number | string | number[];
  /** Disabled state */
  disabled?: boolean;
  /** Show delay in milliseconds */
  openDelay?: number | string;
  /** Hide delay in milliseconds */
  closeDelay?: number | string;
  /** Tooltip content width */
  width?: string | number;
  /** Maximum width */
  maxWidth?: string | number;
  /** Minimum width */
  minWidth?: string | number;
  /** Tooltip height */
  height?: string | number;
  /** Maximum height */
  maxHeight?: string | number;
  /** Minimum height */
  minHeight?: string | number;
  /** Z-index */
  zIndex?: number | string;
  /** Activator element */
  activator?: string | Element;
  /** Tooltip content color */
  contentColor?: string;
}

// Events
interface TooltipEvents {
  'update:modelValue': (visible: boolean) => void;
}

Usage Examples:

<template>
  <!-- Basic tooltip -->
  <v-tooltip text="This is a helpful tooltip">
    <template #activator="{ props }">
      <v-btn v-bind="props">Hover me</v-btn>
    </template>
  </v-tooltip>

  <!-- Custom positioned tooltip -->
  <v-tooltip
    location="bottom"
    :open-delay="500"
    :close-delay="200"
  >
    <template #activator="{ props }">
      <v-icon v-bind="props">mdi-help-circle</v-icon>
    </template>
    <span>This tooltip appears below with a delay</span>
  </v-tooltip>

  <!-- Rich content tooltip -->
  <v-tooltip max-width="300">
    <template #activator="{ props }">
      <v-chip v-bind="props" color="primary">
        Rich Tooltip
      </v-chip>
    </template>
    <div>
      <strong>Advanced Tooltip</strong>
      <br>
      <em>This tooltip contains multiple lines and rich formatting.</em>
      <v-divider class="my-2" />
      <small>Click for more details</small>
    </div>
  </v-tooltip>

  <!-- Programmatic tooltip -->
  <v-tooltip
    v-model="tooltipVisible"
    location="top"
    activator="#target-element"
  >
    Programmatically controlled tooltip
  </v-tooltip>
</template>

<script setup>
const tooltipVisible = ref(false);

const showTooltip = () => {
  tooltipVisible.value = true;
  setTimeout(() => {
    tooltipVisible.value = false;
  }, 3000);
};
</script>

VDialog

Modal dialog component for displaying content in an overlay window.

/**
 * Modal dialog overlay component
 */
const VDialog: Component;

interface DialogProps {
  /** Dialog visibility */
  modelValue?: boolean;
  /** Dialog width */
  width?: string | number;
  /** Maximum width */
  maxWidth?: string | number;
  /** Minimum width */
  minWidth?: string | number;
  /** Dialog height */
  height?: string | number;
  /** Maximum height */
  maxHeight?: string | number;
  /** Minimum height */
  minHeight?: string | number;
  /** Fullscreen mode */
  fullscreen?: boolean;
  /** Persistent dialog (no outside click close) */
  persistent?: boolean;
  /** No click animation */
  noClickAnimation?: boolean;
  /** Scrollable content */
  scrollable?: boolean;
  /** Scrim (backdrop) color */
  scrim?: boolean | string;
  /** Z-index */
  zIndex?: number | string;
  /** Activator element */
  activator?: string | Element;
  /** Attach to element */
  attach?: boolean | string | Element;
  /** Close on back navigation */
  closeOnBack?: boolean;
  /** Close on escape key */
  closeOnEscape?: boolean;
  /** Eager mounting */
  eager?: boolean;
  /** Location strategy */
  locationStrategy?: 'static' | 'connected';
  /** Scroll strategy */
  scrollStrategy?: 'block' | 'close' | 'reposition' | 'none';
  /** Transition name */
  transition?: string | boolean | object;
  /** Opacity */
  opacity?: number | string;
}

// Events
interface DialogEvents {
  'update:modelValue': (visible: boolean) => void;
  'click:outside': (event: Event) => void;
  'keydown': (event: KeyboardEvent) => void;
  'after-enter': () => void;
  'after-leave': () => void;
}

Usage Examples:

<template>
  <!-- Basic dialog -->
  <v-dialog v-model="dialog" max-width="500">
    <template #activator="{ props }">
      <v-btn v-bind="props">Open Dialog</v-btn>
    </template>
    
    <v-card>
      <v-card-title>Dialog Title</v-card-title>
      <v-card-text>
        This is the dialog content. You can put any content here.
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn @click="dialog = false">Cancel</v-btn>
        <v-btn color="primary" @click="handleConfirm">Confirm</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

  <!-- Fullscreen dialog -->
  <v-dialog v-model="fullscreenDialog" fullscreen>
    <template #activator="{ props }">
      <v-btn v-bind="props">Fullscreen</v-btn>
    </template>
    
    <v-card>
      <v-toolbar color="primary">
        <v-toolbar-title>Fullscreen Dialog</v-toolbar-title>
        <v-spacer />
        <v-btn icon @click="fullscreenDialog = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </v-toolbar>
      
      <v-card-text>
        <div style="height: 1000px;">
          Large scrollable content goes here...
        </div>
      </v-card-text>
    </v-card>
  </v-dialog>

  <!-- Persistent dialog -->
  <v-dialog v-model="persistentDialog" persistent max-width="400">
    <v-card>
      <v-card-title>Confirm Action</v-card-title>
      <v-card-text>
        This action cannot be undone. Are you sure you want to proceed?
      </v-card-text>
      <v-card-actions>
        <v-btn @click="persistentDialog = false">Cancel</v-btn>
        <v-btn color="error" @click="handleDelete">Delete</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>

  <!-- Scrollable dialog -->
  <v-dialog v-model="scrollableDialog" scrollable max-width="500" max-height="400">
    <v-card>
      <v-card-title>Terms of Service</v-card-title>
      <v-divider />
      <v-card-text>
        <div v-for="n in 50" :key="n">
          Line {{ n }}: Lorem ipsum dolor sit amet consectetur...
        </div>
      </v-card-text>
      <v-divider />
      <v-card-actions>
        <v-btn @click="scrollableDialog = false">Disagree</v-btn>
        <v-btn color="primary" @click="acceptTerms">Agree</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup>
const dialog = ref(false);
const fullscreenDialog = ref(false);
const persistentDialog = ref(false);
const scrollableDialog = ref(false);

const handleConfirm = () => {
  console.log('Confirmed');
  dialog.value = false;
};

const handleDelete = () => {
  console.log('Deleted');
  persistentDialog.value = false;
};

const acceptTerms = () => {
  console.log('Terms accepted');
  scrollableDialog.value = false;
};
</script>

VBottomSheet

Bottom sheet modal component that slides up from the bottom of the screen.

/**
 * Bottom sheet modal component
 */
const VBottomSheet: Component;

interface BottomSheetProps {
  /** Bottom sheet visibility */
  modelValue?: boolean;
  /** Inset mode (doesn't cover full width) */
  inset?: boolean;
  /** Maximum width */
  maxWidth?: string | number;
  /** Maximum height */
  maxHeight?: string | number;
  /** Sheet width */
  width?: string | number;
  /** Sheet height */
  height?: string | number;
  /** Persistent sheet (no outside click close) */
  persistent?: boolean;
  /** No click animation */
  noClickAnimation?: boolean;
  /** Scrollable content */
  scrollable?: boolean;
  /** Scrim (backdrop) */
  scrim?: boolean | string;
  /** Z-index */
  zIndex?: number | string;
  /** Attach to element */
  attach?: boolean | string | Element;
  /** Close on back navigation */
  closeOnBack?: boolean;
  /** Close on escape key */
  closeOnEscape?: boolean;
  /** Eager mounting */
  eager?: boolean;
  /** Transition name */
  transition?: string | boolean | object;
}

// Events
interface BottomSheetEvents {
  'update:modelValue': (visible: boolean) => void;
  'click:outside': (event: Event) => void;
  'keydown': (event: KeyboardEvent) => void;
}

Usage Examples:

<template>
  <!-- Basic bottom sheet -->
  <v-bottom-sheet v-model="bottomSheet">
    <template #activator="{ props }">
      <v-btn v-bind="props">Open Bottom Sheet</v-btn>
    </template>
    
    <v-card>
      <v-card-title>Bottom Sheet</v-card-title>
      <v-card-text>
        This content slides up from the bottom of the screen.
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn @click="bottomSheet = false">Close</v-btn>
      </v-card-actions>
    </v-card>
  </v-bottom-sheet>

  <!-- Inset bottom sheet -->
  <v-bottom-sheet v-model="insetBottomSheet" inset>
    <v-card class="text-center">
      <v-card-text>
        <v-avatar size="80" color="primary">
          <v-icon size="40">mdi-account</v-icon>
        </v-avatar>
        <div class="text-h6 mt-4">User Profile</div>
        <p class="text-body-2">Quick actions for user account</p>
      </v-card-text>
      <v-card-actions class="justify-center">
        <v-btn prepend-icon="mdi-pencil">Edit</v-btn>
        <v-btn prepend-icon="mdi-cog">Settings</v-btn>
      </v-card-actions>
    </v-card>
  </v-bottom-sheet>

  <!-- Scrollable bottom sheet -->
  <v-bottom-sheet v-model="scrollableBottomSheet" scrollable>
    <v-card>
      <v-card-title>Menu Options</v-card-title>
      <v-divider />
      <v-card-text style="height: 300px;">
        <v-list>
          <v-list-item
            v-for="item in menuItems"
            :key="item.id"
            :prepend-icon="item.icon"
            :title="item.title"
            @click="selectMenuItem(item)"
          />
        </v-list>
      </v-card-text>
    </v-card>
  </v-bottom-sheet>
</template>

<script setup>
const bottomSheet = ref(false);
const insetBottomSheet = ref(false);
const scrollableBottomSheet = ref(false);

const menuItems = [
  { id: 1, title: 'Profile', icon: 'mdi-account' },
  { id: 2, title: 'Settings', icon: 'mdi-cog' },
  { id: 3, title: 'Help', icon: 'mdi-help-circle' },
  { id: 4, title: 'About', icon: 'mdi-information' },
  // ... more items
];

const selectMenuItem = (item) => {
  console.log('Selected:', item.title);
  scrollableBottomSheet.value = false;
};
</script>

Types

// Location types for positioning
type Location = 
  | 'top' | 'bottom' | 'left' | 'right' | 'center'
  | 'top start' | 'top end' | 'bottom start' | 'bottom end'
  | 'left start' | 'left end' | 'right start' | 'right end'
  | 'top left' | 'top right' | 'bottom left' | 'bottom right'
  | 'top center' | 'bottom center' | 'center left' | 'center right';

// Alert and notification types
type AlertType = 'success' | 'info' | 'warning' | 'error';

// Component variants
type ComponentVariant = 'flat' | 'elevated' | 'tonal' | 'outlined' | 'text' | 'plain';

// Density options
type Density = 'default' | 'comfortable' | 'compact';

// Border positions
type BorderPosition = 'top' | 'end' | 'bottom' | 'start';

// Progress value type
type ProgressValue = number | string;

// Overlay strategies
type LocationStrategy = 'static' | 'connected';
type ScrollStrategy = 'block' | 'close' | 'reposition' | 'none';

Install with Tessl CLI