mtrl 0.2.6 → 0.2.8

package/demo/main.js

@@ -0,0 +1,448 @@
+// Import all components from your library
+import {
+  createBadge,
+  createBottomAppBar,
+  createButton,
+  createDatePicker,
+  createFab,
+  createExtendedFab,
+  createSegmentedButton,
+  createCard,
+  createCarousel,
+  createCheckbox,
+  createChip,
+  createDialog,
+  createDivider,
+  createList,
+  createMenu,
+  createNavigation,
+  createProgress,
+  createRadios,
+  createSearch,
+  createSheet,
+  createSlider,
+  createSnackbar,
+  createTabs,
+  createTextfield,
+  createTimePicker,
+  createTooltip,
+  createTopAppBar,
+  createSwitch
+} from '../src/index.js'
+
+// Helper function to get DOM element
+const getContainer = (id) => document.getElementById(id)
+
+// Initialize components when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  // Top App Bar
+  const topAppBar = createTopAppBar({
+    title: 'Material Components',
+    variant: 'center-aligned',
+    navigationIcon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>',
+    actions: [
+      { icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm0-82q116 0 197-81t81-197q0-116-81-197t-197-81q-116 0-197 81t-81 197q0 116 81 197t197 81Zm0-278Z"/></svg>' },
+      { icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 420Z"/></svg>' }
+    ]
+  })
+
+  topAppBar.element.classList.add('top-app-bar')
+  getContainer('top-app-bar').appendChild(topAppBar.element)
+
+  // Bottom App Bar
+  const bottomAppBar = createBottomAppBar({
+    fab: { icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>' },
+    startActions: [
+      { icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>' },
+      { icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m323-205 157-94 157 95-42-178 138-120-182-16-71-168-71 167-182 16 138 120-42 178Zm157-48L316-139q-11 7-23 4.5T274-146q-6-10-5.5-21.5T278-189l77-148-146-127q-9-8-10.5-19.5t3.5-22.5q5-10 14.5-16t23.5-4l182 16 69-164q5-12 15.5-17.5T480-700q11 0 21.5 5.5T517-677l69 164 182 16q14-2 23.5 4t14.5 16q5 11 3.5 22.5T800-435L654-308l77 148q6 11 6.5 22.5T732-116q-9 11-21 13.5t-23-4.5L480-253Z"/></svg>' }
+    ],
+    endActions: [
+      { icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M160-200v-360h80v360h-80Zm280 0v-360h80v360h-80ZM720-80q-33 0-56.5-23.5T640-160v-400H280v-80q0-17 11.5-28.5T320-680h160v-120q0-17 11.5-28.5T520-840h160q17 0 28.5 11.5T720-800v720h-80v-80h-80q-33 0-56.5-23.5T480-240q0-33 23.5-56.5T560-320h80v-240h80v480ZM600-320v160h40v-160h-40Z"/></svg>' },
+      { icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>' }
+    ]
+  })
+  getContainer('bottom-app-bar').appendChild(bottomAppBar.element)
+
+  // Buttons
+  const buttonContainer = getContainer('button-container')
+
+  // Regular Button
+  const primaryButton = createButton({ text: 'Primary', variant: 'filled' })
+  const secondaryButton = createButton({ text: 'Secondary', variant: 'outlined' })
+  const textButton = createButton({ text: 'Text', variant: 'text' })
+  const elevatedButton = createButton({ text: 'Elevated', variant: 'elevated' })
+
+  const iconButton = createButton({
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M360-240h240q17 0 28.5-11.5T640-280q0-17-11.5-28.5T600-320H360q-17 0-28.5 11.5T320-280q0 17 11.5 28.5T360-240Zm0-160h240q17 0 28.5-11.5T640-440q0-17-11.5-28.5T600-480H360q-17 0-28.5 11.5T320-440q0 17 11.5 28.5T360-400Zm0-160h240q17 0 28.5-11.5T640-600q0-17-11.5-28.5T600-640H360q-17 0-28.5 11.5T320-600q0 17 11.5 28.5T360-560ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>',
+    variant: 'filled'
+  })
+
+  buttonContainer.appendChild(createDemoBlock('Standard Buttons', [
+    primaryButton.element,
+    secondaryButton.element,
+    textButton.element,
+    elevatedButton.element,
+    iconButton.element
+  ]))
+
+  // Segmented Button
+  const segmentedButtonContainer = getContainer('segmented-button-container')
+  const segmentedButton = createSegmentedButton({
+    segments: [
+      { text: 'Day', selected: true },
+      { text: 'Week' },
+      { text: 'Month' }
+    ]
+  })
+  segmentedButtonContainer.appendChild(createDemoBlock('Segmented Button', [segmentedButton.element]))
+
+  // FABs
+  const fabContainer = getContainer('fab-container')
+  const fab = createFab({
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>'
+  })
+  fabContainer.appendChild(createDemoBlock('Floating Action Button', [fab.element]))
+
+  // Extended FAB
+  const extendedFabContainer = getContainer('extended-fab-container')
+  const extendedFab = createExtendedFab({
+    icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>',
+    text: 'Create'
+  })
+  extendedFabContainer.appendChild(createDemoBlock('Extended FAB', [extendedFab.element]))
+
+  // Checkbox
+  const checkboxContainer = getContainer('checkbox-container')
+  const checkbox1 = createCheckbox({ label: 'Unchecked', name: 'checkbox1' })
+  const checkbox2 = createCheckbox({ label: 'Checked', name: 'checkbox2', checked: true })
+  const checkbox3 = createCheckbox({ label: 'Disabled', name: 'checkbox3', disabled: true })
+
+  checkboxContainer.appendChild(createDemoBlock('Checkboxes', [
+    checkbox1.element,
+    checkbox2.element,
+    checkbox3.element
+  ]))
+
+  // Switch
+  const switchContainer = getContainer('switch-container')
+  const switch1 = createSwitch({ label: 'Off', name: 'switch1' })
+  const switch2 = createSwitch({ label: 'On', name: 'switch2', checked: true })
+  const switch3 = createSwitch({ label: 'Disabled', name: 'switch3', disabled: true })
+
+  switchContainer.appendChild(createDemoBlock('Switches', [
+    switch1.element,
+    switch2.element,
+    switch3.element
+  ]))
+
+  // Radio Buttons
+  const radioContainer = getContainer('radio-container')
+  const radios = createRadios({
+    name: 'fruits',
+    options: [
+      { label: 'Apple', value: 'apple' },
+      { label: 'Banana', value: 'banana', checked: true },
+      { label: 'Cherry', value: 'cherry' }
+    ]
+  })
+  radioContainer.appendChild(createDemoBlock('Radio Buttons', [radios.element]))
+
+  // Text Fields
+  const textfieldContainer = getContainer('textfield-container')
+  const textfield1 = createTextfield({ label: 'Standard' })
+  const textfield2 = createTextfield({ label: 'With placeholder', placeholder: 'Type here...' })
+  const textfield3 = createTextfield({ label: 'With helper text', helperText: 'Helper text' })
+  const textfield4 = createTextfield({ label: 'With error', error: true, errorText: 'This field has an error' })
+  const textfield5 = createTextfield({ label: 'Disabled', disabled: true })
+
+  textfieldContainer.appendChild(createDemoBlock('Text Fields', [
+    textfield1.element,
+    textfield2.element,
+    textfield3.element,
+    textfield4.element,
+    textfield5.element
+  ]))
+
+  // Search
+  const searchContainer = getContainer('search-container')
+  const search = createSearch({ placeholder: 'Search...' })
+  searchContainer.appendChild(createDemoBlock('Search', [search.element]))
+
+  // Menu
+  const menuContainer = getContainer('menu-container')
+  const menuButton = createButton({ text: 'Open Menu', variant: 'filled' })
+  const menu = createMenu({
+    items: [
+      { text: 'New' },
+      { text: 'Open' },
+      { text: 'Save' },
+      { divider: true },
+      { text: 'Exit' }
+    ],
+    anchor: menuButton.element
+  })
+
+  menuButton.element.addEventListener('click', () => {
+    menu.open()
+  })
+
+  menuContainer.appendChild(createDemoBlock('Menu', [menuButton.element, menu.element]))
+
+  // Tabs
+  const tabsContainer = getContainer('tabs-container')
+  const tabs = createTabs({
+    tabs: [
+      { label: 'Home', icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>' },
+      { label: 'Favorites', icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>' },
+      { label: 'Profile', icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>' }
+    ]
+  })
+  tabsContainer.appendChild(createDemoBlock('Tabs', [tabs.element]))
+
+  // Navigation
+  const navigationContainer = getContainer('navigation-container')
+  const navigation = createNavigation({
+    items: [
+      { label: 'Home', icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z"/></svg>', active: true },
+      { label: 'Search', icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>' },
+      { label: 'Favorites', icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>' },
+      { label: 'Settings', icon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm112-260q58 0 99-41t41-99q0-58-41-99t-99-41q-58 0-99 41t-41 99q0 58 41 99t99 41Z"/></svg>' }
+    ]
+  })
+  navigationContainer.appendChild(createDemoBlock('Navigation', [navigation.element]))
+
+  // Snackbar
+  const snackbarContainer = getContainer('snackbar-container')
+  const snackbarButton = createButton({ text: 'Show Snackbar', variant: 'filled' })
+  const snackbar = createSnackbar({
+    message: 'This is a snackbar message',
+    action: 'Dismiss',
+    duration: 4000
+  })
+
+  snackbarButton.element.addEventListener('click', () => {
+    snackbar.show()
+  })
+
+  snackbarContainer.appendChild(createDemoBlock('Snackbar', [snackbarButton.element, snackbar.element]))
+
+  // Tooltip
+  const tooltipContainer = getContainer('tooltip-container')
+  const tooltipButton = createButton({ text: 'Hover Me', variant: 'filled' })
+  const tooltip = createTooltip({
+    text: 'This is a tooltip',
+    target: tooltipButton.element
+  })
+
+  tooltipContainer.appendChild(createDemoBlock('Tooltip', [tooltipButton.element]))
+
+  // Progress
+  const progressContainer = getContainer('progress-container')
+  const linearProgress = createProgress({ type: 'linear' })
+  const circularProgress = createProgress({ type: 'circular' })
+
+  progressContainer.appendChild(createDemoBlock('Progress Indicators', [
+    linearProgress.element,
+    circularProgress.element
+  ]))
+
+  // Card
+  const cardContainer = getContainer('card-container')
+  const card = createCard({
+    title: 'Card Title',
+    subtitle: 'Card Subtitle',
+    content: 'This is the content of the card which provides more detailed information about the subject.',
+    media: true,
+    mediaContent: '<div class="demo-card-media"></div>',
+    actions: [
+      { text: 'Action 1' },
+      { text: 'Action 2' }
+    ]
+  })
+  cardContainer.appendChild(createDemoBlock('Card', [card.element]))
+
+  // Dialog
+  const dialogContainer = getContainer('dialog-container')
+  const dialogButton = createButton({ text: 'Open Dialog', variant: 'filled' })
+  const dialog = createDialog({
+    title: 'Dialog Title',
+    content: 'This is a dialog content. Dialogs inform users about a task and can contain critical information or require decisions.',
+    actions: [
+      { text: 'Cancel', variant: 'text' },
+      { text: 'OK', variant: 'filled' }
+    ]
+  })
+
+  dialogButton.element.addEventListener('click', () => {
+    dialog.open()
+  })
+
+  dialogContainer.appendChild(createDemoBlock('Dialog', [dialogButton.element, dialog.element]))
+
+  // Sheet
+  const sheetContainer = getContainer('sheet-container')
+  const sheetButton = createButton({ text: 'Open Sheet', variant: 'filled' })
+  const sheet = createSheet({
+    title: 'Bottom Sheet',
+    content: 'This is the content of a bottom sheet, which slides up from the bottom of the screen.',
+    actions: [
+      { text: 'Close', variant: 'text' }
+    ]
+  })
+
+  sheetButton.element.addEventListener('click', () => {
+    sheet.open()
+  })
+
+  sheetContainer.appendChild(createDemoBlock('Bottom Sheet', [sheetButton.element, sheet.element]))
+
+  // Badge
+  const badgeContainer = getContainer('badge-container')
+  const badgeButton = createButton({ text: 'Notifications', variant: 'filled' })
+  const badge = createBadge({
+    content: '5',
+    target: badgeButton.element,
+    position: 'top-right'
+  })
+
+  badgeContainer.appendChild(createDemoBlock('Badge', [badgeButton.element]))
+
+  // Chip
+  const chipContainer = getContainer('chip-container')
+  const chip1 = createChip({ text: 'Basic Chip' })
+  const chip2 = createChip({
+    text: 'Deletable',
+    deletable: true,
+    onDelete: () => console.log('Chip deleted')
+  })
+  const chip3 = createChip({
+    text: 'With Icon',
+    leadingIcon: '<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 -960 960 960" width="18"><path d="M480-120q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm0-360Zm0 280q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-117 0-198.5 81.5T200-480q0 117 81.5 198.5T480-200Zm-40-120-160-160 56-56 104 104 224-224 56 56-280 280Z"/></svg>'
+  })
+
+  chipContainer.appendChild(createDemoBlock('Chips', [chip1.element, chip2.element, chip3.element]))
+
+  // Divider
+  const dividerContainer = getContainer('divider-container')
+  const divider1 = createDivider({})
+  const divider2 = createDivider({ inset: true })
+  const divider3 = createDivider({ text: 'OR' })
+
+  dividerContainer.appendChild(createDemoBlock('Dividers', [
+    createTextElement('Regular divider:'),
+    divider1.element,
+    createTextElement('Inset divider:'),
+    divider2.element,
+    createTextElement('Text divider:'),
+    divider3.element
+  ]))
+
+  // Carousel
+  const carouselContainer = getContainer('carousel-container')
+  const carousel = createCarousel({
+    items: [
+      { content: '<div class="carousel-item">Slide 1</div>' },
+      { content: '<div class="carousel-item">Slide 2</div>' },
+      { content: '<div class="carousel-item">Slide 3</div>' }
+    ],
+    autoplay: false,
+    indicators: true,
+    controls: true
+  })
+  carouselContainer.appendChild(createDemoBlock('Carousel', [carousel.element]))
+
+  // Date Picker
+  const datePickerContainer = getContainer('date-picker-container')
+  const datePickerButton = createButton({ text: 'Select Date', variant: 'filled' })
+  const datePicker = createDatePicker({
+    inline: false
+  })
+
+  datePickerButton.element.addEventListener('click', () => {
+    datePicker.open()
+  })
+
+  datePickerContainer.appendChild(createDemoBlock('Date Picker', [datePickerButton.element, datePicker.element]))
+
+  // Time Picker
+  const timePickerContainer = getContainer('time-picker-container')
+  const timePickerButton = createButton({ text: 'Select Time', variant: 'filled' })
+  const timePicker = createTimePicker({
+    inline: false
+  })
+
+  timePickerButton.element.addEventListener('click', () => {
+    timePicker.open()
+  })
+
+  timePickerContainer.appendChild(createDemoBlock('Time Picker', [timePickerButton.element, timePicker.element]))
+
+  // Slider
+  const sliderContainer = getContainer('slider-container')
+  const slider1 = createSlider({ min: 0, max: 100, value: 50 })
+  const slider2 = createSlider({
+    min: 0,
+    max: 100,
+    value: 40,
+    step: 10,
+    markers: true,
+    discrete: true
+  })
+
+  sliderContainer.appendChild(createDemoBlock('Sliders', [
+    slider1.element,
+    slider2.element
+  ]))
+
+  // List
+  const listContainer = getContainer('list-container')
+  const list = createList({
+    items: [
+      {
+        primary: 'Item 1',
+        secondary: 'Secondary text',
+        leading: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M479.765-124Q434-124 398-145.5q-36-21.5-58-58q-42-1-79.5-14.5t-70-35.5q-32.5-22-58.5-54t-40-70q-17 6-35 10t-37 4q-17 0-28.5-11.5T-19-403q0-16 11.5-29.5T24-450q16-7 29-18.5t19-27.5q-7-16-17-36t-17.5-44.5Q31-601 38-628.5t29-43q13-10 30-10t30 8q13 8 20 23t10 33q13.5 0 25.75 1.5t26.25 4.5q-14-42-46.5-68t-77.5-26q-13 0-21.5-8.5T55-736q0-13 8.5-21.5T85-766q68 0 119 33.5T284-640q41-10 84-10 83 0 156 31.5T651-533q54 54 85.5 127T768-250q0 53-37.5 89.5T642-124q-22 0-42-5.5T564-148q-19 14-41 19t-43.235 5ZM272-444q-58-13-95-55.5T140-600q0-38 27-65t65-27q21 0 40 8t32 24q20-16 44.5-24.5T398-693q79 0 133.5 54.5T586-505q0 67-43 118t-110 62q-8 54-47 87.5T281-204q-62 0-106-44t-44-106q0-26 8-49t28-41h105Zm272 116q32-18 54-49t22-68q0-37-27-63.5T530-535q-17 0-32 5.5T474-514q-8-16-26.5-28.5T412-555q-29 0-47.5 18.5T346-490q0 18 18 36t42 30l138 76Zm55 124q16 0 27-11t11-27q0-16-11-27t-27-11q-16 0-27 11t-11 27q0 16 11 27t27 11Zm-16-160Z"/></svg>'
+      },
+      {
+        primary: 'Item 2',
+        secondary: 'Secondary text',
+        leading: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H140Zm0-60h680v-449H140v449Zm160-106q17 0 28.5-11.5T340-366q0-17-11.5-28.5T300-406q-17 0-28.5 11.5T260-366q0 17 11.5 28.5T300-326Zm180 0q17 0 28.5-11.5T520-366q0-17-11.5-28.5T480-406q-17 0-28.5 11.5T440-366q0 17 11.5 28.5T480-326Zm180 0q17 0 28.5-11.5T700-366q0-17-11.5-28.5T660-406q-17 0-28.5 11.5T620-366q0 17 11.5 28.5T660-326Z"/></svg>'
+      },
+      {
+        primary: 'Item 3',
+        secondary: 'Secondary text',
+        leading: '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m600-120-240-92-240 92v-680h480v680Zm-240-154 160 62v-528H200v528l160-62Zm0 0-160 62v-528h320v528l-160-62Zm0-294Z"/></svg>'
+      }
+    ]
+  })
+
+  listContainer.appendChild(createDemoBlock('List', [list.element]))
+})
+
+// Helper function to create a demo block
+function createDemoBlock (title, components) {
+  const block = document.createElement('div')
+  block.className = 'demo-block'
+
+  const blockTitle = document.createElement('h3')
+  blockTitle.textContent = title
+  block.appendChild(blockTitle)
+
+  const content = document.createElement('div')
+  content.className = 'demo-content'
+
+  components.forEach(component => {
+    content.appendChild(component)
+  })
+
+  block.appendChild(content)
+  return block
+}
+
+// Helper function to create a text element for demos
+function createTextElement (text) {
+  const element = document.createElement('p')
+  element.textContent = text
+  element.className = 'demo-text'
+  return element
+}

package/demo/styles.css

@@ -0,0 +1,239 @@
+// demo/styles.scss
+
+// Import the main styles from the source code
+@use '../src/styles/main.scss';
+
+/* Base styles */
+:root {
+  --primary-color: #6750a4;
+  --on-primary-color: #ffffff;
+  --primary-container-color: #eaddff;
+  --on-primary-container-color: #21005d;
+  --secondary-color: #625b71;
+  --on-secondary-color: #ffffff;
+  --secondary-container-color: #e8def8;
+  --on-secondary-container-color: #1d192b;
+  --tertiary-color: #7d5260;
+  --surface-color: #fffbfe;
+  --on-surface-color: #1c1b1f;
+  --surface-variant-color: #e7e0ec;
+  --on-surface-variant-color: #49454f;
+  --outline-color: #79747e;
+  --background-color: #fffbfe;
+  --error-color: #b3261e;
+  
+  --elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+  --elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+  --elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+  
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 24px;
+  --spacing-6: 32px;
+  
+  --border-radius-small: 4px;
+  --border-radius-medium: 8px;
+  --border-radius-large: 16px;
+  --border-radius-full: 9999px;
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary-color: #d0bcff;
+    --on-primary-color: #381e72;
+    --primary-container-color: #4f378b;
+    --on-primary-container-color: #eaddff;
+    --secondary-color: #ccc2dc;
+    --on-secondary-color: #332d41;
+    --secondary-container-color: #4a4458;
+    --on-secondary-container-color: #e8def8;
+    --tertiary-color: #efb8c8;
+    --surface-color: #1c1b1f;
+    --on-surface-color: #e6e1e5;
+    --surface-variant-color: #49454f;
+    --on-surface-variant-color: #cac4d0;
+    --outline-color: #938f99;
+    --background-color: #1c1b1f;
+    --error-color: #f2b8b5;
+  }
+}
+
+/* Core styles */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  background-color: var(--background-color);
+  color: var(--on-surface-color);
+  line-height: 1.5;
+}
+
+/* Layout */
+.content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: var(--spacing-5);
+  margin-bottom: 120px; /* For bottom app bar */
+}
+
+/* Component Sections */
+.component-section {
+  margin-bottom: var(--spacing-6);
+  padding: var(--spacing-4);
+  border-radius: var(--border-radius-medium);
+  background-color: var(--surface-color);
+  box-shadow: var(--elevation-1);
+}
+
+.component-section h2 {
+  color: var(--primary-color);
+  margin-bottom: var(--spacing-4);
+  font-size: 1.5rem;
+  border-bottom: 1px solid var(--outline-color);
+  padding-bottom: var(--spacing-2);
+}
+
+.component-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-5);
+  align-items: flex-start;
+}
+
+.align-top {
+  align-items: flex-start;
+}
+
+/* Demo Blocks */
+.demo-block {
+  flex: 1;
+  min-width: 300px;
+  margin-bottom: var(--spacing-4);
+}
+
+.demo-block h3 {
+  font-size: 1rem;
+  color: var(--on-surface-variant-color);
+  margin-bottom: var(--spacing-3);
+}
+
+.demo-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+/* Intro section */
+#intro {
+  text-align: center;
+  margin-bottom: var(--spacing-6);
+  padding: var(--spacing-6) 0;
+}
+
+#intro h1 {
+  color: var(--primary-color);
+  font-size: 2.5rem;
+  margin-bottom: var(--spacing-3);
+}
+
+#intro p {
+  color: var(--on-surface-variant-color);
+  font-size: 1.2rem;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* App Bars */
+.top-app-bar {
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+}
+
+/* Carousel */
+.carousel-item {
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--primary-container-color);
+  color: var(--on-primary-container-color);
+  font-weight: bold;
+  border-radius: var(--border-radius-medium);
+}
+
+/* Card Demo */
+.demo-card-media {
+  height: 140px;
+  background-color: var(--primary-container-color);
+  background-image: linear-gradient(45deg, var(--primary-color) 25%, transparent 25%, transparent 50%, var(--primary-color) 50%, var(--primary-color) 75%, transparent 75%, transparent);
+  background-size: 20px 20px;
+  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
+}
+
+/* Hack to ensure components like dialog, sheet, tooltip are visible in the demo */
+.mtrl-dialog, .mtrl-sheet, .mtrl-tooltip {
+  position: absolute; /* Override fixed positioning for demo */
+  z-index: 2; /* Lower z-index for demo */
+}
+
+/* Display helpers */
+.demo-text {
+  margin: var(--spacing-2) 0;
+  color: var(--on-surface-variant-color);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .component-row {
+    flex-direction: column;
+  }
+  
+  .demo-block {
+    width: 100%;
+  }
+}
+
+/* Component-specific styling overrides for demo purposes */
+.mtrl-button {
+  margin-right: var(--spacing-2);
+}
+
+.mtrl-textfield {
+  width: 100%;
+  max-width: 300px;
+}
+
+.mtrl-card {
+  max-width: 320px;
+}
+
+.mtrl-list {
+  max-width: 400px;
+  border: 1px solid var(--outline-color);
+  border-radius: var(--border-radius-medium);
+}
+
+.mtrl-slider {
+  width: 100%;
+  max-width: 300px;
+}
+
+.mtrl-navigation {
+  width: 300px;
+  border: 1px solid var(--outline-color);
+  border-radius: var(--border-radius-medium);
+}
+
+.mtrl-tabs {
+  width: 100%;
+  max-width: 400px;
+  border-bottom: 1px solid var(--outline-color);
+}