Package Exports

@getufy/flint-ui
@getufy/flint-ui/__benchmarks__/component-render.bench
@getufy/flint-ui/_shared/date-utils-CzBOWdb-
@getufy/flint-ui/_shared/decorate-BBXz1jF5
@getufy/flint-ui/_shared/flint-accordion-CJTKANlL
@getufy/flint-ui/_shared/flint-alert-C4UPBjmt
@getufy/flint-ui/_shared/flint-animation-BOQZQklp
@getufy/flint-ui/_shared/flint-app-bar-CLVH5aoy
@getufy/flint-ui/_shared/flint-autocomplete-ConRP760
@getufy/flint-ui/_shared/flint-avatar-D03LRQ_0
@getufy/flint-ui/_shared/flint-backdrop-EJKoxaMI
@getufy/flint-ui/_shared/flint-badge-B3EATFbu
@getufy/flint-ui/_shared/flint-bottom-navigation-Cmit1eNg
@getufy/flint-ui/_shared/flint-bottom-navigation-action-C8BwELkS
@getufy/flint-ui/_shared/flint-box-QS0MkjYE
@getufy/flint-ui/_shared/flint-breadcrumbs-BQiCdOqh
@getufy/flint-ui/_shared/flint-button-CPfw3Pyl
@getufy/flint-ui/_shared/flint-button-group-Ct7XrFCY
@getufy/flint-ui/_shared/flint-card-C1kVMzRM
@getufy/flint-ui/_shared/flint-card-action-area-CbSUmmXc
@getufy/flint-ui/_shared/flint-card-actions-Cssesw3_
@getufy/flint-ui/_shared/flint-card-content-D9dj-Y5O
@getufy/flint-ui/_shared/flint-card-header-DneEseUd
@getufy/flint-ui/_shared/flint-card-media-Cu4ixFZs
@getufy/flint-ui/_shared/flint-carousel-B9bfNE-s
@getufy/flint-ui/_shared/flint-checkbox-CuiN7i6a
@getufy/flint-ui/_shared/flint-chip-Cv1DtNwL
@getufy/flint-ui/_shared/flint-circular-progress-D-_p_p2C
@getufy/flint-ui/_shared/flint-collapsible-xA3WhdR1
@getufy/flint-ui/_shared/flint-combobox-BC1IPaUx
@getufy/flint-ui/_shared/flint-command-Dye_h1RV
@getufy/flint-ui/_shared/flint-container-UVK7IISq
@getufy/flint-ui/_shared/flint-copy-button-C_LuPrK_
@getufy/flint-ui/_shared/flint-date-field-B2Qx0pbv
@getufy/flint-ui/_shared/flint-date-picker-DcReP7Sd
@getufy/flint-ui/_shared/flint-date-range-calendar-DfH4DL9g
@getufy/flint-ui/_shared/flint-date-range-picker-BqcwL8gK
@getufy/flint-ui/_shared/flint-dialog-DgSrDWc3
@getufy/flint-ui/_shared/flint-divider-BHCM16w3
@getufy/flint-ui/_shared/flint-drawer-BFFe9DLb
@getufy/flint-ui/_shared/flint-element-D33eZmAJ
@getufy/flint-ui/_shared/flint-empty-HZfxSiGg
@getufy/flint-ui/_shared/flint-fab-C60Mu0gK
@getufy/flint-ui/_shared/flint-form-field-DfwJmAbx
@getufy/flint-ui/_shared/flint-format-date-DoewS0lp
@getufy/flint-ui/_shared/flint-format-number-Be0nC8K3
@getufy/flint-ui/_shared/flint-grid-BOXxjuHv
@getufy/flint-ui/_shared/flint-hover-card-BgPZ_s42
@getufy/flint-ui/_shared/flint-icon-q5uscID7
@getufy/flint-ui/_shared/flint-image-comparer-SpGL9H-v
@getufy/flint-ui/_shared/flint-image-list-BgD8V2jg
@getufy/flint-ui/_shared/flint-image-list-item-bar-D5gMPP3C
@getufy/flint-ui/_shared/flint-image-list-item-di3LTUv2
@getufy/flint-ui/_shared/flint-input-D_GuY3XS
@getufy/flint-ui/_shared/flint-input-otp-D36-R15r
@getufy/flint-ui/_shared/flint-item-BxBIuOHi
@getufy/flint-ui/_shared/flint-kbd-CZzg50Ll
@getufy/flint-ui/_shared/flint-linear-progress-Du0quZYl
@getufy/flint-ui/_shared/flint-link-B-AWMzMu
@getufy/flint-ui/_shared/flint-list-BSWy-sxf
@getufy/flint-ui/_shared/flint-menu-BhlAgJw4
@getufy/flint-ui/_shared/flint-menubar-gppXhWYj
@getufy/flint-ui/_shared/flint-option.component-DNR6QHEz
@getufy/flint-ui/_shared/flint-pagination-DIiLHVn_
@getufy/flint-ui/_shared/flint-paper-Pjo6sGsW
@getufy/flint-ui/_shared/flint-popup.component-DLUfyDor
@getufy/flint-ui/_shared/flint-radio-C4YHdjm6
@getufy/flint-ui/_shared/flint-range-slider-TAeayfB-
@getufy/flint-ui/_shared/flint-rating-C6TB1ENh
@getufy/flint-ui/_shared/flint-relative-time-Bt-ZzRl0
@getufy/flint-ui/_shared/flint-rich-tree-view-CO5cCUtK
@getufy/flint-ui/_shared/flint-scroll-area-DqzSjG1D
@getufy/flint-ui/_shared/flint-select-CDLCoriS
@getufy/flint-ui/_shared/flint-simple-tree-view-CjV9yDhF
@getufy/flint-ui/_shared/flint-single-input-date-range-field-DZk1Wpub
@getufy/flint-ui/_shared/flint-skeleton.component-BnhSZ0to
@getufy/flint-ui/_shared/flint-slider-B1_z4-EP
@getufy/flint-ui/_shared/flint-snackbar-BPxFy-oV
@getufy/flint-ui/_shared/flint-sonner-sbKrEai4
@getufy/flint-ui/_shared/flint-speed-dial-Bvi-UD3s
@getufy/flint-ui/_shared/flint-stack-CcReQfol
@getufy/flint-ui/_shared/flint-stepper-DnAXcY-n
@getufy/flint-ui/_shared/flint-switch-CUU4O4QZ
@getufy/flint-ui/_shared/flint-table-7Nupsn82
@getufy/flint-ui/_shared/flint-table-pagination-D_17a2-2
@getufy/flint-ui/_shared/flint-table-sort-label-CpI4QCrx
@getufy/flint-ui/_shared/flint-tabs-4jADrU-f
@getufy/flint-ui/_shared/flint-text-field-C_lXT0GN
@getufy/flint-ui/_shared/flint-textarea-icyp5Zx0
@getufy/flint-ui/_shared/flint-time-picker-DOrKUA6q
@getufy/flint-ui/_shared/flint-toggle-Z6HK--Gp
@getufy/flint-ui/_shared/flint-toggle-button-group-DCFkfUTH
@getufy/flint-ui/_shared/flint-toggle-button.component-BJrNlxNh
@getufy/flint-ui/_shared/flint-tooltip.component-DrnsvNq0
@getufy/flint-ui/_shared/flint-transfer-list-B_MB-fNC
@getufy/flint-ui/_shared/flint-tree-item-CRNpNE3q
@getufy/flint-ui/_shared/flint-typography-J6WNjcZm
@getufy/flint-ui/_shared/flint-visually-hidden-BOZH94DT
@getufy/flint-ui/_shared/focus-trap-DjCTLLi1
@getufy/flint-ui/_shared/form-associated-BcXxp6zP
@getufy/flint-ui/_shared/id-generator-Dt5UaMts
@getufy/flint-ui/_shared/roving-index-DK3XUPgV
@getufy/flint-ui/_shared/scroll-lock-uVj21O1X
@getufy/flint-ui/accordion/flint-accordion
@getufy/flint-ui/accordion/flint-accordion.component
@getufy/flint-ui/alert/flint-alert
@getufy/flint-ui/alert/flint-alert.component
@getufy/flint-ui/animation/flint-animation
@getufy/flint-ui/animation/flint-animation.component
@getufy/flint-ui/app-bar/flint-app-bar
@getufy/flint-ui/app-bar/flint-app-bar.component
@getufy/flint-ui/autocomplete/flint-autocomplete
@getufy/flint-ui/autocomplete/flint-autocomplete.component
@getufy/flint-ui/autoloader
@getufy/flint-ui/avatar/flint-avatar
@getufy/flint-ui/avatar/flint-avatar.component
@getufy/flint-ui/backdrop/flint-backdrop
@getufy/flint-ui/backdrop/flint-backdrop.component
@getufy/flint-ui/badge/flint-badge
@getufy/flint-ui/badge/flint-badge.component
@getufy/flint-ui/bottom-navigation/flint-bottom-navigation
@getufy/flint-ui/bottom-navigation/flint-bottom-navigation-action
@getufy/flint-ui/bottom-navigation/flint-bottom-navigation-action.component
@getufy/flint-ui/bottom-navigation/flint-bottom-navigation.component
@getufy/flint-ui/box/flint-box
@getufy/flint-ui/box/flint-box.component
@getufy/flint-ui/breadcrumbs/flint-breadcrumb-item
@getufy/flint-ui/breadcrumbs/flint-breadcrumb-item.component
@getufy/flint-ui/breadcrumbs/flint-breadcrumbs
@getufy/flint-ui/breadcrumbs/flint-breadcrumbs.component
@getufy/flint-ui/button/flint-button
@getufy/flint-ui/button/flint-button-group
@getufy/flint-ui/button/flint-button-group.component
@getufy/flint-ui/button/flint-button.component
@getufy/flint-ui/button/flint-toggle-button
@getufy/flint-ui/button/flint-toggle-button-group
@getufy/flint-ui/button/flint-toggle-button-group.component
@getufy/flint-ui/button/flint-toggle-button.component
@getufy/flint-ui/card/flint-card
@getufy/flint-ui/card/flint-card-action-area
@getufy/flint-ui/card/flint-card-action-area.component
@getufy/flint-ui/card/flint-card-actions
@getufy/flint-ui/card/flint-card-actions.component
@getufy/flint-ui/card/flint-card-content
@getufy/flint-ui/card/flint-card-content.component
@getufy/flint-ui/card/flint-card-header
@getufy/flint-ui/card/flint-card-header.component
@getufy/flint-ui/card/flint-card-media
@getufy/flint-ui/card/flint-card-media.component
@getufy/flint-ui/card/flint-card.component
@getufy/flint-ui/carousel/flint-carousel
@getufy/flint-ui/carousel/flint-carousel.component
@getufy/flint-ui/checkbox/flint-checkbox
@getufy/flint-ui/checkbox/flint-checkbox.component
@getufy/flint-ui/chip/flint-chip
@getufy/flint-ui/chip/flint-chip.component
@getufy/flint-ui/collapsible/flint-collapsible
@getufy/flint-ui/collapsible/flint-collapsible.component
@getufy/flint-ui/combobox/flint-combobox
@getufy/flint-ui/combobox/flint-combobox.component
@getufy/flint-ui/command/flint-command
@getufy/flint-ui/command/flint-command.component
@getufy/flint-ui/command/fuzzy-score
@getufy/flint-ui/container/flint-container
@getufy/flint-ui/container/flint-container.component
@getufy/flint-ui/controllers/form-control
@getufy/flint-ui/copy-button/flint-copy-button
@getufy/flint-ui/copy-button/flint-copy-button.component
@getufy/flint-ui/date-field/flint-date-field
@getufy/flint-ui/date-field/flint-date-field.component
@getufy/flint-ui/date-picker/flint-date-picker
@getufy/flint-ui/date-picker/flint-date-picker.component
@getufy/flint-ui/date-range-picker/date-range-helpers
@getufy/flint-ui/date-range-picker/flint-date-range-calendar
@getufy/flint-ui/date-range-picker/flint-date-range-calendar.component
@getufy/flint-ui/date-range-picker/flint-date-range-picker
@getufy/flint-ui/date-range-picker/flint-date-range-picker.component
@getufy/flint-ui/date-range-picker/flint-single-input-date-range-field
@getufy/flint-ui/date-range-picker/flint-single-input-date-range-field.component
@getufy/flint-ui/decorators/watch
@getufy/flint-ui/dialog/flint-dialog
@getufy/flint-ui/dialog/flint-dialog.component
@getufy/flint-ui/divider/flint-divider
@getufy/flint-ui/divider/flint-divider.component
@getufy/flint-ui/drawer/flint-drawer
@getufy/flint-ui/drawer/flint-drawer.component
@getufy/flint-ui/empty/flint-empty
@getufy/flint-ui/empty/flint-empty.component
@getufy/flint-ui/events
@getufy/flint-ui/fab/flint-fab
@getufy/flint-ui/fab/flint-fab.component
@getufy/flint-ui/flint-element
@getufy/flint-ui/flint-range-slider/flint-range-slider
@getufy/flint-ui/flint-range-slider/flint-range-slider.component
@getufy/flint-ui/form-field/flint-form-field
@getufy/flint-ui/form-field/flint-form-field.component
@getufy/flint-ui/format-date/flint-format-date
@getufy/flint-ui/format-date/flint-format-date.component
@getufy/flint-ui/format-number/flint-format-number
@getufy/flint-ui/format-number/flint-format-number.component
@getufy/flint-ui/grid/flint-grid
@getufy/flint-ui/grid/flint-grid.component
@getufy/flint-ui/hover-card/flint-hover-card
@getufy/flint-ui/hover-card/flint-hover-card.component
@getufy/flint-ui/icon/flint-icon
@getufy/flint-ui/icon/flint-icon.component
@getufy/flint-ui/image-comparer/flint-image-comparer
@getufy/flint-ui/image-comparer/flint-image-comparer.component
@getufy/flint-ui/image-list/flint-image-list
@getufy/flint-ui/image-list/flint-image-list-item
@getufy/flint-ui/image-list/flint-image-list-item-bar
@getufy/flint-ui/image-list/flint-image-list-item-bar.component
@getufy/flint-ui/image-list/flint-image-list-item.component
@getufy/flint-ui/image-list/flint-image-list.component
@getufy/flint-ui/index
@getufy/flint-ui/input-otp/flint-input-otp
@getufy/flint-ui/input-otp/flint-input-otp.component
@getufy/flint-ui/input/flint-input
@getufy/flint-ui/input/flint-input.component
@getufy/flint-ui/item/flint-item
@getufy/flint-ui/item/flint-item.component
@getufy/flint-ui/kbd/flint-kbd
@getufy/flint-ui/kbd/flint-kbd.component
@getufy/flint-ui/layer/flint-layer
@getufy/flint-ui/layer/flint-layer.component
@getufy/flint-ui/link/flint-link
@getufy/flint-ui/link/flint-link.component
@getufy/flint-ui/list/flint-list
@getufy/flint-ui/list/flint-list.component
@getufy/flint-ui/menu/flint-menu
@getufy/flint-ui/menu/flint-menu.component
@getufy/flint-ui/menubar/flint-menubar
@getufy/flint-ui/menubar/flint-menubar.component
@getufy/flint-ui/mixins/form-associated
@getufy/flint-ui/navigation-menu/flint-navigation-menu
@getufy/flint-ui/navigation-menu/flint-navigation-menu-content
@getufy/flint-ui/navigation-menu/flint-navigation-menu-content.component
@getufy/flint-ui/navigation-menu/flint-navigation-menu-item
@getufy/flint-ui/navigation-menu/flint-navigation-menu-item.component
@getufy/flint-ui/navigation-menu/flint-navigation-menu-link
@getufy/flint-ui/navigation-menu/flint-navigation-menu-link.component
@getufy/flint-ui/navigation-menu/flint-navigation-menu-list
@getufy/flint-ui/navigation-menu/flint-navigation-menu-list.component
@getufy/flint-ui/navigation-menu/flint-navigation-menu-trigger
@getufy/flint-ui/navigation-menu/flint-navigation-menu-trigger.component
@getufy/flint-ui/navigation-menu/flint-navigation-menu.component
@getufy/flint-ui/pagination/flint-pagination
@getufy/flint-ui/pagination/flint-pagination.component
@getufy/flint-ui/paper/flint-paper
@getufy/flint-ui/paper/flint-paper.component
@getufy/flint-ui/popup/flint-popup
@getufy/flint-ui/popup/flint-popup.component
@getufy/flint-ui/progress/flint-circular-progress
@getufy/flint-ui/progress/flint-circular-progress.component
@getufy/flint-ui/progress/flint-linear-progress
@getufy/flint-ui/progress/flint-linear-progress.component
@getufy/flint-ui/radio/flint-radio
@getufy/flint-ui/radio/flint-radio.component
@getufy/flint-ui/rating/flint-rating
@getufy/flint-ui/rating/flint-rating.component
@getufy/flint-ui/relative-time/flint-relative-time
@getufy/flint-ui/relative-time/flint-relative-time.component
@getufy/flint-ui/resizable/flint-resizable
@getufy/flint-ui/resizable/flint-resizable.component
@getufy/flint-ui/scroll-area/flint-scroll-area
@getufy/flint-ui/scroll-area/flint-scroll-area.component
@getufy/flint-ui/select/flint-option
@getufy/flint-ui/select/flint-option.component
@getufy/flint-ui/select/flint-select
@getufy/flint-ui/select/flint-select.component
@getufy/flint-ui/skeleton/flint-skeleton
@getufy/flint-ui/skeleton/flint-skeleton.component
@getufy/flint-ui/slider/flint-slider
@getufy/flint-ui/slider/flint-slider.component
@getufy/flint-ui/snackbar/flint-snackbar
@getufy/flint-ui/snackbar/flint-snackbar.component
@getufy/flint-ui/sonner/flint-sonner
@getufy/flint-ui/sonner/flint-sonner.component
@getufy/flint-ui/speed-dial/flint-speed-dial
@getufy/flint-ui/speed-dial/flint-speed-dial.component
@getufy/flint-ui/split-panel/flint-split-panel
@getufy/flint-ui/split-panel/flint-split-panel.component
@getufy/flint-ui/stack/flint-stack
@getufy/flint-ui/stack/flint-stack.component
@getufy/flint-ui/stepper/flint-stepper
@getufy/flint-ui/stepper/flint-stepper.component
@getufy/flint-ui/suppress-warnings
@getufy/flint-ui/switch/flint-switch
@getufy/flint-ui/switch/flint-switch.component
@getufy/flint-ui/table/flint-table
@getufy/flint-ui/table/flint-table-pagination
@getufy/flint-ui/table/flint-table-pagination.component
@getufy/flint-ui/table/flint-table-sort-label
@getufy/flint-ui/table/flint-table-sort-label.component
@getufy/flint-ui/table/flint-table.component
@getufy/flint-ui/tabs/flint-tabs
@getufy/flint-ui/tabs/flint-tabs.component
@getufy/flint-ui/test-utils/axe
@getufy/flint-ui/text-field/flint-text-field
@getufy/flint-ui/text-field/flint-text-field.component
@getufy/flint-ui/textarea/flint-textarea
@getufy/flint-ui/textarea/flint-textarea.component
@getufy/flint-ui/theme-dark.css
@getufy/flint-ui/theme.css
@getufy/flint-ui/theme/flint-theme
@getufy/flint-ui/theme/flint-theme.component
@getufy/flint-ui/time-picker/flint-time-picker
@getufy/flint-ui/time-picker/flint-time-picker.component
@getufy/flint-ui/toggle/flint-toggle
@getufy/flint-ui/toggle/flint-toggle.component
@getufy/flint-ui/tooltip/flint-tooltip
@getufy/flint-ui/tooltip/flint-tooltip.component
@getufy/flint-ui/transfer-list/flint-transfer-list
@getufy/flint-ui/transfer-list/flint-transfer-list.component
@getufy/flint-ui/translations/de
@getufy/flint-ui/translations/en
@getufy/flint-ui/translations/es
@getufy/flint-ui/translations/fr
@getufy/flint-ui/translations/ja
@getufy/flint-ui/translations/pt
@getufy/flint-ui/tree-view/flint-rich-tree-view
@getufy/flint-ui/tree-view/flint-rich-tree-view.component
@getufy/flint-ui/tree-view/flint-simple-tree-view
@getufy/flint-ui/tree-view/flint-simple-tree-view.component
@getufy/flint-ui/tree-view/flint-tree-item
@getufy/flint-ui/tree-view/flint-tree-item.component
@getufy/flint-ui/types
@getufy/flint-ui/typography/flint-typography
@getufy/flint-ui/typography/flint-typography.component
@getufy/flint-ui/utilities/animation-presets
@getufy/flint-ui/utilities/animation-registry
@getufy/flint-ui/utilities/data-provider
@getufy/flint-ui/utilities/date-utils
@getufy/flint-ui/utilities/dev-warnings
@getufy/flint-ui/utilities/focus-trap
@getufy/flint-ui/utilities/form
@getufy/flint-ui/utilities/id-generator
@getufy/flint-ui/utilities/localize
@getufy/flint-ui/utilities/overlay-manager
@getufy/flint-ui/utilities/roving-index
@getufy/flint-ui/utilities/scroll-lock
@getufy/flint-ui/utilities/theme
@getufy/flint-ui/virtual-scroll/flint-virtual-scroll
@getufy/flint-ui/virtual-scroll/flint-virtual-scroll.component
@getufy/flint-ui/visually-hidden/flint-visually-hidden
@getufy/flint-ui/visually-hidden/flint-visually-hidden.component

Readme

@getufy/flint-ui

A modern, lightweight web component library built with Lit. 50+ components for building rich UIs — works with any framework.

Installation

npm install @getufy/flint-ui lit

Resources

Documentation — full component docs, guides, and examples
Live Storybook — interactive component playground
React wrappers — @getufy/flint-ui-react for React projects

Getting Started

Required: Import the theme CSS once in your app entry point. Without this, components render unstyled.
import '@getufy/flint-ui/theme.css';
import '@getufy/flint-ui/theme-dark.css';  // Required for dark mode support
If you omit theme.css, components render with no spacing, colors, or typography. If you omit theme-dark.css, dark mode will not work. In development, a console warning will alert you if theme CSS is missing.

Suppress Dev Warnings

In development, Lit prints a console warning about running in dev mode. To silence it, add this import before any component imports:

// Must come before any @getufy/flint-ui imports
import '@getufy/flint-ui/suppress-warnings';

Usage

<script type="module">
  import '@getufy/flint-ui/button/flint-button';
</script>

<flint-button variant="contained" color="primary">Click me</flint-button>

Or import the full bundle:

import { FlintButton, FlintTabs, FlintDialog } from '@getufy/flint-ui';

Tree-shakeable imports

import '@getufy/flint-ui/tabs/flint-tabs';
import '@getufy/flint-ui/dialog/flint-dialog';
import '@getufy/flint-ui/date-picker/flint-date-picker';

Components

Inputs: Button, Checkbox, Input, Radio, Rating, Select, Slider, Switch, Textarea, Toggle, Autocomplete, Input OTP, Date Picker, Date Range Picker, Time Picker, Transfer List

Data Display: Avatar, Badge, Chip, Divider, Item, List, Table, Tooltip, Typography, Kbd, Empty, Carousel

Feedback: Alert, Dialog, Progress, Skeleton, Snackbar, Sonner, Backdrop

Surfaces: Accordion, App Bar, Card, Paper

Navigation: Bottom Navigation, Breadcrumbs, Drawer, Link, Menu, Menubar, Navigation Menu, Pagination, Speed Dial, Stepper, Tabs

Layout: Box, Container, Grid, Stack, Image List, Split Panel, Resizable, Scroll Area

Utilities: Collapsible, Command, Copy Button, Hover Card, Image Comparer, Tree View, Relative Time, Format Date, Format Number, Visually Hidden

Theming

:root {
  --flint-primary-color: #3b82f6;
  --flint-text-color: #111827;
  --flint-font-family: system-ui, sans-serif;
}

import '@getufy/flint-ui/theme.css';       // Light theme (required)
import '@getufy/flint-ui/theme-dark.css';   // Dark theme

Dark Mode

The dark theme CSS includes a @media (prefers-color-scheme: dark) block that auto-applies dark mode based on the user's OS preference. To manually control the mode:

// Force dark mode
document.documentElement.setAttribute('data-theme', 'dark');

// Force light mode (overrides OS dark preference)
document.documentElement.setAttribute('data-theme', 'light');

Or use <flint-theme mode="dark"> / <flint-theme mode="light"> as a wrapper component — when placed at the root level (direct child of <body>), it automatically sets data-theme on the document element.

CSS Custom Properties

All components use --flint-* prefixed CSS custom properties. Key tokens:

Token	Default	Description
`--flint-primary-color`	`#3b82f6`	Primary brand color
`--flint-text-color`	`#111827`	Default text color
`--flint-font-family`	`system-ui`	Font stack
`--flint-background`	`#ffffff`	Page background
`--flint-surface-background`	`#ffffff`	Card/surface background

Components expose per-component overrides (e.g., --flint-chip-bg, --flint-chip-color, --flint-avatar-bg). See each component's JSDoc @cssprop annotations.

CSS Parts

Components expose ::part() selectors for styling Shadow DOM internals. Common parts:

Part	Components	Description
`base`	Most components	Outermost wrapper
`input`	Input, Textarea, Select	Native input element
`label`	Input, Textarea, Select	Label element
`title`	CardHeader	Title element
`content`	CardHeader, AccordionSummary	Content container

Events

All custom events use the flint- prefix and follow the pattern flint-[component]-[action]:

Component	Event	Detail
Input	`flint-input-input`	`{ value: string }`
Input	`flint-input-change`	`{ value: string }`
Select	`flint-select-change`	`{ value, multiple }`
Dialog	`flint-dialog-close`	`{ open: false }`
Dialog	`flint-dialog-open`	`{ open: true }`
Tabs	`flint-tabs-change`	`{ value: string }`
Switch	`flint-switch-change`	`{ checked: boolean }`
Pagination	`flint-pagination-change`	`{ page: number }`
Drawer	`flint-drawer-close`	`{ open: false }`

Timing: flint-input-input fires on every keystroke. flint-input-change fires on blur.

React

Looking for React wrappers? See @getufy/flint-ui-react.

License

MIT