From 5d36ffa9ce5104a992608b788f2f2a77289dc781 Mon Sep 17 00:00:00 2001
From: treeder <75826+treeder@users.noreply.github.com>
Date: Tue, 12 May 2026 00:39:46 +0000
Subject: [PATCH] feat: implement Material 3 carousel component
- Implemented `md-carousel` and `md-carousel-item` components using Lit.
- Implemented Material 3 standard visual styling including CSS flexbox and `scroll-snap`.
- Applied correct ARIA accessibility roles using `attachInternals()`.
- Updated `all.js` and `common.js` to export these new components.
- Added a demo in `demo/carousel.html` and linked it to the main `demo/index.html`.
Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
all.js | 4 ++
carousel/carousel-item.js | 44 +++++++++++++++++++++
carousel/carousel.js | 45 +++++++++++++++++++++
common.js | 4 ++
demo/carousel.html | 83 +++++++++++++++++++++++++++++++++++++++
demo/index.html | 1 +
6 files changed, 181 insertions(+)
create mode 100644 carousel/carousel-item.js
create mode 100644 carousel/carousel.js
create mode 100644 demo/carousel.html
diff --git a/all.js b/all.js
index bc4175c..f3d9678 100644
--- a/all.js
+++ b/all.js
@@ -9,6 +9,8 @@ import './buttons/button.js'
import './buttons/filled-tonal-button.js'
import './buttons/outlined-button.js'
import './buttons/text-button.js'
+import './carousel/carousel.js'
+import './carousel/carousel-item.js'
import './checkbox/checkbox.js'
import './chips/assist-chip.js'
import './chips/chip-set.js'
@@ -48,6 +50,8 @@ import './text/text-field.js'
// LINT.IfChange(exports)
// go/keep-sorted start
export * from './buttons/button.js'
+export * from './carousel/carousel.js'
+export * from './carousel/carousel-item.js'
export * from './checkbox/checkbox.js'
export * from './chips/chip.js'
export * from './chips/chip-set.js'
diff --git a/carousel/carousel-item.js b/carousel/carousel-item.js
new file mode 100644
index 0000000..5453787
--- /dev/null
+++ b/carousel/carousel-item.js
@@ -0,0 +1,44 @@
+import { html, LitElement, css } from 'lit';
+
+/**
+ * An item inside a Material 3 Carousel.
+ *
+ * @element md-carousel-item
+ */
+export class CarouselItem extends LitElement {
+ static get styles() {
+ return [
+ css`
+ :host {
+ display: block;
+ border-radius: 16px;
+ overflow: hidden;
+ /* Default aspect ratio, can be overridden */
+ aspect-ratio: 1;
+ width: 200px; /* Default width, can be overridden */
+ scroll-snap-align: start;
+ flex: 0 0 auto;
+ }
+
+ ::slotted(img) {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ }
+ `
+ ];
+ }
+
+ constructor() {
+ super();
+ this.internals = this.attachInternals();
+ this.internals.role = 'listitem';
+ }
+
+ render() {
+ return html``;
+ }
+}
+
+customElements.define('md-carousel-item', CarouselItem);
diff --git a/carousel/carousel.js b/carousel/carousel.js
new file mode 100644
index 0000000..e1cb3c6
--- /dev/null
+++ b/carousel/carousel.js
@@ -0,0 +1,45 @@
+import { html, LitElement, css } from 'lit';
+
+/**
+ * A Material 3 Carousel component.
+ *
+ * @element md-carousel
+ */
+export class Carousel extends LitElement {
+ static get styles() {
+ return [
+ css`
+ :host {
+ display: flex;
+ overflow-x: auto;
+ scroll-snap-type: x mandatory;
+ gap: 8px;
+ padding: 16px;
+ scrollbar-width: none; /* Firefox */
+ -ms-overflow-style: none; /* IE/Edge */
+ }
+
+ :host::-webkit-scrollbar {
+ display: none; /* Chrome/Safari/Opera */
+ }
+
+ ::slotted(*) {
+ scroll-snap-align: start;
+ flex: 0 0 auto;
+ }
+ `
+ ];
+ }
+
+ constructor() {
+ super();
+ this.internals = this.attachInternals();
+ this.internals.role = 'list';
+ }
+
+ render() {
+ return html``;
+ }
+}
+
+customElements.define('md-carousel', Carousel);
diff --git a/common.js b/common.js
index d063462..15f8797 100644
--- a/common.js
+++ b/common.js
@@ -7,6 +7,8 @@
* for production.
*/
import './buttons/button.js'
+import './carousel/carousel.js'
+import './carousel/carousel-item.js'
import './checkbox/checkbox.js'
import './chips/chip.js'
import './chips/chip-set.js'
@@ -27,6 +29,8 @@ import './tabs/tabs.js'
import './text/text-field.js'
export * from './buttons/button.js'
+export * from './carousel/carousel.js'
+export * from './carousel/carousel-item.js'
export * from './checkbox/checkbox.js'
export * from './chips/chip.js'
export * from './chips/chip-set.js'
diff --git a/demo/carousel.html b/demo/carousel.html
new file mode 100644
index 0000000..1973f9b
--- /dev/null
+++ b/demo/carousel.html
@@ -0,0 +1,83 @@
+
+
+
+
+
+ Material 3 Carousel Demo
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demo/index.html b/demo/index.html
index bb1a109..dbd0c47 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -149,6 +149,7 @@