`.
+ *
+ * https://m3.material.io/components/carousel/overview
+ */
+export class CarouselItem extends LitElement {
+ static properties = {
+ shape: { type: String, reflect: true },
+ type: { type: String, reflect: true }, // 'filled' | 'elevated' | 'outlined'
+ interactive: { type: Boolean, reflect: true },
+ disabled: { type: Boolean, reflect: true },
+ active: { type: Boolean, reflect: true },
+ href: { type: String },
+ target: { type: String },
+ headline: { type: String },
+ subhead: { type: String },
+ isCarouselItem: { type: Boolean, attribute: 'md-carousel-item', reflect: true },
+ }
+
+ constructor() {
+ super()
+ this.isCarouselItem = true
+ this.interactive = false
+ this.disabled = false
+ this.active = false
+ this.type = ''
+ this.href = ''
+ this.target = ''
+ this.headline = ''
+ this.subhead = ''
+ }
+
+ get isInteractive() {
+ return this.interactive || Boolean(this.href)
+ }
+
+ render() {
+ const content = html`
+ ${this.renderElevation()}
+
+
+
+
+
+
+
+ ${this.renderTextContent()}
+
+ ${this.renderRippleAndFocus()}
+ `
+
+ if (this.href) {
+ return html`
+
+ ${content}
+
+ `
+ }
+
+ return html`
+ ${content}
+
`
+ }
+
+ renderElevation() {
+ if (this.type === 'elevated' || (this.interactive && this.type !== 'outlined')) {
+ return html``
+ }
+ return nothing
+ }
+
+ renderRippleAndFocus() {
+ if (!this.isInteractive) {
+ return nothing
+ }
+ return html`
+
+
+ `
+ }
+
+ renderTextContent() {
+ return html`
+
+
${this.headline ? html`${this.headline}
` : nothing}
+
${this.subhead ? html`${this.subhead}
` : nothing}
+
+
+
+
+
+
+ ${showNav
+ ? html`
+
+
+
+ `
+ : nothing}
+ ${this.indicators && itemCount > 0
+ ? html`
+
+ ${this.items.map(
+ (_, i) => html`
+
+ `,
+ )}
+
+ `
+ : nothing}
+
+
+
Change the layout strategy, toggle indicators, autoplay, or navigate programmatically.
+
+
+
+
+
+
1. Multi-Browse Layout (Default)
+
+ Displays items of varying sizes (large, medium, and small peek). Dynamically recalculates item widths as the
+ container resizes.
+
+
+
+
+
2. Uncontained Layout with Custom Cards
+
+ Displays uniform width items scrolling across the container boundary. Excellent for cards, articles, and
+ text-heavy items.
+
+
+
+
+
+
+
+
Explore Components
+
+ Discover Material 3 Expressive buttons, pickers, cards, navigation, and carousels.
+
+
+
+ Learn more
+
+
+
+
Design Tokens
+
+ Full support for dynamic color schemes, shape tokens, and typography scales.
+
+
+
+ Customize
+
+
+
+
Web Components
+
+ Standards-compliant Lit web components with seamless framework compatibility.
+
+
+
+ Get Started
+
+
+
+
Responsive Layouts
+
+ Auto-adapting layouts with smooth touch, trackpad, and mouse drag interactions.
+
+
+
+ View Docs
+
+
+
+
+
3. Hero Layout (Start-aligned)
+
Spotlights one dominant large item with a smaller peek item on the trailing side.
+
+
+
+
+ Editor's Pick
+ 
+
+
+ Popular
+ 
+
+
+ 
+
+
+
+
+
4. Centered Hero Layout
+
Centers one large focal item flanked by peek items on both the left and right edges.
+
+
+
+
5. Full-Screen Layout with Autoplay (4s)
+
Edge-to-edge full width slide presentation with pagination and hover-pause autoplay.
+
+
+
Inputs
Progress
-
+
-
+
Wavy Progress Indicators
-
+
-
-
+
+
Loading Indicator (M3 Expressive)
-
+
@@ -207,6 +210,31 @@
Loading Indicator (M3 Expressive)
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+