CSS Parts API Reference

tap-bottom-sheet

Name	Description
dimmer	The dimmer element darkens the background and is clickable to close the bottom sheet.
header	The header of the bottom sheet component, containing the title and dismiss button.
body	The container that wraps the bottom sheet's content.

tap-bottom-sheet::part(dimmer) { /* ... */ }
tap-bottom-sheet::part(header) { /* ... */ }
tap-bottom-sheet::part(body) { /* ... */ }

tap-button

Name	Description
button	The button element.

tap-button::part(button) { /* ... */ }

tap-checkbox

Name	Description
checkbox	The main container for the checkbox.

tap-checkbox::part(checkbox) { /* ... */ }

tap-icon-button

Name	Description
button	The button element.

tap-icon-button::part(button) { /* ... */ }

tap-modal

Name	Description
overlay	The overlay background when the modal is open.
dialog	The main container for the modal dialog.
image-container	The container of the image element, a div.
image	The image element, a img.
icon	The container of the icon slot, a div.
content	The wrapper around title and description, a div.
title	The title element, a span.
description	The description element, a p.
actions	The container of the actions slot, a div.

tap-modal::part(overlay) { /* ... */ }
tap-modal::part(dialog) { /* ... */ }
tap-modal::part(image-container) { /* ... */ }
tap-modal::part(image) { /* ... */ }
tap-modal::part(icon) { /* ... */ }
tap-modal::part(content) { /* ... */ }
tap-modal::part(title) { /* ... */ }
tap-modal::part(description) { /* ... */ }
tap-modal::part(actions) { /* ... */ }

tap-notice

Name	Description
notice	The root container of the notice component a div.
icon	The container of the icon, a span.
content-root	The wrapper around title, message and actions, a div.
message	The message element, a p.
title	The title element, a p.
actions	The actions slot, a slot.
dismiss	The dismiss button, a button.

tap-notice::part(notice) { /* ... */ }
tap-notice::part(icon) { /* ... */ }
tap-notice::part(content-root) { /* ... */ }
tap-notice::part(message) { /* ... */ }
tap-notice::part(title) { /* ... */ }
tap-notice::part(actions) { /* ... */ }
tap-notice::part(dismiss) { /* ... */ }

tap-nps

Name	Description
container	The container that wraps the component.
dot	The dot that represents the selected value on the slider.
label	The label displaying the description or value of the slider.
rate	The element that shows the selected rate.

tap-nps::part(container) { /* ... */ }
tap-nps::part(dot) { /* ... */ }
tap-nps::part(label) { /* ... */ }
tap-nps::part(rate) { /* ... */ }

tap-pinwheel-group

Name	Description
pinwheel-group	The container that wraps the pinwheels.
pinwheel-selector-indicator	The selector indicator that wraps selected row.

tap-pinwheel-group::part(pinwheel-group) { /* ... */ }
tap-pinwheel-group::part(pinwheel-selector-indicator) { /* ... */ }

tap-pinwheel

Name	Description
pinwheel	The container that wraps the pinwheel component.
pinwheel-item	The item that rendered in pinwheel.

tap-pinwheel::part(pinwheel) { /* ... */ }
tap-pinwheel::part(pinwheel-item) { /* ... */ }

tap-progress-indicator

Name	Description
progressbar	The container for the progress bar.
step	Each individual step in the progress bar.

tap-progress-indicator::part(progressbar) { /* ... */ }
tap-progress-indicator::part(step) { /* ... */ }

tap-radio-group

Name	Description
radio-group	The main container for the radio group.

tap-radio-group::part(radio-group) { /* ... */ }

tap-radio

Name	Description
radio	The main container for the radio button.

tap-radio::part(radio) { /* ... */ }

tap-row

Name	Description
row	The main container for the row.
leading	The container for the leading slot.
content	The container for the content slot.
trailing	The container for the trailing slot.
navigable	The container for the navigable icon.

tap-row::part(row) { /* ... */ }
tap-row::part(leading) { /* ... */ }
tap-row::part(content) { /* ... */ }
tap-row::part(trailing) { /* ... */ }
tap-row::part(navigable) { /* ... */ }

tap-segmented-button-group

Name	Description
button-group	The main container for the button group.

tap-segmented-button-group::part(button-group) { /* ... */ }

tap-segmented-button

Name	Description
button	The main container for the button.

tap-segmented-button::part(button) { /* ... */ }

tap-skeleton

Name	Description
skeleton	The skeleton element

tap-skeleton::part(skeleton) { /* ... */ }

tap-spinner

Name	Description
svg	The svg tag that represents spinner component.

tap-spinner::part(`svg`) { /* ... */ }

tap-step-indicator

Name	Description
steps	The container for the steps.
step	Each individual step.

tap-step-indicator::part(steps) { /* ... */ }
tap-step-indicator::part(step) { /* ... */ }

tap-stepper

Name	Description
stepper	The container that wraps the stepper component.
decrease-button	The button that contains minus icon and decrease the value.
increase-button	The button that contains plus icon and increases the value.
value	The p tag that shows the value.
unit	The p tag that shows the unit and will be hidden if unit not exists.

tap-stepper::part(stepper) { /* ... */ }
tap-stepper::part(decrease-button) { /* ... */ }
tap-stepper::part(increase-button) { /* ... */ }
tap-stepper::part(value) { /* ... */ }
tap-stepper::part(unit) { /* ... */ }

tap-switch

Name	Description
switch	The container that wraps the switch component.
input	The input element that represents the switch's toggle functionality.
slider	The slider element that visually represents the switch's state.

tap-switch::part(switch) { /* ... */ }
tap-switch::part(input) { /* ... */ }
tap-switch::part(slider) { /* ... */ }

tap-toast

Name	Description
toast	The main container for the toast notification.
icon	The container for the icon.
message	The container for the message.
dismiss	The container for the dismiss button.

tap-toast::part(toast) { /* ... */ }
tap-toast::part(icon) { /* ... */ }
tap-toast::part(message) { /* ... */ }
tap-toast::part(dismiss) { /* ... */ }