WIP PWA for Grain
feat: add grain-carousel-dots molecule
+49
+49
src/components/molecules/grain-carousel-dots.js
+49
src/components/molecules/grain-carousel-dots.js
···
1
+
import { LitElement, html, css } from 'lit';
2
+
3
+
export class GrainCarouselDots extends LitElement {
4
+
static properties = {
5
+
total: { type: Number },
6
+
current: { type: Number }
7
+
};
8
+
9
+
static styles = css`
10
+
:host {
11
+
display: flex;
12
+
justify-content: center;
13
+
gap: 4px;
14
+
padding: var(--space-sm) 0;
15
+
}
16
+
.dot {
17
+
width: 6px;
18
+
height: 6px;
19
+
border-radius: 50%;
20
+
background: var(--color-text-secondary);
21
+
opacity: 0.4;
22
+
transition: opacity 0.2s, transform 0.2s;
23
+
}
24
+
.dot.active {
25
+
opacity: 1;
26
+
background: var(--color-accent);
27
+
}
28
+
`;
29
+
30
+
constructor() {
31
+
super();
32
+
this.total = 0;
33
+
this.current = 0;
34
+
}
35
+
36
+
render() {
37
+
if (this.total <= 1) return null;
38
+
39
+
const dots = Array.from({ length: Math.min(this.total, 5) }, (_, i) => i);
40
+
41
+
return html`
42
+
${dots.map(i => html`
43
+
<div class="dot ${i === this.current ? 'active' : ''}"></div>
44
+
`)}
45
+
`;
46
+
}
47
+
}
48
+
49
+
customElements.define('grain-carousel-dots', GrainCarouselDots);