use-wc 1.0.0-pre.43 → 1.0.0-pre.44

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 (5) hide show
  1. package/custom-elements.json +65 -65
  2. package/dist/design-system.css +23 -23
  3. package/dist/tokens.css +22 -17
  4. package/package.json +1 -1
  5. package/vscode.html-custom-data.json +6 -6
package/custom-elements.json CHANGED
@@ -396,6 +396,71 @@
396
396
  }
397
397
  ]
398
398
  },
399
+ {
400
+ "kind": "javascript-module",
401
+ "path": "src/elements/use-calendarday/use-calendarday.ts",
402
+ "declarations": [
403
+ {
404
+ "kind": "class",
405
+ "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
406
+ "name": "UseCalendarday",
407
+ "slots": [
408
+ {
409
+ "description": "slot for custom day content (replaces the day number)",
410
+ "name": "default"
411
+ }
412
+ ],
413
+ "members": [
414
+ {
415
+ "kind": "field",
416
+ "name": "date",
417
+ "type": {
418
+ "text": "string"
419
+ },
420
+ "attribute": "date"
421
+ },
422
+ {
423
+ "kind": "field",
424
+ "name": "day",
425
+ "readonly": true
426
+ }
427
+ ],
428
+ "attributes": [
429
+ {
430
+ "name": "date",
431
+ "type": {
432
+ "text": "string"
433
+ },
434
+ "fieldName": "date"
435
+ }
436
+ ],
437
+ "superclass": {
438
+ "name": "LitElement",
439
+ "package": "lit"
440
+ },
441
+ "tagName": "use-calendarday",
442
+ "customElement": true
443
+ }
444
+ ],
445
+ "exports": [
446
+ {
447
+ "kind": "js",
448
+ "name": "UseCalendarday",
449
+ "declaration": {
450
+ "name": "UseCalendarday",
451
+ "module": "src/elements/use-calendarday/use-calendarday.ts"
452
+ }
453
+ },
454
+ {
455
+ "kind": "custom-element-definition",
456
+ "name": "use-calendarday",
457
+ "declaration": {
458
+ "name": "UseCalendarday",
459
+ "module": "src/elements/use-calendarday/use-calendarday.ts"
460
+ }
461
+ }
462
+ ]
463
+ },
399
464
  {
400
465
  "kind": "javascript-module",
401
466
  "path": "src/elements/use-date-input/use-date-input.ts",
@@ -522,71 +587,6 @@
522
587
  }
523
588
  ]
524
589
  },
525
- {
526
- "kind": "javascript-module",
527
- "path": "src/elements/use-calendarday/use-calendarday.ts",
528
- "declarations": [
529
- {
530
- "kind": "class",
531
- "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
532
- "name": "UseCalendarday",
533
- "slots": [
534
- {
535
- "description": "slot for custom day content (replaces the day number)",
536
- "name": "default"
537
- }
538
- ],
539
- "members": [
540
- {
541
- "kind": "field",
542
- "name": "date",
543
- "type": {
544
- "text": "string"
545
- },
546
- "attribute": "date"
547
- },
548
- {
549
- "kind": "field",
550
- "name": "day",
551
- "readonly": true
552
- }
553
- ],
554
- "attributes": [
555
- {
556
- "name": "date",
557
- "type": {
558
- "text": "string"
559
- },
560
- "fieldName": "date"
561
- }
562
- ],
563
- "superclass": {
564
- "name": "LitElement",
565
- "package": "lit"
566
- },
567
- "tagName": "use-calendarday",
568
- "customElement": true
569
- }
570
- ],
571
- "exports": [
572
- {
573
- "kind": "js",
574
- "name": "UseCalendarday",
575
- "declaration": {
576
- "name": "UseCalendarday",
577
- "module": "src/elements/use-calendarday/use-calendarday.ts"
578
- }
579
- },
580
- {
581
- "kind": "custom-element-definition",
582
- "name": "use-calendarday",
583
- "declaration": {
584
- "name": "UseCalendarday",
585
- "module": "src/elements/use-calendarday/use-calendarday.ts"
586
- }
587
- }
588
- ]
589
- },
590
590
  {
591
591
  "kind": "javascript-module",
592
592
  "path": "src/elements/use-date-picker/use-date-picker.ts",
package/dist/design-system.css CHANGED
@@ -239,7 +239,7 @@
239
239
  --usewc-layout-button-padding-block: var(--usewc-layout-button-base-padding-block);
240
240
  --usewc-layout-button-padding-inline: var(--usewc-layout-button-base-padding-inline);
241
241
  --usewc-layout-button-gap: var(--usewc-layout-button-base-gap);
242
- --usewc-layout-button-font-size: var(--usewc-layout-button-base-font-size);
242
+ --usewc-font-button-size: var(--usewc-font-button-base-size);
243
243
 
244
244
  &::part(trigger),
245
245
  &:not([type="file"], use-dropdown),
@@ -252,16 +252,16 @@
252
252
  line-height: var(--usewc-layout-button-line-height);
253
253
  padding-block: var(--usewc-layout-button-padding-block);
254
254
  padding-inline: var(--usewc-layout-button-padding-inline);
255
- font-family: var(--usewc-font-input-family);
256
- font-size: var(--usewc-layout-button-font-size);
257
- font-weight: var(--usewc-font-weight-semibold);
255
+ font-family: var(--usewc-font-button-family);
256
+ font-size: var(--usewc-font-button-size);
257
+ font-weight: var(--usewc-font-button-weight);
258
258
  white-space: nowrap;
259
259
  cursor: default;
260
260
  color: var(--usewc-color-button-text-static);
261
261
  background: var(--usewc-color-button-background-static);
262
- background-size: var(--usewc-layout-button-background-size);
263
- background-position: var(--usewc-layout-button-background-position);
264
- background-repeat: var(--usewc-layout-button-background-repeat);
262
+ background-size: var(--usewc-effect-button-background-size);
263
+ background-position: var(--usewc-effect-button-background-position);
264
+ background-repeat: var(--usewc-effect-button-background-repeat);
265
265
  border: var(--usewc-layout-button-border) var(--usewc-effect-input-border-style)
266
266
  var(--usewc-color-button-border-static);
267
267
  }
@@ -350,28 +350,28 @@
350
350
  &.extra-small {
351
351
  --usewc-layout-button-padding-block: var(--usewc-layout-button-extra-small-padding-block);
352
352
  --usewc-layout-button-padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
353
- --usewc-layout-button-font-size: var(--usewc-layout-button-extra-small-font-size);
353
+ --usewc-font-button-size: var(--usewc-font-button-extra-small-size);
354
354
  --usewc-layout-button-line-height: var(--usewc-layout-button-extra-small-line-height);
355
355
  }
356
356
 
357
357
  &.small {
358
358
  --usewc-layout-button-padding-block: var(--usewc-layout-button-small-padding-block);
359
359
  --usewc-layout-button-padding-inline: var(--usewc-layout-button-small-padding-inline);
360
- --usewc-layout-button-font-size: var(--usewc-layout-button-small-font-size);
360
+ --usewc-font-button-size: var(--usewc-font-button-small-size);
361
361
  --usewc-layout-button-line-height: var(--usewc-layout-button-small-line-height);
362
362
  }
363
363
 
364
364
  &.large {
365
365
  --usewc-layout-button-padding-block: var(--usewc-layout-button-large-padding-block);
366
366
  --usewc-layout-button-padding-inline: var(--usewc-layout-button-large-padding-inline);
367
- --usewc-layout-button-font-size: var(--usewc-layout-button-large-font-size);
367
+ --usewc-font-button-size: var(--usewc-font-button-large-size);
368
368
  --usewc-layout-button-line-height: var(--usewc-layout-button-large-line-height);
369
369
  }
370
370
 
371
371
  &.extra-large {
372
372
  --usewc-layout-button-padding-block: var(--usewc-layout-button-extra-large-padding-block);
373
373
  --usewc-layout-button-padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
374
- --usewc-layout-button-font-size: var(--usewc-layout-button-extra-large-font-size);
374
+ --usewc-font-button-size: var(--usewc-font-button-extra-large-size);
375
375
  --usewc-layout-button-line-height: var(--usewc-layout-button-extra-large-line-height);
376
376
  }
377
377
  }
@@ -382,41 +382,41 @@
382
382
  use-select-input {
383
383
  --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-base-padding-block);
384
384
  --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-base-padding-inline);
385
- --usewc-layout-select-trigger-font-size: var(--usewc-layout-button-base-font-size);
385
+ --usewc-font-select-trigger-size: var(--usewc-font-button-base-size);
386
386
  --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-line-height);
387
387
 
388
388
  &::part(trigger) {
389
389
  padding-block: var(--usewc-layout-select-trigger-padding-block);
390
390
  padding-inline: var(--usewc-layout-select-trigger-padding-inline);
391
- font-size: var(--usewc-layout-select-trigger-font-size);
391
+ font-size: var(--usewc-font-select-trigger-size);
392
392
  line-height: var(--usewc-layout-select-trigger-line-height);
393
393
  }
394
394
 
395
395
  &.extra-small {
396
396
  --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-extra-small-padding-block);
397
397
  --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-extra-small-padding-inline);
398
- --usewc-layout-select-trigger-font-size: var(--usewc-layout-button-extra-small-font-size);
398
+ --usewc-font-select-trigger-size: var(--usewc-font-button-extra-small-size);
399
399
  --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-extra-small-line-height);
400
400
  }
401
401
 
402
402
  &.small {
403
403
  --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-small-padding-block);
404
404
  --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-small-padding-inline);
405
- --usewc-layout-select-trigger-font-size: var(--usewc-layout-button-small-font-size);
405
+ --usewc-font-select-trigger-size: var(--usewc-font-button-small-size);
406
406
  --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-small-line-height);
407
407
  }
408
408
 
409
409
  &.large {
410
410
  --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-large-padding-block);
411
411
  --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-large-padding-inline);
412
- --usewc-layout-select-trigger-font-size: var(--usewc-layout-button-large-font-size);
412
+ --usewc-font-select-trigger-size: var(--usewc-font-button-large-size);
413
413
  --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-large-line-height);
414
414
  }
415
415
 
416
416
  &.extra-large {
417
417
  --usewc-layout-select-trigger-padding-block: var(--usewc-layout-button-extra-large-padding-block);
418
418
  --usewc-layout-select-trigger-padding-inline: var(--usewc-layout-button-extra-large-padding-inline);
419
- --usewc-layout-select-trigger-font-size: var(--usewc-layout-button-extra-large-font-size);
419
+ --usewc-font-select-trigger-size: var(--usewc-font-button-extra-large-size);
420
420
  --usewc-layout-select-trigger-line-height: var(--usewc-layout-button-extra-large-line-height);
421
421
  }
422
422
  }
@@ -461,14 +461,14 @@
461
461
  label {
462
462
  grid-area: label;
463
463
  color: var(--usewc-color-form-label-text);
464
- font-size: var(--usewc-layout-form-label-font-size);
464
+ font-size: var(--usewc-font-form-label-size);
465
465
  }
466
466
 
467
467
  > *:not(label) {
468
468
  margin: 0;
469
469
  grid-area: description;
470
470
  color: var(--usewc-color-form-helper-text);
471
- font-size: var(--usewc-layout-form-helper-text-font-size);
471
+ font-size: var(--usewc-font-form-helper-text-size);
472
472
  }
473
473
  }
474
474
 
@@ -480,14 +480,14 @@
480
480
 
481
481
  label {
482
482
  color: var(--usewc-color-form-label-text);
483
- font-size: var(--usewc-layout-form-label-font-size);
483
+ font-size: var(--usewc-font-form-label-size);
484
484
  line-height: var(--usewc-layout-form-label-line-height);
485
485
  }
486
486
 
487
487
  > *:not(label, input) {
488
488
  margin: 0;
489
489
  color: var(--usewc-color-form-helper-text);
490
- font-size: var(--usewc-layout-form-helper-text-font-size);
490
+ font-size: var(--usewc-font-form-helper-text-size);
491
491
  line-height: var(--usewc-layout-form-helper-text-line-height);
492
492
  }
493
493
 
@@ -769,14 +769,14 @@
769
769
  &::before {
770
770
  content: attr(aria-label);
771
771
  padding: var(--usewc-layout-popover-menu-padding);
772
- font-size: var(--usewc-layout-popover-menu-header-font-size);
772
+ font-size: var(--usewc-font-popover-menu-header-size);
773
773
  font-weight: var(--usewc-font-popover-menu-header-weight);
774
774
  color: var(--usewc-color-popover-menu-header-text);
775
775
  }
776
776
  }
777
777
 
778
778
  kbd {
779
- font-family: var(--usewc-font-popover-menu-shortcut);
779
+ font-family: var(--usewc-font-popover-menu-shortcut-family);
780
780
  color: var(--usewc-color-popover-menu-shortcut);
781
781
  margin-inline-start: auto;
782
782
  }
package/dist/tokens.css CHANGED
@@ -114,20 +114,24 @@
114
114
  }
115
115
 
116
116
  :root {
117
- /* Layout */
118
- --usewc-font-document-size: var(--usewc-font-size-16);
117
+ /* Document */
118
+ /* - Color */
119
119
  --usewc-color-document-text: var(--usewc-color-gray-700);
120
120
  --usewc-color-document-text-muted: var(--usewc-color-gray-500);
121
121
  --usewc-color-document-background: var(--usewc-color-white);
122
122
  --usewc-color-canvas-background: var(--usewc-color-white);
123
123
 
124
124
  /* Typography */
125
+ --usewc-font-document-size: var(--usewc-font-size-16);
125
126
  --usewc-font-document-family: var(--usewc-font-family-sans-serif);
126
127
  --usewc-font-code-family: var(--usewc-font-family-monospace);
127
128
  --usewc-font-quote-family: var(--usewc-font-family-serif);
128
129
  --usewc-font-input-family: inherit;
130
+ --usewc-font-button-family: inherit;
129
131
 
130
132
  /* Controls */
133
+ /* - Disabled */
134
+ --usewc-effect-form-opacity-disabled: 0.5;
131
135
  /* - Outline (focus indicator) */
132
136
  --usewc-color-outline: var(--usewc-color-blue-500);
133
137
  --usewc-effect-outline-size: var(--usewc-space-2);
@@ -135,7 +139,6 @@
135
139
  --usewc-effect-outline-offset-flush: var(--usewc-space-none);
136
140
  --usewc-effect-outline-style: solid;
137
141
  --usewc-effect-outline-transition: outline 0.05s ease-in-out;
138
- --usewc-effect-form-opacity-disabled: 0.5;
139
142
  /* - Link */
140
143
  --usewc-color-link-text-static: var(--usewc-color-blue-500);
141
144
  --usewc-color-link-text-hover: var(--usewc-color-blue-600);
@@ -150,12 +153,13 @@
150
153
  --usewc-color-form-helper-text: var(--usewc-color-gray-500);
151
154
  --usewc-color-form-helper-text-invalid: var(--usewc-color-red-500);
152
155
  --usewc-color-form-label-text: var(--usewc-color-gray-700);
156
+ /* - Font */
157
+ --usewc-font-form-helper-text-size: var(--usewc-font-size-14);
158
+ --usewc-font-form-label-size: var(--usewc-font-size-16);
153
159
  /* - Layout */
154
- --usewc-layout-form-helper-text-font-size: var(--usewc-font-size-14);
155
160
  --usewc-layout-form-helper-text-line-height: var(--usewc-line-height-24);
156
- --usewc-layout-form-label-font-size: var(--usewc-font-size-16);
157
161
  --usewc-layout-form-label-line-height: var(--usewc-line-height-24);
158
- --usewc-layout-form-selector-margin-inline: 0;
162
+ --usewc-layout-form-selector-margin-inline: var(--usewc-space-none);
159
163
  --usewc-layout-form-selector-margin-block: calc((1lh - 1em) / 2);
160
164
  --usewc-layout-form-selector-gap: var(--usewc-space-4);
161
165
  --usewc-layout-form-field-gap: var(--usewc-space-4);
@@ -279,43 +283,44 @@
279
283
  --usewc-color-button-clear-text-active: var(--usewc-color-gray-700);
280
284
  /* - Layout */
281
285
  --usewc-layout-button-border: var(--usewc-space-1);
282
- --usewc-layout-button-background-size: calc(100% + var(--usewc-layout-button-border) * 2)
283
- calc(100% + var(--usewc-layout-button-border) * 2);
284
- --usewc-layout-button-background-position: center;
285
- --usewc-layout-button-background-repeat: no-repeat;
286
286
  --usewc-layout-button-line-height: var(--usewc-line-height-24);
287
287
  /* - Effect */
288
288
  --usewc-effect-button-border-radius: var(--usewc-effect-border-radius-4);
289
289
  --usewc-effect-button-border-style: solid;
290
+ --usewc-effect-button-background-size: calc(100% + var(--usewc-layout-button-border) * 2)
291
+ calc(100% + var(--usewc-layout-button-border) * 2);
292
+ --usewc-effect-button-background-position: center;
293
+ --usewc-effect-button-background-repeat: no-repeat;
290
294
  /* - Sizes */
291
295
  /* -- Base size */
292
296
  --usewc-layout-button-base-padding-block: calc(var(--usewc-space-4) - var(--usewc-layout-button-border));
293
297
  --usewc-layout-button-base-padding-inline: calc(var(--usewc-space-12) - var(--usewc-layout-button-border));
294
298
  --usewc-layout-button-base-gap: var(--usewc-space-4);
295
- --usewc-layout-button-base-font-size: var(--usewc-font-size-16);
299
+ --usewc-font-button-base-size: var(--usewc-font-size-16);
300
+ --usewc-font-button-weight: var(--usewc-font-weight-medium);
296
301
  /* -- Extra small size */
297
302
  --usewc-layout-button-extra-small-padding-block: var(--usewc-space-none);
298
303
  --usewc-layout-button-extra-small-padding-inline: calc(var(--usewc-space-8) - var(--usewc-layout-button-border));
299
304
  --usewc-layout-button-extra-small-gap: var(--usewc-space-2);
300
- --usewc-layout-button-extra-small-font-size: var(--usewc-font-size-12);
305
+ --usewc-font-button-extra-small-size: var(--usewc-font-size-12);
301
306
  --usewc-layout-button-extra-small-line-height: var(--usewc-line-height-18);
302
307
  /* -- Small size */
303
308
  --usewc-layout-button-small-padding-block: calc(var(--usewc-space-2) - var(--usewc-layout-button-border));
304
309
  --usewc-layout-button-small-padding-inline: calc(var(--usewc-space-8) - var(--usewc-layout-button-border));
305
310
  --usewc-layout-button-small-gap: var(--usewc-space-2);
306
- --usewc-layout-button-small-font-size: var(--usewc-font-size-14);
311
+ --usewc-font-button-small-size: var(--usewc-font-size-14);
307
312
  --usewc-layout-button-small-line-height: var(--usewc-line-height-20);
308
313
  /* -- Large size */
309
314
  --usewc-layout-button-large-padding-block: calc(var(--usewc-space-4) - var(--usewc-layout-button-border));
310
315
  --usewc-layout-button-large-padding-inline: calc(var(--usewc-space-16) - var(--usewc-layout-button-border));
311
316
  --usewc-layout-button-large-gap: var(--usewc-space-4);
312
- --usewc-layout-button-large-font-size: var(--usewc-font-size-18);
317
+ --usewc-font-button-large-size: var(--usewc-font-size-18);
313
318
  --usewc-layout-button-large-line-height: var(--usewc-line-height-28);
314
319
  /* -- Extra large size */
315
320
  --usewc-layout-button-extra-large-padding-block: calc(var(--usewc-space-8) - var(--usewc-layout-button-border));
316
321
  --usewc-layout-button-extra-large-padding-inline: calc(var(--usewc-space-24) - var(--usewc-layout-button-border));
317
322
  --usewc-layout-button-extra-large-gap: var(--usewc-space-8);
318
- --usewc-layout-button-extra-large-font-size: var(--usewc-font-size-24);
323
+ --usewc-font-button-extra-large-size: var(--usewc-font-size-24);
319
324
  --usewc-layout-button-extra-large-line-height: var(--usewc-line-height-28);
320
325
 
321
326
  /* Menu */
@@ -333,10 +338,10 @@
333
338
  --usewc-color-popover-menu-background: var(--usewc-color-canvas-background);
334
339
  --usewc-color-popover-menu-border: var(--usewc-color-gray-600);
335
340
  --usewc-effect-popover-menu-border-radius: var(--usewc-effect-border-radius-8);
336
- --usewc-layout-popover-menu-header-font-size: var(--usewc-font-size-14);
341
+ --usewc-font-popover-menu-header-size: var(--usewc-font-size-14);
337
342
  --usewc-font-popover-menu-header-weight: var(--usewc-font-weight-medium);
338
343
  --usewc-color-popover-menu-header-text: var(--usewc-color-gray-400);
339
- --usewc-font-popover-menu-shortcut: var(--usewc-font-family-monospace);
344
+ --usewc-font-popover-menu-shortcut-family: var(--usewc-font-family-monospace);
340
345
  --usewc-color-popover-menu-shortcut: var(--usewc-color-gray-400);
341
346
  --usewc-color-popover-menu-item-text-static: var(--usewc-color-button-base-text-static);
342
347
  --usewc-color-popover-menu-item-text-hover: var(--usewc-color-button-base-text-static);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "use-wc",
3
- "version": "1.0.0-pre.43",
3
+ "version": "1.0.0-pre.44",
4
4
  "private": false,
5
5
  "homepage": "https://usewc.com",
6
6
  "bugs": "https://github.com/dang-rabbits/use-wc/issues",
package/vscode.html-custom-data.json CHANGED
@@ -2,6 +2,12 @@
2
2
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
3
3
  "version": 1.1,
4
4
  "tags": [
5
+ {
6
+ "name": "use-calendarday",
7
+ "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.\n---\n\n\n### **Slots:**\n - **default** - slot for custom day content (replaces the day number)",
8
+ "attributes": [{ "name": "date", "values": [] }],
9
+ "references": []
10
+ },
5
11
  {
6
12
  "name": "use-date-input",
7
13
  "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.\n---\n",
@@ -13,12 +19,6 @@
13
19
  ],
14
20
  "references": []
15
21
  },
16
- {
17
- "name": "use-calendarday",
18
- "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.\n---\n\n\n### **Slots:**\n - **default** - slot for custom day content (replaces the day number)",
19
- "attributes": [{ "name": "date", "values": [] }],
20
- "references": []
21
- },
22
22
  {
23
23
  "name": "use-date-picker",
24
24
  "description": "A day-granularity date picker. Value format: YYYY-MM-DD.\n---\n\n\n### **Events:**\n - **use-change** - Fired on selection with detail `{ value: string }`\n\n### **Slots:**\n - **header-start** - Content before the title in the header\n- **title** - Title showing the month and year\n- **controls** - Navigation controls (previous, today, next buttons)\n- **header-end** - Content after the controls in the header\n- **date-{YYYY-MM-DD}** - Per-date content that replaces the default day number\n\n### **CSS Parts:**\n - **header** - The header container\n- **title** - The title text\n- **title-month** - The month part of the title\n- **title-literal** - Literal text in the title\n- **title-year** - The year part of the title\n- **controls** - The controls slot container\n- **control** - Individual control button\n- **control-previous** - Previous month button\n- **control-today** - Today button\n- **control-next** - Next month button\n- **grid** - The main calendar grid\n- **grid-header** - The header row with day names\n- **grid-header-cell** - Individual day name header cell\n- **grid-body** - The container for calendar weeks\n- **row** - A row of days\n- **day** - A day cell\n- **day-empty** - An empty day cell (from previous/next month)\n- **day-selected** - A selected day cell\n- **day-today** - The current date cell\n- **day-disabled** - A disabled date cell\n- **title-button** - The clickable button wrapping the month/year title\n- **picker** - The scrollable month/year picker panel (replaces grid when open)\n- **picker-year-section** - Container for one year's label and month grid\n- **picker-year-label** - The year heading inside a year section\n- **picker-months** - The 4-column month grid inside a year section\n- **picker-month** - An individual month button\n- **picker-month-current** - Applied to the currently selected month button",