@latty-ds/web 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +1 -1
  2. package/custom-elements.json +1028 -1028
  3. package/dist/components/button/index.js +1 -1
  4. package/dist/components/combobox/index.js +3 -1
  5. package/dist/components/date-input/index.js +4 -1
  6. package/dist/components/dropdown/index.js +3 -2
  7. package/dist/components/select/index.js +2 -1
  8. package/dist/components/spinner/index.js +1 -1
  9. package/dist/index.cjs +13 -6
  10. package/dist/index.d.ts +4 -29
  11. package/dist/index.js +13 -6
  12. package/dist/manifest.json +58 -58
  13. package/package.json +4 -4
  14. /package/dist/components/spinner/{spineer.styles.d.ts → spinner.styles.d.ts} +0 -0
package/custom-elements.json CHANGED
@@ -2,6 +2,228 @@
2
2
  "schemaVersion": "1.0.0",
3
3
  "readme": "",
4
4
  "modules": [
5
+ {
6
+ "kind": "javascript-module",
7
+ "path": "src/components/accordion/accordion.styles.ts",
8
+ "declarations": [
9
+ {
10
+ "kind": "variable",
11
+ "name": "accordionStyles",
12
+ "default": "css` :host { display: block; font-family: 'Hanken Grotesk', sans-serif; width: 100%; } details { border-radius: var(--lt-border-radius); transition: background-color 120ms ease, border-color 120ms ease; } summary { cursor: pointer; list-style: none; user-select: none; border-radius: var(--lt-border-radius); overflow: hidden; } summary::-webkit-details-marker { display: none; } .summary-content { align-items: center; display: flex; gap: var(--lt-spacing-3); justify-content: space-between; padding: var(--lt-accordion-summary-padding, var(--lt-spacing-4)); } .start-icon { color: var(--lt-text-subtle); flex-shrink: 0; font-size: 1.25rem; } .summary-text { color: var(--lt-accordion-header-color, var(--lt-text-default)); flex: 1; } .summary-text::part(base) { font-size: var(--lt-accordion-header-font-size, 1rem); font-weight: var(--lt-accordion-header-font-weight, 600); } .chevron { color: var(--lt-text-subtle); flex-shrink: 0; height: 20px; transition: transform 200ms ease; width: 20px; } details[open] .chevron { transform: rotate(180deg); } summary:hover .chevron { color: var(--lt-text-default); } summary:focus-visible { outline: 2px solid var(--lt-border-focus); outline-offset: 2px; border-radius: var(--lt-border-radius); } .content { height: 0; overflow: hidden; transition: height 200ms ease; } .content-inner { color: var(--lt-text-subtle); font-size: 0.9375rem; line-height: 1.6; padding: var(--lt-accordion-content-padding, 0 var(--lt-spacing-4) var(--lt-spacing-4)); } /* Variant: default */ :host([appearance='default']) details { background: var(--lt-bg-subtle); border: 1px solid var(--lt-border-default); } :host([appearance='default']) details:hover { border-color: var(--lt-border-strong); } /* Variant: filled */ :host([appearance='filled']) details { background: var(--lt-bg-surface); border: none; } :host([appearance='filled']) details:hover { background: var(--lt-bg-overlay); } /* Variant: outlined */ :host([appearance='outlined']) details { background: transparent; border: 1px solid var(--lt-border-default); } :host([appearance='outlined']) details:hover { border-color: var(--lt-border-strong); } /* Variant: clean */ :host([appearance='clean']) details { background: transparent; border: none; } /* Disabled state */ :host([disabled]) details { opacity: 0.6; pointer-events: none; } :host([uppercase]) .summary-text::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
13
+ }
14
+ ],
15
+ "exports": [
16
+ {
17
+ "kind": "js",
18
+ "name": "accordionStyles",
19
+ "declaration": {
20
+ "name": "accordionStyles",
21
+ "module": "src/components/accordion/accordion.styles.ts"
22
+ }
23
+ }
24
+ ]
25
+ },
26
+ {
27
+ "kind": "javascript-module",
28
+ "path": "src/components/accordion/accordion.ts",
29
+ "declarations": [
30
+ {
31
+ "kind": "class",
32
+ "description": "An accordion component using native details/summary elements.\nProvides collapsible content sections with smooth animations.",
33
+ "name": "Accordion",
34
+ "slots": [
35
+ {
36
+ "description": "Content to display when accordion is expanded",
37
+ "name": ""
38
+ },
39
+ {
40
+ "description": "Custom content for the summary/header (defaults to label property)",
41
+ "name": "summary"
42
+ }
43
+ ],
44
+ "members": [
45
+ {
46
+ "kind": "field",
47
+ "name": "styles",
48
+ "static": true,
49
+ "default": "accordionStyles"
50
+ },
51
+ {
52
+ "kind": "field",
53
+ "name": "label",
54
+ "type": {
55
+ "text": "string"
56
+ },
57
+ "default": "''",
58
+ "description": "Label/title text for the accordion header."
59
+ },
60
+ {
61
+ "kind": "field",
62
+ "name": "iconStart",
63
+ "type": {
64
+ "text": "string"
65
+ },
66
+ "default": "''",
67
+ "description": "Icon name to display at the start of the header."
68
+ },
69
+ {
70
+ "kind": "field",
71
+ "name": "appearance",
72
+ "type": {
73
+ "text": "AccordionAppearance"
74
+ },
75
+ "default": "'default'",
76
+ "description": "Visual appearance of the accordion."
77
+ },
78
+ {
79
+ "kind": "field",
80
+ "name": "open",
81
+ "type": {
82
+ "text": "boolean"
83
+ },
84
+ "default": "false",
85
+ "description": "Whether the accordion is initially open."
86
+ },
87
+ {
88
+ "kind": "field",
89
+ "name": "disabled",
90
+ "type": {
91
+ "text": "boolean"
92
+ },
93
+ "default": "false",
94
+ "description": "Whether the accordion is disabled."
95
+ },
96
+ {
97
+ "kind": "field",
98
+ "name": "uppercase",
99
+ "type": {
100
+ "text": "boolean"
101
+ },
102
+ "default": "false",
103
+ "description": "Renders the header label in small caps with wider letter spacing."
104
+ },
105
+ {
106
+ "kind": "field",
107
+ "name": "_details",
108
+ "type": {
109
+ "text": "HTMLDetailsElement"
110
+ },
111
+ "privacy": "private"
112
+ },
113
+ {
114
+ "kind": "field",
115
+ "name": "_content",
116
+ "type": {
117
+ "text": "HTMLElement"
118
+ },
119
+ "privacy": "private"
120
+ },
121
+ {
122
+ "kind": "field",
123
+ "name": "_contentInner",
124
+ "type": {
125
+ "text": "HTMLElement"
126
+ },
127
+ "privacy": "private"
128
+ },
129
+ {
130
+ "kind": "field",
131
+ "name": "_animating",
132
+ "type": {
133
+ "text": "boolean"
134
+ },
135
+ "privacy": "private",
136
+ "default": "false"
137
+ },
138
+ {
139
+ "kind": "method",
140
+ "name": "updated",
141
+ "privacy": "protected",
142
+ "parameters": [
143
+ {
144
+ "name": "changedProperties",
145
+ "type": {
146
+ "text": "Map<string, unknown>"
147
+ }
148
+ }
149
+ ]
150
+ },
151
+ {
152
+ "kind": "method",
153
+ "name": "handleSummaryClick",
154
+ "privacy": "private",
155
+ "parameters": [
156
+ {
157
+ "name": "e",
158
+ "type": {
159
+ "text": "Event"
160
+ }
161
+ }
162
+ ],
163
+ "description": "Handles click on summary to animate the accordion."
164
+ },
165
+ {
166
+ "kind": "method",
167
+ "name": "handleTransitionEnd",
168
+ "privacy": "private",
169
+ "description": "Handles the end of the transition to clear inline styles."
170
+ },
171
+ {
172
+ "kind": "method",
173
+ "name": "render"
174
+ }
175
+ ],
176
+ "events": [
177
+ {
178
+ "name": "toggle",
179
+ "type": {
180
+ "text": "CustomEvent<{open: boolean}>"
181
+ },
182
+ "description": "Dispatched when the accordion is opened or closed"
183
+ }
184
+ ],
185
+ "superclass": {
186
+ "name": "ThemeableElement",
187
+ "module": "/src/base"
188
+ },
189
+ "tagName": "lt-accordion",
190
+ "customElement": true
191
+ }
192
+ ],
193
+ "exports": [
194
+ {
195
+ "kind": "js",
196
+ "name": "Accordion",
197
+ "declaration": {
198
+ "name": "Accordion",
199
+ "module": "src/components/accordion/accordion.ts"
200
+ }
201
+ }
202
+ ]
203
+ },
204
+ {
205
+ "kind": "javascript-module",
206
+ "path": "src/components/accordion/index.ts",
207
+ "declarations": [],
208
+ "exports": [
209
+ {
210
+ "kind": "js",
211
+ "name": "Accordion",
212
+ "declaration": {
213
+ "name": "Accordion",
214
+ "module": "./accordion"
215
+ }
216
+ },
217
+ {
218
+ "kind": "js",
219
+ "name": "AccordionAppearance",
220
+ "declaration": {
221
+ "name": "AccordionAppearance",
222
+ "module": "./accordion.types"
223
+ }
224
+ }
225
+ ]
226
+ },
5
227
  {
6
228
  "kind": "javascript-module",
7
229
  "path": "src/components/alert/alert.styles.ts",
@@ -195,230 +417,54 @@
195
417
  },
196
418
  {
197
419
  "kind": "javascript-module",
198
- "path": "src/components/avatar/avatar.styles.ts",
420
+ "path": "src/components/badge/badge.styles.ts",
199
421
  "declarations": [
200
422
  {
201
423
  "kind": "variable",
202
- "name": "avatarStyles",
203
- "default": "css` :host { display: inline-flex; flex-shrink: 0; vertical-align: middle; } span[part='base'] { align-items: center; background: var(--lt-avatar-bg, var(--lt-bg-overlay)); box-sizing: border-box; color: var(--lt-avatar-color, var(--lt-color-neutral-700)); display: inline-flex; justify-content: center; overflow: hidden; position: relative; } img[part='image'] { height: 100%; object-fit: cover; width: 100%; } .initials { font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; letter-spacing: 0.02em; line-height: 1; user-select: none; } /* ── Colors (fallback bg + text) ────────────────────────────────────── */ :host([color='neutral']) span[part='base'] { background: var(--lt-bg-overlay); color: var(--lt-text-neutral); } :host([color='primary']) span[part='base'] { background: var(--lt-bg-primary-subtle); color: var(--lt-text-primary); } :host([color='secondary']) span[part='base'] { background: var(--lt-bg-secondary-subtle); color: var(--lt-text-secondary); } :host([color='success']) span[part='base'] { background: var(--lt-bg-success-subtle); color: var(--lt-text-success); } :host([color='warning']) span[part='base'] { background: var(--lt-bg-warning-subtle); color: var(--lt-text-warning); } :host([color='error']) span[part='base'] { background: var(--lt-bg-error-subtle); color: var(--lt-text-error); } :host([color='info']) span[part='base'] { background: var(--lt-bg-info-subtle); color: var(--lt-text-info); } /* ── Shape ───────────────────────────────────────────────────────────── */ :host([shape='circle']) span[part='base'] { border-radius: 999px; } :host([shape='square']) span[part='base'] { border-radius: var(--lt-border-radius); } /* ── Sizes ───────────────────────────────────────────────────────────── */ :host([size='xs']) span[part='base'] { height: 24px; width: 24px; } :host([size='xs']) .initials { font-size: 0.625rem; } :host([size='sm']) span[part='base'] { height: 32px; width: 32px; } :host([size='sm']) .initials { font-size: 0.75rem; } :host([size='md']) span[part='base'] { height: 40px; width: 40px; } :host([size='md']) .initials { font-size: 0.9375rem; } :host([size='lg']) span[part='base'] { height: 52px; width: 52px; } :host([size='lg']) .initials { font-size: 1.125rem; } :host([size='xl']) span[part='base'] { height: 68px; width: 68px; } :host([size='xl']) .initials { font-size: 1.5rem; } `"
424
+ "name": "badgeStyles",
425
+ "default": "css` :host { display: inline-flex; font-family: 'Hanken Grotesk', sans-serif; vertical-align: middle; } span[part='base'] { align-items: center; background: var(--lt-badge-bg); border-radius: 999px; border: 1px solid var(--lt-badge-border-color, transparent); color: var(--lt-badge-color); box-sizing: border-box; display: inline-flex; font-weight: 600; gap: var(--lt-spacing-1); line-height: 1; user-select: none; white-space: nowrap; } .dot { border-radius: 50%; flex-shrink: 0; } /* ── Sizes ──────────────────────────────────────────────────────────── */ :host([size='sm']) span[part='base'] { font-size: 0.6875rem; height: 18px; padding-inline: var(--lt-spacing-2); } :host([size='sm']) .dot { height: 6px; width: 6px; } :host([size='md']) span[part='base'] { font-size: 0.75rem; height: 22px; padding-inline: var(--lt-spacing-2); } :host([size='md']) .dot { height: 7px; width: 7px; } :host([size='lg']) span[part='base'] { font-size: 0.8125rem; height: 26px; padding-inline: var(--lt-spacing-3); } :host([size='lg']) .dot { height: 8px; width: 8px; } /* When dot is the only content, fill it to the circle size */ :host([dot][content='']) .dot, :host([dot]:not([content])) .dot { height: 40%; width: 40%; } /* ── Empty = perfect circle (covers content=\"\" and absent attribute) */ :host([content='']) span[part='base'], :host(:not([content])) span[part='base'] { aspect-ratio: 1; justify-content: center; padding: 0; } /* ── Filled (tinted bg, colored border, dark text) ───────────────── */ :host([appearance='filled'][variant='primary']) span[part='base'] { background: var(--lt-bg-primary-subtle); border-color: var(--lt-border-primary); color: var(--lt-text-primary); } :host([appearance='filled'][variant='secondary']) span[part='base'] { background: var(--lt-bg-secondary-subtle); border-color: var(--lt-border-secondary); color: var(--lt-text-secondary); } :host([appearance='filled'][variant='success']) span[part='base'] { background: var(--lt-bg-success-subtle); border-color: var(--lt-border-success); color: var(--lt-text-success); } :host([appearance='filled'][variant='warning']) span[part='base'] { background: var(--lt-bg-warning-subtle); border-color: var(--lt-border-warning); color: var(--lt-text-warning); } :host([appearance='filled'][variant='error']) span[part='base'] { background: var(--lt-bg-error-subtle); border-color: var(--lt-border-error); color: var(--lt-text-error); } :host([appearance='filled'][variant='neutral']) span[part='base'] { background: var(--lt-bg-surface); border-color: var(--lt-border-default); color: var(--lt-text-neutral); } /* ── Outlined (transparent bg, colored border and text) ──────────── */ :host([appearance='outlined'][variant='primary']) span[part='base'] { background: transparent; border-color: var(--lt-border-primary-strong); color: var(--lt-text-primary); } :host([appearance='outlined'][variant='secondary']) span[part='base'] { background: transparent; border-color: var(--lt-border-secondary-strong); color: var(--lt-text-secondary); } :host([appearance='outlined'][variant='success']) span[part='base'] { background: transparent; border-color: var(--lt-border-success-strong); color: var(--lt-text-success); } :host([appearance='outlined'][variant='warning']) span[part='base'] { background: transparent; border-color: var(--lt-border-warning-strong); color: var(--lt-text-warning); } :host([appearance='outlined'][variant='error']) span[part='base'] { background: transparent; border-color: var(--lt-border-error-strong); color: var(--lt-text-error); } :host([appearance='outlined'][variant='neutral']) span[part='base'] { background: transparent; border-color: var(--lt-border-strong); color: var(--lt-text-neutral); } /* ── Solid (full-color bg, white text) ───────────────────────────── */ :host([appearance='solid'][variant='primary']) span[part='base'] { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); } :host([appearance='solid'][variant='secondary']) span[part='base'] { background: var(--lt-interactive-secondary-bg); border-color: transparent; color: var(--lt-text-on-secondary); } :host([appearance='solid'][variant='success']) span[part='base'] { background: var(--lt-interactive-success-bg); border-color: transparent; color: var(--lt-text-on-success); } :host([appearance='solid'][variant='warning']) span[part='base'] { background: var(--lt-interactive-warning-bg); border-color: transparent; color: var(--lt-text-on-warning); } :host([appearance='solid'][variant='error']) span[part='base'] { background: var(--lt-interactive-error-bg); border-color: transparent; color: var(--lt-text-on-error); } :host([appearance='solid'][variant='neutral']) span[part='base'] { background: var(--lt-color-neutral-500); border-color: transparent; color: var(--lt-color-white); } /* ── Dot color inherits text color ───────────────────────────────── */ .dot { background: currentColor; } `"
204
426
  }
205
427
  ],
206
428
  "exports": [
207
429
  {
208
430
  "kind": "js",
209
- "name": "avatarStyles",
431
+ "name": "badgeStyles",
210
432
  "declaration": {
211
- "name": "avatarStyles",
212
- "module": "src/components/avatar/avatar.styles.ts"
433
+ "name": "badgeStyles",
434
+ "module": "src/components/badge/badge.styles.ts"
213
435
  }
214
436
  }
215
437
  ]
216
438
  },
217
439
  {
218
440
  "kind": "javascript-module",
219
- "path": "src/components/avatar/avatar.ts",
441
+ "path": "src/components/badge/badge.ts",
220
442
  "declarations": [
221
443
  {
222
444
  "kind": "class",
223
- "description": "Displays a user avatar — image, initials fallback, or icon fallback.",
224
- "name": "Avatar",
445
+ "description": "A compact status label for categories, counts, and states.",
446
+ "name": "Badge",
225
447
  "members": [
226
448
  {
227
449
  "kind": "field",
228
450
  "name": "styles",
229
451
  "static": true,
230
- "default": "avatarStyles"
452
+ "default": "badgeStyles"
231
453
  },
232
454
  {
233
455
  "kind": "field",
234
- "name": "src",
456
+ "name": "appearance",
235
457
  "type": {
236
- "text": "string"
458
+ "text": "BadgeAppearance"
237
459
  },
238
- "default": "''",
239
- "description": "URL of the avatar image."
460
+ "default": "'filled'",
461
+ "description": "Visual style: tinted fill, outline only, or full-color solid."
240
462
  },
241
463
  {
242
464
  "kind": "field",
243
- "name": "name",
465
+ "name": "variant",
244
466
  "type": {
245
- "text": "string"
246
- },
247
- "default": "''",
248
- "description": "Full name used to derive initials when no image is available."
249
- },
250
- {
251
- "kind": "field",
252
- "name": "alt",
253
- "type": {
254
- "text": "string"
255
- },
256
- "default": "''",
257
- "description": "Accessible label for the image (defaults to `name`)."
258
- },
259
- {
260
- "kind": "field",
261
- "name": "size",
262
- "type": {
263
- "text": "AvatarSize"
264
- },
265
- "default": "'md'",
266
- "description": "Size of the avatar."
267
- },
268
- {
269
- "kind": "field",
270
- "name": "shape",
271
- "type": {
272
- "text": "AvatarShape"
273
- },
274
- "default": "'circle'",
275
- "description": "Shape of the avatar."
276
- },
277
- {
278
- "kind": "field",
279
- "name": "color",
280
- "type": {
281
- "text": "AvatarColor"
282
- },
283
- "default": "'neutral'",
284
- "description": "Background color used for the initials and icon fallback states."
285
- },
286
- {
287
- "kind": "field",
288
- "name": "_imgError",
289
- "type": {
290
- "text": "boolean"
291
- },
292
- "privacy": "private",
293
- "default": "false"
294
- },
295
- {
296
- "kind": "field",
297
- "name": "_initials",
298
- "type": {
299
- "text": "string"
300
- },
301
- "privacy": "private",
302
- "readonly": true
303
- },
304
- {
305
- "kind": "method",
306
- "name": "_handleImgError",
307
- "privacy": "private"
308
- },
309
- {
310
- "kind": "method",
311
- "name": "render"
312
- }
313
- ],
314
- "superclass": {
315
- "name": "ThemeableElement",
316
- "module": "/src/base"
317
- },
318
- "tagName": "lt-avatar",
319
- "customElement": true
320
- }
321
- ],
322
- "exports": [
323
- {
324
- "kind": "js",
325
- "name": "Avatar",
326
- "declaration": {
327
- "name": "Avatar",
328
- "module": "src/components/avatar/avatar.ts"
329
- }
330
- }
331
- ]
332
- },
333
- {
334
- "kind": "javascript-module",
335
- "path": "src/components/avatar/index.ts",
336
- "declarations": [],
337
- "exports": [
338
- {
339
- "kind": "js",
340
- "name": "Avatar",
341
- "declaration": {
342
- "name": "Avatar",
343
- "module": "./avatar"
344
- }
345
- },
346
- {
347
- "kind": "js",
348
- "name": "AvatarSize",
349
- "declaration": {
350
- "name": "AvatarSize",
351
- "module": "./avatar.types"
352
- }
353
- },
354
- {
355
- "kind": "js",
356
- "name": "AvatarShape",
357
- "declaration": {
358
- "name": "AvatarShape",
359
- "module": "./avatar.types"
360
- }
361
- },
362
- {
363
- "kind": "js",
364
- "name": "AvatarColor",
365
- "declaration": {
366
- "name": "AvatarColor",
367
- "module": "./avatar.types"
368
- }
369
- }
370
- ]
371
- },
372
- {
373
- "kind": "javascript-module",
374
- "path": "src/components/badge/badge.styles.ts",
375
- "declarations": [
376
- {
377
- "kind": "variable",
378
- "name": "badgeStyles",
379
- "default": "css` :host { display: inline-flex; font-family: 'Hanken Grotesk', sans-serif; vertical-align: middle; } span[part='base'] { align-items: center; background: var(--lt-badge-bg); border-radius: 999px; border: 1px solid var(--lt-badge-border-color, transparent); color: var(--lt-badge-color); box-sizing: border-box; display: inline-flex; font-weight: 600; gap: var(--lt-spacing-1); line-height: 1; user-select: none; white-space: nowrap; } .dot { border-radius: 50%; flex-shrink: 0; } /* ── Sizes ──────────────────────────────────────────────────────────── */ :host([size='sm']) span[part='base'] { font-size: 0.6875rem; height: 18px; padding-inline: var(--lt-spacing-2); } :host([size='sm']) .dot { height: 6px; width: 6px; } :host([size='md']) span[part='base'] { font-size: 0.75rem; height: 22px; padding-inline: var(--lt-spacing-2); } :host([size='md']) .dot { height: 7px; width: 7px; } :host([size='lg']) span[part='base'] { font-size: 0.8125rem; height: 26px; padding-inline: var(--lt-spacing-3); } :host([size='lg']) .dot { height: 8px; width: 8px; } /* When dot is the only content, fill it to the circle size */ :host([dot][content='']) .dot, :host([dot]:not([content])) .dot { height: 40%; width: 40%; } /* ── Empty = perfect circle (covers content=\"\" and absent attribute) */ :host([content='']) span[part='base'], :host(:not([content])) span[part='base'] { aspect-ratio: 1; justify-content: center; padding: 0; } /* ── Filled (tinted bg, colored border, dark text) ───────────────── */ :host([appearance='filled'][variant='primary']) span[part='base'] { background: var(--lt-bg-primary-subtle); border-color: var(--lt-border-primary); color: var(--lt-text-primary); } :host([appearance='filled'][variant='secondary']) span[part='base'] { background: var(--lt-bg-secondary-subtle); border-color: var(--lt-border-secondary); color: var(--lt-text-secondary); } :host([appearance='filled'][variant='success']) span[part='base'] { background: var(--lt-bg-success-subtle); border-color: var(--lt-border-success); color: var(--lt-text-success); } :host([appearance='filled'][variant='warning']) span[part='base'] { background: var(--lt-bg-warning-subtle); border-color: var(--lt-border-warning); color: var(--lt-text-warning); } :host([appearance='filled'][variant='error']) span[part='base'] { background: var(--lt-bg-error-subtle); border-color: var(--lt-border-error); color: var(--lt-text-error); } :host([appearance='filled'][variant='neutral']) span[part='base'] { background: var(--lt-bg-surface); border-color: var(--lt-border-default); color: var(--lt-text-neutral); } /* ── Outlined (transparent bg, colored border and text) ──────────── */ :host([appearance='outlined'][variant='primary']) span[part='base'] { background: transparent; border-color: var(--lt-border-primary-strong); color: var(--lt-text-primary); } :host([appearance='outlined'][variant='secondary']) span[part='base'] { background: transparent; border-color: var(--lt-border-secondary-strong); color: var(--lt-text-secondary); } :host([appearance='outlined'][variant='success']) span[part='base'] { background: transparent; border-color: var(--lt-border-success-strong); color: var(--lt-text-success); } :host([appearance='outlined'][variant='warning']) span[part='base'] { background: transparent; border-color: var(--lt-border-warning-strong); color: var(--lt-text-warning); } :host([appearance='outlined'][variant='error']) span[part='base'] { background: transparent; border-color: var(--lt-border-error-strong); color: var(--lt-text-error); } :host([appearance='outlined'][variant='neutral']) span[part='base'] { background: transparent; border-color: var(--lt-border-strong); color: var(--lt-text-neutral); } /* ── Solid (full-color bg, white text) ───────────────────────────── */ :host([appearance='solid'][variant='primary']) span[part='base'] { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); } :host([appearance='solid'][variant='secondary']) span[part='base'] { background: var(--lt-interactive-secondary-bg); border-color: transparent; color: var(--lt-text-on-secondary); } :host([appearance='solid'][variant='success']) span[part='base'] { background: var(--lt-interactive-success-bg); border-color: transparent; color: var(--lt-text-on-success); } :host([appearance='solid'][variant='warning']) span[part='base'] { background: var(--lt-interactive-warning-bg); border-color: transparent; color: var(--lt-text-on-warning); } :host([appearance='solid'][variant='error']) span[part='base'] { background: var(--lt-interactive-error-bg); border-color: transparent; color: var(--lt-text-on-error); } :host([appearance='solid'][variant='neutral']) span[part='base'] { background: var(--lt-color-neutral-500); border-color: transparent; color: var(--lt-color-white); } /* ── Dot color inherits text color ───────────────────────────────── */ .dot { background: currentColor; } `"
380
- }
381
- ],
382
- "exports": [
383
- {
384
- "kind": "js",
385
- "name": "badgeStyles",
386
- "declaration": {
387
- "name": "badgeStyles",
388
- "module": "src/components/badge/badge.styles.ts"
389
- }
390
- }
391
- ]
392
- },
393
- {
394
- "kind": "javascript-module",
395
- "path": "src/components/badge/badge.ts",
396
- "declarations": [
397
- {
398
- "kind": "class",
399
- "description": "A compact status label for categories, counts, and states.",
400
- "name": "Badge",
401
- "members": [
402
- {
403
- "kind": "field",
404
- "name": "styles",
405
- "static": true,
406
- "default": "badgeStyles"
407
- },
408
- {
409
- "kind": "field",
410
- "name": "appearance",
411
- "type": {
412
- "text": "BadgeAppearance"
413
- },
414
- "default": "'filled'",
415
- "description": "Visual style: tinted fill, outline only, or full-color solid."
416
- },
417
- {
418
- "kind": "field",
419
- "name": "variant",
420
- "type": {
421
- "text": "BadgeVariant"
467
+ "text": "BadgeVariant"
422
468
  },
423
469
  "default": "'primary'",
424
470
  "description": "Color scheme."
@@ -515,41 +561,37 @@
515
561
  },
516
562
  {
517
563
  "kind": "javascript-module",
518
- "path": "src/components/accordion/accordion.styles.ts",
564
+ "path": "src/components/button/button.styles.ts",
519
565
  "declarations": [
520
566
  {
521
567
  "kind": "variable",
522
- "name": "accordionStyles",
523
- "default": "css` :host { display: block; font-family: 'Hanken Grotesk', sans-serif; width: 100%; } details { border-radius: var(--lt-border-radius); transition: background-color 120ms ease, border-color 120ms ease; } summary { cursor: pointer; list-style: none; user-select: none; border-radius: var(--lt-border-radius); overflow: hidden; } summary::-webkit-details-marker { display: none; } .summary-content { align-items: center; display: flex; gap: var(--lt-spacing-3); justify-content: space-between; padding: var(--lt-accordion-summary-padding, var(--lt-spacing-4)); } .start-icon { color: var(--lt-text-subtle); flex-shrink: 0; font-size: 1.25rem; } .summary-text { color: var(--lt-accordion-header-color, var(--lt-text-default)); flex: 1; } .summary-text::part(base) { font-size: var(--lt-accordion-header-font-size, 1rem); font-weight: var(--lt-accordion-header-font-weight, 600); } .chevron { color: var(--lt-text-subtle); flex-shrink: 0; height: 20px; transition: transform 200ms ease; width: 20px; } details[open] .chevron { transform: rotate(180deg); } summary:hover .chevron { color: var(--lt-text-default); } summary:focus-visible { outline: 2px solid var(--lt-border-focus); outline-offset: 2px; border-radius: var(--lt-border-radius); } .content { height: 0; overflow: hidden; transition: height 200ms ease; } .content-inner { color: var(--lt-text-subtle); font-size: 0.9375rem; line-height: 1.6; padding: var(--lt-accordion-content-padding, 0 var(--lt-spacing-4) var(--lt-spacing-4)); } /* Variant: default */ :host([appearance='default']) details { background: var(--lt-bg-subtle); border: 1px solid var(--lt-border-default); } :host([appearance='default']) details:hover { border-color: var(--lt-border-strong); } /* Variant: filled */ :host([appearance='filled']) details { background: var(--lt-bg-surface); border: none; } :host([appearance='filled']) details:hover { background: var(--lt-bg-overlay); } /* Variant: outlined */ :host([appearance='outlined']) details { background: transparent; border: 1px solid var(--lt-border-default); } :host([appearance='outlined']) details:hover { border-color: var(--lt-border-strong); } /* Variant: clean */ :host([appearance='clean']) details { background: transparent; border: none; } /* Disabled state */ :host([disabled]) details { opacity: 0.6; pointer-events: none; } :host([uppercase]) .summary-text::part(base) { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
568
+ "name": "buttonStyles",
569
+ "default": "css` :host { display: inline-block; font-family: 'Hanken Grotesk', sans-serif; /* Internal state props — set per variant/appearance below */ --_color: var(--lt-text-on-primary); --_bg: var(--lt-interactive-primary-bg); --_border-color: transparent; --_hover-bg: var(--lt-interactive-primary-bg-hover); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([full-width]) { display: block; width: 100%; } :host([full-width]) [part='base'] { width: 100%; } [part='base'] { align-items: center; background: var(--lt-button-bg, var(--_bg)); border-radius: var(--lt-border-radius); border: 1px solid var(--lt-button-border-color, var(--_border-color)); box-sizing: border-box; color: var(--lt-button-color, var(--_color)); cursor: pointer; display: inline-flex; font-family: inherit; font-weight: 400; gap: var(--lt-spacing-2); justify-content: center; line-height: 1; min-width: 88px; user-select: none; transition: background-color 120ms ease, border-color 120ms ease, transform 50ms ease; } [part='base']:active { transform: translateY(1px); } [part='base']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } [part='base'][disabled], [part='base'][aria-disabled='true'] { cursor: not-allowed; opacity: 0.6; pointer-events: none; transform: none; } /* anchor reset — browsers apply link color + underline by default */ a[part='base'] { text-decoration: none; } /* sizes */ :host([size='sm']) [part='base'] { font-size: 0.875rem; height: 32px; padding-inline: var(--lt-spacing-3); } :host([size='md']) [part='base'] { font-size: 1rem; height: 40px; padding-inline: var(--lt-spacing-4); } :host([size='lg']) [part='base'] { font-size: 1.0625rem; height: 48px; padding-inline: var(--lt-spacing-5); } /* variants — solid */ :host([variant='primary']) { --_bg: var(--lt-interactive-primary-bg); --_color: var(--lt-text-on-primary); --_hover-bg: var(--lt-interactive-primary-bg-hover); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([variant='secondary']) { --_bg: var(--lt-interactive-secondary-bg); --_color: var(--lt-text-on-secondary); --_hover-bg: var(--lt-interactive-secondary-bg-hover); --_active-bg: var(--lt-interactive-secondary-bg-active); } :host([variant='neutral']) { --_bg: var(--lt-color-neutral-500); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-color-neutral-700); --_active-bg: var(--lt-color-neutral-800); } :host([variant='success']) { --_bg: var(--lt-interactive-success-bg); --_color: var(--lt-text-on-success); --_hover-bg: var(--lt-interactive-success-bg-hover); --_active-bg: var(--lt-interactive-success-bg-active); } :host([variant='warning']) { --_bg: var(--lt-interactive-warning-bg); --_color: var(--lt-text-on-warning); --_hover-bg: var(--lt-interactive-warning-bg-hover); --_active-bg: var(--lt-interactive-warning-bg-active); } :host([variant='error']) { --_bg: var(--lt-interactive-error-bg); --_color: var(--lt-text-on-error); --_hover-bg: var(--lt-interactive-error-bg-hover); --_active-bg: var(--lt-interactive-error-bg-active); } :host([variant='info']) { --_bg: var(--lt-interactive-info-bg); --_color: var(--lt-text-on-info); --_hover-bg: var(--lt-interactive-info-bg-hover); --_active-bg: var(--lt-interactive-info-bg-active); } [part='base']:hover:not([disabled]):not([aria-disabled='true']) { background: var(--lt-button-bg, var(--_hover-bg)); } [part='base']:active:not([disabled]):not([aria-disabled='true']) { background: var(--lt-button-bg, var(--_active-bg)); } /* outlined appearance */ :host([appearance='outlined'][variant='primary']) { --_bg: transparent; --_color: var(--lt-text-primary); --_border-color: var(--lt-border-primary-strong); --_hover-bg: var(--lt-bg-primary-subtle); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='outlined'][variant='secondary']) { --_bg: transparent; --_color: var(--lt-text-secondary); --_border-color: var(--lt-border-secondary-strong); --_hover-bg: var(--lt-bg-secondary-subtle); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='outlined'][variant='neutral']) { --_bg: transparent; --_color: var(--lt-text-neutral); --_border-color: var(--lt-border-strong); --_hover-bg: var(--lt-bg-subtle); --_active-bg: var(--lt-bg-surface); } :host([appearance='outlined'][variant='success']) { --_bg: transparent; --_color: var(--lt-text-success); --_border-color: var(--lt-border-success-strong); --_hover-bg: var(--lt-bg-success-subtle); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='outlined'][variant='warning']) { --_bg: transparent; --_color: var(--lt-text-warning); --_border-color: var(--lt-border-warning-strong); --_hover-bg: var(--lt-bg-warning-subtle); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='outlined'][variant='error']) { --_bg: transparent; --_color: var(--lt-text-error); --_border-color: var(--lt-border-error-strong); --_hover-bg: var(--lt-bg-error-subtle); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='outlined'][variant='info']) { --_bg: transparent; --_color: var(--lt-text-info); --_border-color: var(--lt-border-info-strong); --_hover-bg: var(--lt-bg-info-subtle); --_active-bg: var(--lt-bg-info-subtle); } :host([appearance='outlined']) [part='base']:active:not([disabled]):not([aria-disabled='true']) { opacity: 0.8; } /* loading */ .spinner { animation: spin 700ms linear infinite; border-radius: 999px; border-right-color: transparent; border: 2px solid currentColor; height: 1em; width: 1em; } @keyframes spin { to { transform: rotate(360deg); } } .icon, .end { align-items: center; display: inline-flex; justify-content: center; } :host([uppercase]) [part='base'] { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
524
570
  }
525
571
  ],
526
572
  "exports": [
527
573
  {
528
574
  "kind": "js",
529
- "name": "accordionStyles",
575
+ "name": "buttonStyles",
530
576
  "declaration": {
531
- "name": "accordionStyles",
532
- "module": "src/components/accordion/accordion.styles.ts"
577
+ "name": "buttonStyles",
578
+ "module": "src/components/button/button.styles.ts"
533
579
  }
534
580
  }
535
581
  ]
536
582
  },
537
583
  {
538
584
  "kind": "javascript-module",
539
- "path": "src/components/accordion/accordion.ts",
585
+ "path": "src/components/button/button.ts",
540
586
  "declarations": [
541
587
  {
542
588
  "kind": "class",
543
- "description": "An accordion component using native details/summary elements.\nProvides collapsible content sections with smooth animations.",
544
- "name": "Accordion",
589
+ "description": "Button component with multiple variants, sizes, appearances, and loading state support.",
590
+ "name": "Button",
545
591
  "slots": [
546
592
  {
547
- "description": "Content to display when accordion is expanded",
593
+ "description": "Button label/content",
548
594
  "name": ""
549
- },
550
- {
551
- "description": "Custom content for the summary/header (defaults to label property)",
552
- "name": "summary"
553
595
  }
554
596
  ],
555
597
  "members": [
@@ -557,43 +599,51 @@
557
599
  "kind": "field",
558
600
  "name": "styles",
559
601
  "static": true,
560
- "default": "accordionStyles"
602
+ "default": "buttonStyles"
561
603
  },
562
604
  {
563
605
  "kind": "field",
564
- "name": "label",
606
+ "name": "formAssociated",
565
607
  "type": {
566
- "text": "string"
608
+ "text": "boolean"
567
609
  },
568
- "default": "''",
569
- "description": "Label/title text for the accordion header."
610
+ "static": true,
611
+ "default": "true"
570
612
  },
571
613
  {
572
614
  "kind": "field",
573
- "name": "iconStart",
615
+ "name": "_internals",
574
616
  "type": {
575
- "text": "string"
617
+ "text": "ElementInternals"
576
618
  },
577
- "default": "''",
578
- "description": "Icon name to display at the start of the header."
619
+ "privacy": "private"
620
+ },
621
+ {
622
+ "kind": "field",
623
+ "name": "variant",
624
+ "type": {
625
+ "text": "ButtonVariant"
626
+ },
627
+ "default": "'primary'",
628
+ "description": "Visual variant that determines the button's color scheme."
579
629
  },
580
630
  {
581
631
  "kind": "field",
582
632
  "name": "appearance",
583
633
  "type": {
584
- "text": "AccordionAppearance"
634
+ "text": "ButtonAppearance"
585
635
  },
586
- "default": "'default'",
587
- "description": "Visual appearance of the accordion."
636
+ "default": "'filled'",
637
+ "description": "Appearance style (filled or outlined)."
588
638
  },
589
639
  {
590
640
  "kind": "field",
591
- "name": "open",
641
+ "name": "size",
592
642
  "type": {
593
- "text": "boolean"
643
+ "text": "ButtonSize"
594
644
  },
595
- "default": "false",
596
- "description": "Whether the accordion is initially open."
645
+ "default": "'md'",
646
+ "description": "Size of the button (affects height, font size, and padding)."
597
647
  },
598
648
  {
599
649
  "kind": "field",
@@ -602,825 +652,416 @@
602
652
  "text": "boolean"
603
653
  },
604
654
  "default": "false",
605
- "description": "Whether the accordion is disabled."
655
+ "description": "Whether the button is disabled."
606
656
  },
607
657
  {
608
658
  "kind": "field",
609
- "name": "uppercase",
659
+ "name": "loading",
610
660
  "type": {
611
661
  "text": "boolean"
612
662
  },
613
663
  "default": "false",
614
- "description": "Renders the header label in small caps with wider letter spacing."
664
+ "description": "Whether the button is in loading state.\nShows a spinner and disables interaction."
615
665
  },
616
666
  {
617
667
  "kind": "field",
618
- "name": "_details",
668
+ "name": "iconStart",
619
669
  "type": {
620
- "text": "HTMLDetailsElement"
670
+ "text": "string"
621
671
  },
622
- "privacy": "private"
672
+ "default": "''",
673
+ "description": "Icon name to display at the start of the button."
623
674
  },
624
675
  {
625
676
  "kind": "field",
626
- "name": "_content",
677
+ "name": "iconEnd",
627
678
  "type": {
628
- "text": "HTMLElement"
679
+ "text": "string"
629
680
  },
630
- "privacy": "private"
681
+ "default": "''",
682
+ "description": "Icon name to display at the end of the button."
631
683
  },
632
684
  {
633
685
  "kind": "field",
634
- "name": "_contentInner",
686
+ "name": "fullWidth",
635
687
  "type": {
636
- "text": "HTMLElement"
688
+ "text": "boolean"
637
689
  },
638
- "privacy": "private"
690
+ "default": "false",
691
+ "description": "Whether the button stretches to fill its container's width."
639
692
  },
640
693
  {
641
694
  "kind": "field",
642
- "name": "_animating",
695
+ "name": "uppercase",
643
696
  "type": {
644
697
  "text": "boolean"
645
698
  },
646
- "privacy": "private",
647
- "default": "false"
699
+ "default": "false",
700
+ "description": "Renders the button label in small caps with wider letter spacing."
648
701
  },
649
702
  {
650
- "kind": "method",
651
- "name": "updated",
652
- "privacy": "protected",
653
- "parameters": [
654
- {
655
- "name": "changedProperties",
656
- "type": {
657
- "text": "Map<string, unknown>"
658
- }
659
- }
660
- ]
703
+ "kind": "field",
704
+ "name": "href",
705
+ "type": {
706
+ "text": "string"
707
+ },
708
+ "default": "''",
709
+ "description": "When set, renders an `<a>` tag instead of `<button>`.\nAll visual styles and states are preserved."
661
710
  },
662
711
  {
663
- "kind": "method",
664
- "name": "handleSummaryClick",
665
- "privacy": "private",
666
- "parameters": [
667
- {
668
- "name": "e",
669
- "type": {
670
- "text": "Event"
671
- }
672
- }
673
- ],
674
- "description": "Handles click on summary to animate the accordion."
712
+ "kind": "field",
713
+ "name": "target",
714
+ "type": {
715
+ "text": "string"
716
+ },
717
+ "default": "''",
718
+ "description": "Forwarded to the anchor's `target` attribute when `href` is set."
719
+ },
720
+ {
721
+ "kind": "field",
722
+ "name": "rel",
723
+ "type": {
724
+ "text": "string"
725
+ },
726
+ "default": "''",
727
+ "description": "Forwarded to the anchor's `rel` attribute when `href` is set.\nDefaults to `noopener noreferrer` when `target=\"_blank\"` and `rel` is not specified."
728
+ },
729
+ {
730
+ "kind": "field",
731
+ "name": "type",
732
+ "type": {
733
+ "text": "ButtonType"
734
+ },
735
+ "default": "'button'",
736
+ "description": "Form behaviour when the button is inside a `<form>`.\n`submit` triggers form validation and submission; `reset` restores initial values."
675
737
  },
676
738
  {
677
739
  "kind": "method",
678
- "name": "handleTransitionEnd",
679
- "privacy": "private",
680
- "description": "Handles the end of the transition to clear inline styles."
740
+ "name": "_handleClick",
741
+ "privacy": "private"
681
742
  },
682
743
  {
683
744
  "kind": "method",
684
745
  "name": "render"
685
746
  }
686
747
  ],
687
- "events": [
688
- {
689
- "name": "toggle",
690
- "type": {
691
- "text": "CustomEvent<{open: boolean}>"
692
- },
693
- "description": "Dispatched when the accordion is opened or closed"
694
- }
695
- ],
696
748
  "superclass": {
697
749
  "name": "ThemeableElement",
698
750
  "module": "/src/base"
699
751
  },
700
- "tagName": "lt-accordion",
752
+ "tagName": "lt-button",
701
753
  "customElement": true
702
754
  }
703
755
  ],
704
756
  "exports": [
705
757
  {
706
758
  "kind": "js",
707
- "name": "Accordion",
759
+ "name": "Button",
708
760
  "declaration": {
709
- "name": "Accordion",
710
- "module": "src/components/accordion/accordion.ts"
761
+ "name": "Button",
762
+ "module": "src/components/button/button.ts"
711
763
  }
712
764
  }
713
765
  ]
714
766
  },
715
767
  {
716
768
  "kind": "javascript-module",
717
- "path": "src/components/accordion/index.ts",
769
+ "path": "src/components/button/index.ts",
718
770
  "declarations": [],
719
771
  "exports": [
720
772
  {
721
773
  "kind": "js",
722
- "name": "Accordion",
774
+ "name": "Button",
723
775
  "declaration": {
724
- "name": "Accordion",
725
- "module": "./accordion"
776
+ "name": "Button",
777
+ "module": "./button"
726
778
  }
727
779
  },
728
780
  {
729
781
  "kind": "js",
730
- "name": "AccordionAppearance",
782
+ "name": "ButtonAppearance",
731
783
  "declaration": {
732
- "name": "AccordionAppearance",
733
- "module": "./accordion.types"
784
+ "name": "ButtonAppearance",
785
+ "module": "./button.types"
786
+ }
787
+ },
788
+ {
789
+ "kind": "js",
790
+ "name": "ButtonSize",
791
+ "declaration": {
792
+ "name": "ButtonSize",
793
+ "module": "./button.types"
794
+ }
795
+ },
796
+ {
797
+ "kind": "js",
798
+ "name": "ButtonType",
799
+ "declaration": {
800
+ "name": "ButtonType",
801
+ "module": "./button.types"
802
+ }
803
+ },
804
+ {
805
+ "kind": "js",
806
+ "name": "ButtonVariant",
807
+ "declaration": {
808
+ "name": "ButtonVariant",
809
+ "module": "./button.types"
734
810
  }
735
811
  }
736
812
  ]
737
813
  },
738
814
  {
739
815
  "kind": "javascript-module",
740
- "path": "src/components/breadcrumb/breadcrumb.styles.ts",
816
+ "path": "src/components/calendar/calendar.styles.ts",
741
817
  "declarations": [
742
818
  {
743
819
  "kind": "variable",
744
- "name": "breadcrumbStyles",
745
- "default": "css` :host { display: block; } [part='list'] { align-items: center; display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; } `"
746
- },
747
- {
748
- "kind": "variable",
749
- "name": "breadcrumbItemStyles",
750
- "default": "css` :host { align-items: center; display: inline-flex; font-family: var(--lt-typography-fontfamily); font-size: 0.875rem; } [part='link'] { color: var(--lt-interactive-primary-bg); text-decoration: none; transition: color 120ms ease; } [part='link']:hover { color: var(--lt-interactive-primary-bg-hover); text-decoration: underline; } [part='text'] { color: var(--lt-text-default); font-weight: 600; } [part='separator'] { color: var(--lt-text-muted); margin-inline: var(--lt-spacing-2); user-select: none; } [part='separator']::after { content: var(--lt-breadcrumb-separator, '/'); } :host(:last-child) [part='separator'] { display: none; } `"
820
+ "name": "calendarStyles",
821
+ "default": "css` :host { display: inline-block; font-family: 'Hanken Grotesk', sans-serif; } .calendar { background: var(--lt-bg-default); border-radius: var(--lt-border-radius); border: 1px solid var(--lt-border-default); display: flex; flex-direction: column; gap: var(--lt-spacing-2); padding: var(--lt-spacing-3); width: 17.25rem; } /* ── Header ── */ .header { align-items: center; display: flex; justify-content: space-between; } .month-label-btn { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.9375rem; font-weight: 600; gap: var(--lt-spacing-1); letter-spacing: 0.01em; padding: var(--lt-spacing-1) var(--lt-spacing-2); transition: background 120ms ease, border-color 120ms ease; } .month-label-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .month-label-btn--open { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .month-label-btn:disabled { cursor: not-allowed; opacity: 0.6; } .picker-chevron { color: var(--lt-text-subtle); transition: transform 150ms ease; } .month-label-btn--open .picker-chevron { transform: rotate(180deg); } .nav-btn { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-subtle); cursor: pointer; display: inline-flex; height: 2rem; justify-content: center; padding: 0; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; width: 2rem; } .nav-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); color: var(--lt-text-default); } .nav-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; } /* ── Weekday headers ── */ .weekdays { column-gap: 0; display: grid; grid-template-columns: repeat(7, 1fr); } .weekday { color: var(--lt-text-muted); font-size: 0.75rem; font-weight: 500; text-align: center; } /* ── Day grid ── */ .grid { column-gap: 0; display: grid; grid-template-columns: repeat(7, 1fr); row-gap: var(--lt-spacing-1); } [role='row'] { display: contents; } /* Day button — strip layer in range mode */ .day { align-items: center; background: transparent; border: none; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.8125rem; font-weight: 400; height: 2.25rem; justify-content: center; outline: none; padding: 0; transition: background 100ms ease; width: 100%; } .day:disabled { cursor: not-allowed; } /* Day inner — the visible circle */ .day__inner { align-items: center; background: transparent; border: 2px solid transparent; border-radius: 50%; color: inherit; display: inline-flex; font-size: inherit; font-weight: inherit; height: 2.25rem; justify-content: center; transition: background 100ms ease, border-color 100ms ease, color 100ms ease; width: 2.25rem; } .day:hover:not(:disabled) .day__inner { background: var(--lt-bg-neutral-subtle); } .day:focus-visible .day__inner { outline: 2px solid var(--lt-border-focus); outline-offset: 1px; } /* Today ring */ .day--today .day__inner { border-color: var(--lt-border-primary); font-weight: 600; } /* Single-mode selected */ .day--selected .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .day--selected:hover:not(:disabled) .day__inner { background: var(--lt-interactive-primary-bg-hover); } /* Outside days */ .day--outside { color: var(--lt-text-muted); opacity: 0.5; } /* Empty filler cell */ .day--empty { background: transparent; border: none; cursor: default; pointer-events: none; } .day:disabled .day__inner { color: var(--lt-text-disabled); opacity: 0.4; } /* ── Range strips (on .day button = strip layer) ── */ /* Start: transparent on left, strip on right */ .day--range-left { background: linear-gradient(to right, transparent 50%, var(--lt-bg-primary-subtle) 50%); } /* End: strip on left, transparent on right */ .day--range-right { background: linear-gradient(to right, var(--lt-bg-primary-subtle) 50%, transparent 50%); } /* Same-day start+end — no strip needed */ .day--range-left.day--range-right { background: transparent; } /* Days between confirmed endpoints */ .day--in-range { background: var(--lt-bg-primary-subtle); } .day--in-range:hover:not(:disabled) .day__inner { background: var(--lt-bg-neutral-subtle); } /* Days between hover preview endpoints */ .day--in-hover-range { background: var(--lt-bg-primary-subtle); opacity: 0.45; } /* Confirmed range endpoint circle */ .day--range-confirmed .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .day--range-confirmed:hover:not(:disabled) .day__inner { background: var(--lt-interactive-primary-bg-hover); } /* Hover preview endpoint circle (semi-transparent) */ .day--range-hover .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); opacity: 0.5; } /* ── Multi-month layout ── */ .calendar--multi { width: auto; } .month-label-row { display: flex; flex: 1; justify-content: space-around; } .month-label { color: var(--lt-text-default); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; text-align: center; } .month-panels { display: flex; gap: var(--lt-spacing-4); } .month-col { width: 17.25rem; } /* ── Month/year picker ── */ .picker-months { display: grid; gap: var(--lt-spacing-1); grid-template-columns: repeat(3, 1fr); } .picker-month-btn { background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; font-family: inherit; font-size: 0.8125rem; font-weight: 400; padding: var(--lt-spacing-2) 0; text-align: center; transition: background 100ms ease, border-color 100ms ease; } .picker-month-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .picker-month-btn--current { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .picker-month-btn--current:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); } .picker-month-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; opacity: 0.5; } /* ── Footer ── */ .footer { border-top: 1px solid var(--lt-border-subtle); display: flex; justify-content: flex-end; padding-top: var(--lt-spacing-1); } .today-btn { background: transparent; border-radius: var(--lt-border-radius); border: 1px solid var(--lt-border-default); color: var(--lt-text-subtle); cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 500; padding: var(--lt-spacing-1) var(--lt-spacing-2); transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .today-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-strong); color: var(--lt-text-default); } .today-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; opacity: 0.5; } `"
751
822
  }
752
823
  ],
753
824
  "exports": [
754
825
  {
755
826
  "kind": "js",
756
- "name": "breadcrumbStyles",
757
- "declaration": {
758
- "name": "breadcrumbStyles",
759
- "module": "src/components/breadcrumb/breadcrumb.styles.ts"
760
- }
761
- },
762
- {
763
- "kind": "js",
764
- "name": "breadcrumbItemStyles",
827
+ "name": "calendarStyles",
765
828
  "declaration": {
766
- "name": "breadcrumbItemStyles",
767
- "module": "src/components/breadcrumb/breadcrumb.styles.ts"
829
+ "name": "calendarStyles",
830
+ "module": "src/components/calendar/calendar.styles.ts"
768
831
  }
769
832
  }
770
833
  ]
771
834
  },
772
835
  {
773
836
  "kind": "javascript-module",
774
- "path": "src/components/breadcrumb/breadcrumb.ts",
837
+ "path": "src/components/calendar/calendar.ts",
775
838
  "declarations": [
776
839
  {
777
840
  "kind": "class",
778
- "description": "Navigation breadcrumb trail container.\nPlace `lt-breadcrumb-item` elements inside as direct children.",
779
- "name": "Breadcrumb",
841
+ "description": "A visual calendar grid for single-date or date-range selection.",
842
+ "name": "Calendar",
780
843
  "members": [
781
844
  {
782
845
  "kind": "field",
783
846
  "name": "styles",
784
847
  "static": true,
785
- "default": "breadcrumbStyles"
848
+ "default": "calendarStyles"
786
849
  },
787
850
  {
788
851
  "kind": "field",
789
- "name": "separator",
852
+ "name": "mode",
790
853
  "type": {
791
- "text": "string"
854
+ "text": "CalendarMode"
792
855
  },
793
- "default": "'/'",
794
- "description": "The character or element to use as a separator between breadcrumb items.\nThis is passed down to all children items via CSS variables."
856
+ "default": "'single'",
857
+ "description": "Selection mode. \"single\" selects one date; \"range\" selects a start and end date."
795
858
  },
796
859
  {
797
- "kind": "method",
798
- "name": "updated",
799
- "parameters": [
800
- {
801
- "name": "changed",
802
- "type": {
803
- "text": "PropertyValues<this>"
804
- }
805
- }
806
- ]
860
+ "kind": "field",
861
+ "name": "value",
862
+ "type": {
863
+ "text": "string"
864
+ },
865
+ "default": "''",
866
+ "description": "Selected date in ISO format (YYYY-MM-DD). Used in mode=\"single\"."
807
867
  },
808
- {
809
- "kind": "method",
810
- "name": "render"
811
- }
812
- ],
813
- "superclass": {
814
- "name": "ThemeableElement",
815
- "module": "/src/base"
816
- },
817
- "tagName": "lt-breadcrumb",
818
- "customElement": true
819
- },
820
- {
821
- "kind": "class",
822
- "description": "A single step in a breadcrumb trail.\nRenders as a link when `href` is provided, or as plain text when `current`.",
823
- "name": "BreadcrumbItem",
824
- "members": [
825
868
  {
826
869
  "kind": "field",
827
- "name": "styles",
828
- "static": true,
829
- "default": "breadcrumbItemStyles"
870
+ "name": "valueStart",
871
+ "type": {
872
+ "text": "string"
873
+ },
874
+ "default": "''",
875
+ "description": "Range start date in ISO format. Used in mode=\"range\"."
830
876
  },
831
877
  {
832
878
  "kind": "field",
833
- "name": "href",
879
+ "name": "valueEnd",
834
880
  "type": {
835
881
  "text": "string"
836
882
  },
837
883
  "default": "''",
838
- "description": "URL this item links to. Omit for the current (last) item."
884
+ "description": "Range end date in ISO format. Used in mode=\"range\"."
839
885
  },
840
886
  {
841
887
  "kind": "field",
842
- "name": "current",
888
+ "name": "min",
843
889
  "type": {
844
- "text": "boolean"
890
+ "text": "string"
845
891
  },
846
- "default": "false",
847
- "description": "Marks this item as the current page. Renders as non-linked text with `aria-current=\"page\"`."
892
+ "default": "''",
893
+ "description": "Minimum selectable date (ISO format). Dates before this are disabled."
848
894
  },
849
895
  {
850
896
  "kind": "field",
851
- "name": "separator",
897
+ "name": "max",
852
898
  "type": {
853
899
  "text": "string"
854
900
  },
855
901
  "default": "''",
856
- "description": "Custom separator for this specific item. Overrides the parent's separator."
857
- },
858
- {
859
- "kind": "method",
860
- "name": "render"
861
- }
862
- ],
863
- "superclass": {
864
- "name": "ThemeableElement",
865
- "module": "/src/base"
866
- },
867
- "tagName": "lt-breadcrumb-item",
868
- "customElement": true
869
- }
870
- ],
871
- "exports": [
872
- {
873
- "kind": "js",
874
- "name": "Breadcrumb",
875
- "declaration": {
876
- "name": "Breadcrumb",
877
- "module": "src/components/breadcrumb/breadcrumb.ts"
878
- }
879
- },
880
- {
881
- "kind": "js",
882
- "name": "BreadcrumbItem",
883
- "declaration": {
884
- "name": "BreadcrumbItem",
885
- "module": "src/components/breadcrumb/breadcrumb.ts"
886
- }
887
- }
888
- ]
889
- },
890
- {
891
- "kind": "javascript-module",
892
- "path": "src/components/breadcrumb/index.ts",
893
- "declarations": [],
894
- "exports": [
895
- {
896
- "kind": "js",
897
- "name": "Breadcrumb",
898
- "declaration": {
899
- "name": "Breadcrumb",
900
- "module": "./breadcrumb"
901
- }
902
- },
903
- {
904
- "kind": "js",
905
- "name": "BreadcrumbItem",
906
- "declaration": {
907
- "name": "BreadcrumbItem",
908
- "module": "./breadcrumb"
909
- }
910
- },
911
- {
912
- "kind": "js",
913
- "name": "BreadcrumbSeparator",
914
- "declaration": {
915
- "name": "BreadcrumbSeparator",
916
- "module": "./breadcrumb.types"
917
- }
918
- }
919
- ]
920
- },
921
- {
922
- "kind": "javascript-module",
923
- "path": "src/components/button/button.styles.ts",
924
- "declarations": [
925
- {
926
- "kind": "variable",
927
- "name": "buttonStyles",
928
- "default": "css` :host { display: inline-block; font-family: 'Hanken Grotesk', sans-serif; /* Internal state props — set per variant/appearance below */ --_color: var(--lt-text-on-primary); --_bg: var(--lt-interactive-primary-bg); --_border-color: transparent; --_hover-bg: var(--lt-interactive-primary-bg-hover); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([full-width]) { display: block; width: 100%; } :host([full-width]) [part='base'] { width: 100%; } [part='base'] { align-items: center; background: var(--lt-button-bg, var(--_bg)); border-radius: var(--lt-border-radius); border: 1px solid var(--lt-button-border-color, var(--_border-color)); box-sizing: border-box; color: var(--lt-button-color, var(--_color)); cursor: pointer; display: inline-flex; font-family: inherit; font-weight: 400; gap: var(--lt-spacing-2); justify-content: center; line-height: 1; min-width: 88px; user-select: none; transition: background-color 120ms ease, border-color 120ms ease, transform 50ms ease; } [part='base']:active { transform: translateY(1px); } [part='base']:focus-visible { outline: 3px solid var(--lt-border-focus); outline-offset: 2px; } [part='base'][disabled], [part='base'][aria-disabled='true'] { cursor: not-allowed; opacity: 0.6; pointer-events: none; transform: none; } /* anchor reset — browsers apply link color + underline by default */ a[part='base'] { text-decoration: none; } /* sizes */ :host([size='sm']) [part='base'] { font-size: 0.875rem; height: 32px; padding-inline: var(--lt-spacing-3); } :host([size='md']) [part='base'] { font-size: 1rem; height: 40px; padding-inline: var(--lt-spacing-4); } :host([size='lg']) [part='base'] { font-size: 1.0625rem; height: 48px; padding-inline: var(--lt-spacing-5); } /* variants — solid */ :host([variant='primary']) { --_bg: var(--lt-interactive-primary-bg); --_color: var(--lt-text-on-primary); --_hover-bg: var(--lt-interactive-primary-bg-hover); --_active-bg: var(--lt-interactive-primary-bg-active); } :host([variant='secondary']) { --_bg: var(--lt-interactive-secondary-bg); --_color: var(--lt-text-on-secondary); --_hover-bg: var(--lt-interactive-secondary-bg-hover); --_active-bg: var(--lt-interactive-secondary-bg-active); } :host([variant='neutral']) { --_bg: var(--lt-color-neutral-500); --_color: var(--lt-color-neutral-50); --_hover-bg: var(--lt-color-neutral-700); --_active-bg: var(--lt-color-neutral-800); } :host([variant='success']) { --_bg: var(--lt-interactive-success-bg); --_color: var(--lt-text-on-success); --_hover-bg: var(--lt-interactive-success-bg-hover); --_active-bg: var(--lt-interactive-success-bg-active); } :host([variant='warning']) { --_bg: var(--lt-interactive-warning-bg); --_color: var(--lt-text-on-warning); --_hover-bg: var(--lt-interactive-warning-bg-hover); --_active-bg: var(--lt-interactive-warning-bg-active); } :host([variant='error']) { --_bg: var(--lt-interactive-error-bg); --_color: var(--lt-text-on-error); --_hover-bg: var(--lt-interactive-error-bg-hover); --_active-bg: var(--lt-interactive-error-bg-active); } :host([variant='info']) { --_bg: var(--lt-interactive-info-bg); --_color: var(--lt-text-on-info); --_hover-bg: var(--lt-interactive-info-bg-hover); --_active-bg: var(--lt-interactive-info-bg-active); } [part='base']:hover:not([disabled]):not([aria-disabled='true']) { background: var(--lt-button-bg, var(--_hover-bg)); } [part='base']:active:not([disabled]):not([aria-disabled='true']) { background: var(--lt-button-bg, var(--_active-bg)); } /* outlined appearance */ :host([appearance='outlined'][variant='primary']) { --_bg: transparent; --_color: var(--lt-text-primary); --_border-color: var(--lt-border-primary-strong); --_hover-bg: var(--lt-bg-primary-subtle); --_active-bg: var(--lt-bg-primary-subtle); } :host([appearance='outlined'][variant='secondary']) { --_bg: transparent; --_color: var(--lt-text-secondary); --_border-color: var(--lt-border-secondary-strong); --_hover-bg: var(--lt-bg-secondary-subtle); --_active-bg: var(--lt-bg-secondary-subtle); } :host([appearance='outlined'][variant='neutral']) { --_bg: transparent; --_color: var(--lt-text-neutral); --_border-color: var(--lt-border-strong); --_hover-bg: var(--lt-bg-subtle); --_active-bg: var(--lt-bg-surface); } :host([appearance='outlined'][variant='success']) { --_bg: transparent; --_color: var(--lt-text-success); --_border-color: var(--lt-border-success-strong); --_hover-bg: var(--lt-bg-success-subtle); --_active-bg: var(--lt-bg-success-subtle); } :host([appearance='outlined'][variant='warning']) { --_bg: transparent; --_color: var(--lt-text-warning); --_border-color: var(--lt-border-warning-strong); --_hover-bg: var(--lt-bg-warning-subtle); --_active-bg: var(--lt-bg-warning-subtle); } :host([appearance='outlined'][variant='error']) { --_bg: transparent; --_color: var(--lt-text-error); --_border-color: var(--lt-border-error-strong); --_hover-bg: var(--lt-bg-error-subtle); --_active-bg: var(--lt-bg-error-subtle); } :host([appearance='outlined'][variant='info']) { --_bg: transparent; --_color: var(--lt-text-info); --_border-color: var(--lt-border-info-strong); --_hover-bg: var(--lt-bg-info-subtle); --_active-bg: var(--lt-bg-info-subtle); } :host([appearance='outlined']) [part='base']:active:not([disabled]):not([aria-disabled='true']) { opacity: 0.8; } /* loading */ .spinner { animation: spin 700ms linear infinite; border-radius: 999px; border-right-color: transparent; border: 2px solid currentColor; height: 1em; width: 1em; } @keyframes spin { to { transform: rotate(360deg); } } .icon, .end { align-items: center; display: inline-flex; justify-content: center; } :host([uppercase]) [part='base'] { font-variant-caps: small-caps; letter-spacing: 0.05rem; text-transform: lowercase; } `"
929
- }
930
- ],
931
- "exports": [
932
- {
933
- "kind": "js",
934
- "name": "buttonStyles",
935
- "declaration": {
936
- "name": "buttonStyles",
937
- "module": "src/components/button/button.styles.ts"
938
- }
939
- }
940
- ]
941
- },
942
- {
943
- "kind": "javascript-module",
944
- "path": "src/components/button/button.ts",
945
- "declarations": [
946
- {
947
- "kind": "class",
948
- "description": "Button component with multiple variants, sizes, appearances, and loading state support.",
949
- "name": "Button",
950
- "slots": [
951
- {
952
- "description": "Button label/content",
953
- "name": ""
954
- }
955
- ],
956
- "members": [
957
- {
958
- "kind": "field",
959
- "name": "styles",
960
- "static": true,
961
- "default": "buttonStyles"
902
+ "description": "Maximum selectable date (ISO format). Dates after this are disabled."
962
903
  },
963
904
  {
964
905
  "kind": "field",
965
- "name": "formAssociated",
906
+ "name": "locale",
966
907
  "type": {
967
- "text": "boolean"
908
+ "text": "string"
968
909
  },
969
- "static": true,
970
- "default": "true"
910
+ "default": "'en-US'",
911
+ "description": "BCP 47 locale used for day and month names."
971
912
  },
972
913
  {
973
914
  "kind": "field",
974
- "name": "_internals",
915
+ "name": "weekStart",
975
916
  "type": {
976
- "text": "ElementInternals"
917
+ "text": "CalendarWeekStart"
977
918
  },
978
- "privacy": "private"
919
+ "default": "'0'",
920
+ "description": "First day of the week. 0 = Sunday, 1 = Monday."
979
921
  },
980
922
  {
981
923
  "kind": "field",
982
- "name": "variant",
924
+ "name": "showOutsideDays",
983
925
  "type": {
984
- "text": "ButtonVariant"
926
+ "text": "boolean"
985
927
  },
986
- "default": "'primary'",
987
- "description": "Visual variant that determines the button's color scheme."
928
+ "default": "true",
929
+ "description": "Whether to render filler days from the previous and next month."
988
930
  },
989
931
  {
990
932
  "kind": "field",
991
- "name": "appearance",
933
+ "name": "disabled",
992
934
  "type": {
993
- "text": "ButtonAppearance"
935
+ "text": "boolean"
994
936
  },
995
- "default": "'filled'",
996
- "description": "Appearance style (filled or outlined)."
937
+ "default": "false",
938
+ "description": "Disables all interaction."
997
939
  },
998
940
  {
999
941
  "kind": "field",
1000
- "name": "size",
942
+ "name": "months",
1001
943
  "type": {
1002
- "text": "ButtonSize"
944
+ "text": "number"
1003
945
  },
1004
- "default": "'md'",
1005
- "description": "Size of the button (affects height, font size, and padding)."
946
+ "default": "1",
947
+ "description": "Number of month panels to display side-by-side."
1006
948
  },
1007
949
  {
1008
950
  "kind": "field",
1009
- "name": "disabled",
951
+ "name": "disabledDates",
1010
952
  "type": {
1011
- "text": "boolean"
953
+ "text": "Date[]"
1012
954
  },
1013
- "default": "false",
1014
- "description": "Whether the button is disabled."
955
+ "default": "[]",
956
+ "description": "Specific dates to disable, as an array of Date objects. Not reflected as an attribute."
1015
957
  },
1016
958
  {
1017
959
  "kind": "field",
1018
- "name": "loading",
1019
- "type": {
1020
- "text": "boolean"
1021
- },
1022
- "default": "false",
1023
- "description": "Whether the button is in loading state.\nShows a spinner and disables interaction."
960
+ "name": "_viewYear",
961
+ "privacy": "private"
1024
962
  },
1025
963
  {
1026
964
  "kind": "field",
1027
- "name": "iconStart",
1028
- "type": {
1029
- "text": "string"
1030
- },
1031
- "default": "''",
1032
- "description": "Icon name to display at the start of the button."
965
+ "name": "_viewMonth",
966
+ "privacy": "private"
1033
967
  },
1034
968
  {
1035
969
  "kind": "field",
1036
- "name": "iconEnd",
970
+ "name": "_focusedDate",
1037
971
  "type": {
1038
- "text": "string"
972
+ "text": "Date | null"
1039
973
  },
1040
- "default": "''",
1041
- "description": "Icon name to display at the end of the button."
974
+ "privacy": "private",
975
+ "default": "null"
1042
976
  },
1043
977
  {
1044
978
  "kind": "field",
1045
- "name": "fullWidth",
979
+ "name": "_hoverDate",
1046
980
  "type": {
1047
- "text": "boolean"
981
+ "text": "Date | null"
1048
982
  },
1049
- "default": "false",
1050
- "description": "Whether the button stretches to fill its container's width."
983
+ "privacy": "private",
984
+ "default": "null"
1051
985
  },
1052
986
  {
1053
987
  "kind": "field",
1054
- "name": "uppercase",
988
+ "name": "_pickingMonthYear",
1055
989
  "type": {
1056
990
  "text": "boolean"
1057
991
  },
1058
- "default": "false",
1059
- "description": "Renders the button label in small caps with wider letter spacing."
992
+ "privacy": "private",
993
+ "default": "false"
1060
994
  },
1061
995
  {
1062
996
  "kind": "field",
1063
- "name": "href",
1064
- "type": {
1065
- "text": "string"
1066
- },
1067
- "default": "''",
1068
- "description": "When set, renders an `<a>` tag instead of `<button>`.\nAll visual styles and states are preserved."
997
+ "name": "_pickerYear",
998
+ "privacy": "private"
1069
999
  },
1070
1000
  {
1071
- "kind": "field",
1072
- "name": "target",
1073
- "type": {
1074
- "text": "string"
1075
- },
1076
- "default": "''",
1077
- "description": "Forwarded to the anchor's `target` attribute when `href` is set."
1001
+ "kind": "method",
1002
+ "name": "willUpdate",
1003
+ "parameters": [
1004
+ {
1005
+ "name": "changed",
1006
+ "type": {
1007
+ "text": "PropertyValues<this>"
1008
+ }
1009
+ }
1010
+ ]
1078
1011
  },
1079
1012
  {
1080
- "kind": "field",
1081
- "name": "rel",
1082
- "type": {
1083
- "text": "string"
1013
+ "kind": "method",
1014
+ "name": "_monthAtOffset",
1015
+ "privacy": "private",
1016
+ "return": {
1017
+ "type": {
1018
+ "text": "{ year: number; month: number }"
1019
+ }
1084
1020
  },
1085
- "default": "''",
1086
- "description": "Forwarded to the anchor's `rel` attribute when `href` is set.\nDefaults to `noopener noreferrer` when `target=\"_blank\"` and `rel` is not specified."
1021
+ "parameters": [
1022
+ {
1023
+ "name": "offset",
1024
+ "type": {
1025
+ "text": "number"
1026
+ }
1027
+ }
1028
+ ]
1087
1029
  },
1088
1030
  {
1089
- "kind": "field",
1090
- "name": "type",
1091
- "type": {
1092
- "text": "ButtonType"
1031
+ "kind": "method",
1032
+ "name": "_parseDate",
1033
+ "privacy": "private",
1034
+ "return": {
1035
+ "type": {
1036
+ "text": "Date | null"
1037
+ }
1093
1038
  },
1094
- "default": "'button'",
1095
- "description": "Form behaviour when the button is inside a `<form>`.\n`submit` triggers form validation and submission; `reset` restores initial values."
1039
+ "parameters": [
1040
+ {
1041
+ "name": "iso",
1042
+ "type": {
1043
+ "text": "string"
1044
+ }
1045
+ }
1046
+ ]
1096
1047
  },
1097
1048
  {
1098
1049
  "kind": "method",
1099
- "name": "_handleClick",
1100
- "privacy": "private"
1101
- },
1102
- {
1103
- "kind": "method",
1104
- "name": "render"
1105
- }
1106
- ],
1107
- "superclass": {
1108
- "name": "ThemeableElement",
1109
- "module": "/src/base"
1110
- },
1111
- "tagName": "lt-button",
1112
- "customElement": true
1113
- }
1114
- ],
1115
- "exports": [
1116
- {
1117
- "kind": "js",
1118
- "name": "Button",
1119
- "declaration": {
1120
- "name": "Button",
1121
- "module": "src/components/button/button.ts"
1122
- }
1123
- }
1124
- ]
1125
- },
1126
- {
1127
- "kind": "javascript-module",
1128
- "path": "src/components/button/index.ts",
1129
- "declarations": [],
1130
- "exports": [
1131
- {
1132
- "kind": "js",
1133
- "name": "Button",
1134
- "declaration": {
1135
- "name": "Button",
1136
- "module": "./button"
1137
- }
1138
- },
1139
- {
1140
- "kind": "js",
1141
- "name": "ButtonAppearance",
1142
- "declaration": {
1143
- "name": "ButtonAppearance",
1144
- "module": "./button.types"
1145
- }
1146
- },
1147
- {
1148
- "kind": "js",
1149
- "name": "ButtonSize",
1150
- "declaration": {
1151
- "name": "ButtonSize",
1152
- "module": "./button.types"
1153
- }
1154
- },
1155
- {
1156
- "kind": "js",
1157
- "name": "ButtonType",
1158
- "declaration": {
1159
- "name": "ButtonType",
1160
- "module": "./button.types"
1161
- }
1162
- },
1163
- {
1164
- "kind": "js",
1165
- "name": "ButtonVariant",
1166
- "declaration": {
1167
- "name": "ButtonVariant",
1168
- "module": "./button.types"
1169
- }
1170
- }
1171
- ]
1172
- },
1173
- {
1174
- "kind": "javascript-module",
1175
- "path": "src/components/calendar/calendar.styles.ts",
1176
- "declarations": [
1177
- {
1178
- "kind": "variable",
1179
- "name": "calendarStyles",
1180
- "default": "css` :host { display: inline-block; font-family: 'Hanken Grotesk', sans-serif; } .calendar { background: var(--lt-bg-default); border-radius: var(--lt-border-radius); border: 1px solid var(--lt-border-default); display: flex; flex-direction: column; gap: var(--lt-spacing-2); padding: var(--lt-spacing-3); width: 17.25rem; } /* ── Header ── */ .header { align-items: center; display: flex; justify-content: space-between; } .month-label-btn { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.9375rem; font-weight: 600; gap: var(--lt-spacing-1); letter-spacing: 0.01em; padding: var(--lt-spacing-1) var(--lt-spacing-2); transition: background 120ms ease, border-color 120ms ease; } .month-label-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .month-label-btn--open { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .month-label-btn:disabled { cursor: not-allowed; opacity: 0.6; } .picker-chevron { color: var(--lt-text-subtle); transition: transform 150ms ease; } .month-label-btn--open .picker-chevron { transform: rotate(180deg); } .nav-btn { align-items: center; background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-subtle); cursor: pointer; display: inline-flex; height: 2rem; justify-content: center; padding: 0; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; width: 2rem; } .nav-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); color: var(--lt-text-default); } .nav-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; } /* ── Weekday headers ── */ .weekdays { column-gap: 0; display: grid; grid-template-columns: repeat(7, 1fr); } .weekday { color: var(--lt-text-muted); font-size: 0.75rem; font-weight: 500; text-align: center; } /* ── Day grid ── */ .grid { column-gap: 0; display: grid; grid-template-columns: repeat(7, 1fr); row-gap: var(--lt-spacing-1); } [role='row'] { display: contents; } /* Day button — strip layer in range mode */ .day { align-items: center; background: transparent; border: none; color: var(--lt-text-default); cursor: pointer; display: inline-flex; font-family: inherit; font-size: 0.8125rem; font-weight: 400; height: 2.25rem; justify-content: center; outline: none; padding: 0; transition: background 100ms ease; width: 100%; } .day:disabled { cursor: not-allowed; } /* Day inner — the visible circle */ .day__inner { align-items: center; background: transparent; border: 2px solid transparent; border-radius: 50%; color: inherit; display: inline-flex; font-size: inherit; font-weight: inherit; height: 2.25rem; justify-content: center; transition: background 100ms ease, border-color 100ms ease, color 100ms ease; width: 2.25rem; } .day:hover:not(:disabled) .day__inner { background: var(--lt-bg-neutral-subtle); } .day:focus-visible .day__inner { outline: 2px solid var(--lt-border-focus); outline-offset: 1px; } /* Today ring */ .day--today .day__inner { border-color: var(--lt-border-primary); font-weight: 600; } /* Single-mode selected */ .day--selected .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .day--selected:hover:not(:disabled) .day__inner { background: var(--lt-interactive-primary-bg-hover); } /* Outside days */ .day--outside { color: var(--lt-text-muted); opacity: 0.5; } /* Empty filler cell */ .day--empty { background: transparent; border: none; cursor: default; pointer-events: none; } .day:disabled .day__inner { color: var(--lt-text-disabled); opacity: 0.4; } /* ── Range strips (on .day button = strip layer) ── */ /* Start: transparent on left, strip on right */ .day--range-left { background: linear-gradient(to right, transparent 50%, var(--lt-bg-primary-subtle) 50%); } /* End: strip on left, transparent on right */ .day--range-right { background: linear-gradient(to right, var(--lt-bg-primary-subtle) 50%, transparent 50%); } /* Same-day start+end — no strip needed */ .day--range-left.day--range-right { background: transparent; } /* Days between confirmed endpoints */ .day--in-range { background: var(--lt-bg-primary-subtle); } .day--in-range:hover:not(:disabled) .day__inner { background: var(--lt-bg-neutral-subtle); } /* Days between hover preview endpoints */ .day--in-hover-range { background: var(--lt-bg-primary-subtle); opacity: 0.45; } /* Confirmed range endpoint circle */ .day--range-confirmed .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .day--range-confirmed:hover:not(:disabled) .day__inner { background: var(--lt-interactive-primary-bg-hover); } /* Hover preview endpoint circle (semi-transparent) */ .day--range-hover .day__inner { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); opacity: 0.5; } /* ── Multi-month layout ── */ .calendar--multi { width: auto; } .month-label-row { display: flex; flex: 1; justify-content: space-around; } .month-label { color: var(--lt-text-default); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; text-align: center; } .month-panels { display: flex; gap: var(--lt-spacing-4); } .month-col { width: 17.25rem; } /* ── Month/year picker ── */ .picker-months { display: grid; gap: var(--lt-spacing-1); grid-template-columns: repeat(3, 1fr); } .picker-month-btn { background: transparent; border-radius: var(--lt-border-radius); border: 1px solid transparent; color: var(--lt-text-default); cursor: pointer; font-family: inherit; font-size: 0.8125rem; font-weight: 400; padding: var(--lt-spacing-2) 0; text-align: center; transition: background 100ms ease, border-color 100ms ease; } .picker-month-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-default); } .picker-month-btn--current { background: var(--lt-interactive-primary-bg); border-color: transparent; color: var(--lt-text-on-primary); font-weight: 600; } .picker-month-btn--current:hover:not(:disabled) { background: var(--lt-interactive-primary-bg-hover); } .picker-month-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; opacity: 0.5; } /* ── Footer ── */ .footer { border-top: 1px solid var(--lt-border-subtle); display: flex; justify-content: flex-end; padding-top: var(--lt-spacing-1); } .today-btn { background: transparent; border-radius: var(--lt-border-radius); border: 1px solid var(--lt-border-default); color: var(--lt-text-subtle); cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 500; padding: var(--lt-spacing-1) var(--lt-spacing-2); transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .today-btn:hover:not(:disabled) { background: var(--lt-bg-neutral-subtle); border-color: var(--lt-border-strong); color: var(--lt-text-default); } .today-btn:disabled { color: var(--lt-text-disabled); cursor: not-allowed; opacity: 0.5; } `"
1181
- }
1182
- ],
1183
- "exports": [
1184
- {
1185
- "kind": "js",
1186
- "name": "calendarStyles",
1187
- "declaration": {
1188
- "name": "calendarStyles",
1189
- "module": "src/components/calendar/calendar.styles.ts"
1190
- }
1191
- }
1192
- ]
1193
- },
1194
- {
1195
- "kind": "javascript-module",
1196
- "path": "src/components/calendar/calendar.ts",
1197
- "declarations": [
1198
- {
1199
- "kind": "class",
1200
- "description": "A visual calendar grid for single-date or date-range selection.",
1201
- "name": "Calendar",
1202
- "members": [
1203
- {
1204
- "kind": "field",
1205
- "name": "styles",
1206
- "static": true,
1207
- "default": "calendarStyles"
1208
- },
1209
- {
1210
- "kind": "field",
1211
- "name": "mode",
1212
- "type": {
1213
- "text": "CalendarMode"
1214
- },
1215
- "default": "'single'",
1216
- "description": "Selection mode. \"single\" selects one date; \"range\" selects a start and end date."
1217
- },
1218
- {
1219
- "kind": "field",
1220
- "name": "value",
1221
- "type": {
1222
- "text": "string"
1223
- },
1224
- "default": "''",
1225
- "description": "Selected date in ISO format (YYYY-MM-DD). Used in mode=\"single\"."
1226
- },
1227
- {
1228
- "kind": "field",
1229
- "name": "valueStart",
1230
- "type": {
1231
- "text": "string"
1232
- },
1233
- "default": "''",
1234
- "description": "Range start date in ISO format. Used in mode=\"range\"."
1235
- },
1236
- {
1237
- "kind": "field",
1238
- "name": "valueEnd",
1239
- "type": {
1240
- "text": "string"
1241
- },
1242
- "default": "''",
1243
- "description": "Range end date in ISO format. Used in mode=\"range\"."
1244
- },
1245
- {
1246
- "kind": "field",
1247
- "name": "min",
1248
- "type": {
1249
- "text": "string"
1250
- },
1251
- "default": "''",
1252
- "description": "Minimum selectable date (ISO format). Dates before this are disabled."
1253
- },
1254
- {
1255
- "kind": "field",
1256
- "name": "max",
1257
- "type": {
1258
- "text": "string"
1259
- },
1260
- "default": "''",
1261
- "description": "Maximum selectable date (ISO format). Dates after this are disabled."
1262
- },
1263
- {
1264
- "kind": "field",
1265
- "name": "locale",
1266
- "type": {
1267
- "text": "string"
1268
- },
1269
- "default": "'en-US'",
1270
- "description": "BCP 47 locale used for day and month names."
1271
- },
1272
- {
1273
- "kind": "field",
1274
- "name": "weekStart",
1275
- "type": {
1276
- "text": "CalendarWeekStart"
1277
- },
1278
- "default": "'0'",
1279
- "description": "First day of the week. 0 = Sunday, 1 = Monday."
1280
- },
1281
- {
1282
- "kind": "field",
1283
- "name": "showOutsideDays",
1284
- "type": {
1285
- "text": "boolean"
1286
- },
1287
- "default": "true",
1288
- "description": "Whether to render filler days from the previous and next month."
1289
- },
1290
- {
1291
- "kind": "field",
1292
- "name": "disabled",
1293
- "type": {
1294
- "text": "boolean"
1295
- },
1296
- "default": "false",
1297
- "description": "Disables all interaction."
1298
- },
1299
- {
1300
- "kind": "field",
1301
- "name": "months",
1302
- "type": {
1303
- "text": "number"
1304
- },
1305
- "default": "1",
1306
- "description": "Number of month panels to display side-by-side."
1307
- },
1308
- {
1309
- "kind": "field",
1310
- "name": "disabledDates",
1311
- "type": {
1312
- "text": "Date[]"
1313
- },
1314
- "default": "[]",
1315
- "description": "Specific dates to disable, as an array of Date objects. Not reflected as an attribute."
1316
- },
1317
- {
1318
- "kind": "field",
1319
- "name": "_viewYear",
1320
- "privacy": "private"
1321
- },
1322
- {
1323
- "kind": "field",
1324
- "name": "_viewMonth",
1325
- "privacy": "private"
1326
- },
1327
- {
1328
- "kind": "field",
1329
- "name": "_focusedDate",
1330
- "type": {
1331
- "text": "Date | null"
1332
- },
1333
- "privacy": "private",
1334
- "default": "null"
1335
- },
1336
- {
1337
- "kind": "field",
1338
- "name": "_hoverDate",
1339
- "type": {
1340
- "text": "Date | null"
1341
- },
1342
- "privacy": "private",
1343
- "default": "null"
1344
- },
1345
- {
1346
- "kind": "field",
1347
- "name": "_pickingMonthYear",
1348
- "type": {
1349
- "text": "boolean"
1350
- },
1351
- "privacy": "private",
1352
- "default": "false"
1353
- },
1354
- {
1355
- "kind": "field",
1356
- "name": "_pickerYear",
1357
- "privacy": "private"
1358
- },
1359
- {
1360
- "kind": "method",
1361
- "name": "willUpdate",
1362
- "parameters": [
1363
- {
1364
- "name": "changed",
1365
- "type": {
1366
- "text": "PropertyValues<this>"
1367
- }
1368
- }
1369
- ]
1370
- },
1371
- {
1372
- "kind": "method",
1373
- "name": "_monthAtOffset",
1374
- "privacy": "private",
1375
- "return": {
1376
- "type": {
1377
- "text": "{ year: number; month: number }"
1378
- }
1379
- },
1380
- "parameters": [
1381
- {
1382
- "name": "offset",
1383
- "type": {
1384
- "text": "number"
1385
- }
1386
- }
1387
- ]
1388
- },
1389
- {
1390
- "kind": "method",
1391
- "name": "_parseDate",
1392
- "privacy": "private",
1393
- "return": {
1394
- "type": {
1395
- "text": "Date | null"
1396
- }
1397
- },
1398
- "parameters": [
1399
- {
1400
- "name": "iso",
1401
- "type": {
1402
- "text": "string"
1403
- }
1404
- }
1405
- ]
1406
- },
1407
- {
1408
- "kind": "method",
1409
- "name": "_toIso",
1410
- "privacy": "private",
1411
- "return": {
1412
- "type": {
1413
- "text": "string"
1414
- }
1415
- },
1416
- "parameters": [
1417
- {
1418
- "name": "date",
1419
- "type": {
1420
- "text": "Date"
1421
- }
1422
- }
1423
- ]
1050
+ "name": "_toIso",
1051
+ "privacy": "private",
1052
+ "return": {
1053
+ "type": {
1054
+ "text": "string"
1055
+ }
1056
+ },
1057
+ "parameters": [
1058
+ {
1059
+ "name": "date",
1060
+ "type": {
1061
+ "text": "Date"
1062
+ }
1063
+ }
1064
+ ]
1424
1065
  },
1425
1066
  {
1426
1067
  "kind": "method",
@@ -1557,149 +1198,508 @@
1557
1198
  "text": "string"
1558
1199
  }
1559
1200
  },
1560
- "parameters": [
1561
- {
1562
- "name": "date",
1563
- "type": {
1564
- "text": "Date"
1565
- }
1566
- }
1567
- ]
1201
+ "parameters": [
1202
+ {
1203
+ "name": "date",
1204
+ "type": {
1205
+ "text": "Date"
1206
+ }
1207
+ }
1208
+ ]
1209
+ },
1210
+ {
1211
+ "kind": "method",
1212
+ "name": "_focusCell",
1213
+ "privacy": "private",
1214
+ "parameters": [
1215
+ {
1216
+ "name": "iso",
1217
+ "type": {
1218
+ "text": "string"
1219
+ }
1220
+ }
1221
+ ]
1222
+ },
1223
+ {
1224
+ "kind": "field",
1225
+ "name": "_handleCalendarKeyDown",
1226
+ "privacy": "private"
1227
+ },
1228
+ {
1229
+ "kind": "field",
1230
+ "name": "_handleGridMouseOver",
1231
+ "privacy": "private"
1232
+ },
1233
+ {
1234
+ "kind": "field",
1235
+ "name": "_handleGridMouseLeave",
1236
+ "privacy": "private"
1237
+ },
1238
+ {
1239
+ "kind": "field",
1240
+ "name": "_handleKeyDown",
1241
+ "privacy": "private"
1242
+ },
1243
+ {
1244
+ "kind": "method",
1245
+ "name": "_renderDay",
1246
+ "privacy": "private",
1247
+ "parameters": [
1248
+ {
1249
+ "name": "day",
1250
+ "type": {
1251
+ "text": "CalendarDay"
1252
+ }
1253
+ },
1254
+ {
1255
+ "name": "rovingDate",
1256
+ "type": {
1257
+ "text": "Date"
1258
+ }
1259
+ }
1260
+ ]
1261
+ },
1262
+ {
1263
+ "kind": "method",
1264
+ "name": "_renderMonthGrid",
1265
+ "privacy": "private",
1266
+ "parameters": [
1267
+ {
1268
+ "name": "year",
1269
+ "type": {
1270
+ "text": "number"
1271
+ }
1272
+ },
1273
+ {
1274
+ "name": "month",
1275
+ "type": {
1276
+ "text": "number"
1277
+ }
1278
+ },
1279
+ {
1280
+ "name": "gridLabel",
1281
+ "type": {
1282
+ "text": "string"
1283
+ }
1284
+ },
1285
+ {
1286
+ "name": "rovingDate",
1287
+ "type": {
1288
+ "text": "Date"
1289
+ }
1290
+ }
1291
+ ]
1292
+ },
1293
+ {
1294
+ "kind": "method",
1295
+ "name": "render"
1296
+ }
1297
+ ],
1298
+ "events": [
1299
+ {
1300
+ "type": {
1301
+ "text": "CustomEvent<{valueStart: string, valueEnd: string}>"
1302
+ },
1303
+ "description": "Fired when a full range is selected (mode=\"range\").",
1304
+ "name": "change"
1305
+ },
1306
+ {
1307
+ "type": {
1308
+ "text": "CustomEvent<{year: number, month: number}>"
1309
+ },
1310
+ "description": "Fired when the viewed month changes.",
1311
+ "name": "month-change"
1312
+ }
1313
+ ],
1314
+ "superclass": {
1315
+ "name": "ThemeableElement",
1316
+ "module": "/src/base"
1317
+ },
1318
+ "tagName": "lt-calendar",
1319
+ "customElement": true
1320
+ }
1321
+ ],
1322
+ "exports": [
1323
+ {
1324
+ "kind": "js",
1325
+ "name": "Calendar",
1326
+ "declaration": {
1327
+ "name": "Calendar",
1328
+ "module": "src/components/calendar/calendar.ts"
1329
+ }
1330
+ }
1331
+ ]
1332
+ },
1333
+ {
1334
+ "kind": "javascript-module",
1335
+ "path": "src/components/calendar/index.ts",
1336
+ "declarations": [],
1337
+ "exports": [
1338
+ {
1339
+ "kind": "js",
1340
+ "name": "Calendar",
1341
+ "declaration": {
1342
+ "name": "Calendar",
1343
+ "module": "./calendar"
1344
+ }
1345
+ }
1346
+ ]
1347
+ },
1348
+ {
1349
+ "kind": "javascript-module",
1350
+ "path": "src/components/breadcrumb/breadcrumb.styles.ts",
1351
+ "declarations": [
1352
+ {
1353
+ "kind": "variable",
1354
+ "name": "breadcrumbStyles",
1355
+ "default": "css` :host { display: block; } [part='list'] { align-items: center; display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; } `"
1356
+ },
1357
+ {
1358
+ "kind": "variable",
1359
+ "name": "breadcrumbItemStyles",
1360
+ "default": "css` :host { align-items: center; display: inline-flex; font-family: var(--lt-typography-fontfamily); font-size: 0.875rem; } [part='link'] { color: var(--lt-interactive-primary-bg); text-decoration: none; transition: color 120ms ease; } [part='link']:hover { color: var(--lt-interactive-primary-bg-hover); text-decoration: underline; } [part='text'] { color: var(--lt-text-default); font-weight: 600; } [part='separator'] { color: var(--lt-text-muted); margin-inline: var(--lt-spacing-2); user-select: none; } [part='separator']::after { content: var(--lt-breadcrumb-separator, '/'); } :host(:last-child) [part='separator'] { display: none; } `"
1361
+ }
1362
+ ],
1363
+ "exports": [
1364
+ {
1365
+ "kind": "js",
1366
+ "name": "breadcrumbStyles",
1367
+ "declaration": {
1368
+ "name": "breadcrumbStyles",
1369
+ "module": "src/components/breadcrumb/breadcrumb.styles.ts"
1370
+ }
1371
+ },
1372
+ {
1373
+ "kind": "js",
1374
+ "name": "breadcrumbItemStyles",
1375
+ "declaration": {
1376
+ "name": "breadcrumbItemStyles",
1377
+ "module": "src/components/breadcrumb/breadcrumb.styles.ts"
1378
+ }
1379
+ }
1380
+ ]
1381
+ },
1382
+ {
1383
+ "kind": "javascript-module",
1384
+ "path": "src/components/breadcrumb/breadcrumb.ts",
1385
+ "declarations": [
1386
+ {
1387
+ "kind": "class",
1388
+ "description": "Navigation breadcrumb trail container.\nPlace `lt-breadcrumb-item` elements inside as direct children.",
1389
+ "name": "Breadcrumb",
1390
+ "members": [
1391
+ {
1392
+ "kind": "field",
1393
+ "name": "styles",
1394
+ "static": true,
1395
+ "default": "breadcrumbStyles"
1396
+ },
1397
+ {
1398
+ "kind": "field",
1399
+ "name": "separator",
1400
+ "type": {
1401
+ "text": "string"
1402
+ },
1403
+ "default": "'/'",
1404
+ "description": "The character or element to use as a separator between breadcrumb items.\nThis is passed down to all children items via CSS variables."
1568
1405
  },
1569
1406
  {
1570
1407
  "kind": "method",
1571
- "name": "_focusCell",
1572
- "privacy": "private",
1408
+ "name": "updated",
1573
1409
  "parameters": [
1574
1410
  {
1575
- "name": "iso",
1411
+ "name": "changed",
1576
1412
  "type": {
1577
- "text": "string"
1413
+ "text": "PropertyValues<this>"
1578
1414
  }
1579
1415
  }
1580
1416
  ]
1581
1417
  },
1418
+ {
1419
+ "kind": "method",
1420
+ "name": "render"
1421
+ }
1422
+ ],
1423
+ "superclass": {
1424
+ "name": "ThemeableElement",
1425
+ "module": "/src/base"
1426
+ },
1427
+ "tagName": "lt-breadcrumb",
1428
+ "customElement": true
1429
+ },
1430
+ {
1431
+ "kind": "class",
1432
+ "description": "A single step in a breadcrumb trail.\nRenders as a link when `href` is provided, or as plain text when `current`.",
1433
+ "name": "BreadcrumbItem",
1434
+ "members": [
1582
1435
  {
1583
1436
  "kind": "field",
1584
- "name": "_handleCalendarKeyDown",
1585
- "privacy": "private"
1437
+ "name": "styles",
1438
+ "static": true,
1439
+ "default": "breadcrumbItemStyles"
1586
1440
  },
1587
1441
  {
1588
1442
  "kind": "field",
1589
- "name": "_handleGridMouseOver",
1590
- "privacy": "private"
1443
+ "name": "href",
1444
+ "type": {
1445
+ "text": "string"
1446
+ },
1447
+ "default": "''",
1448
+ "description": "URL this item links to. Omit for the current (last) item."
1591
1449
  },
1592
1450
  {
1593
1451
  "kind": "field",
1594
- "name": "_handleGridMouseLeave",
1595
- "privacy": "private"
1452
+ "name": "current",
1453
+ "type": {
1454
+ "text": "boolean"
1455
+ },
1456
+ "default": "false",
1457
+ "description": "Marks this item as the current page. Renders as non-linked text with `aria-current=\"page\"`."
1596
1458
  },
1597
1459
  {
1598
1460
  "kind": "field",
1599
- "name": "_handleKeyDown",
1600
- "privacy": "private"
1461
+ "name": "separator",
1462
+ "type": {
1463
+ "text": "string"
1464
+ },
1465
+ "default": "''",
1466
+ "description": "Custom separator for this specific item. Overrides the parent's separator."
1601
1467
  },
1602
1468
  {
1603
1469
  "kind": "method",
1604
- "name": "_renderDay",
1605
- "privacy": "private",
1606
- "parameters": [
1607
- {
1608
- "name": "day",
1609
- "type": {
1610
- "text": "CalendarDay"
1611
- }
1612
- },
1613
- {
1614
- "name": "rovingDate",
1615
- "type": {
1616
- "text": "Date"
1617
- }
1618
- }
1619
- ]
1470
+ "name": "render"
1471
+ }
1472
+ ],
1473
+ "superclass": {
1474
+ "name": "ThemeableElement",
1475
+ "module": "/src/base"
1476
+ },
1477
+ "tagName": "lt-breadcrumb-item",
1478
+ "customElement": true
1479
+ }
1480
+ ],
1481
+ "exports": [
1482
+ {
1483
+ "kind": "js",
1484
+ "name": "Breadcrumb",
1485
+ "declaration": {
1486
+ "name": "Breadcrumb",
1487
+ "module": "src/components/breadcrumb/breadcrumb.ts"
1488
+ }
1489
+ },
1490
+ {
1491
+ "kind": "js",
1492
+ "name": "BreadcrumbItem",
1493
+ "declaration": {
1494
+ "name": "BreadcrumbItem",
1495
+ "module": "src/components/breadcrumb/breadcrumb.ts"
1496
+ }
1497
+ }
1498
+ ]
1499
+ },
1500
+ {
1501
+ "kind": "javascript-module",
1502
+ "path": "src/components/breadcrumb/index.ts",
1503
+ "declarations": [],
1504
+ "exports": [
1505
+ {
1506
+ "kind": "js",
1507
+ "name": "Breadcrumb",
1508
+ "declaration": {
1509
+ "name": "Breadcrumb",
1510
+ "module": "./breadcrumb"
1511
+ }
1512
+ },
1513
+ {
1514
+ "kind": "js",
1515
+ "name": "BreadcrumbItem",
1516
+ "declaration": {
1517
+ "name": "BreadcrumbItem",
1518
+ "module": "./breadcrumb"
1519
+ }
1520
+ },
1521
+ {
1522
+ "kind": "js",
1523
+ "name": "BreadcrumbSeparator",
1524
+ "declaration": {
1525
+ "name": "BreadcrumbSeparator",
1526
+ "module": "./breadcrumb.types"
1527
+ }
1528
+ }
1529
+ ]
1530
+ },
1531
+ {
1532
+ "kind": "javascript-module",
1533
+ "path": "src/components/avatar/avatar.styles.ts",
1534
+ "declarations": [
1535
+ {
1536
+ "kind": "variable",
1537
+ "name": "avatarStyles",
1538
+ "default": "css` :host { display: inline-flex; flex-shrink: 0; vertical-align: middle; } span[part='base'] { align-items: center; background: var(--lt-avatar-bg, var(--lt-bg-overlay)); box-sizing: border-box; color: var(--lt-avatar-color, var(--lt-color-neutral-700)); display: inline-flex; justify-content: center; overflow: hidden; position: relative; } img[part='image'] { height: 100%; object-fit: cover; width: 100%; } .initials { font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; letter-spacing: 0.02em; line-height: 1; user-select: none; } /* ── Colors (fallback bg + text) ────────────────────────────────────── */ :host([color='neutral']) span[part='base'] { background: var(--lt-bg-overlay); color: var(--lt-text-neutral); } :host([color='primary']) span[part='base'] { background: var(--lt-bg-primary-subtle); color: var(--lt-text-primary); } :host([color='secondary']) span[part='base'] { background: var(--lt-bg-secondary-subtle); color: var(--lt-text-secondary); } :host([color='success']) span[part='base'] { background: var(--lt-bg-success-subtle); color: var(--lt-text-success); } :host([color='warning']) span[part='base'] { background: var(--lt-bg-warning-subtle); color: var(--lt-text-warning); } :host([color='error']) span[part='base'] { background: var(--lt-bg-error-subtle); color: var(--lt-text-error); } :host([color='info']) span[part='base'] { background: var(--lt-bg-info-subtle); color: var(--lt-text-info); } /* ── Shape ───────────────────────────────────────────────────────────── */ :host([shape='circle']) span[part='base'] { border-radius: 999px; } :host([shape='square']) span[part='base'] { border-radius: var(--lt-border-radius); } /* ── Sizes ───────────────────────────────────────────────────────────── */ :host([size='xs']) span[part='base'] { height: 24px; width: 24px; } :host([size='xs']) .initials { font-size: 0.625rem; } :host([size='sm']) span[part='base'] { height: 32px; width: 32px; } :host([size='sm']) .initials { font-size: 0.75rem; } :host([size='md']) span[part='base'] { height: 40px; width: 40px; } :host([size='md']) .initials { font-size: 0.9375rem; } :host([size='lg']) span[part='base'] { height: 52px; width: 52px; } :host([size='lg']) .initials { font-size: 1.125rem; } :host([size='xl']) span[part='base'] { height: 68px; width: 68px; } :host([size='xl']) .initials { font-size: 1.5rem; } `"
1539
+ }
1540
+ ],
1541
+ "exports": [
1542
+ {
1543
+ "kind": "js",
1544
+ "name": "avatarStyles",
1545
+ "declaration": {
1546
+ "name": "avatarStyles",
1547
+ "module": "src/components/avatar/avatar.styles.ts"
1548
+ }
1549
+ }
1550
+ ]
1551
+ },
1552
+ {
1553
+ "kind": "javascript-module",
1554
+ "path": "src/components/avatar/avatar.ts",
1555
+ "declarations": [
1556
+ {
1557
+ "kind": "class",
1558
+ "description": "Displays a user avatar — image, initials fallback, or icon fallback.",
1559
+ "name": "Avatar",
1560
+ "members": [
1561
+ {
1562
+ "kind": "field",
1563
+ "name": "styles",
1564
+ "static": true,
1565
+ "default": "avatarStyles"
1620
1566
  },
1621
1567
  {
1622
- "kind": "method",
1623
- "name": "_renderMonthGrid",
1624
- "privacy": "private",
1625
- "parameters": [
1626
- {
1627
- "name": "year",
1628
- "type": {
1629
- "text": "number"
1630
- }
1631
- },
1632
- {
1633
- "name": "month",
1634
- "type": {
1635
- "text": "number"
1636
- }
1637
- },
1638
- {
1639
- "name": "gridLabel",
1640
- "type": {
1641
- "text": "string"
1642
- }
1643
- },
1644
- {
1645
- "name": "rovingDate",
1646
- "type": {
1647
- "text": "Date"
1648
- }
1649
- }
1650
- ]
1568
+ "kind": "field",
1569
+ "name": "src",
1570
+ "type": {
1571
+ "text": "string"
1572
+ },
1573
+ "default": "''",
1574
+ "description": "URL of the avatar image."
1651
1575
  },
1652
1576
  {
1653
- "kind": "method",
1654
- "name": "render"
1655
- }
1656
- ],
1657
- "events": [
1577
+ "kind": "field",
1578
+ "name": "name",
1579
+ "type": {
1580
+ "text": "string"
1581
+ },
1582
+ "default": "''",
1583
+ "description": "Full name used to derive initials when no image is available."
1584
+ },
1585
+ {
1586
+ "kind": "field",
1587
+ "name": "alt",
1588
+ "type": {
1589
+ "text": "string"
1590
+ },
1591
+ "default": "''",
1592
+ "description": "Accessible label for the image (defaults to `name`)."
1593
+ },
1594
+ {
1595
+ "kind": "field",
1596
+ "name": "size",
1597
+ "type": {
1598
+ "text": "AvatarSize"
1599
+ },
1600
+ "default": "'md'",
1601
+ "description": "Size of the avatar."
1602
+ },
1603
+ {
1604
+ "kind": "field",
1605
+ "name": "shape",
1606
+ "type": {
1607
+ "text": "AvatarShape"
1608
+ },
1609
+ "default": "'circle'",
1610
+ "description": "Shape of the avatar."
1611
+ },
1612
+ {
1613
+ "kind": "field",
1614
+ "name": "color",
1615
+ "type": {
1616
+ "text": "AvatarColor"
1617
+ },
1618
+ "default": "'neutral'",
1619
+ "description": "Background color used for the initials and icon fallback states."
1620
+ },
1658
1621
  {
1622
+ "kind": "field",
1623
+ "name": "_imgError",
1659
1624
  "type": {
1660
- "text": "CustomEvent<{valueStart: string, valueEnd: string}>"
1625
+ "text": "boolean"
1661
1626
  },
1662
- "description": "Fired when a full range is selected (mode=\"range\").",
1663
- "name": "change"
1627
+ "privacy": "private",
1628
+ "default": "false"
1664
1629
  },
1665
1630
  {
1631
+ "kind": "field",
1632
+ "name": "_initials",
1666
1633
  "type": {
1667
- "text": "CustomEvent<{year: number, month: number}>"
1634
+ "text": "string"
1668
1635
  },
1669
- "description": "Fired when the viewed month changes.",
1670
- "name": "month-change"
1636
+ "privacy": "private",
1637
+ "readonly": true
1638
+ },
1639
+ {
1640
+ "kind": "method",
1641
+ "name": "_handleImgError",
1642
+ "privacy": "private"
1643
+ },
1644
+ {
1645
+ "kind": "method",
1646
+ "name": "render"
1671
1647
  }
1672
1648
  ],
1673
1649
  "superclass": {
1674
1650
  "name": "ThemeableElement",
1675
1651
  "module": "/src/base"
1676
1652
  },
1677
- "tagName": "lt-calendar",
1653
+ "tagName": "lt-avatar",
1678
1654
  "customElement": true
1679
1655
  }
1680
1656
  ],
1681
1657
  "exports": [
1682
1658
  {
1683
1659
  "kind": "js",
1684
- "name": "Calendar",
1660
+ "name": "Avatar",
1685
1661
  "declaration": {
1686
- "name": "Calendar",
1687
- "module": "src/components/calendar/calendar.ts"
1662
+ "name": "Avatar",
1663
+ "module": "src/components/avatar/avatar.ts"
1688
1664
  }
1689
1665
  }
1690
1666
  ]
1691
1667
  },
1692
1668
  {
1693
1669
  "kind": "javascript-module",
1694
- "path": "src/components/calendar/index.ts",
1670
+ "path": "src/components/avatar/index.ts",
1695
1671
  "declarations": [],
1696
1672
  "exports": [
1697
1673
  {
1698
1674
  "kind": "js",
1699
- "name": "Calendar",
1675
+ "name": "Avatar",
1700
1676
  "declaration": {
1701
- "name": "Calendar",
1702
- "module": "./calendar"
1677
+ "name": "Avatar",
1678
+ "module": "./avatar"
1679
+ }
1680
+ },
1681
+ {
1682
+ "kind": "js",
1683
+ "name": "AvatarSize",
1684
+ "declaration": {
1685
+ "name": "AvatarSize",
1686
+ "module": "./avatar.types"
1687
+ }
1688
+ },
1689
+ {
1690
+ "kind": "js",
1691
+ "name": "AvatarShape",
1692
+ "declaration": {
1693
+ "name": "AvatarShape",
1694
+ "module": "./avatar.types"
1695
+ }
1696
+ },
1697
+ {
1698
+ "kind": "js",
1699
+ "name": "AvatarColor",
1700
+ "declaration": {
1701
+ "name": "AvatarColor",
1702
+ "module": "./avatar.types"
1703
1703
  }
1704
1704
  }
1705
1705
  ]
@@ -4481,6 +4481,99 @@
4481
4481
  }
4482
4482
  ]
4483
4483
  },
4484
+ {
4485
+ "kind": "javascript-module",
4486
+ "path": "src/components/link/index.ts",
4487
+ "declarations": [],
4488
+ "exports": [
4489
+ {
4490
+ "kind": "js",
4491
+ "name": "Link",
4492
+ "declaration": {
4493
+ "name": "Link",
4494
+ "module": "./link"
4495
+ }
4496
+ }
4497
+ ]
4498
+ },
4499
+ {
4500
+ "kind": "javascript-module",
4501
+ "path": "src/components/link/link.styles.ts",
4502
+ "declarations": [
4503
+ {
4504
+ "kind": "variable",
4505
+ "name": "linkStyles",
4506
+ "default": "css` :host { display: inline; } a[part='base'] { align-items: center; color: var(--lt-text-primary); cursor: pointer; display: inline-flex; font: inherit; gap: 0.25em; text-decoration: none; vertical-align: baseline; } a[part='base']:hover { color: var(--lt-text-primary); text-decoration: underline; } a[part='base']:focus-visible { border-radius: 2px; outline: 2px solid var(--lt-border-focus); outline-offset: 2px; } lt-icon[part='icon'] { flex-shrink: 0; } `"
4507
+ }
4508
+ ],
4509
+ "exports": [
4510
+ {
4511
+ "kind": "js",
4512
+ "name": "linkStyles",
4513
+ "declaration": {
4514
+ "name": "linkStyles",
4515
+ "module": "src/components/link/link.styles.ts"
4516
+ }
4517
+ }
4518
+ ]
4519
+ },
4520
+ {
4521
+ "kind": "javascript-module",
4522
+ "path": "src/components/link/link.ts",
4523
+ "declarations": [
4524
+ {
4525
+ "kind": "class",
4526
+ "description": "A styled anchor element. Uses the primary color by default with an underline on hover.\nSet `external` to open in a new tab and display a trailing external-link icon.",
4527
+ "name": "Link",
4528
+ "members": [
4529
+ {
4530
+ "kind": "field",
4531
+ "name": "styles",
4532
+ "static": true,
4533
+ "default": "linkStyles"
4534
+ },
4535
+ {
4536
+ "kind": "field",
4537
+ "name": "href",
4538
+ "type": {
4539
+ "text": "string"
4540
+ },
4541
+ "default": "''",
4542
+ "description": "Destination URL forwarded to the underlying `<a>` element."
4543
+ },
4544
+ {
4545
+ "kind": "field",
4546
+ "name": "external",
4547
+ "type": {
4548
+ "text": "boolean"
4549
+ },
4550
+ "default": "false",
4551
+ "description": "Opens the link in a new tab and appends an external-link icon."
4552
+ },
4553
+ {
4554
+ "kind": "method",
4555
+ "name": "render"
4556
+ }
4557
+ ],
4558
+ "superclass": {
4559
+ "name": "ThemeableElement",
4560
+ "module": "/src/base"
4561
+ },
4562
+ "tagName": "lt-link",
4563
+ "customElement": true
4564
+ }
4565
+ ],
4566
+ "exports": [
4567
+ {
4568
+ "kind": "js",
4569
+ "name": "Link",
4570
+ "declaration": {
4571
+ "name": "Link",
4572
+ "module": "src/components/link/link.ts"
4573
+ }
4574
+ }
4575
+ ]
4576
+ },
4484
4577
  {
4485
4578
  "kind": "javascript-module",
4486
4579
  "path": "src/components/list/index.ts",
@@ -5222,99 +5315,6 @@
5222
5315
  }
5223
5316
  ]
5224
5317
  },
5225
- {
5226
- "kind": "javascript-module",
5227
- "path": "src/components/link/index.ts",
5228
- "declarations": [],
5229
- "exports": [
5230
- {
5231
- "kind": "js",
5232
- "name": "Link",
5233
- "declaration": {
5234
- "name": "Link",
5235
- "module": "./link"
5236
- }
5237
- }
5238
- ]
5239
- },
5240
- {
5241
- "kind": "javascript-module",
5242
- "path": "src/components/link/link.styles.ts",
5243
- "declarations": [
5244
- {
5245
- "kind": "variable",
5246
- "name": "linkStyles",
5247
- "default": "css` :host { display: inline; } a[part='base'] { align-items: center; color: var(--lt-text-primary); cursor: pointer; display: inline-flex; font: inherit; gap: 0.25em; text-decoration: none; vertical-align: baseline; } a[part='base']:hover { color: var(--lt-text-primary); text-decoration: underline; } a[part='base']:focus-visible { border-radius: 2px; outline: 2px solid var(--lt-border-focus); outline-offset: 2px; } lt-icon[part='icon'] { flex-shrink: 0; } `"
5248
- }
5249
- ],
5250
- "exports": [
5251
- {
5252
- "kind": "js",
5253
- "name": "linkStyles",
5254
- "declaration": {
5255
- "name": "linkStyles",
5256
- "module": "src/components/link/link.styles.ts"
5257
- }
5258
- }
5259
- ]
5260
- },
5261
- {
5262
- "kind": "javascript-module",
5263
- "path": "src/components/link/link.ts",
5264
- "declarations": [
5265
- {
5266
- "kind": "class",
5267
- "description": "A styled anchor element. Uses the primary color by default with an underline on hover.\nSet `external` to open in a new tab and display a trailing external-link icon.",
5268
- "name": "Link",
5269
- "members": [
5270
- {
5271
- "kind": "field",
5272
- "name": "styles",
5273
- "static": true,
5274
- "default": "linkStyles"
5275
- },
5276
- {
5277
- "kind": "field",
5278
- "name": "href",
5279
- "type": {
5280
- "text": "string"
5281
- },
5282
- "default": "''",
5283
- "description": "Destination URL forwarded to the underlying `<a>` element."
5284
- },
5285
- {
5286
- "kind": "field",
5287
- "name": "external",
5288
- "type": {
5289
- "text": "boolean"
5290
- },
5291
- "default": "false",
5292
- "description": "Opens the link in a new tab and appends an external-link icon."
5293
- },
5294
- {
5295
- "kind": "method",
5296
- "name": "render"
5297
- }
5298
- ],
5299
- "superclass": {
5300
- "name": "ThemeableElement",
5301
- "module": "/src/base"
5302
- },
5303
- "tagName": "lt-link",
5304
- "customElement": true
5305
- }
5306
- ],
5307
- "exports": [
5308
- {
5309
- "kind": "js",
5310
- "name": "Link",
5311
- "declaration": {
5312
- "name": "Link",
5313
- "module": "src/components/link/link.ts"
5314
- }
5315
- }
5316
- ]
5317
- },
5318
5318
  {
5319
5319
  "kind": "javascript-module",
5320
5320
  "path": "src/components/progress/index.ts",
@@ -7219,7 +7219,7 @@
7219
7219
  },
7220
7220
  {
7221
7221
  "kind": "javascript-module",
7222
- "path": "src/components/spinner/spineer.styles.ts",
7222
+ "path": "src/components/spinner/spinner.styles.ts",
7223
7223
  "declarations": [
7224
7224
  {
7225
7225
  "kind": "variable",
@@ -7233,7 +7233,7 @@
7233
7233
  "name": "spinnerStyles",
7234
7234
  "declaration": {
7235
7235
  "name": "spinnerStyles",
7236
- "module": "src/components/spinner/spineer.styles.ts"
7236
+ "module": "src/components/spinner/spinner.styles.ts"
7237
7237
  }
7238
7238
  }
7239
7239
  ]