@universal-material/web 3.0.134 → 3.0.136

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 (45) hide show
  1. package/checkbox/checkbox.d.ts +1 -1
  2. package/checkbox/checkbox.d.ts.map +1 -1
  3. package/checkbox/checkbox.js +4 -6
  4. package/checkbox/checkbox.js.map +1 -1
  5. package/checkbox/checkbox.styles.d.ts.map +1 -1
  6. package/checkbox/checkbox.styles.js +0 -65
  7. package/checkbox/checkbox.styles.js.map +1 -1
  8. package/chip/chip.js +2 -2
  9. package/chip/chip.js.map +1 -1
  10. package/chip/chip.styles.d.ts.map +1 -1
  11. package/chip/chip.styles.js +4 -0
  12. package/chip/chip.styles.js.map +1 -1
  13. package/custom-elements.json +1546 -1143
  14. package/package.json +1 -1
  15. package/radio/radio.d.ts +1 -1
  16. package/radio/radio.d.ts.map +1 -1
  17. package/radio/radio.js +1 -2
  18. package/radio/radio.js.map +1 -1
  19. package/radio/radio.styles.d.ts.map +1 -1
  20. package/radio/radio.styles.js +0 -65
  21. package/radio/radio.styles.js.map +1 -1
  22. package/shared/menu-field/menu-field-navigation-controller.d.ts.map +1 -1
  23. package/shared/menu-field/menu-field-navigation-controller.js +0 -1
  24. package/shared/menu-field/menu-field-navigation-controller.js.map +1 -1
  25. package/shared/selection-control/checkbox-base.d.ts +1 -0
  26. package/shared/selection-control/checkbox-base.d.ts.map +1 -0
  27. package/shared/selection-control/checkbox-base.js +7 -0
  28. package/shared/selection-control/checkbox-base.js.map +1 -0
  29. package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
  30. package/shared/selection-control/selection-control-list-item.js +9 -5
  31. package/shared/selection-control/selection-control-list-item.js.map +1 -1
  32. package/shared/selection-control/selection-control.d.ts +6 -0
  33. package/shared/selection-control/selection-control.d.ts.map +1 -1
  34. package/shared/selection-control/selection-control.js +67 -10
  35. package/shared/selection-control/selection-control.js.map +1 -1
  36. package/shared/selection-control/selection-control.styles.d.ts.map +1 -1
  37. package/shared/selection-control/selection-control.styles.js +0 -1
  38. package/shared/selection-control/selection-control.styles.js.map +1 -1
  39. package/switch/switch.d.ts +1 -1
  40. package/switch/switch.d.ts.map +1 -1
  41. package/switch/switch.js +7 -9
  42. package/switch/switch.js.map +1 -1
  43. package/switch/switch.styles.d.ts.map +1 -1
  44. package/switch/switch.styles.js +0 -65
  45. package/switch/switch.styles.js.map +1 -1
@@ -344,12 +344,12 @@
344
344
  },
345
345
  {
346
346
  "kind": "javascript-module",
347
- "path": "src/app-bar/top-app-bar.styles.ts",
347
+ "path": "src/button/button-base.styles.ts",
348
348
  "declarations": [
349
349
  {
350
350
  "kind": "variable",
351
351
  "name": "styles",
352
- "default": "css `\n :host {\n display: block;\n background-color: var(--u-top-app-bar-bg-color, var(--u-color-body, var(--u-color-surface, rgb(254, 247, 255))));\n color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n }\n\n :host([container-scrolled]) {\n background-color: var(--u-top-app-bar-constrast-bg-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n }\n\n :host(:not([has-leading-icon])) .leading-icon {\n display: none;\n }\n\n :host(:not([has-trailing-icon])) .trailing-icon {\n display: none;\n }\n\n slot[name=leading-icon],\n slot[name=trailing-icon] {\n display: inline-flex;\n align-items: center;\n gap: var(--u-top-app-bar-icons-gap, 8px);\n }\n\n slot[name=leading-icon]::slotted(u-icon-button) {\n color: inherit;\n }\n\n :host([position=absolute]) .container {\n position: absolute;\n }\n\n :host([position=fixed]) .container {\n position: fixed;\n inset-inline: 0;\n inset-block-start: 0;\n inset-inline-start: var(--u-app-bar-offset, 0);\n }\n\n :host([position=absolute]),\n :host([position=fixed]) {\n padding-top: var(--_content-height);\n }\n :host([position=absolute]) .container,\n :host([position=fixed]) .container {\n z-index: var(--u-fixed-app-bar-z-index, 1010);\n }\n\n .extended-content {\n display: flex;\n align-items: flex-end;\n padding-inline: var(--u-extended-content-inline-padding, 16px);\n }\n\n :host([size=medium]) .extended-content {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-extended-content-medium-line-height, var(--u-headline-s-line-height, 2rem));\n font-size: var(--u-extended-content-medium-font-size, var(--u-headline-s-font-size, 1.5rem));\n letter-spacing: var(--u-extended-content-medium-letter-spacing, var(--u-headline-s-letter-spacing, 0rem));\n font-weight: var(--u-extended-content-medium-font-weight, var(--u-headline-s-font-weight, var(--u-font-weight-regular, 400)));\n height: var(--u-extended-content-medium-height, 3.5rem);\n padding-bottom: var(--u-extended-content-medium-padding-bottom, 24px);\n }\n\n :host([size=large]) .extended-content {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-extended-content-large-line-height, var(--u-headline-m-line-height, 2.25rem));\n font-size: var(--u-extended-content-large-font-size, var(--u-headline-m-font-size, 1.75rem));\n letter-spacing: var(--u-extended-content-large-letter-spacing, var(--u-headline-m-letter-spacing, 0rem));\n font-weight: var(--u-extended-content-large-font-weight, var(--u-headline-m-font-weight, var(--u-font-weight-regular, 400)));\n height: var(--u-extended-content-medium-large, 6rem);\n padding-bottom: var(--u-extended-content-large-padding-bottom, 28px);\n }\n\n .container {\n background: inherit;\n }\n\n .content {\n display: flex;\n align-items: center;\n background-color: inherit;\n transition: inherit;\n min-height: var(--u-top-app-bar-min-height, 56px);\n }\n @media (min-width: 840px) {\n .content {\n min-height: var(--u-top-app-bar-extended-min-height, 64px);\n }\n }\n\n .headline {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-top-app-bar-headline-line-height, var(--u-title-l-line-height, 1.75rem));\n font-size: var(--u-top-app-bar-headline-font-size, var(--u-title-l-font-size, 1.375rem));\n letter-spacing: var(--u-top-app-bar-headline-letter-spacing, var(--u-title-l-letter-spacing, 0rem));\n font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400)));\n margin-inline: var(--u-headline-margin, 16px);\n }\n :host([has-leading-icon]) .headline {\n margin-inline-start: 0;\n }\n\n .leading-icon {\n margin-inline: var(--u-leading-icon-margin, 8px);\n }\n\n .trailing-icon {\n padding-inline: var(--u-trailing-icon-margin, 8px);\n margin-inline-start: auto;\n }\n`"
352
+ "default": "css `\n .icon {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 1em;\n height: 1em;\n line-height: 1em;\n }\n\n ::slotted([slot=icon]) {\n display: inline-block;\n }\n`"
353
353
  }
354
354
  ],
355
355
  "exports": [
@@ -358,300 +358,386 @@
358
358
  "name": "styles",
359
359
  "declaration": {
360
360
  "name": "styles",
361
- "module": "src/app-bar/top-app-bar.styles.ts"
361
+ "module": "src/button/button-base.styles.ts"
362
362
  }
363
363
  }
364
364
  ]
365
365
  },
366
366
  {
367
367
  "kind": "javascript-module",
368
- "path": "src/app-bar/top-app-bar.ts",
368
+ "path": "src/button/button-base.ts",
369
369
  "declarations": [
370
370
  {
371
371
  "kind": "class",
372
372
  "description": "",
373
- "name": "UmTopAppBar",
373
+ "name": "UmButtonBase",
374
374
  "members": [
375
375
  {
376
376
  "kind": "field",
377
- "name": "hasLeadingIcon",
377
+ "name": "formAssociated",
378
378
  "type": {
379
379
  "text": "boolean"
380
380
  },
381
- "default": "false",
382
- "description": "Whether the app bar has leading icon or not\n\n_Note:_ Readonly",
383
- "attribute": "has-leading-icon",
384
- "reflects": true
381
+ "static": true,
382
+ "default": "true"
385
383
  },
386
384
  {
387
385
  "kind": "field",
388
- "name": "hasTrailingIcon",
386
+ "name": "type",
389
387
  "type": {
390
- "text": "boolean"
388
+ "text": "string"
391
389
  },
392
- "default": "false",
393
- "description": "Whether the app bar has trailing icon or not\n\n_Note:_ Readonly",
394
- "attribute": "has-trailing-icon",
395
- "reflects": true
390
+ "default": "'submit'",
391
+ "attribute": "type"
396
392
  },
397
393
  {
398
394
  "kind": "field",
399
- "name": "position",
395
+ "name": "value",
400
396
  "type": {
401
- "text": "'fixed' | 'absolute' | 'static'"
397
+ "text": "string"
402
398
  },
403
- "default": "'fixed'",
404
- "attribute": "position",
399
+ "default": "''",
400
+ "attribute": "value",
405
401
  "reflects": true
406
402
  },
407
403
  {
408
404
  "kind": "field",
409
- "name": "size",
405
+ "name": "form",
410
406
  "type": {
411
- "text": "'small' | 'medium' | 'large'"
412
- },
413
- "default": "'small'",
414
- "attribute": "size",
415
- "reflects": true
407
+ "text": "HTMLFormElement | null"
408
+ }
416
409
  },
417
410
  {
418
411
  "kind": "field",
419
- "name": "headline",
412
+ "name": "#elementInternals",
413
+ "privacy": "private",
420
414
  "type": {
421
- "text": "string"
415
+ "text": "ElementInternals"
416
+ }
417
+ },
418
+ {
419
+ "kind": "method",
420
+ "name": "handleClick",
421
+ "privacy": "protected",
422
+ "return": {
423
+ "type": {
424
+ "text": "void"
425
+ }
422
426
  },
423
- "default": "''",
424
- "attribute": "headline"
427
+ "parameters": [
428
+ {
429
+ "name": "_",
430
+ "type": {
431
+ "text": "UIEvent"
432
+ }
433
+ }
434
+ ],
435
+ "inheritedFrom": {
436
+ "name": "UmButtonWrapper",
437
+ "module": "src/shared/button-wrapper.ts"
438
+ }
425
439
  },
426
440
  {
427
441
  "kind": "field",
428
- "name": "scrollContainer",
442
+ "name": "disabled",
429
443
  "type": {
430
- "text": "'none' | 'window' | string | undefined"
444
+ "text": "boolean"
431
445
  },
432
- "attribute": "scrollContainer",
433
- "reflects": true
446
+ "default": "false",
447
+ "description": "Whether the button is disabled or not.",
448
+ "attribute": "disabled",
449
+ "reflects": true,
450
+ "inheritedFrom": {
451
+ "name": "UmButtonWrapper",
452
+ "module": "src/shared/button-wrapper.ts"
453
+ }
434
454
  },
435
455
  {
436
456
  "kind": "field",
437
- "name": "containerScrolled",
457
+ "name": "renderRipple",
438
458
  "type": {
439
459
  "text": "boolean"
440
460
  },
441
- "default": "false",
442
- "attribute": "container-scrolled",
443
- "reflects": true
461
+ "default": "true",
462
+ "inheritedFrom": {
463
+ "name": "UmButtonWrapper",
464
+ "module": "src/shared/button-wrapper.ts"
465
+ }
444
466
  },
445
467
  {
446
468
  "kind": "field",
447
- "name": "assignedLeadingIcons",
469
+ "name": "href",
448
470
  "type": {
449
- "text": "HTMLElement[]"
471
+ "text": "string | undefined"
450
472
  },
451
- "privacy": "private"
473
+ "description": "The URL that the link button points to.",
474
+ "attribute": "href",
475
+ "inheritedFrom": {
476
+ "name": "UmButtonWrapper",
477
+ "module": "src/shared/button-wrapper.ts"
478
+ }
452
479
  },
453
480
  {
454
481
  "kind": "field",
455
- "name": "assignedTrailingIcons",
482
+ "name": "target",
456
483
  "type": {
457
- "text": "HTMLElement[]"
484
+ "text": "string | undefined"
458
485
  },
459
- "privacy": "private"
486
+ "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
487
+ "attribute": "target",
488
+ "inheritedFrom": {
489
+ "name": "UmButtonWrapper",
490
+ "module": "src/shared/button-wrapper.ts"
491
+ }
460
492
  },
461
493
  {
462
494
  "kind": "field",
463
- "name": "_container",
495
+ "name": "name",
464
496
  "type": {
465
- "text": "HTMLElement"
497
+ "text": "string | undefined"
466
498
  },
467
- "privacy": "private"
499
+ "attribute": "name",
500
+ "inheritedFrom": {
501
+ "name": "UmButtonWrapper",
502
+ "module": "src/shared/button-wrapper.ts"
503
+ }
468
504
  },
469
505
  {
470
506
  "kind": "field",
471
- "name": "_extendedContent",
507
+ "name": "buttonElement",
472
508
  "type": {
473
509
  "text": "HTMLElement"
474
510
  },
475
- "privacy": "private"
511
+ "inheritedFrom": {
512
+ "name": "UmButtonWrapper",
513
+ "module": "src/shared/button-wrapper.ts"
514
+ }
476
515
  },
477
516
  {
478
517
  "kind": "field",
479
- "name": "_headlineElement",
518
+ "name": "ripple",
480
519
  "type": {
481
- "text": "HTMLElement"
520
+ "text": "UmRipple"
482
521
  },
483
- "privacy": "private"
522
+ "privacy": "private",
523
+ "inheritedFrom": {
524
+ "name": "UmButtonWrapper",
525
+ "module": "src/shared/button-wrapper.ts"
526
+ }
484
527
  },
485
528
  {
486
529
  "kind": "field",
487
- "name": "containerSizeObserver",
530
+ "name": "innerRole",
488
531
  "type": {
489
- "text": "ResizeObserver | null"
532
+ "text": "string | null"
490
533
  },
491
- "privacy": "private",
492
- "default": "null"
534
+ "privacy": "protected",
535
+ "default": "null",
536
+ "inheritedFrom": {
537
+ "name": "UmButtonWrapper",
538
+ "module": "src/shared/button-wrapper.ts"
539
+ }
493
540
  },
494
541
  {
495
542
  "kind": "field",
496
- "name": "scrollContainerElement",
543
+ "name": "pathname",
497
544
  "type": {
498
- "text": "{\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n } | null"
545
+ "text": "string"
499
546
  },
547
+ "inheritedFrom": {
548
+ "name": "UmButtonWrapper",
549
+ "module": "src/shared/button-wrapper.ts"
550
+ }
551
+ },
552
+ {
553
+ "kind": "method",
554
+ "name": "renderButton",
500
555
  "privacy": "private",
501
- "default": "null"
556
+ "inheritedFrom": {
557
+ "name": "UmButtonWrapper",
558
+ "module": "src/shared/button-wrapper.ts"
559
+ }
502
560
  },
503
561
  {
504
562
  "kind": "method",
505
- "name": "getScrollContainer",
563
+ "name": "renderLink",
506
564
  "privacy": "private",
565
+ "inheritedFrom": {
566
+ "name": "UmButtonWrapper",
567
+ "module": "src/shared/button-wrapper.ts"
568
+ }
569
+ },
570
+ {
571
+ "kind": "method",
572
+ "name": "renderContent",
573
+ "privacy": "protected",
507
574
  "return": {
508
575
  "type": {
509
- "text": "| {\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n }\n | undefined"
576
+ "text": "HTMLTemplateResult"
510
577
  }
511
578
  },
512
- "parameters": [
513
- {
514
- "name": "idOrElement",
515
- "type": {
516
- "text": "string | HTMLElement | undefined"
517
- }
518
- }
519
- ]
579
+ "inheritedFrom": {
580
+ "name": "UmButtonWrapper",
581
+ "module": "src/shared/button-wrapper.ts"
582
+ }
520
583
  },
521
584
  {
522
585
  "kind": "method",
523
- "name": "handleLeadingIconSlotChange",
524
- "privacy": "private"
586
+ "name": "focus",
587
+ "inheritedFrom": {
588
+ "name": "UmButtonWrapper",
589
+ "module": "src/shared/button-wrapper.ts"
590
+ }
525
591
  },
526
592
  {
527
593
  "kind": "method",
528
- "name": "handleTrailingIconSlotChange",
529
- "privacy": "private"
594
+ "name": "blur",
595
+ "inheritedFrom": {
596
+ "name": "UmButtonWrapper",
597
+ "module": "src/shared/button-wrapper.ts"
598
+ }
530
599
  },
531
600
  {
532
- "kind": "field",
533
- "name": "#updateScroll",
534
- "privacy": "private"
601
+ "kind": "method",
602
+ "name": "getAriaLabel",
603
+ "privacy": "protected",
604
+ "return": {
605
+ "type": {
606
+ "text": "string | null"
607
+ }
608
+ },
609
+ "inheritedFrom": {
610
+ "name": "UmButtonWrapper",
611
+ "module": "src/shared/button-wrapper.ts"
612
+ }
535
613
  },
536
614
  {
537
615
  "kind": "method",
538
- "name": "getScrollTop",
616
+ "name": "innerFocusHandler",
539
617
  "privacy": "private",
540
- "static": true,
541
618
  "return": {
542
619
  "type": {
543
- "text": "number"
620
+ "text": "void"
621
+ }
622
+ },
623
+ "inheritedFrom": {
624
+ "name": "UmButtonWrapper",
625
+ "module": "src/shared/button-wrapper.ts"
626
+ }
627
+ },
628
+ {
629
+ "kind": "method",
630
+ "name": "#innerClickHandler",
631
+ "return": {
632
+ "type": {
633
+ "text": "void"
544
634
  }
545
635
  },
546
636
  "parameters": [
547
637
  {
548
- "name": "container",
638
+ "name": "event",
549
639
  "type": {
550
- "text": "HTMLElement & Window"
640
+ "text": "MouseEvent"
551
641
  }
552
642
  }
553
- ]
554
- },
555
- {
556
- "kind": "method",
557
- "name": "setContentHeightProperty",
558
- "privacy": "private"
643
+ ],
644
+ "inheritedFrom": {
645
+ "name": "UmButtonWrapper",
646
+ "module": "src/shared/button-wrapper.ts"
647
+ }
559
648
  }
560
649
  ],
561
650
  "attributes": [
562
651
  {
563
- "name": "has-leading-icon",
564
- "type": {
565
- "text": "boolean"
566
- },
567
- "default": "false",
568
- "description": "Whether the app bar has leading icon or not\n\n_Note:_ Readonly",
569
- "fieldName": "hasLeadingIcon"
570
- },
571
- {
572
- "name": "has-trailing-icon",
652
+ "name": "type",
573
653
  "type": {
574
- "text": "boolean"
654
+ "text": "string"
575
655
  },
576
- "default": "false",
577
- "description": "Whether the app bar has trailing icon or not\n\n_Note:_ Readonly",
578
- "fieldName": "hasTrailingIcon"
656
+ "default": "'submit'",
657
+ "fieldName": "type"
579
658
  },
580
659
  {
581
- "name": "position",
660
+ "name": "value",
582
661
  "type": {
583
- "text": "'fixed' | 'absolute' | 'static'"
662
+ "text": "string"
584
663
  },
585
- "default": "'fixed'",
586
- "fieldName": "position"
664
+ "default": "''",
665
+ "fieldName": "value"
587
666
  },
588
667
  {
589
- "name": "size",
668
+ "name": "disabled",
590
669
  "type": {
591
- "text": "'small' | 'medium' | 'large'"
670
+ "text": "boolean"
592
671
  },
593
- "default": "'small'",
594
- "fieldName": "size"
672
+ "default": "false",
673
+ "description": "Whether the button is disabled or not.",
674
+ "fieldName": "disabled",
675
+ "inheritedFrom": {
676
+ "name": "UmButtonWrapper",
677
+ "module": "src/shared/button-wrapper.ts"
678
+ }
595
679
  },
596
680
  {
597
- "name": "headline",
681
+ "name": "href",
598
682
  "type": {
599
- "text": "string"
683
+ "text": "string | undefined"
600
684
  },
601
- "default": "''",
602
- "fieldName": "headline"
685
+ "description": "The URL that the link button points to.",
686
+ "fieldName": "href",
687
+ "inheritedFrom": {
688
+ "name": "UmButtonWrapper",
689
+ "module": "src/shared/button-wrapper.ts"
690
+ }
603
691
  },
604
692
  {
605
- "name": "scrollContainer",
693
+ "name": "target",
606
694
  "type": {
607
- "text": "'none' | 'window' | string | undefined"
695
+ "text": "string | undefined"
608
696
  },
609
- "fieldName": "scrollContainer"
697
+ "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
698
+ "fieldName": "target",
699
+ "inheritedFrom": {
700
+ "name": "UmButtonWrapper",
701
+ "module": "src/shared/button-wrapper.ts"
702
+ }
610
703
  },
611
704
  {
612
- "name": "container-scrolled",
705
+ "name": "name",
613
706
  "type": {
614
- "text": "boolean"
707
+ "text": "string | undefined"
615
708
  },
616
- "default": "false",
617
- "fieldName": "containerScrolled"
709
+ "fieldName": "name",
710
+ "inheritedFrom": {
711
+ "name": "UmButtonWrapper",
712
+ "module": "src/shared/button-wrapper.ts"
713
+ }
618
714
  }
619
715
  ],
620
716
  "superclass": {
621
- "name": "LitElement",
622
- "package": "lit"
623
- },
624
- "tagName": "u-top-app-bar",
625
- "customElement": true
717
+ "name": "UmButtonWrapper",
718
+ "module": "/src/shared/button-wrapper.js"
719
+ }
626
720
  }
627
721
  ],
628
722
  "exports": [
629
723
  {
630
724
  "kind": "js",
631
- "name": "UmTopAppBar",
632
- "declaration": {
633
- "name": "UmTopAppBar",
634
- "module": "src/app-bar/top-app-bar.ts"
635
- }
636
- },
637
- {
638
- "kind": "custom-element-definition",
639
- "name": "u-top-app-bar",
725
+ "name": "UmButtonBase",
640
726
  "declaration": {
641
- "name": "UmTopAppBar",
642
- "module": "src/app-bar/top-app-bar.ts"
727
+ "name": "UmButtonBase",
728
+ "module": "src/button/button-base.ts"
643
729
  }
644
730
  }
645
731
  ]
646
732
  },
647
733
  {
648
734
  "kind": "javascript-module",
649
- "path": "src/card/card-content.styles.ts",
735
+ "path": "src/button/button-set.styles.ts",
650
736
  "declarations": [
651
737
  {
652
738
  "kind": "variable",
653
739
  "name": "styles",
654
- "default": "css `\n :host {\n display: block;\n }\n\n :host(:has(slot > *)) {\n display: none;\n }\n\n :host([has-content]) {\n padding: var(--u-card-padding, 16px);\n }\n\n slot {\n border-radius: inherit;\n }\n`"
740
+ "default": "css `\n :host([stack][alignment=start]) {\n align-items: flex-start;\n }\n\n :host([stack][alignment=center]) {\n align-items: center;\n }\n\n :host([stack][alignment=end]) {\n align-items: flex-end;\n }\n\n :host([stack]) {\n flex-direction: column;\n justify-content: flex-start;\n }\n`"
655
741
  }
656
742
  ],
657
743
  "exports": [
@@ -660,89 +746,106 @@
660
746
  "name": "styles",
661
747
  "declaration": {
662
748
  "name": "styles",
663
- "module": "src/card/card-content.styles.ts"
749
+ "module": "src/button/button-set.styles.ts"
664
750
  }
665
751
  }
666
752
  ]
667
753
  },
668
754
  {
669
755
  "kind": "javascript-module",
670
- "path": "src/card/card-content.ts",
756
+ "path": "src/button/button-set.ts",
671
757
  "declarations": [
672
758
  {
673
759
  "kind": "class",
674
760
  "description": "",
675
- "name": "UmCardContent",
761
+ "name": "UmButtonSet",
676
762
  "members": [
677
763
  {
678
764
  "kind": "field",
679
- "name": "hasContent",
765
+ "name": "stack",
680
766
  "type": {
681
767
  "text": "boolean"
682
768
  },
683
769
  "default": "false",
684
- "attribute": "has-content",
770
+ "description": "Whether to render the buttons stacked or not",
771
+ "attribute": "stack",
685
772
  "reflects": true
686
773
  },
687
774
  {
688
- "kind": "method",
689
- "name": "handleSlotChange",
690
- "privacy": "private",
691
- "parameters": [
692
- {
693
- "name": "e",
694
- "type": {
695
- "text": "Event"
696
- }
697
- }
698
- ]
775
+ "kind": "field",
776
+ "name": "alignment",
777
+ "type": {
778
+ "text": "'start' | 'center' | 'end'"
779
+ },
780
+ "default": "'end'",
781
+ "description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
782
+ "attribute": "alignment",
783
+ "reflects": true,
784
+ "inheritedFrom": {
785
+ "name": "UmSetBase",
786
+ "module": "src/shared/sets/set-base.ts"
787
+ }
699
788
  }
700
789
  ],
701
790
  "attributes": [
702
791
  {
703
- "name": "has-content",
792
+ "name": "stack",
704
793
  "type": {
705
794
  "text": "boolean"
706
795
  },
707
796
  "default": "false",
708
- "fieldName": "hasContent"
797
+ "description": "Whether to render the buttons stacked or not",
798
+ "fieldName": "stack"
799
+ },
800
+ {
801
+ "name": "alignment",
802
+ "type": {
803
+ "text": "'start' | 'center' | 'end'"
804
+ },
805
+ "default": "'start'",
806
+ "description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
807
+ "fieldName": "alignment",
808
+ "inheritedFrom": {
809
+ "name": "UmSetBase",
810
+ "module": "src/shared/sets/set-base.ts"
811
+ }
709
812
  }
710
813
  ],
711
814
  "superclass": {
712
- "name": "LitElement",
713
- "package": "lit"
815
+ "name": "UmSetBase",
816
+ "module": "/src/shared/sets/set-base.js"
714
817
  },
715
- "tagName": "u-card-content",
818
+ "tagName": "u-button-set",
716
819
  "customElement": true
717
820
  }
718
821
  ],
719
822
  "exports": [
720
823
  {
721
824
  "kind": "js",
722
- "name": "UmCardContent",
825
+ "name": "UmButtonSet",
723
826
  "declaration": {
724
- "name": "UmCardContent",
725
- "module": "src/card/card-content.ts"
827
+ "name": "UmButtonSet",
828
+ "module": "src/button/button-set.ts"
726
829
  }
727
830
  },
728
831
  {
729
832
  "kind": "custom-element-definition",
730
- "name": "u-card-content",
833
+ "name": "u-button-set",
731
834
  "declaration": {
732
- "name": "UmCardContent",
733
- "module": "src/card/card-content.ts"
835
+ "name": "UmButtonSet",
836
+ "module": "src/button/button-set.ts"
734
837
  }
735
838
  }
736
839
  ]
737
840
  },
738
841
  {
739
842
  "kind": "javascript-module",
740
- "path": "src/card/card-media.styles.ts",
843
+ "path": "src/button/button.styles.ts",
741
844
  "declarations": [
742
845
  {
743
846
  "kind": "variable",
744
847
  "name": "styles",
745
- "default": "css `\n :host {\n display: block;\n aspect-ratio: 1;\n border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n }\n\n :host([wide]) {\n aspect-ratio: 16/9;\n }\n`"
848
+ "default": "css `\n :host {\n --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n --_common-button-height: var(--u-common-button-height, 2.5rem);\n --_common-button-padding: var(--u-common-button-padding, 24px);\n --_common-button-icon-size: var(--u-common-button-icon-size, 1.125rem);\n --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n --_common-button-icon-margin: var(--u-common-button-icon-margin, 8px);\n border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n height: var(--u-common-button-height, 40px);\n font-size: var(--u-common-button-font-size);\n font-weight: var(--u-common-button-font-weight);\n padding-inline: var(--_common-button-padding);\n box-sizing: border-box;\n }\n\n :host([variant=filled]),\n :host([variant=filled][color=primary]) {\n background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=secondary]) {\n background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=tertiary]) {\n background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=error]) {\n background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n }\n\n :host([variant=tonal]) {\n background-color: var(--u-tonal-button-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([variant=elevated]) {\n background-color: var(--u-elevated-button-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:hover:not(:focus-within):not(:active)),\n :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n }\n }\n :host([variant=text]) {\n color: var(--u-text-button-text-color, var(--_color-primary));\n }\n\n :host([variant=outlined]) {\n color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));\n border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n }\n\n :host([variant=elevated]) {\n --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n color: var(--u-elevated-button-text-color, var(--_color-primary));\n }\n\n :host([disabled][variant=outlined]) {\n background-color: transparent !important;\n border-color: var(--u-outlined-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-button-disabled-border-opacity, 0.12))) !important;\n }\n\n @media (hover: hover) {\n :host([variant=elevated]:hover) {\n --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n }\n }\n :host([has-icon]) {\n padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n }\n\n :host([has-icon][trailing-icon]) {\n padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n }\n\n :host(:not([has-icon])) .icon {\n display: none;\n }\n\n .icon {\n font-size: var(--_common-button-icon-size);\n margin-inline-end: var(--_common-button-icon-margin);\n }\n\n :host([trailing-icon]) .icon {\n margin-inline: var(--_common-button-icon-margin) 0;\n }\n`"
746
849
  }
747
850
  ],
748
851
  "exports": [
@@ -751,178 +854,89 @@
751
854
  "name": "styles",
752
855
  "declaration": {
753
856
  "name": "styles",
754
- "module": "src/card/card-media.styles.ts"
857
+ "module": "src/button/button.styles.ts"
755
858
  }
756
859
  }
757
860
  ]
758
861
  },
759
862
  {
760
863
  "kind": "javascript-module",
761
- "path": "src/card/card-media.ts",
864
+ "path": "src/button/button.ts",
762
865
  "declarations": [
763
866
  {
764
867
  "kind": "class",
765
868
  "description": "",
766
- "name": "UmCardMedia",
869
+ "name": "UmButton",
767
870
  "members": [
768
871
  {
769
872
  "kind": "field",
770
- "name": "wide",
873
+ "name": "variant",
874
+ "type": {
875
+ "text": "UmButtonVariant"
876
+ },
877
+ "default": "'filled'",
878
+ "description": "The Button variant to render",
879
+ "attribute": "variant",
880
+ "reflects": true
881
+ },
882
+ {
883
+ "kind": "field",
884
+ "name": "color",
885
+ "type": {
886
+ "text": "UmButtonColor"
887
+ },
888
+ "description": "The Button color\n\n1",
889
+ "attribute": "color",
890
+ "reflects": true
891
+ },
892
+ {
893
+ "kind": "field",
894
+ "name": "trailingIcon",
771
895
  "type": {
772
896
  "text": "boolean"
773
897
  },
774
898
  "default": "false",
775
- "attribute": "wide",
899
+ "attribute": "trailing-icon",
776
900
  "reflects": true
777
- }
778
- ],
779
- "attributes": [
901
+ },
780
902
  {
781
- "name": "wide",
903
+ "kind": "field",
904
+ "name": "hasIcon",
782
905
  "type": {
783
906
  "text": "boolean"
784
907
  },
785
908
  "default": "false",
786
- "fieldName": "wide"
787
- }
788
- ],
789
- "superclass": {
790
- "name": "LitElement",
791
- "package": "lit"
792
- },
793
- "tagName": "u-card-media",
794
- "customElement": true
795
- }
796
- ],
797
- "exports": [
798
- {
799
- "kind": "js",
800
- "name": "UmCardMedia",
801
- "declaration": {
802
- "name": "UmCardMedia",
803
- "module": "src/card/card-media.ts"
804
- }
805
- },
806
- {
807
- "kind": "custom-element-definition",
808
- "name": "u-card-media",
809
- "declaration": {
810
- "name": "UmCardMedia",
811
- "module": "src/card/card-media.ts"
812
- }
813
- }
814
- ]
815
- },
816
- {
817
- "kind": "javascript-module",
818
- "path": "src/card/card.styles.ts",
819
- "declarations": [
820
- {
821
- "kind": "variable",
822
- "name": "styles",
823
- "default": "css `\n :host {\n display: block;\n position: relative;\n border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n }\n\n :host([variant=elevated]) {\n --u-current-bg-color: var(--u-card-elevated-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n background-color: var(--u-current-bg-color);\n }\n :host([variant=elevated]) u-elevation {\n --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n }\n\n :host([variant=filled]) {\n --u-current-bg-color: var(--u-card-filled-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));\n background-color: var(--u-current-bg-color);\n }\n\n :host([variant=outlined]) {\n border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n }\n\n u-card-content,\n slot {\n border-radius: inherit;\n }\n`"
824
- }
825
- ],
826
- "exports": [
827
- {
828
- "kind": "js",
829
- "name": "styles",
830
- "declaration": {
831
- "name": "styles",
832
- "module": "src/card/card.styles.ts"
833
- }
834
- }
835
- ]
836
- },
837
- {
838
- "kind": "javascript-module",
839
- "path": "src/card/card.ts",
840
- "declarations": [
841
- {
842
- "kind": "class",
843
- "description": "",
844
- "name": "UmCard",
845
- "members": [
846
- {
847
- "kind": "field",
848
- "name": "variant",
849
- "type": {
850
- "text": "UmCardVariant"
851
- },
852
- "default": "'filled'",
853
- "description": "The Card variant to render.",
854
- "attribute": "variant",
909
+ "description": "Whether the button has icon or not\n\n_Note:_ Readonly",
910
+ "attribute": "has-icon",
855
911
  "reflects": true
856
- }
857
- ],
858
- "attributes": [
912
+ },
859
913
  {
860
- "name": "variant",
861
- "type": {
862
- "text": "UmCardVariant"
914
+ "kind": "method",
915
+ "name": "renderContent",
916
+ "privacy": "protected",
917
+ "return": {
918
+ "type": {
919
+ "text": "HTMLTemplateResult"
920
+ }
863
921
  },
864
- "default": "'filled'",
865
- "description": "The Card variant to render.",
866
- "fieldName": "variant"
867
- }
868
- ],
869
- "superclass": {
870
- "name": "LitElement",
871
- "package": "lit"
872
- },
873
- "tagName": "u-card",
874
- "customElement": true
875
- }
876
- ],
877
- "exports": [
878
- {
879
- "kind": "js",
880
- "name": "UmCard",
881
- "declaration": {
882
- "name": "UmCard",
883
- "module": "src/card/card.ts"
884
- }
885
- },
886
- {
887
- "kind": "custom-element-definition",
888
- "name": "u-card",
889
- "declaration": {
890
- "name": "UmCard",
891
- "module": "src/card/card.ts"
892
- }
893
- }
894
- ]
895
- },
896
- {
897
- "kind": "javascript-module",
898
- "path": "src/button/button-base.styles.ts",
899
- "declarations": [
900
- {
901
- "kind": "variable",
902
- "name": "styles",
903
- "default": "css `\n .icon {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 1em;\n height: 1em;\n line-height: 1em;\n }\n\n ::slotted([slot=icon]) {\n display: inline-block;\n }\n`"
904
- }
905
- ],
906
- "exports": [
907
- {
908
- "kind": "js",
909
- "name": "styles",
910
- "declaration": {
911
- "name": "styles",
912
- "module": "src/button/button-base.styles.ts"
913
- }
914
- }
915
- ]
916
- },
917
- {
918
- "kind": "javascript-module",
919
- "path": "src/button/button-base.ts",
920
- "declarations": [
921
- {
922
- "kind": "class",
923
- "description": "",
924
- "name": "UmButtonBase",
925
- "members": [
922
+ "inheritedFrom": {
923
+ "name": "UmButtonWrapper",
924
+ "module": "src/shared/button-wrapper.ts"
925
+ }
926
+ },
927
+ {
928
+ "kind": "method",
929
+ "name": "handleSlotChange",
930
+ "privacy": "private",
931
+ "parameters": [
932
+ {
933
+ "name": "e",
934
+ "type": {
935
+ "text": "Event"
936
+ }
937
+ }
938
+ ]
939
+ },
926
940
  {
927
941
  "kind": "field",
928
942
  "name": "formAssociated",
@@ -930,7 +944,11 @@
930
944
  "text": "boolean"
931
945
  },
932
946
  "static": true,
933
- "default": "true"
947
+ "default": "true",
948
+ "inheritedFrom": {
949
+ "name": "UmButtonBase",
950
+ "module": "src/button/button-base.ts"
951
+ }
934
952
  },
935
953
  {
936
954
  "kind": "field",
@@ -939,7 +957,11 @@
939
957
  "text": "string"
940
958
  },
941
959
  "default": "'submit'",
942
- "attribute": "type"
960
+ "attribute": "type",
961
+ "inheritedFrom": {
962
+ "name": "UmButtonBase",
963
+ "module": "src/button/button-base.ts"
964
+ }
943
965
  },
944
966
  {
945
967
  "kind": "field",
@@ -949,13 +971,21 @@
949
971
  },
950
972
  "default": "''",
951
973
  "attribute": "value",
952
- "reflects": true
974
+ "reflects": true,
975
+ "inheritedFrom": {
976
+ "name": "UmButtonBase",
977
+ "module": "src/button/button-base.ts"
978
+ }
953
979
  },
954
980
  {
955
981
  "kind": "field",
956
982
  "name": "form",
957
983
  "type": {
958
984
  "text": "HTMLFormElement | null"
985
+ },
986
+ "inheritedFrom": {
987
+ "name": "UmButtonBase",
988
+ "module": "src/button/button-base.ts"
959
989
  }
960
990
  },
961
991
  {
@@ -964,6 +994,10 @@
964
994
  "privacy": "private",
965
995
  "type": {
966
996
  "text": "ElementInternals"
997
+ },
998
+ "inheritedFrom": {
999
+ "name": "UmButtonBase",
1000
+ "module": "src/button/button-base.ts"
967
1001
  }
968
1002
  },
969
1003
  {
@@ -1118,20 +1152,6 @@
1118
1152
  "module": "src/shared/button-wrapper.ts"
1119
1153
  }
1120
1154
  },
1121
- {
1122
- "kind": "method",
1123
- "name": "renderContent",
1124
- "privacy": "protected",
1125
- "return": {
1126
- "type": {
1127
- "text": "HTMLTemplateResult"
1128
- }
1129
- },
1130
- "inheritedFrom": {
1131
- "name": "UmButtonWrapper",
1132
- "module": "src/shared/button-wrapper.ts"
1133
- }
1134
- },
1135
1155
  {
1136
1156
  "kind": "method",
1137
1157
  "name": "focus",
@@ -1199,13 +1219,51 @@
1199
1219
  }
1200
1220
  ],
1201
1221
  "attributes": [
1222
+ {
1223
+ "name": "variant",
1224
+ "type": {
1225
+ "text": "UmButtonVariant"
1226
+ },
1227
+ "default": "'filled'",
1228
+ "description": "The Button variant to render",
1229
+ "fieldName": "variant"
1230
+ },
1231
+ {
1232
+ "name": "color",
1233
+ "type": {
1234
+ "text": "UmButtonColor"
1235
+ },
1236
+ "description": "The Button color\n\n1",
1237
+ "fieldName": "color"
1238
+ },
1239
+ {
1240
+ "name": "trailing-icon",
1241
+ "type": {
1242
+ "text": "boolean"
1243
+ },
1244
+ "default": "false",
1245
+ "fieldName": "trailingIcon"
1246
+ },
1247
+ {
1248
+ "name": "has-icon",
1249
+ "type": {
1250
+ "text": "boolean"
1251
+ },
1252
+ "default": "false",
1253
+ "description": "Whether the button has icon or not\n\n_Note:_ Readonly",
1254
+ "fieldName": "hasIcon"
1255
+ },
1202
1256
  {
1203
1257
  "name": "type",
1204
1258
  "type": {
1205
1259
  "text": "string"
1206
1260
  },
1207
1261
  "default": "'submit'",
1208
- "fieldName": "type"
1262
+ "fieldName": "type",
1263
+ "inheritedFrom": {
1264
+ "name": "UmButtonBase",
1265
+ "module": "src/button/button-base.ts"
1266
+ }
1209
1267
  },
1210
1268
  {
1211
1269
  "name": "value",
@@ -1213,7 +1271,11 @@
1213
1271
  "text": "string"
1214
1272
  },
1215
1273
  "default": "''",
1216
- "fieldName": "value"
1274
+ "fieldName": "value",
1275
+ "inheritedFrom": {
1276
+ "name": "UmButtonBase",
1277
+ "module": "src/button/button-base.ts"
1278
+ }
1217
1279
  },
1218
1280
  {
1219
1281
  "name": "disabled",
@@ -1265,30 +1327,40 @@
1265
1327
  }
1266
1328
  ],
1267
1329
  "superclass": {
1268
- "name": "UmButtonWrapper",
1269
- "module": "/src/shared/button-wrapper.js"
1270
- }
1330
+ "name": "UmButtonBase",
1331
+ "module": "/src/button/button-base.js"
1332
+ },
1333
+ "tagName": "u-button",
1334
+ "customElement": true
1271
1335
  }
1272
1336
  ],
1273
1337
  "exports": [
1274
1338
  {
1275
1339
  "kind": "js",
1276
- "name": "UmButtonBase",
1340
+ "name": "UmButton",
1277
1341
  "declaration": {
1278
- "name": "UmButtonBase",
1279
- "module": "src/button/button-base.ts"
1342
+ "name": "UmButton",
1343
+ "module": "src/button/button.ts"
1344
+ }
1345
+ },
1346
+ {
1347
+ "kind": "custom-element-definition",
1348
+ "name": "u-button",
1349
+ "declaration": {
1350
+ "name": "UmButton",
1351
+ "module": "src/button/button.ts"
1280
1352
  }
1281
1353
  }
1282
1354
  ]
1283
1355
  },
1284
1356
  {
1285
1357
  "kind": "javascript-module",
1286
- "path": "src/button/button-set.styles.ts",
1358
+ "path": "src/button/fab.styles.ts",
1287
1359
  "declarations": [
1288
1360
  {
1289
1361
  "kind": "variable",
1290
1362
  "name": "styles",
1291
- "default": "css `\n :host([stack][alignment=start]) {\n align-items: flex-start;\n }\n\n :host([stack][alignment=center]) {\n align-items: center;\n }\n\n :host([stack][alignment=end]) {\n align-items: flex-end;\n }\n\n :host([stack]) {\n flex-direction: column;\n justify-content: flex-start;\n }\n`"
1363
+ "default": "css `\n :host {\n aspect-ratio: 1;\n --u-elevation-level: var(--u-fab-button-elevation-level, 3);\n }\n\n :host([lowered]) {\n --u-elevation-level: var(--u-fab-button-elevation-level, 1);\n }\n\n @media (hover: hover) {\n :host(:hover:not(:focus-within):not(:active)) {\n --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n }\n :host(:hover:not(:focus-within):not(:active)[lowered]) {\n --u-elevation-level: var(--u-fab-button-elevation-level, 2);\n }\n }\n @media (hover: hover) {\n :host(:hover:not(:focus-within):not(:active)) {\n --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n }\n }\n :host([size=small]) {\n width: var(--u-fab-button-small-size, 40px);\n border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-medium, 12px));\n }\n\n :host([size=large]) {\n width: var(--u-fab-button-medium-size, 96px);\n border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-extra-large, 28px));\n }\n\n :host([extended]),\n :host([size=medium]) {\n width: var(--u-fab-button-medium-size, 56px);\n border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-large, 16px));\n }\n\n :host([size=large]) .icon {\n font-size: var(--u-fab-button-icon-size, 2rem);\n }\n\n :host([extended]) .icon,\n :host([size=small]) .icon,\n :host([size=medium]) .icon {\n font-size: var(--u-fab-button-icon-size, 1.5rem);\n }\n\n :host([extended]) {\n width: auto;\n height: var(--u-extended-fab-button-height, 56px);\n aspect-ratio: auto;\n min-width: var(--u-extended-fab-button-min-width, 80px);\n padding-inline: var(--u-extended-fab-button-padding, 16px 24px);\n }\n\n :host([extended]) .icon {\n margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);\n }\n\n :host([color=primary]) {\n background-color: var(--u-fab-button-primary-bg-color, var(--u-color-primary-container, rgb(234, 221, 255)));\n color: var(--u-fab-button-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));\n }\n\n :host([color=secondary]) {\n background-color: var(--u-fab-button-secondary-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-fab-button-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([color=tertiary]) {\n background-color: var(--u-fab-button-tertiary-bg-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));\n color: var(--u-fab-button-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));\n }\n\n :host([color=branded]),\n :host([color=surface]) {\n background-color: var(--u-fab-button-surface-bg-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));\n color: var(--u-fab-button-surface-text-color, var(--_color-primary));\n }\n\n :host([color=branded][lowered]),\n :host([color=surface][lowered]) {\n background-color: var(--u-fab-button-surface-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n }\n`"
1292
1364
  }
1293
1365
  ],
1294
1366
  "exports": [
@@ -1297,168 +1369,71 @@
1297
1369
  "name": "styles",
1298
1370
  "declaration": {
1299
1371
  "name": "styles",
1300
- "module": "src/button/button-set.styles.ts"
1372
+ "module": "src/button/fab.styles.ts"
1301
1373
  }
1302
1374
  }
1303
1375
  ]
1304
1376
  },
1305
1377
  {
1306
1378
  "kind": "javascript-module",
1307
- "path": "src/button/button-set.ts",
1379
+ "path": "src/button/fab.ts",
1308
1380
  "declarations": [
1309
1381
  {
1310
1382
  "kind": "class",
1311
1383
  "description": "",
1312
- "name": "UmButtonSet",
1384
+ "name": "UmFab",
1313
1385
  "members": [
1314
1386
  {
1315
1387
  "kind": "field",
1316
- "name": "stack",
1388
+ "name": "color",
1317
1389
  "type": {
1318
- "text": "boolean"
1390
+ "text": "UmFabColor"
1319
1391
  },
1320
- "default": "false",
1321
- "description": "Whether to render the buttons stacked or not",
1322
- "attribute": "stack",
1392
+ "default": "'primary'",
1393
+ "description": "The FAB color variant to render.",
1394
+ "attribute": "color",
1323
1395
  "reflects": true
1324
1396
  },
1325
1397
  {
1326
1398
  "kind": "field",
1327
- "name": "alignment",
1328
- "type": {
1329
- "text": "'start' | 'center' | 'end'"
1330
- },
1331
- "default": "'end'",
1332
- "description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
1333
- "attribute": "alignment",
1334
- "reflects": true,
1335
- "inheritedFrom": {
1336
- "name": "UmSetBase",
1337
- "module": "src/shared/sets/set-base.ts"
1338
- }
1339
- }
1340
- ],
1341
- "attributes": [
1342
- {
1343
- "name": "stack",
1344
- "type": {
1345
- "text": "boolean"
1346
- },
1347
- "default": "false",
1348
- "description": "Whether to render the buttons stacked or not",
1349
- "fieldName": "stack"
1350
- },
1351
- {
1352
- "name": "alignment",
1353
- "type": {
1354
- "text": "'start' | 'center' | 'end'"
1355
- },
1356
- "default": "'start'",
1357
- "description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
1358
- "fieldName": "alignment",
1359
- "inheritedFrom": {
1360
- "name": "UmSetBase",
1361
- "module": "src/shared/sets/set-base.ts"
1362
- }
1363
- }
1364
- ],
1365
- "superclass": {
1366
- "name": "UmSetBase",
1367
- "module": "/src/shared/sets/set-base.js"
1368
- },
1369
- "tagName": "u-button-set",
1370
- "customElement": true
1371
- }
1372
- ],
1373
- "exports": [
1374
- {
1375
- "kind": "js",
1376
- "name": "UmButtonSet",
1377
- "declaration": {
1378
- "name": "UmButtonSet",
1379
- "module": "src/button/button-set.ts"
1380
- }
1381
- },
1382
- {
1383
- "kind": "custom-element-definition",
1384
- "name": "u-button-set",
1385
- "declaration": {
1386
- "name": "UmButtonSet",
1387
- "module": "src/button/button-set.ts"
1388
- }
1389
- }
1390
- ]
1391
- },
1392
- {
1393
- "kind": "javascript-module",
1394
- "path": "src/button/button.styles.ts",
1395
- "declarations": [
1396
- {
1397
- "kind": "variable",
1398
- "name": "styles",
1399
- "default": "css `\n :host {\n --u-common-button-line-height: var(--u-label-large-line-height, 1.25rem);\n --u-common-button-font-size: var(--u-label-large-font-size, 0.875rem);\n --u-common-button-font-weight: var(--u-font-weight-medium, 500);\n --_common-button-height: var(--u-common-button-height, 2.5rem);\n --_common-button-padding: var(--u-common-button-padding, 24px);\n --_common-button-icon-size: var(--u-common-button-icon-size, 1.125rem);\n --_common-button-icon-padding: var(--u-common-button-icon-padding, 16px);\n --_common-button-icon-margin: var(--u-common-button-icon-margin, 8px);\n border-radius: var(--u-common-button-shape-corner, var(--u-shape-corner-full, 9999px));\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n height: var(--u-common-button-height, 40px);\n font-size: var(--u-common-button-font-size);\n font-weight: var(--u-common-button-font-weight);\n padding-inline: var(--_common-button-padding);\n box-sizing: border-box;\n }\n\n :host([variant=filled]),\n :host([variant=filled][color=primary]) {\n background-color: var(--u-filled-button-primary-container-color, var(--_color-primary));\n color: var(--u-filled-button-primary-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=secondary]) {\n background-color: var(--u-filled-button-secondary-container-color, var(--u-color-secondary, rgb(98, 91, 113)));\n color: var(--u-filled-button-secondary-text-color, var(--u-color-on-secondary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=tertiary]) {\n background-color: var(--u-filled-button-tertiary-container-color, var(--u-color-tertiary, rgb(125, 82, 96)));\n color: var(--u-filled-button-tertiary-text-color, var(--u-color-on-tertiary, rgb(255, 255, 255)));\n }\n\n :host([variant=filled][color=error]) {\n background-color: var(--u-filled-button-error-container-color, var(--u-color-error, rgb(179, 38, 30)));\n color: var(--u-filled-button-error-text-color, var(--u-color-on-error, rgb(255, 255, 255)));\n }\n\n :host([variant=tonal]) {\n background-color: var(--u-tonal-button-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([variant=elevated]) {\n background-color: var(--u-elevated-button-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n color: var(--u-tonal-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n @media (hover: hover) {\n :host([variant=filled]:hover:not(:focus-within):not(:active)),\n :host([variant=tonal]:hover:not(:focus-within):not(:active)) {\n --u-elevation-level: var(--u-filled-button-hover-elevation-level, 1);\n }\n }\n :host([variant=text]) {\n color: var(--u-text-button-text-color, var(--_color-primary));\n }\n\n :host([variant=outlined]) {\n color: var(--u-outlined-button-text-color, var(--u-text-button-text-color, var(--_color-primary)));\n border: 1px solid var(--u-outlined-button-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n }\n\n :host([variant=elevated]) {\n --u-elevation-level: var(--u-elevated-button-elevation-level, 1);\n color: var(--u-elevated-button-text-color, var(--_color-primary));\n }\n\n :host([disabled][variant=outlined]) {\n background-color: transparent !important;\n border-color: var(--u-outlined-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-button-disabled-border-opacity, 0.12))) !important;\n }\n\n @media (hover: hover) {\n :host([variant=elevated]:hover) {\n --u-elevation-level: var(--u-elevated-button-hover-elevation-level, 2);\n }\n }\n :host([has-icon]) {\n padding-inline: var(--_common-button-icon-padding) var(--_common-button-padding);\n }\n\n :host([has-icon][trailing-icon]) {\n padding-inline: var(--_common-button-padding) var(--_common-button-icon-padding);\n }\n\n :host(:not([has-icon])) .icon {\n display: none;\n }\n\n .icon {\n font-size: var(--_common-button-icon-size);\n margin-inline-end: var(--_common-button-icon-margin);\n }\n\n :host([trailing-icon]) .icon {\n margin-inline: var(--_common-button-icon-margin) 0;\n }\n`"
1400
- }
1401
- ],
1402
- "exports": [
1403
- {
1404
- "kind": "js",
1405
- "name": "styles",
1406
- "declaration": {
1407
- "name": "styles",
1408
- "module": "src/button/button.styles.ts"
1409
- }
1410
- }
1411
- ]
1412
- },
1413
- {
1414
- "kind": "javascript-module",
1415
- "path": "src/button/button.ts",
1416
- "declarations": [
1417
- {
1418
- "kind": "class",
1419
- "description": "",
1420
- "name": "UmButton",
1421
- "members": [
1422
- {
1423
- "kind": "field",
1424
- "name": "variant",
1399
+ "name": "size",
1425
1400
  "type": {
1426
- "text": "UmButtonVariant"
1401
+ "text": "UmFabSize"
1427
1402
  },
1428
- "default": "'filled'",
1429
- "description": "The Button variant to render",
1430
- "attribute": "variant",
1403
+ "default": "'medium'",
1404
+ "description": "The size of the FAB.",
1405
+ "attribute": "size",
1431
1406
  "reflects": true
1432
1407
  },
1433
1408
  {
1434
1409
  "kind": "field",
1435
- "name": "color",
1410
+ "name": "label",
1436
1411
  "type": {
1437
- "text": "UmButtonColor"
1412
+ "text": "string | null"
1438
1413
  },
1439
- "description": "The Button color\n\n1",
1440
- "attribute": "color",
1414
+ "default": "null",
1415
+ "description": "The text to display the FAB.",
1416
+ "attribute": "label",
1441
1417
  "reflects": true
1442
1418
  },
1443
1419
  {
1444
1420
  "kind": "field",
1445
- "name": "trailingIcon",
1421
+ "name": "lowered",
1446
1422
  "type": {
1447
1423
  "text": "boolean"
1448
1424
  },
1449
1425
  "default": "false",
1450
- "attribute": "trailing-icon",
1426
+ "description": "Lowers the FAB's elevation.",
1427
+ "attribute": "lowered",
1451
1428
  "reflects": true
1452
1429
  },
1453
1430
  {
1454
1431
  "kind": "field",
1455
- "name": "hasIcon",
1432
+ "name": "extended",
1456
1433
  "type": {
1457
1434
  "text": "boolean"
1458
1435
  },
1459
- "default": "false",
1460
- "description": "Whether the button has icon or not\n\n_Note:_ Readonly",
1461
- "attribute": "has-icon",
1436
+ "attribute": "extended",
1462
1437
  "reflects": true
1463
1438
  },
1464
1439
  {
@@ -1475,19 +1450,6 @@
1475
1450
  "module": "src/shared/button-wrapper.ts"
1476
1451
  }
1477
1452
  },
1478
- {
1479
- "kind": "method",
1480
- "name": "handleSlotChange",
1481
- "privacy": "private",
1482
- "parameters": [
1483
- {
1484
- "name": "e",
1485
- "type": {
1486
- "text": "Event"
1487
- }
1488
- }
1489
- ]
1490
- },
1491
1453
  {
1492
1454
  "kind": "field",
1493
1455
  "name": "formAssociated",
@@ -1771,38 +1733,47 @@
1771
1733
  ],
1772
1734
  "attributes": [
1773
1735
  {
1774
- "name": "variant",
1736
+ "name": "color",
1775
1737
  "type": {
1776
- "text": "UmButtonVariant"
1738
+ "text": "UmFabColor"
1777
1739
  },
1778
- "default": "'filled'",
1779
- "description": "The Button variant to render",
1780
- "fieldName": "variant"
1740
+ "default": "'primary'",
1741
+ "description": "The FAB color variant to render.",
1742
+ "fieldName": "color"
1781
1743
  },
1782
1744
  {
1783
- "name": "color",
1745
+ "name": "size",
1784
1746
  "type": {
1785
- "text": "UmButtonColor"
1747
+ "text": "UmFabSize"
1786
1748
  },
1787
- "description": "The Button color\n\n1",
1788
- "fieldName": "color"
1749
+ "default": "'medium'",
1750
+ "description": "The size of the FAB.",
1751
+ "fieldName": "size"
1789
1752
  },
1790
1753
  {
1791
- "name": "trailing-icon",
1754
+ "name": "label",
1755
+ "type": {
1756
+ "text": "string | null"
1757
+ },
1758
+ "default": "null",
1759
+ "description": "The text to display the FAB.",
1760
+ "fieldName": "label"
1761
+ },
1762
+ {
1763
+ "name": "lowered",
1792
1764
  "type": {
1793
1765
  "text": "boolean"
1794
1766
  },
1795
1767
  "default": "false",
1796
- "fieldName": "trailingIcon"
1768
+ "description": "Lowers the FAB's elevation.",
1769
+ "fieldName": "lowered"
1797
1770
  },
1798
1771
  {
1799
- "name": "has-icon",
1772
+ "name": "extended",
1800
1773
  "type": {
1801
1774
  "text": "boolean"
1802
1775
  },
1803
- "default": "false",
1804
- "description": "Whether the button has icon or not\n\n_Note:_ Readonly",
1805
- "fieldName": "hasIcon"
1776
+ "fieldName": "extended"
1806
1777
  },
1807
1778
  {
1808
1779
  "name": "type",
@@ -1881,37 +1852,37 @@
1881
1852
  "name": "UmButtonBase",
1882
1853
  "module": "/src/button/button-base.js"
1883
1854
  },
1884
- "tagName": "u-button",
1855
+ "tagName": "u-fab",
1885
1856
  "customElement": true
1886
1857
  }
1887
1858
  ],
1888
1859
  "exports": [
1889
1860
  {
1890
1861
  "kind": "js",
1891
- "name": "UmButton",
1862
+ "name": "UmFab",
1892
1863
  "declaration": {
1893
- "name": "UmButton",
1894
- "module": "src/button/button.ts"
1864
+ "name": "UmFab",
1865
+ "module": "src/button/fab.ts"
1895
1866
  }
1896
1867
  },
1897
1868
  {
1898
1869
  "kind": "custom-element-definition",
1899
- "name": "u-button",
1870
+ "name": "u-fab",
1900
1871
  "declaration": {
1901
- "name": "UmButton",
1902
- "module": "src/button/button.ts"
1872
+ "name": "UmFab",
1873
+ "module": "src/button/fab.ts"
1903
1874
  }
1904
1875
  }
1905
1876
  ]
1906
1877
  },
1907
1878
  {
1908
1879
  "kind": "javascript-module",
1909
- "path": "src/button/fab.styles.ts",
1880
+ "path": "src/button/icon-button.styles.ts",
1910
1881
  "declarations": [
1911
1882
  {
1912
1883
  "kind": "variable",
1913
1884
  "name": "styles",
1914
- "default": "css `\n :host {\n aspect-ratio: 1;\n --u-elevation-level: var(--u-fab-button-elevation-level, 3);\n }\n\n :host([lowered]) {\n --u-elevation-level: var(--u-fab-button-elevation-level, 1);\n }\n\n @media (hover: hover) {\n :host(:hover:not(:focus-within):not(:active)) {\n --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n }\n :host(:hover:not(:focus-within):not(:active)[lowered]) {\n --u-elevation-level: var(--u-fab-button-elevation-level, 2);\n }\n }\n @media (hover: hover) {\n :host(:hover:not(:focus-within):not(:active)) {\n --u-elevation-level: var(--u-fab-button-hover-elevation-level, 4);\n }\n }\n :host([size=small]) {\n width: var(--u-fab-button-small-size, 40px);\n border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-medium, 12px));\n }\n\n :host([size=large]) {\n width: var(--u-fab-button-medium-size, 96px);\n border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-extra-large, 28px));\n }\n\n :host([extended]),\n :host([size=medium]) {\n width: var(--u-fab-button-medium-size, 56px);\n border-radius: var(--u-fab-button-medium-shape-corner, var(--u-shape-corner-large, 16px));\n }\n\n :host([size=large]) .icon {\n font-size: var(--u-fab-button-icon-size, 2rem);\n }\n\n :host([extended]) .icon,\n :host([size=small]) .icon,\n :host([size=medium]) .icon {\n font-size: var(--u-fab-button-icon-size, 1.5rem);\n }\n\n :host([extended]) {\n width: auto;\n height: var(--u-extended-fab-button-height, 56px);\n aspect-ratio: auto;\n min-width: var(--u-extended-fab-button-min-width, 80px);\n padding-inline: var(--u-extended-fab-button-padding, 16px 24px);\n }\n\n :host([extended]) .icon {\n margin-inline-end: var(--u-extended-fab-button-icon-margin, 12px);\n }\n\n :host([color=primary]) {\n background-color: var(--u-fab-button-primary-bg-color, var(--u-color-primary-container, rgb(234, 221, 255)));\n color: var(--u-fab-button-primary-text-color, var(--u-color-on-primary-container, rgb(33, 0, 93)));\n }\n\n :host([color=secondary]) {\n background-color: var(--u-fab-button-secondary-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-fab-button-secondary-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([color=tertiary]) {\n background-color: var(--u-fab-button-tertiary-bg-color, var(--u-color-tertiary-container, rgb(255, 216, 228)));\n color: var(--u-fab-button-tertiary-text-color, var(--u-color-on-tertiary-container, rgb(49, 17, 29)));\n }\n\n :host([color=branded]),\n :host([color=surface]) {\n background-color: var(--u-fab-button-surface-bg-color, var(--u-color-surface-container-high, rgb(236, 230, 240)));\n color: var(--u-fab-button-surface-text-color, var(--_color-primary));\n }\n\n :host([color=branded][lowered]),\n :host([color=surface][lowered]) {\n background-color: var(--u-fab-button-surface-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n }\n`"
1885
+ "default": "css `\n :host {\n --_icon-button-size: var(--u-icon-button-size, 2.5rem);\n --_color-surface-container-highest: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n width: var(--_icon-button-size);\n height: var(--_icon-button-size);\n border-radius: var(--u-icon-button-shape-corner, 9999px);\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n }\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--u-icon-button-icon-size, 1.5rem);\n }\n .icon.icon-selected {\n display: none;\n }\n\n :host([selected][has-selection-icon]) .icon:not(.icon-selected) {\n display: none;\n }\n :host([selected][has-selection-icon]) .icon.icon-selected {\n display: inline-block;\n }\n\n :host([variant=filled]) {\n background-color: var(--u-filled-icon-button-unselected-bg-color, var(--_color-surface-container-highest));\n color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));\n }\n\n :host([variant=tonal]) {\n background-color: var(--u-total-icon-button-unselected-bg-color, var(--_color-surface-container-highest));\n color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n :host([selected][variant=filled]),\n :host([variant=filled]:not([has-selection-icon])) {\n background-color: var(--u-filled-icon-button-bg-color, var(--_color-primary));\n color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n :host([selected][variant=tonal]),\n :host([variant=tonal]:not([has-selection-icon])) {\n background-color: var(--u-tonal-icon-button-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([variant=standard]),\n :host([variant=outlined]) {\n color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n :host([variant=outlined]) {\n border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n color: var(--u-outlined-icon-button-color, var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n }\n\n :host([selected][variant=outlined]) {\n border: none;\n background-color: var(--u-outlined-icon-button-selected-bg-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n }\n\n :host([selected][variant=standard]) {\n color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));\n background-color: var(--u-standard-icon-button-selected-bg-color, transparent);\n }\n\n :host([disabled][variant=outlined]) {\n background-color: transparent !important;\n border-color: var(--u-outlined-icon-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-icon-button-disabled-border-opacity, 0.12))) !important;\n }\n`"
1915
1886
  }
1916
1887
  ],
1917
1888
  "exports": [
@@ -1920,72 +1891,78 @@
1920
1891
  "name": "styles",
1921
1892
  "declaration": {
1922
1893
  "name": "styles",
1923
- "module": "src/button/fab.styles.ts"
1894
+ "module": "src/button/icon-button.styles.ts"
1924
1895
  }
1925
1896
  }
1926
1897
  ]
1927
1898
  },
1928
1899
  {
1929
1900
  "kind": "javascript-module",
1930
- "path": "src/button/fab.ts",
1901
+ "path": "src/button/icon-button.ts",
1931
1902
  "declarations": [
1932
1903
  {
1933
1904
  "kind": "class",
1934
1905
  "description": "",
1935
- "name": "UmFab",
1906
+ "name": "UmIconButton",
1936
1907
  "members": [
1937
1908
  {
1938
1909
  "kind": "field",
1939
- "name": "color",
1910
+ "name": "variant",
1940
1911
  "type": {
1941
- "text": "UmFabColor"
1912
+ "text": "UmIconButtonVariant"
1942
1913
  },
1943
- "default": "'primary'",
1944
- "description": "The FAB color variant to render.",
1945
- "attribute": "color",
1914
+ "default": "'standard'",
1915
+ "attribute": "variant",
1946
1916
  "reflects": true
1947
1917
  },
1948
1918
  {
1949
1919
  "kind": "field",
1950
- "name": "size",
1920
+ "name": "toggle",
1951
1921
  "type": {
1952
- "text": "UmFabSize"
1922
+ "text": "boolean"
1953
1923
  },
1954
- "default": "'medium'",
1955
- "description": "The size of the FAB.",
1956
- "attribute": "size",
1957
- "reflects": true
1924
+ "default": "false",
1925
+ "description": "When true, the button will toggle between selected and unselected\nstates",
1926
+ "attribute": "toggle"
1958
1927
  },
1959
1928
  {
1960
1929
  "kind": "field",
1961
- "name": "label",
1930
+ "name": "hasSelectionIcon",
1962
1931
  "type": {
1963
- "text": "string | null"
1932
+ "text": "boolean"
1964
1933
  },
1965
- "default": "null",
1966
- "description": "The text to display the FAB.",
1967
- "attribute": "label",
1934
+ "default": "false",
1935
+ "attribute": "has-selection-icon",
1968
1936
  "reflects": true
1969
1937
  },
1970
1938
  {
1971
1939
  "kind": "field",
1972
- "name": "lowered",
1940
+ "name": "selected",
1973
1941
  "type": {
1974
1942
  "text": "boolean"
1975
1943
  },
1976
1944
  "default": "false",
1977
- "description": "Lowers the FAB's elevation.",
1978
- "attribute": "lowered",
1945
+ "description": "Sets the selected state. When false, displays the default icon. When true,\ndisplays the selected icon, or the default icon If no `slot=\"selected\"`\nicon is provided.",
1946
+ "attribute": "selected",
1979
1947
  "reflects": true
1980
1948
  },
1981
1949
  {
1982
1950
  "kind": "field",
1983
- "name": "extended",
1951
+ "name": "ariaLabelSelected",
1984
1952
  "type": {
1985
- "text": "boolean"
1953
+ "text": "string"
1986
1954
  },
1987
- "attribute": "extended",
1988
- "reflects": true
1955
+ "default": "''",
1956
+ "description": "The `aria-label` of the button when the button is toggleable and selected.",
1957
+ "attribute": "aria-label-selected"
1958
+ },
1959
+ {
1960
+ "kind": "field",
1961
+ "name": "selectedIcons",
1962
+ "type": {
1963
+ "text": "HTMLElement[]"
1964
+ },
1965
+ "privacy": "private"
1989
1966
  },
1990
1967
  {
1991
1968
  "kind": "method",
@@ -2002,7 +1979,48 @@
2002
1979
  }
2003
1980
  },
2004
1981
  {
2005
- "kind": "field",
1982
+ "kind": "method",
1983
+ "name": "handleClick",
1984
+ "privacy": "protected",
1985
+ "return": {
1986
+ "type": {
1987
+ "text": "void"
1988
+ }
1989
+ },
1990
+ "parameters": [
1991
+ {
1992
+ "name": "event",
1993
+ "type": {
1994
+ "text": "UIEvent"
1995
+ }
1996
+ }
1997
+ ],
1998
+ "inheritedFrom": {
1999
+ "name": "UmButtonWrapper",
2000
+ "module": "src/shared/button-wrapper.ts"
2001
+ }
2002
+ },
2003
+ {
2004
+ "kind": "method",
2005
+ "name": "getAriaLabel",
2006
+ "privacy": "protected",
2007
+ "return": {
2008
+ "type": {
2009
+ "text": "string | null"
2010
+ }
2011
+ },
2012
+ "inheritedFrom": {
2013
+ "name": "UmButtonWrapper",
2014
+ "module": "src/shared/button-wrapper.ts"
2015
+ }
2016
+ },
2017
+ {
2018
+ "kind": "method",
2019
+ "name": "handleSlotChange",
2020
+ "privacy": "private"
2021
+ },
2022
+ {
2023
+ "kind": "field",
2006
2024
  "name": "formAssociated",
2007
2025
  "type": {
2008
2026
  "text": "boolean"
@@ -2064,28 +2082,6 @@
2064
2082
  "module": "src/button/button-base.ts"
2065
2083
  }
2066
2084
  },
2067
- {
2068
- "kind": "method",
2069
- "name": "handleClick",
2070
- "privacy": "protected",
2071
- "return": {
2072
- "type": {
2073
- "text": "void"
2074
- }
2075
- },
2076
- "parameters": [
2077
- {
2078
- "name": "_",
2079
- "type": {
2080
- "text": "UIEvent"
2081
- }
2082
- }
2083
- ],
2084
- "inheritedFrom": {
2085
- "name": "UmButtonWrapper",
2086
- "module": "src/shared/button-wrapper.ts"
2087
- }
2088
- },
2089
2085
  {
2090
2086
  "kind": "field",
2091
2087
  "name": "disabled",
@@ -2232,20 +2228,6 @@
2232
2228
  "module": "src/shared/button-wrapper.ts"
2233
2229
  }
2234
2230
  },
2235
- {
2236
- "kind": "method",
2237
- "name": "getAriaLabel",
2238
- "privacy": "protected",
2239
- "return": {
2240
- "type": {
2241
- "text": "string | null"
2242
- }
2243
- },
2244
- "inheritedFrom": {
2245
- "name": "UmButtonWrapper",
2246
- "module": "src/shared/button-wrapper.ts"
2247
- }
2248
- },
2249
2231
  {
2250
2232
  "kind": "method",
2251
2233
  "name": "innerFocusHandler",
@@ -2282,49 +2264,57 @@
2282
2264
  }
2283
2265
  }
2284
2266
  ],
2267
+ "events": [
2268
+ {
2269
+ "name": "change",
2270
+ "type": {
2271
+ "text": "Event"
2272
+ }
2273
+ }
2274
+ ],
2285
2275
  "attributes": [
2286
2276
  {
2287
- "name": "color",
2277
+ "name": "variant",
2288
2278
  "type": {
2289
- "text": "UmFabColor"
2279
+ "text": "UmIconButtonVariant"
2290
2280
  },
2291
- "default": "'primary'",
2292
- "description": "The FAB color variant to render.",
2293
- "fieldName": "color"
2281
+ "default": "'standard'",
2282
+ "fieldName": "variant"
2294
2283
  },
2295
2284
  {
2296
- "name": "size",
2285
+ "name": "toggle",
2297
2286
  "type": {
2298
- "text": "UmFabSize"
2287
+ "text": "boolean"
2299
2288
  },
2300
- "default": "'medium'",
2301
- "description": "The size of the FAB.",
2302
- "fieldName": "size"
2289
+ "default": "false",
2290
+ "description": "When true, the button will toggle between selected and unselected\nstates",
2291
+ "fieldName": "toggle"
2303
2292
  },
2304
2293
  {
2305
- "name": "label",
2294
+ "name": "has-selection-icon",
2306
2295
  "type": {
2307
- "text": "string | null"
2296
+ "text": "boolean"
2308
2297
  },
2309
- "default": "null",
2310
- "description": "The text to display the FAB.",
2311
- "fieldName": "label"
2298
+ "default": "false",
2299
+ "fieldName": "hasSelectionIcon"
2312
2300
  },
2313
2301
  {
2314
- "name": "lowered",
2302
+ "name": "selected",
2315
2303
  "type": {
2316
2304
  "text": "boolean"
2317
2305
  },
2318
2306
  "default": "false",
2319
- "description": "Lowers the FAB's elevation.",
2320
- "fieldName": "lowered"
2307
+ "description": "Sets the selected state. When false, displays the default icon. When true,\ndisplays the selected icon, or the default icon If no `slot=\"selected\"`\nicon is provided.",
2308
+ "fieldName": "selected"
2321
2309
  },
2322
2310
  {
2323
- "name": "extended",
2311
+ "name": "aria-label-selected",
2324
2312
  "type": {
2325
- "text": "boolean"
2313
+ "text": "string"
2326
2314
  },
2327
- "fieldName": "extended"
2315
+ "default": "''",
2316
+ "description": "The `aria-label` of the button when the button is toggleable and selected.",
2317
+ "fieldName": "ariaLabelSelected"
2328
2318
  },
2329
2319
  {
2330
2320
  "name": "type",
@@ -2403,37 +2393,37 @@
2403
2393
  "name": "UmButtonBase",
2404
2394
  "module": "/src/button/button-base.js"
2405
2395
  },
2406
- "tagName": "u-fab",
2396
+ "tagName": "u-icon-button",
2407
2397
  "customElement": true
2408
2398
  }
2409
2399
  ],
2410
2400
  "exports": [
2411
2401
  {
2412
2402
  "kind": "js",
2413
- "name": "UmFab",
2403
+ "name": "UmIconButton",
2414
2404
  "declaration": {
2415
- "name": "UmFab",
2416
- "module": "src/button/fab.ts"
2405
+ "name": "UmIconButton",
2406
+ "module": "src/button/icon-button.ts"
2417
2407
  }
2418
2408
  },
2419
2409
  {
2420
2410
  "kind": "custom-element-definition",
2421
- "name": "u-fab",
2411
+ "name": "u-icon-button",
2422
2412
  "declaration": {
2423
- "name": "UmFab",
2424
- "module": "src/button/fab.ts"
2413
+ "name": "UmIconButton",
2414
+ "module": "src/button/icon-button.ts"
2425
2415
  }
2426
2416
  }
2427
2417
  ]
2428
2418
  },
2429
2419
  {
2430
2420
  "kind": "javascript-module",
2431
- "path": "src/button/icon-button.styles.ts",
2421
+ "path": "src/app-bar/top-app-bar.styles.ts",
2432
2422
  "declarations": [
2433
2423
  {
2434
2424
  "kind": "variable",
2435
2425
  "name": "styles",
2436
- "default": "css `\n :host {\n --_icon-button-size: var(--u-icon-button-size, 2.5rem);\n --_color-surface-container-highest: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n width: var(--_icon-button-size);\n height: var(--_icon-button-size);\n border-radius: var(--u-icon-button-shape-corner, 9999px);\n font-family: var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n }\n\n .icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--u-icon-button-icon-size, 1.5rem);\n }\n .icon.icon-selected {\n display: none;\n }\n\n :host([selected][has-selection-icon]) .icon:not(.icon-selected) {\n display: none;\n }\n :host([selected][has-selection-icon]) .icon.icon-selected {\n display: inline-block;\n }\n\n :host([variant=filled]) {\n background-color: var(--u-filled-icon-button-unselected-bg-color, var(--_color-surface-container-highest));\n color: var(--u-filled-icon-button-unselected-text-color, var(--_color-primary));\n }\n\n :host([variant=tonal]) {\n background-color: var(--u-total-icon-button-unselected-bg-color, var(--_color-surface-container-highest));\n color: var(--u-tonal-icon-button-unselected-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n :host([selected][variant=filled]),\n :host([variant=filled]:not([has-selection-icon])) {\n background-color: var(--u-filled-icon-button-bg-color, var(--_color-primary));\n color: var(--u-filled-icon-button-text-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n :host([selected][variant=tonal]),\n :host([variant=tonal]:not([has-selection-icon])) {\n background-color: var(--u-tonal-icon-button-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n color: var(--u-tonal-icon-button-text-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n }\n\n :host([variant=standard]),\n :host([variant=outlined]) {\n color: var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n :host([variant=outlined]) {\n border: 1px solid var(--u-color-outline, rgb(121, 116, 126));\n color: var(--u-outlined-icon-button-color, var(--u-standard-icon-button-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n }\n\n :host([selected][variant=outlined]) {\n border: none;\n background-color: var(--u-outlined-icon-button-selected-bg-color, var(--u-color-inverse-surface, rgb(50, 47, 53)));\n color: var(--u-outlined-icon-button-selected-text-color, var(--u-color-on-inverse-surface, rgb(245, 239, 247)));\n }\n\n :host([selected][variant=standard]) {\n color: var(--u-standard-icon-button-selected-text-color, var(--_color-primary));\n background-color: var(--u-standard-icon-button-selected-bg-color, transparent);\n }\n\n :host([disabled][variant=outlined]) {\n background-color: transparent !important;\n border-color: var(--u-outlined-icon-button-disabled-border-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-outlined-icon-button-disabled-border-opacity, 0.12))) !important;\n }\n`"
2426
+ "default": "css `\n :host {\n display: block;\n background-color: var(--u-top-app-bar-bg-color, var(--u-color-body, var(--u-color-surface, rgb(254, 247, 255))));\n color: var(--u-top-app-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n transition: background-color 100ms, inset 375ms cubic-bezier(0.19, 1, 0.22, 1);\n }\n\n :host([container-scrolled]) {\n background-color: var(--u-top-app-bar-constrast-bg-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n }\n\n :host(:not([has-leading-icon])) .leading-icon {\n display: none;\n }\n\n :host(:not([has-trailing-icon])) .trailing-icon {\n display: none;\n }\n\n slot[name=leading-icon],\n slot[name=trailing-icon] {\n display: inline-flex;\n align-items: center;\n gap: var(--u-top-app-bar-icons-gap, 8px);\n }\n\n slot[name=leading-icon]::slotted(u-icon-button) {\n color: inherit;\n }\n\n :host([position=absolute]) .container {\n position: absolute;\n }\n\n :host([position=fixed]) .container {\n position: fixed;\n inset-inline: 0;\n inset-block-start: 0;\n inset-inline-start: var(--u-app-bar-offset, 0);\n }\n\n :host([position=absolute]),\n :host([position=fixed]) {\n padding-top: var(--_content-height);\n }\n :host([position=absolute]) .container,\n :host([position=fixed]) .container {\n z-index: var(--u-fixed-app-bar-z-index, 1010);\n }\n\n .extended-content {\n display: flex;\n align-items: flex-end;\n padding-inline: var(--u-extended-content-inline-padding, 16px);\n }\n\n :host([size=medium]) .extended-content {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-extended-content-medium-line-height, var(--u-headline-s-line-height, 2rem));\n font-size: var(--u-extended-content-medium-font-size, var(--u-headline-s-font-size, 1.5rem));\n letter-spacing: var(--u-extended-content-medium-letter-spacing, var(--u-headline-s-letter-spacing, 0rem));\n font-weight: var(--u-extended-content-medium-font-weight, var(--u-headline-s-font-weight, var(--u-font-weight-regular, 400)));\n height: var(--u-extended-content-medium-height, 3.5rem);\n padding-bottom: var(--u-extended-content-medium-padding-bottom, 24px);\n }\n\n :host([size=large]) .extended-content {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-extended-content-large-line-height, var(--u-headline-m-line-height, 2.25rem));\n font-size: var(--u-extended-content-large-font-size, var(--u-headline-m-font-size, 1.75rem));\n letter-spacing: var(--u-extended-content-large-letter-spacing, var(--u-headline-m-letter-spacing, 0rem));\n font-weight: var(--u-extended-content-large-font-weight, var(--u-headline-m-font-weight, var(--u-font-weight-regular, 400)));\n height: var(--u-extended-content-medium-large, 6rem);\n padding-bottom: var(--u-extended-content-large-padding-bottom, 28px);\n }\n\n .container {\n background: inherit;\n }\n\n .content {\n display: flex;\n align-items: center;\n background-color: inherit;\n transition: inherit;\n min-height: var(--u-top-app-bar-min-height, 56px);\n }\n @media (min-width: 840px) {\n .content {\n min-height: var(--u-top-app-bar-extended-min-height, 64px);\n }\n }\n\n .headline {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-top-app-bar-headline-line-height, var(--u-title-l-line-height, 1.75rem));\n font-size: var(--u-top-app-bar-headline-font-size, var(--u-title-l-font-size, 1.375rem));\n letter-spacing: var(--u-top-app-bar-headline-letter-spacing, var(--u-title-l-letter-spacing, 0rem));\n font-weight: var(--u-top-app-bar-headline-font-weight, var(--u-title-l-font-weight, var(--u-font-weight-regular, 400)));\n margin-inline: var(--u-headline-margin, 16px);\n }\n :host([has-leading-icon]) .headline {\n margin-inline-start: 0;\n }\n\n .leading-icon {\n margin-inline: var(--u-leading-icon-margin, 8px);\n }\n\n .trailing-icon {\n padding-inline: var(--u-trailing-icon-margin, 8px);\n margin-inline-start: auto;\n }\n`"
2437
2427
  }
2438
2428
  ],
2439
2429
  "exports": [
@@ -2442,527 +2432,537 @@
2442
2432
  "name": "styles",
2443
2433
  "declaration": {
2444
2434
  "name": "styles",
2445
- "module": "src/button/icon-button.styles.ts"
2435
+ "module": "src/app-bar/top-app-bar.styles.ts"
2446
2436
  }
2447
2437
  }
2448
2438
  ]
2449
2439
  },
2450
2440
  {
2451
2441
  "kind": "javascript-module",
2452
- "path": "src/button/icon-button.ts",
2442
+ "path": "src/app-bar/top-app-bar.ts",
2453
2443
  "declarations": [
2454
2444
  {
2455
2445
  "kind": "class",
2456
2446
  "description": "",
2457
- "name": "UmIconButton",
2447
+ "name": "UmTopAppBar",
2458
2448
  "members": [
2459
2449
  {
2460
2450
  "kind": "field",
2461
- "name": "variant",
2451
+ "name": "hasLeadingIcon",
2462
2452
  "type": {
2463
- "text": "UmIconButtonVariant"
2453
+ "text": "boolean"
2464
2454
  },
2465
- "default": "'standard'",
2466
- "attribute": "variant",
2455
+ "default": "false",
2456
+ "description": "Whether the app bar has leading icon or not\n\n_Note:_ Readonly",
2457
+ "attribute": "has-leading-icon",
2467
2458
  "reflects": true
2468
2459
  },
2469
2460
  {
2470
2461
  "kind": "field",
2471
- "name": "toggle",
2462
+ "name": "hasTrailingIcon",
2472
2463
  "type": {
2473
2464
  "text": "boolean"
2474
2465
  },
2475
2466
  "default": "false",
2476
- "description": "When true, the button will toggle between selected and unselected\nstates",
2477
- "attribute": "toggle"
2467
+ "description": "Whether the app bar has trailing icon or not\n\n_Note:_ Readonly",
2468
+ "attribute": "has-trailing-icon",
2469
+ "reflects": true
2478
2470
  },
2479
2471
  {
2480
2472
  "kind": "field",
2481
- "name": "hasSelectionIcon",
2473
+ "name": "position",
2482
2474
  "type": {
2483
- "text": "boolean"
2475
+ "text": "'fixed' | 'absolute' | 'static'"
2484
2476
  },
2485
- "default": "false",
2486
- "attribute": "has-selection-icon",
2477
+ "default": "'fixed'",
2478
+ "attribute": "position",
2487
2479
  "reflects": true
2488
2480
  },
2489
2481
  {
2490
2482
  "kind": "field",
2491
- "name": "selected",
2483
+ "name": "size",
2492
2484
  "type": {
2493
- "text": "boolean"
2485
+ "text": "'small' | 'medium' | 'large'"
2494
2486
  },
2495
- "default": "false",
2496
- "description": "Sets the selected state. When false, displays the default icon. When true,\ndisplays the selected icon, or the default icon If no `slot=\"selected\"`\nicon is provided.",
2497
- "attribute": "selected",
2487
+ "default": "'small'",
2488
+ "attribute": "size",
2498
2489
  "reflects": true
2499
2490
  },
2500
2491
  {
2501
2492
  "kind": "field",
2502
- "name": "ariaLabelSelected",
2493
+ "name": "headline",
2503
2494
  "type": {
2504
2495
  "text": "string"
2505
2496
  },
2506
2497
  "default": "''",
2507
- "description": "The `aria-label` of the button when the button is toggleable and selected.",
2508
- "attribute": "aria-label-selected"
2498
+ "attribute": "headline"
2509
2499
  },
2510
2500
  {
2511
2501
  "kind": "field",
2512
- "name": "selectedIcons",
2502
+ "name": "scrollContainer",
2513
2503
  "type": {
2514
- "text": "HTMLElement[]"
2504
+ "text": "'none' | 'window' | string | undefined"
2515
2505
  },
2516
- "privacy": "private"
2506
+ "attribute": "scrollContainer",
2507
+ "reflects": true
2517
2508
  },
2518
2509
  {
2519
- "kind": "method",
2520
- "name": "renderContent",
2521
- "privacy": "protected",
2522
- "return": {
2523
- "type": {
2524
- "text": "HTMLTemplateResult"
2525
- }
2510
+ "kind": "field",
2511
+ "name": "containerScrolled",
2512
+ "type": {
2513
+ "text": "boolean"
2526
2514
  },
2527
- "inheritedFrom": {
2528
- "name": "UmButtonWrapper",
2529
- "module": "src/shared/button-wrapper.ts"
2530
- }
2515
+ "default": "false",
2516
+ "attribute": "container-scrolled",
2517
+ "reflects": true
2531
2518
  },
2532
2519
  {
2533
- "kind": "method",
2534
- "name": "handleClick",
2535
- "privacy": "protected",
2536
- "return": {
2537
- "type": {
2538
- "text": "void"
2539
- }
2520
+ "kind": "field",
2521
+ "name": "assignedLeadingIcons",
2522
+ "type": {
2523
+ "text": "HTMLElement[]"
2540
2524
  },
2541
- "parameters": [
2542
- {
2543
- "name": "event",
2544
- "type": {
2545
- "text": "UIEvent"
2546
- }
2547
- }
2548
- ],
2549
- "inheritedFrom": {
2550
- "name": "UmButtonWrapper",
2551
- "module": "src/shared/button-wrapper.ts"
2552
- }
2525
+ "privacy": "private"
2553
2526
  },
2554
2527
  {
2555
- "kind": "method",
2556
- "name": "getAriaLabel",
2557
- "privacy": "protected",
2558
- "return": {
2559
- "type": {
2560
- "text": "string | null"
2561
- }
2528
+ "kind": "field",
2529
+ "name": "assignedTrailingIcons",
2530
+ "type": {
2531
+ "text": "HTMLElement[]"
2562
2532
  },
2563
- "inheritedFrom": {
2564
- "name": "UmButtonWrapper",
2565
- "module": "src/shared/button-wrapper.ts"
2566
- }
2533
+ "privacy": "private"
2567
2534
  },
2568
2535
  {
2569
- "kind": "method",
2570
- "name": "handleSlotChange",
2536
+ "kind": "field",
2537
+ "name": "_container",
2538
+ "type": {
2539
+ "text": "HTMLElement"
2540
+ },
2571
2541
  "privacy": "private"
2572
2542
  },
2573
2543
  {
2574
2544
  "kind": "field",
2575
- "name": "formAssociated",
2545
+ "name": "_extendedContent",
2576
2546
  "type": {
2577
- "text": "boolean"
2547
+ "text": "HTMLElement"
2578
2548
  },
2579
- "static": true,
2580
- "default": "true",
2581
- "inheritedFrom": {
2582
- "name": "UmButtonBase",
2583
- "module": "src/button/button-base.ts"
2584
- }
2549
+ "privacy": "private"
2585
2550
  },
2586
2551
  {
2587
2552
  "kind": "field",
2588
- "name": "type",
2553
+ "name": "_headlineElement",
2589
2554
  "type": {
2590
- "text": "string"
2555
+ "text": "HTMLElement"
2591
2556
  },
2592
- "default": "'submit'",
2593
- "attribute": "type",
2594
- "inheritedFrom": {
2595
- "name": "UmButtonBase",
2596
- "module": "src/button/button-base.ts"
2597
- }
2557
+ "privacy": "private"
2598
2558
  },
2599
2559
  {
2600
2560
  "kind": "field",
2601
- "name": "value",
2561
+ "name": "containerSizeObserver",
2602
2562
  "type": {
2603
- "text": "string"
2563
+ "text": "ResizeObserver | null"
2604
2564
  },
2605
- "default": "''",
2606
- "attribute": "value",
2607
- "reflects": true,
2608
- "inheritedFrom": {
2609
- "name": "UmButtonBase",
2610
- "module": "src/button/button-base.ts"
2611
- }
2565
+ "privacy": "private",
2566
+ "default": "null"
2612
2567
  },
2613
2568
  {
2614
2569
  "kind": "field",
2615
- "name": "form",
2570
+ "name": "scrollContainerElement",
2616
2571
  "type": {
2617
- "text": "HTMLFormElement | null"
2572
+ "text": "{\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n } | null"
2618
2573
  },
2619
- "inheritedFrom": {
2620
- "name": "UmButtonBase",
2621
- "module": "src/button/button-base.ts"
2622
- }
2574
+ "privacy": "private",
2575
+ "default": "null"
2623
2576
  },
2624
2577
  {
2625
- "kind": "field",
2626
- "name": "#elementInternals",
2578
+ "kind": "method",
2579
+ "name": "getScrollContainer",
2627
2580
  "privacy": "private",
2628
- "type": {
2629
- "text": "ElementInternals"
2581
+ "return": {
2582
+ "type": {
2583
+ "text": "| {\n addEventListener: typeof window.addEventListener;\n removeEventListener: typeof window.removeEventListener;\n }\n | undefined"
2584
+ }
2630
2585
  },
2631
- "inheritedFrom": {
2632
- "name": "UmButtonBase",
2633
- "module": "src/button/button-base.ts"
2634
- }
2586
+ "parameters": [
2587
+ {
2588
+ "name": "idOrElement",
2589
+ "type": {
2590
+ "text": "string | HTMLElement | undefined"
2591
+ }
2592
+ }
2593
+ ]
2635
2594
  },
2636
2595
  {
2637
- "kind": "field",
2638
- "name": "disabled",
2639
- "type": {
2640
- "text": "boolean"
2641
- },
2642
- "default": "false",
2643
- "description": "Whether the button is disabled or not.",
2644
- "attribute": "disabled",
2645
- "reflects": true,
2646
- "inheritedFrom": {
2647
- "name": "UmButtonWrapper",
2648
- "module": "src/shared/button-wrapper.ts"
2649
- }
2596
+ "kind": "method",
2597
+ "name": "handleLeadingIconSlotChange",
2598
+ "privacy": "private"
2650
2599
  },
2651
2600
  {
2652
- "kind": "field",
2653
- "name": "renderRipple",
2654
- "type": {
2655
- "text": "boolean"
2656
- },
2657
- "default": "true",
2658
- "inheritedFrom": {
2659
- "name": "UmButtonWrapper",
2660
- "module": "src/shared/button-wrapper.ts"
2661
- }
2601
+ "kind": "method",
2602
+ "name": "handleTrailingIconSlotChange",
2603
+ "privacy": "private"
2662
2604
  },
2663
2605
  {
2664
2606
  "kind": "field",
2665
- "name": "href",
2666
- "type": {
2667
- "text": "string | undefined"
2668
- },
2669
- "description": "The URL that the link button points to.",
2670
- "attribute": "href",
2671
- "inheritedFrom": {
2672
- "name": "UmButtonWrapper",
2673
- "module": "src/shared/button-wrapper.ts"
2674
- }
2607
+ "name": "#updateScroll",
2608
+ "privacy": "private"
2675
2609
  },
2676
2610
  {
2677
- "kind": "field",
2678
- "name": "target",
2679
- "type": {
2680
- "text": "string | undefined"
2611
+ "kind": "method",
2612
+ "name": "getScrollTop",
2613
+ "privacy": "private",
2614
+ "static": true,
2615
+ "return": {
2616
+ "type": {
2617
+ "text": "number"
2618
+ }
2681
2619
  },
2682
- "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
2683
- "attribute": "target",
2684
- "inheritedFrom": {
2685
- "name": "UmButtonWrapper",
2686
- "module": "src/shared/button-wrapper.ts"
2687
- }
2620
+ "parameters": [
2621
+ {
2622
+ "name": "container",
2623
+ "type": {
2624
+ "text": "HTMLElement & Window"
2625
+ }
2626
+ }
2627
+ ]
2688
2628
  },
2689
2629
  {
2690
- "kind": "field",
2691
- "name": "name",
2630
+ "kind": "method",
2631
+ "name": "setContentHeightProperty",
2632
+ "privacy": "private"
2633
+ }
2634
+ ],
2635
+ "attributes": [
2636
+ {
2637
+ "name": "has-leading-icon",
2692
2638
  "type": {
2693
- "text": "string | undefined"
2639
+ "text": "boolean"
2694
2640
  },
2695
- "attribute": "name",
2696
- "inheritedFrom": {
2697
- "name": "UmButtonWrapper",
2698
- "module": "src/shared/button-wrapper.ts"
2699
- }
2641
+ "default": "false",
2642
+ "description": "Whether the app bar has leading icon or not\n\n_Note:_ Readonly",
2643
+ "fieldName": "hasLeadingIcon"
2700
2644
  },
2701
2645
  {
2702
- "kind": "field",
2703
- "name": "buttonElement",
2646
+ "name": "has-trailing-icon",
2704
2647
  "type": {
2705
- "text": "HTMLElement"
2648
+ "text": "boolean"
2706
2649
  },
2707
- "inheritedFrom": {
2708
- "name": "UmButtonWrapper",
2709
- "module": "src/shared/button-wrapper.ts"
2710
- }
2650
+ "default": "false",
2651
+ "description": "Whether the app bar has trailing icon or not\n\n_Note:_ Readonly",
2652
+ "fieldName": "hasTrailingIcon"
2711
2653
  },
2712
2654
  {
2713
- "kind": "field",
2714
- "name": "ripple",
2655
+ "name": "position",
2715
2656
  "type": {
2716
- "text": "UmRipple"
2657
+ "text": "'fixed' | 'absolute' | 'static'"
2717
2658
  },
2718
- "privacy": "private",
2719
- "inheritedFrom": {
2720
- "name": "UmButtonWrapper",
2721
- "module": "src/shared/button-wrapper.ts"
2722
- }
2659
+ "default": "'fixed'",
2660
+ "fieldName": "position"
2723
2661
  },
2724
2662
  {
2725
- "kind": "field",
2726
- "name": "innerRole",
2663
+ "name": "size",
2727
2664
  "type": {
2728
- "text": "string | null"
2665
+ "text": "'small' | 'medium' | 'large'"
2729
2666
  },
2730
- "privacy": "protected",
2731
- "default": "null",
2732
- "inheritedFrom": {
2733
- "name": "UmButtonWrapper",
2734
- "module": "src/shared/button-wrapper.ts"
2735
- }
2667
+ "default": "'small'",
2668
+ "fieldName": "size"
2736
2669
  },
2737
2670
  {
2738
- "kind": "field",
2739
- "name": "pathname",
2671
+ "name": "headline",
2740
2672
  "type": {
2741
2673
  "text": "string"
2742
2674
  },
2743
- "inheritedFrom": {
2744
- "name": "UmButtonWrapper",
2745
- "module": "src/shared/button-wrapper.ts"
2746
- }
2747
- },
2748
- {
2749
- "kind": "method",
2750
- "name": "renderButton",
2751
- "privacy": "private",
2752
- "inheritedFrom": {
2753
- "name": "UmButtonWrapper",
2754
- "module": "src/shared/button-wrapper.ts"
2755
- }
2756
- },
2757
- {
2758
- "kind": "method",
2759
- "name": "renderLink",
2760
- "privacy": "private",
2761
- "inheritedFrom": {
2762
- "name": "UmButtonWrapper",
2763
- "module": "src/shared/button-wrapper.ts"
2764
- }
2765
- },
2766
- {
2767
- "kind": "method",
2768
- "name": "focus",
2769
- "inheritedFrom": {
2770
- "name": "UmButtonWrapper",
2771
- "module": "src/shared/button-wrapper.ts"
2772
- }
2773
- },
2774
- {
2775
- "kind": "method",
2776
- "name": "blur",
2777
- "inheritedFrom": {
2778
- "name": "UmButtonWrapper",
2779
- "module": "src/shared/button-wrapper.ts"
2780
- }
2675
+ "default": "''",
2676
+ "fieldName": "headline"
2781
2677
  },
2782
2678
  {
2783
- "kind": "method",
2784
- "name": "innerFocusHandler",
2785
- "privacy": "private",
2786
- "return": {
2787
- "type": {
2788
- "text": "void"
2789
- }
2679
+ "name": "scrollContainer",
2680
+ "type": {
2681
+ "text": "'none' | 'window' | string | undefined"
2790
2682
  },
2791
- "inheritedFrom": {
2792
- "name": "UmButtonWrapper",
2793
- "module": "src/shared/button-wrapper.ts"
2794
- }
2683
+ "fieldName": "scrollContainer"
2795
2684
  },
2796
2685
  {
2797
- "kind": "method",
2798
- "name": "#innerClickHandler",
2799
- "return": {
2800
- "type": {
2801
- "text": "void"
2802
- }
2803
- },
2804
- "parameters": [
2805
- {
2806
- "name": "event",
2807
- "type": {
2808
- "text": "MouseEvent"
2809
- }
2810
- }
2811
- ],
2812
- "inheritedFrom": {
2813
- "name": "UmButtonWrapper",
2814
- "module": "src/shared/button-wrapper.ts"
2815
- }
2816
- }
2817
- ],
2818
- "events": [
2819
- {
2820
- "name": "change",
2686
+ "name": "container-scrolled",
2821
2687
  "type": {
2822
- "text": "Event"
2823
- }
2688
+ "text": "boolean"
2689
+ },
2690
+ "default": "false",
2691
+ "fieldName": "containerScrolled"
2824
2692
  }
2825
2693
  ],
2826
- "attributes": [
2827
- {
2828
- "name": "variant",
2829
- "type": {
2830
- "text": "UmIconButtonVariant"
2831
- },
2832
- "default": "'standard'",
2833
- "fieldName": "variant"
2834
- },
2694
+ "superclass": {
2695
+ "name": "LitElement",
2696
+ "package": "lit"
2697
+ },
2698
+ "tagName": "u-top-app-bar",
2699
+ "customElement": true
2700
+ }
2701
+ ],
2702
+ "exports": [
2703
+ {
2704
+ "kind": "js",
2705
+ "name": "UmTopAppBar",
2706
+ "declaration": {
2707
+ "name": "UmTopAppBar",
2708
+ "module": "src/app-bar/top-app-bar.ts"
2709
+ }
2710
+ },
2711
+ {
2712
+ "kind": "custom-element-definition",
2713
+ "name": "u-top-app-bar",
2714
+ "declaration": {
2715
+ "name": "UmTopAppBar",
2716
+ "module": "src/app-bar/top-app-bar.ts"
2717
+ }
2718
+ }
2719
+ ]
2720
+ },
2721
+ {
2722
+ "kind": "javascript-module",
2723
+ "path": "src/card/card-content.styles.ts",
2724
+ "declarations": [
2725
+ {
2726
+ "kind": "variable",
2727
+ "name": "styles",
2728
+ "default": "css `\n :host {\n display: block;\n }\n\n :host(:has(slot > *)) {\n display: none;\n }\n\n :host([has-content]) {\n padding: var(--u-card-padding, 16px);\n }\n\n slot {\n border-radius: inherit;\n }\n`"
2729
+ }
2730
+ ],
2731
+ "exports": [
2732
+ {
2733
+ "kind": "js",
2734
+ "name": "styles",
2735
+ "declaration": {
2736
+ "name": "styles",
2737
+ "module": "src/card/card-content.styles.ts"
2738
+ }
2739
+ }
2740
+ ]
2741
+ },
2742
+ {
2743
+ "kind": "javascript-module",
2744
+ "path": "src/card/card-content.ts",
2745
+ "declarations": [
2746
+ {
2747
+ "kind": "class",
2748
+ "description": "",
2749
+ "name": "UmCardContent",
2750
+ "members": [
2835
2751
  {
2836
- "name": "toggle",
2752
+ "kind": "field",
2753
+ "name": "hasContent",
2837
2754
  "type": {
2838
2755
  "text": "boolean"
2839
2756
  },
2840
2757
  "default": "false",
2841
- "description": "When true, the button will toggle between selected and unselected\nstates",
2842
- "fieldName": "toggle"
2758
+ "attribute": "has-content",
2759
+ "reflects": true
2843
2760
  },
2844
2761
  {
2845
- "name": "has-selection-icon",
2762
+ "kind": "method",
2763
+ "name": "handleSlotChange",
2764
+ "privacy": "private",
2765
+ "parameters": [
2766
+ {
2767
+ "name": "e",
2768
+ "type": {
2769
+ "text": "Event"
2770
+ }
2771
+ }
2772
+ ]
2773
+ }
2774
+ ],
2775
+ "attributes": [
2776
+ {
2777
+ "name": "has-content",
2846
2778
  "type": {
2847
2779
  "text": "boolean"
2848
2780
  },
2849
2781
  "default": "false",
2850
- "fieldName": "hasSelectionIcon"
2851
- },
2782
+ "fieldName": "hasContent"
2783
+ }
2784
+ ],
2785
+ "superclass": {
2786
+ "name": "LitElement",
2787
+ "package": "lit"
2788
+ },
2789
+ "tagName": "u-card-content",
2790
+ "customElement": true
2791
+ }
2792
+ ],
2793
+ "exports": [
2794
+ {
2795
+ "kind": "js",
2796
+ "name": "UmCardContent",
2797
+ "declaration": {
2798
+ "name": "UmCardContent",
2799
+ "module": "src/card/card-content.ts"
2800
+ }
2801
+ },
2802
+ {
2803
+ "kind": "custom-element-definition",
2804
+ "name": "u-card-content",
2805
+ "declaration": {
2806
+ "name": "UmCardContent",
2807
+ "module": "src/card/card-content.ts"
2808
+ }
2809
+ }
2810
+ ]
2811
+ },
2812
+ {
2813
+ "kind": "javascript-module",
2814
+ "path": "src/card/card-media.styles.ts",
2815
+ "declarations": [
2816
+ {
2817
+ "kind": "variable",
2818
+ "name": "styles",
2819
+ "default": "css `\n :host {\n display: block;\n aspect-ratio: 1;\n border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n }\n\n :host([wide]) {\n aspect-ratio: 16/9;\n }\n`"
2820
+ }
2821
+ ],
2822
+ "exports": [
2823
+ {
2824
+ "kind": "js",
2825
+ "name": "styles",
2826
+ "declaration": {
2827
+ "name": "styles",
2828
+ "module": "src/card/card-media.styles.ts"
2829
+ }
2830
+ }
2831
+ ]
2832
+ },
2833
+ {
2834
+ "kind": "javascript-module",
2835
+ "path": "src/card/card-media.ts",
2836
+ "declarations": [
2837
+ {
2838
+ "kind": "class",
2839
+ "description": "",
2840
+ "name": "UmCardMedia",
2841
+ "members": [
2852
2842
  {
2853
- "name": "selected",
2843
+ "kind": "field",
2844
+ "name": "wide",
2854
2845
  "type": {
2855
2846
  "text": "boolean"
2856
2847
  },
2857
2848
  "default": "false",
2858
- "description": "Sets the selected state. When false, displays the default icon. When true,\ndisplays the selected icon, or the default icon If no `slot=\"selected\"`\nicon is provided.",
2859
- "fieldName": "selected"
2860
- },
2861
- {
2862
- "name": "aria-label-selected",
2863
- "type": {
2864
- "text": "string"
2865
- },
2866
- "default": "''",
2867
- "description": "The `aria-label` of the button when the button is toggleable and selected.",
2868
- "fieldName": "ariaLabelSelected"
2869
- },
2870
- {
2871
- "name": "type",
2872
- "type": {
2873
- "text": "string"
2874
- },
2875
- "default": "'submit'",
2876
- "fieldName": "type",
2877
- "inheritedFrom": {
2878
- "name": "UmButtonBase",
2879
- "module": "src/button/button-base.ts"
2880
- }
2881
- },
2882
- {
2883
- "name": "value",
2884
- "type": {
2885
- "text": "string"
2886
- },
2887
- "default": "''",
2888
- "fieldName": "value",
2889
- "inheritedFrom": {
2890
- "name": "UmButtonBase",
2891
- "module": "src/button/button-base.ts"
2892
- }
2893
- },
2849
+ "attribute": "wide",
2850
+ "reflects": true
2851
+ }
2852
+ ],
2853
+ "attributes": [
2894
2854
  {
2895
- "name": "disabled",
2855
+ "name": "wide",
2896
2856
  "type": {
2897
2857
  "text": "boolean"
2898
2858
  },
2899
2859
  "default": "false",
2900
- "description": "Whether the button is disabled or not.",
2901
- "fieldName": "disabled",
2902
- "inheritedFrom": {
2903
- "name": "UmButtonWrapper",
2904
- "module": "src/shared/button-wrapper.ts"
2905
- }
2906
- },
2907
- {
2908
- "name": "href",
2909
- "type": {
2910
- "text": "string | undefined"
2911
- },
2912
- "description": "The URL that the link button points to.",
2913
- "fieldName": "href",
2914
- "inheritedFrom": {
2915
- "name": "UmButtonWrapper",
2916
- "module": "src/shared/button-wrapper.ts"
2917
- }
2918
- },
2860
+ "fieldName": "wide"
2861
+ }
2862
+ ],
2863
+ "superclass": {
2864
+ "name": "LitElement",
2865
+ "package": "lit"
2866
+ },
2867
+ "tagName": "u-card-media",
2868
+ "customElement": true
2869
+ }
2870
+ ],
2871
+ "exports": [
2872
+ {
2873
+ "kind": "js",
2874
+ "name": "UmCardMedia",
2875
+ "declaration": {
2876
+ "name": "UmCardMedia",
2877
+ "module": "src/card/card-media.ts"
2878
+ }
2879
+ },
2880
+ {
2881
+ "kind": "custom-element-definition",
2882
+ "name": "u-card-media",
2883
+ "declaration": {
2884
+ "name": "UmCardMedia",
2885
+ "module": "src/card/card-media.ts"
2886
+ }
2887
+ }
2888
+ ]
2889
+ },
2890
+ {
2891
+ "kind": "javascript-module",
2892
+ "path": "src/card/card.styles.ts",
2893
+ "declarations": [
2894
+ {
2895
+ "kind": "variable",
2896
+ "name": "styles",
2897
+ "default": "css `\n :host {\n display: block;\n position: relative;\n border-radius: var(--u-card-shape-corner, var(--u-shape-corner-medium, 12px));\n }\n\n :host([variant=elevated]) {\n --u-current-bg-color: var(--u-card-elevated-bg-color, var(--u-color-surface-container-low, rgb(247, 242, 250)));\n background-color: var(--u-current-bg-color);\n }\n :host([variant=elevated]) u-elevation {\n --u-elevation-level: var(--u-elevated-card-elevation-level, 1);\n }\n\n :host([variant=filled]) {\n --u-current-bg-color: var(--u-card-filled-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));\n background-color: var(--u-current-bg-color);\n }\n\n :host([variant=outlined]) {\n border: var(--u-outlined-card-outline-width, 1px) solid var(--u-outlined-card-outline-color, var(--u-color-outline-variant, rgb(202, 196, 208)));\n }\n\n u-card-content,\n slot {\n border-radius: inherit;\n }\n`"
2898
+ }
2899
+ ],
2900
+ "exports": [
2901
+ {
2902
+ "kind": "js",
2903
+ "name": "styles",
2904
+ "declaration": {
2905
+ "name": "styles",
2906
+ "module": "src/card/card.styles.ts"
2907
+ }
2908
+ }
2909
+ ]
2910
+ },
2911
+ {
2912
+ "kind": "javascript-module",
2913
+ "path": "src/card/card.ts",
2914
+ "declarations": [
2915
+ {
2916
+ "kind": "class",
2917
+ "description": "",
2918
+ "name": "UmCard",
2919
+ "members": [
2919
2920
  {
2920
- "name": "target",
2921
+ "kind": "field",
2922
+ "name": "variant",
2921
2923
  "type": {
2922
- "text": "string | undefined"
2924
+ "text": "UmCardVariant"
2923
2925
  },
2924
- "description": "Where to display the linked `href` URL for a link button. Common options\ninclude `_blank` to open in a new tab.",
2925
- "fieldName": "target",
2926
- "inheritedFrom": {
2927
- "name": "UmButtonWrapper",
2928
- "module": "src/shared/button-wrapper.ts"
2929
- }
2930
- },
2926
+ "default": "'filled'",
2927
+ "description": "The Card variant to render.",
2928
+ "attribute": "variant",
2929
+ "reflects": true
2930
+ }
2931
+ ],
2932
+ "attributes": [
2931
2933
  {
2932
- "name": "name",
2934
+ "name": "variant",
2933
2935
  "type": {
2934
- "text": "string | undefined"
2936
+ "text": "UmCardVariant"
2935
2937
  },
2936
- "fieldName": "name",
2937
- "inheritedFrom": {
2938
- "name": "UmButtonWrapper",
2939
- "module": "src/shared/button-wrapper.ts"
2940
- }
2938
+ "default": "'filled'",
2939
+ "description": "The Card variant to render.",
2940
+ "fieldName": "variant"
2941
2941
  }
2942
2942
  ],
2943
2943
  "superclass": {
2944
- "name": "UmButtonBase",
2945
- "module": "/src/button/button-base.js"
2944
+ "name": "LitElement",
2945
+ "package": "lit"
2946
2946
  },
2947
- "tagName": "u-icon-button",
2947
+ "tagName": "u-card",
2948
2948
  "customElement": true
2949
2949
  }
2950
2950
  ],
2951
2951
  "exports": [
2952
2952
  {
2953
2953
  "kind": "js",
2954
- "name": "UmIconButton",
2954
+ "name": "UmCard",
2955
2955
  "declaration": {
2956
- "name": "UmIconButton",
2957
- "module": "src/button/icon-button.ts"
2956
+ "name": "UmCard",
2957
+ "module": "src/card/card.ts"
2958
2958
  }
2959
2959
  },
2960
2960
  {
2961
2961
  "kind": "custom-element-definition",
2962
- "name": "u-icon-button",
2962
+ "name": "u-card",
2963
2963
  "declaration": {
2964
- "name": "UmIconButton",
2965
- "module": "src/button/icon-button.ts"
2964
+ "name": "UmCard",
2965
+ "module": "src/card/card.ts"
2966
2966
  }
2967
2967
  }
2968
2968
  ]
@@ -3100,6 +3100,32 @@
3100
3100
  "module": "src/shared/selection-control/selection-control-list-item.ts"
3101
3101
  }
3102
3102
  },
3103
+ {
3104
+ "kind": "field",
3105
+ "name": "inputDescribedById",
3106
+ "type": {
3107
+ "text": "string | undefined"
3108
+ },
3109
+ "privacy": "protected",
3110
+ "default": "'description'",
3111
+ "inheritedFrom": {
3112
+ "name": "UmSelectionControl",
3113
+ "module": "src/shared/selection-control/selection-control.ts"
3114
+ }
3115
+ },
3116
+ {
3117
+ "kind": "field",
3118
+ "name": "inputLabelledById",
3119
+ "type": {
3120
+ "text": "string | undefined"
3121
+ },
3122
+ "privacy": "protected",
3123
+ "default": "'label'",
3124
+ "inheritedFrom": {
3125
+ "name": "UmSelectionControl",
3126
+ "module": "src/shared/selection-control/selection-control.ts"
3127
+ }
3128
+ },
3103
3129
  {
3104
3130
  "kind": "method",
3105
3131
  "name": "render",
@@ -3352,10 +3378,10 @@
3352
3378
  },
3353
3379
  {
3354
3380
  "kind": "method",
3355
- "name": "#handleClick",
3381
+ "name": "#handleInput",
3356
3382
  "parameters": [
3357
3383
  {
3358
- "name": "e",
3384
+ "name": "event",
3359
3385
  "type": {
3360
3386
  "text": "Event"
3361
3387
  }
@@ -3365,24 +3391,51 @@
3365
3391
  "name": "UmSelectionControl",
3366
3392
  "module": "src/shared/selection-control/selection-control.ts"
3367
3393
  }
3368
- }
3369
- ],
3370
- "events": [
3394
+ },
3371
3395
  {
3372
- "name": "input",
3373
- "type": {
3374
- "text": "InputEvent"
3375
- },
3396
+ "kind": "method",
3397
+ "name": "#handleChange",
3398
+ "parameters": [
3399
+ {
3400
+ "name": "event",
3401
+ "type": {
3402
+ "text": "Event"
3403
+ }
3404
+ }
3405
+ ],
3376
3406
  "inheritedFrom": {
3377
3407
  "name": "UmSelectionControl",
3378
3408
  "module": "src/shared/selection-control/selection-control.ts"
3379
3409
  }
3380
3410
  },
3381
3411
  {
3382
- "name": "change",
3383
- "type": {
3384
- "text": "Event"
3385
- },
3412
+ "kind": "method",
3413
+ "name": "#handleRippleClick",
3414
+ "parameters": [
3415
+ {
3416
+ "name": "e",
3417
+ "type": {
3418
+ "text": "Event"
3419
+ }
3420
+ }
3421
+ ],
3422
+ "inheritedFrom": {
3423
+ "name": "UmSelectionControl",
3424
+ "module": "src/shared/selection-control/selection-control.ts"
3425
+ }
3426
+ },
3427
+ {
3428
+ "kind": "method",
3429
+ "name": "_handleClick",
3430
+ "privacy": "protected",
3431
+ "parameters": [
3432
+ {
3433
+ "name": "e",
3434
+ "type": {
3435
+ "text": "Event"
3436
+ }
3437
+ }
3438
+ ],
3386
3439
  "inheritedFrom": {
3387
3440
  "name": "UmSelectionControl",
3388
3441
  "module": "src/shared/selection-control/selection-control.ts"
@@ -3417,7 +3470,7 @@
3417
3470
  {
3418
3471
  "kind": "variable",
3419
3472
  "name": "styles",
3420
- "default": "css `\n :host {\n --_state-layer-padding: var(--u-checkbox-state-layer-padding, 4px);\n --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n --_indicator-color: var(--u-checkbox-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n display: inline-block;\n vertical-align: middle;\n }\n\n .container {\n cursor: pointer;\n position: relative;\n width: var(--_width);\n height: var(--_height);\n padding: var(--_state-layer-padding);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n :host([hide-state-layer]) .container {\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n padding: 0;\n }\n :host([hide-state-layer]) u-ripple {\n display: none;\n }\n\n input {\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n border-radius: inherit;\n appearance: none;\n pointer-events: none;\n }\n\n u-ripple {\n padding: var(--_state-layer-padding);\n }\n\n .indicator-container {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n pointer-events: none;\n }\n\n input:checked ~ .indicator-container {\n --_indicator-color: var(--u-checkbox-indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n :host([disabled]) {\n opacity: var(--u-checkbox-disabled-state-opacity, 0.38);\n }\n :host([disabled]) input,\n :host([disabled]) .container {\n cursor: default;\n }\n :host([disabled]) .indicator-container {\n --_indicator-color: var(--u-checkbox-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n\n :host {\n --_indicator-size: var(--u-checkbox-indicator-size, 1.125rem);\n --_width: var(--u-checkbox-size, 3rem);\n --_height: var(--_width);\n }\n\n .border {\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n box-shadow: 0 0 0 var(--u-checkbox-indicator-border-width, 0.125rem) var(--_indicator-color) inset;\n border-radius: var(--u-checkbox-indicator-shaper-coner, 2px);\n transition: box-shadow 175ms 175ms;\n }\n\n .indicator {\n position: absolute;\n display: flex;\n justify-content: center;\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n overflow: hidden;\n clip: rect(0, 0, var(--_indicator-size), 0);\n transition: clip 275ms;\n }\n .indicator::before {\n position: relative;\n top: 25%;\n box-sizing: border-box;\n display: block;\n width: 0.75rem;\n height: 0.35rem;\n content: \"\";\n border: var(--u-checkbox-indicator-border-width, 0.125rem) solid var(--u-color-on-primary, rgb(255, 255, 255));\n border-top-style: none;\n border-right-style: none;\n transform: rotate(-45deg);\n transition: border 175ms, transform 175ms;\n }\n\n input.indeterminate ~ .indicator-container .border,\n input:checked ~ .indicator-container .border {\n box-shadow: 0 0 0 calc(var(--_indicator-size) / 2) var(--_indicator-color) inset;\n transition: box-shadow 175ms;\n }\n input.indeterminate ~ .indicator-container .indicator,\n input:checked ~ .indicator-container .indicator {\n clip: rect(0, var(--_indicator-size), var(--_indicator-size), 0);\n transition: clip 175ms 175ms;\n }\n\n input.indeterminate ~ .indicator-container {\n --_indicator-color: var(--u-checkbox-indicator-indeterminate-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n input.indeterminate ~ .indicator-container .indicator::before {\n border-left-style: none;\n transform: rotate(0);\n width: 0.6rem;\n }\n`"
3473
+ "default": "css `\n :host {\n --_indicator-size: var(--u-checkbox-indicator-size, 1.125rem);\n --_width: var(--u-checkbox-size, 3rem);\n --_height: var(--_width);\n }\n\n .border {\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n box-shadow: 0 0 0 var(--u-checkbox-indicator-border-width, 0.125rem) var(--_indicator-color) inset;\n border-radius: var(--u-checkbox-indicator-shaper-coner, 2px);\n transition: box-shadow 175ms 175ms;\n }\n\n .indicator {\n position: absolute;\n display: flex;\n justify-content: center;\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n overflow: hidden;\n clip: rect(0, 0, var(--_indicator-size), 0);\n transition: clip 275ms;\n }\n .indicator::before {\n position: relative;\n top: 25%;\n box-sizing: border-box;\n display: block;\n width: 0.75rem;\n height: 0.35rem;\n content: \"\";\n border: var(--u-checkbox-indicator-border-width, 0.125rem) solid var(--u-color-on-primary, rgb(255, 255, 255));\n border-top-style: none;\n border-right-style: none;\n transform: rotate(-45deg);\n transition: border 175ms, transform 175ms;\n }\n\n input.indeterminate ~ .indicator-container .border,\n input:checked ~ .indicator-container .border {\n box-shadow: 0 0 0 calc(var(--_indicator-size) / 2) var(--_indicator-color) inset;\n transition: box-shadow 175ms;\n }\n input.indeterminate ~ .indicator-container .indicator,\n input:checked ~ .indicator-container .indicator {\n clip: rect(0, var(--_indicator-size), var(--_indicator-size), 0);\n transition: clip 175ms 175ms;\n }\n\n input.indeterminate ~ .indicator-container {\n --_indicator-color: var(--u-checkbox-indicator-indeterminate-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n input.indeterminate ~ .indicator-container .indicator::before {\n border-left-style: none;\n transform: rotate(0);\n width: 0.6rem;\n }\n`"
3421
3474
  }
3422
3475
  ],
3423
3476
  "exports": [
@@ -3637,6 +3690,32 @@
3637
3690
  "module": "src/shared/selection-control/selection-control.ts"
3638
3691
  }
3639
3692
  },
3693
+ {
3694
+ "kind": "field",
3695
+ "name": "inputDescribedById",
3696
+ "type": {
3697
+ "text": "string | undefined"
3698
+ },
3699
+ "privacy": "protected",
3700
+ "default": "undefined",
3701
+ "inheritedFrom": {
3702
+ "name": "UmSelectionControl",
3703
+ "module": "src/shared/selection-control/selection-control.ts"
3704
+ }
3705
+ },
3706
+ {
3707
+ "kind": "field",
3708
+ "name": "inputLabelledById",
3709
+ "type": {
3710
+ "text": "string | undefined"
3711
+ },
3712
+ "privacy": "protected",
3713
+ "default": "undefined",
3714
+ "inheritedFrom": {
3715
+ "name": "UmSelectionControl",
3716
+ "module": "src/shared/selection-control/selection-control.ts"
3717
+ }
3718
+ },
3640
3719
  {
3641
3720
  "kind": "field",
3642
3721
  "name": "value",
@@ -3667,7 +3746,56 @@
3667
3746
  },
3668
3747
  {
3669
3748
  "kind": "method",
3670
- "name": "#handleClick",
3749
+ "name": "#handleInput",
3750
+ "parameters": [
3751
+ {
3752
+ "name": "event",
3753
+ "type": {
3754
+ "text": "Event"
3755
+ }
3756
+ }
3757
+ ],
3758
+ "inheritedFrom": {
3759
+ "name": "UmSelectionControl",
3760
+ "module": "src/shared/selection-control/selection-control.ts"
3761
+ }
3762
+ },
3763
+ {
3764
+ "kind": "method",
3765
+ "name": "#handleChange",
3766
+ "parameters": [
3767
+ {
3768
+ "name": "event",
3769
+ "type": {
3770
+ "text": "Event"
3771
+ }
3772
+ }
3773
+ ],
3774
+ "inheritedFrom": {
3775
+ "name": "UmSelectionControl",
3776
+ "module": "src/shared/selection-control/selection-control.ts"
3777
+ }
3778
+ },
3779
+ {
3780
+ "kind": "method",
3781
+ "name": "#handleRippleClick",
3782
+ "parameters": [
3783
+ {
3784
+ "name": "e",
3785
+ "type": {
3786
+ "text": "Event"
3787
+ }
3788
+ }
3789
+ ],
3790
+ "inheritedFrom": {
3791
+ "name": "UmSelectionControl",
3792
+ "module": "src/shared/selection-control/selection-control.ts"
3793
+ }
3794
+ },
3795
+ {
3796
+ "kind": "method",
3797
+ "name": "_handleClick",
3798
+ "privacy": "protected",
3671
3799
  "parameters": [
3672
3800
  {
3673
3801
  "name": "e",
@@ -3753,29 +3881,7 @@
3753
3881
  "module": "/src/shared/selection-control/selection-control.js"
3754
3882
  },
3755
3883
  "tagName": "u-checkbox",
3756
- "customElement": true,
3757
- "events": [
3758
- {
3759
- "name": "input",
3760
- "type": {
3761
- "text": "InputEvent"
3762
- },
3763
- "inheritedFrom": {
3764
- "name": "UmSelectionControl",
3765
- "module": "src/shared/selection-control/selection-control.ts"
3766
- }
3767
- },
3768
- {
3769
- "name": "change",
3770
- "type": {
3771
- "text": "Event"
3772
- },
3773
- "inheritedFrom": {
3774
- "name": "UmSelectionControl",
3775
- "module": "src/shared/selection-control/selection-control.ts"
3776
- }
3777
- }
3778
- ]
3884
+ "customElement": true
3779
3885
  }
3780
3886
  ],
3781
3887
  "exports": [
@@ -3892,7 +3998,7 @@
3892
3998
  {
3893
3999
  "kind": "variable",
3894
4000
  "name": "styles",
3895
- "default": "css `\n :host {\n --_height: var(--u-chip-height, 32px);\n --_outline-width: var(--u-chip-outline-width, 1px);\n --_outline-color: var(--u-chip-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n --_shape: var(--u-chip-shape, var(--u-shape-corner-small, 8px));\n --_gap: var(--u-chip-gap, 8px);\n --_icon-size: var(--u-chip-icon-size, 1.125rem);\n --_remove-button-margin: var(--u-chip-remove-button-margin, 2px);\n --_remove-button-size: calc(var(--_height) - var(--_remove-button-margin) * 2);\n --_selected-icon-color: var(--u-chip-selected-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n display: inline-block;\n height: var(--_height);\n border-radius: var(--_shape);\n }\n\n :host(:not([disabled]):not([elevated]):not([selected])) .outline {\n border: var(--_outline-width) solid var(--_outline-color);\n }\n\n :host([elevated]:not([disabled])) {\n --u-elevation-level: var(--u-elevated-chip-elevation-level, 1);\n }\n\n @media (hover: hover) {\n :host([elevated]:not([disabled]):hover) {\n --u-elevation-level: var(--u-elevated-chip-hover-elevation-level, 2);\n }\n }\n .outline {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n }\n\n .container {\n display: flex;\n align-items: center;\n border-radius: inherit;\n height: 100%;\n padding-inline: var(--u-chip-padding, 16px);\n gap: var(--_gap);\n }\n\n .icon {\n width: 1em;\n height: var(--_icon-size);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--_icon-size);\n }\n\n .leading {\n color: var(--u-chip-leading-icon-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n .selected {\n color: var(--_selected-icon-color);\n }\n\n .trailing {\n color: var(--u-chip-trailing-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n .label {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-chip-label-line-height, var(--u-label-l-line-height, 1.25rem));\n font-size: var(--u-chip-label-font-size, var(--u-label-l-font-size, 0.875rem));\n letter-spacing: var(--u-chip-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n font-weight: var(--u-chip-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n }\n\n .remove-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: var(--_remove-button-size);\n height: var(--_remove-button-size);\n cursor: pointer;\n padding: 0;\n margin: 0;\n margin-inline: calc((var(--_remove-button-size) - var(--_icon-size)) * -0.5);\n background: gray;\n border: none;\n border-radius: var(--u-chip-remove-button-border-radius, var(--u-shape-corner-full, 9999px));\n background: none;\n appearance: none;\n outline: 0;\n outline-offset: 0;\n z-index: 1;\n }\n\n ::slotted([slot=remove-icon]),\n ::slotted([slot=selected-icon]),\n ::slotted([slot=leading-icon]),\n ::slotted([slot=trailing-icon]) {\n font-size: inherit !important;\n }\n\n slot[name=selected-icon] {\n display: none;\n }\n\n :host(:not([clickable]):not([toggle])) .button {\n cursor: auto;\n }\n\n :host([selected]:not([hide-selected-icon])) .leading {\n display: none;\n }\n :host([selected]:not([hide-selected-icon])) slot[name=selected-icon] {\n display: contents;\n }\n\n .default-select-icon {\n display: contents;\n }\n\n :host([has-selected-icon]) .default-select-icon {\n display: none;\n }\n\n :host([selected]:not([disabled])) {\n background-color: var(--u-chip-selected-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n }\n :host([selected]:not([disabled])) .leading {\n color: var(--u-chip-selected-leading-icon-color, var(--_selected-icon-color));\n }\n :host([selected]:not([disabled])) .trailing {\n color: var(--u-chip-selected-trailing-icon-color, var(--_selected-icon-color));\n }\n\n :host([has-leading-icon]) .container,\n :host([selected]:not([hide-selected-icon])) .container {\n padding-inline-start: var(--_gap);\n }\n\n :host([has-trailing-icon]) .container,\n :host([removable]) .container {\n padding-inline-end: var(--_gap);\n }\n\n :host(:not([has-leading-icon])) .leading {\n display: none;\n }\n\n :host([hide-selected-icon]) .selected,\n :host(:not([selected])) .selected {\n display: none;\n }\n\n :host(:not([has-trailing-icon])) .trailing {\n display: none;\n }\n\n [part=default-selected-icon] {\n display: contents;\n }\n`"
4001
+ "default": "css `\n :host {\n --_height: var(--u-chip-height, 32px);\n --_outline-width: var(--u-chip-outline-width, 1px);\n --_outline-color: var(--u-chip-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n --_shape: var(--u-chip-shape, var(--u-shape-corner-small, 8px));\n --_gap: var(--u-chip-gap, 8px);\n --_icon-size: var(--u-chip-icon-size, 1.125rem);\n --_remove-button-margin: var(--u-chip-remove-button-margin, 2px);\n --_remove-button-size: calc(var(--_height) - var(--_remove-button-margin) * 2);\n --_selected-icon-color: var(--u-chip-selected-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n display: inline-block;\n height: var(--_height);\n border-radius: var(--_shape);\n }\n\n :host(:not([disabled]):not([elevated]):not([selected])) .outline {\n border: var(--_outline-width) solid var(--_outline-color);\n }\n\n :host([elevated]:not([disabled])) {\n --u-elevation-level: var(--u-elevated-chip-elevation-level, 1);\n }\n\n @media (hover: hover) {\n :host([elevated]:not([disabled]):hover) {\n --u-elevation-level: var(--u-elevated-chip-hover-elevation-level, 2);\n }\n }\n .outline {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n }\n\n .container {\n display: flex;\n align-items: center;\n border-radius: inherit;\n height: 100%;\n padding-inline: var(--u-chip-padding, 16px);\n gap: var(--_gap);\n }\n\n .icon {\n width: 1em;\n height: var(--_icon-size);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--_icon-size);\n }\n\n .leading {\n color: var(--u-chip-leading-icon-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n .selected {\n color: var(--_selected-icon-color);\n }\n\n .trailing {\n color: var(--u-chip-trailing-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n .label {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-chip-label-line-height, var(--u-label-l-line-height, 1.25rem));\n font-size: var(--u-chip-label-font-size, var(--u-label-l-font-size, 0.875rem));\n letter-spacing: var(--u-chip-label-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n font-weight: var(--u-chip-label-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n }\n\n .remove-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: var(--_remove-button-size);\n height: var(--_remove-button-size);\n cursor: pointer;\n padding: 0;\n margin: 0;\n margin-inline: calc((var(--_remove-button-size) - var(--_icon-size)) * -0.5);\n background: gray;\n border: none;\n border-radius: var(--u-chip-remove-button-border-radius, var(--u-shape-corner-full, 9999px));\n background: none;\n appearance: none;\n outline: 0;\n outline-offset: 0;\n z-index: 1;\n }\n\n ::slotted([slot=remove-icon]),\n ::slotted([slot=selected-icon]),\n ::slotted([slot=leading-icon]),\n ::slotted([slot=trailing-icon]) {\n font-size: inherit !important;\n }\n\n slot[name=selected-icon] {\n display: none;\n }\n\n :host(:not([clickable]):not([toggle])) .button {\n cursor: auto;\n }\n\n :host([selected]:not([hide-selected-icon])) .leading {\n display: none;\n }\n :host([selected]:not([hide-selected-icon])) slot[name=selected-icon] {\n display: contents;\n }\n\n .default-select-icon {\n display: contents;\n }\n\n :host([has-selected-icon]) .default-select-icon {\n display: none;\n }\n\n :host([selected]:not([disabled])) {\n background-color: var(--u-chip-selected-bg-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n }\n :host([selected]:not([disabled])) .leading {\n color: var(--u-chip-selected-leading-icon-color, var(--_selected-icon-color));\n }\n :host([selected]:not([disabled])) .trailing {\n color: var(--u-chip-selected-trailing-icon-color, var(--_selected-icon-color));\n }\n\n :host([has-leading-icon]) .container,\n :host([selected]:not([hide-selected-icon])) .container {\n padding-inline-start: var(--_gap);\n }\n\n :host([has-trailing-icon]) .container,\n :host([removable]) .container {\n padding-inline-end: var(--_gap);\n }\n\n :host(:not([has-leading-icon])) .leading {\n display: none;\n }\n\n :host([hide-selected-icon]) .selected,\n :host(:not([selected])) .selected {\n display: none;\n }\n\n :host(:not([has-trailing-icon])) .trailing {\n display: none;\n }\n\n [part=default-selected-icon] {\n display: contents;\n }\n\n :host([disabled]) .remove-button {\n cursor: default;\n }\n`"
3896
4002
  }
3897
4003
  ],
3898
4004
  "exports": [
@@ -9384,6 +9490,32 @@
9384
9490
  "module": "src/shared/selection-control/selection-control-list-item.ts"
9385
9491
  }
9386
9492
  },
9493
+ {
9494
+ "kind": "field",
9495
+ "name": "inputDescribedById",
9496
+ "type": {
9497
+ "text": "string | undefined"
9498
+ },
9499
+ "privacy": "protected",
9500
+ "default": "'description'",
9501
+ "inheritedFrom": {
9502
+ "name": "UmSelectionControl",
9503
+ "module": "src/shared/selection-control/selection-control.ts"
9504
+ }
9505
+ },
9506
+ {
9507
+ "kind": "field",
9508
+ "name": "inputLabelledById",
9509
+ "type": {
9510
+ "text": "string | undefined"
9511
+ },
9512
+ "privacy": "protected",
9513
+ "default": "'label'",
9514
+ "inheritedFrom": {
9515
+ "name": "UmSelectionControl",
9516
+ "module": "src/shared/selection-control/selection-control.ts"
9517
+ }
9518
+ },
9387
9519
  {
9388
9520
  "kind": "method",
9389
9521
  "name": "render",
@@ -9654,10 +9786,10 @@
9654
9786
  },
9655
9787
  {
9656
9788
  "kind": "method",
9657
- "name": "#handleClick",
9789
+ "name": "#handleInput",
9658
9790
  "parameters": [
9659
9791
  {
9660
- "name": "e",
9792
+ "name": "event",
9661
9793
  "type": {
9662
9794
  "text": "Event"
9663
9795
  }
@@ -9667,24 +9799,51 @@
9667
9799
  "name": "UmSelectionControl",
9668
9800
  "module": "src/shared/selection-control/selection-control.ts"
9669
9801
  }
9670
- }
9671
- ],
9672
- "events": [
9802
+ },
9673
9803
  {
9674
- "name": "input",
9675
- "type": {
9676
- "text": "InputEvent"
9677
- },
9804
+ "kind": "method",
9805
+ "name": "#handleChange",
9806
+ "parameters": [
9807
+ {
9808
+ "name": "event",
9809
+ "type": {
9810
+ "text": "Event"
9811
+ }
9812
+ }
9813
+ ],
9814
+ "inheritedFrom": {
9815
+ "name": "UmSelectionControl",
9816
+ "module": "src/shared/selection-control/selection-control.ts"
9817
+ }
9818
+ },
9819
+ {
9820
+ "kind": "method",
9821
+ "name": "#handleRippleClick",
9822
+ "parameters": [
9823
+ {
9824
+ "name": "e",
9825
+ "type": {
9826
+ "text": "Event"
9827
+ }
9828
+ }
9829
+ ],
9678
9830
  "inheritedFrom": {
9679
9831
  "name": "UmSelectionControl",
9680
9832
  "module": "src/shared/selection-control/selection-control.ts"
9681
9833
  }
9682
9834
  },
9683
9835
  {
9684
- "name": "change",
9685
- "type": {
9686
- "text": "Event"
9687
- },
9836
+ "kind": "method",
9837
+ "name": "_handleClick",
9838
+ "privacy": "protected",
9839
+ "parameters": [
9840
+ {
9841
+ "name": "e",
9842
+ "type": {
9843
+ "text": "Event"
9844
+ }
9845
+ }
9846
+ ],
9688
9847
  "inheritedFrom": {
9689
9848
  "name": "UmSelectionControl",
9690
9849
  "module": "src/shared/selection-control/selection-control.ts"
@@ -9719,7 +9878,7 @@
9719
9878
  {
9720
9879
  "kind": "variable",
9721
9880
  "name": "styles",
9722
- "default": "css `\n :host {\n --_state-layer-padding: var(--u-radio-state-layer-padding, 4px);\n --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n --_indicator-color: var(--u-radio-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n display: inline-block;\n vertical-align: middle;\n }\n\n .container {\n cursor: pointer;\n position: relative;\n width: var(--_width);\n height: var(--_height);\n padding: var(--_state-layer-padding);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n :host([hide-state-layer]) .container {\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n padding: 0;\n }\n :host([hide-state-layer]) u-ripple {\n display: none;\n }\n\n input {\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n border-radius: inherit;\n appearance: none;\n pointer-events: none;\n }\n\n u-ripple {\n padding: var(--_state-layer-padding);\n }\n\n .indicator-container {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n pointer-events: none;\n }\n\n input:checked ~ .indicator-container {\n --_indicator-color: var(--u-radio-indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n :host([disabled]) {\n opacity: var(--u-radio-disabled-state-opacity, 0.38);\n }\n :host([disabled]) input,\n :host([disabled]) .container {\n cursor: default;\n }\n :host([disabled]) .indicator-container {\n --_indicator-color: var(--u-radio-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n\n :host {\n --_indicator-size: var(--u-radio-indicator-size, 1.25rem);\n --_width: var(--u-radio-size, 3rem);\n --_height: var(--_width);\n }\n\n .indicator {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n border: var(--u-radio-indicator-border-width, 0.125rem) solid var(--_indicator-color);\n border-radius: 50%;\n }\n .indicator::before {\n content: \"\";\n width: calc(var(--_indicator-size) / 2);\n height: calc(var(--_indicator-size) / 2);\n background: var(--_indicator-color);\n border-radius: 50%;\n transition: transform 250ms;\n transform: scale3d(0, 0, 1);\n }\n\n input:checked ~ .indicator-container .indicator::before {\n transform: scale3d(1, 1, 1);\n }\n`"
9881
+ "default": "css `\n :host {\n --_indicator-size: var(--u-radio-indicator-size, 1.25rem);\n --_width: var(--u-radio-size, 3rem);\n --_height: var(--_width);\n }\n\n .indicator {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n border: var(--u-radio-indicator-border-width, 0.125rem) solid var(--_indicator-color);\n border-radius: 50%;\n }\n .indicator::before {\n content: \"\";\n width: calc(var(--_indicator-size) / 2);\n height: calc(var(--_indicator-size) / 2);\n background: var(--_indicator-color);\n border-radius: 50%;\n transition: transform 250ms;\n transform: scale3d(0, 0, 1);\n }\n\n input:checked ~ .indicator-container .indicator::before {\n transform: scale3d(1, 1, 1);\n }\n`"
9723
9882
  }
9724
9883
  ],
9725
9884
  "exports": [
@@ -9949,6 +10108,32 @@
9949
10108
  "module": "src/shared/selection-control/selection-control.ts"
9950
10109
  }
9951
10110
  },
10111
+ {
10112
+ "kind": "field",
10113
+ "name": "inputDescribedById",
10114
+ "type": {
10115
+ "text": "string | undefined"
10116
+ },
10117
+ "privacy": "protected",
10118
+ "default": "undefined",
10119
+ "inheritedFrom": {
10120
+ "name": "UmSelectionControl",
10121
+ "module": "src/shared/selection-control/selection-control.ts"
10122
+ }
10123
+ },
10124
+ {
10125
+ "kind": "field",
10126
+ "name": "inputLabelledById",
10127
+ "type": {
10128
+ "text": "string | undefined"
10129
+ },
10130
+ "privacy": "protected",
10131
+ "default": "undefined",
10132
+ "inheritedFrom": {
10133
+ "name": "UmSelectionControl",
10134
+ "module": "src/shared/selection-control/selection-control.ts"
10135
+ }
10136
+ },
9952
10137
  {
9953
10138
  "kind": "field",
9954
10139
  "name": "value",
@@ -9979,7 +10164,56 @@
9979
10164
  },
9980
10165
  {
9981
10166
  "kind": "method",
9982
- "name": "#handleClick",
10167
+ "name": "#handleInput",
10168
+ "parameters": [
10169
+ {
10170
+ "name": "event",
10171
+ "type": {
10172
+ "text": "Event"
10173
+ }
10174
+ }
10175
+ ],
10176
+ "inheritedFrom": {
10177
+ "name": "UmSelectionControl",
10178
+ "module": "src/shared/selection-control/selection-control.ts"
10179
+ }
10180
+ },
10181
+ {
10182
+ "kind": "method",
10183
+ "name": "#handleChange",
10184
+ "parameters": [
10185
+ {
10186
+ "name": "event",
10187
+ "type": {
10188
+ "text": "Event"
10189
+ }
10190
+ }
10191
+ ],
10192
+ "inheritedFrom": {
10193
+ "name": "UmSelectionControl",
10194
+ "module": "src/shared/selection-control/selection-control.ts"
10195
+ }
10196
+ },
10197
+ {
10198
+ "kind": "method",
10199
+ "name": "#handleRippleClick",
10200
+ "parameters": [
10201
+ {
10202
+ "name": "e",
10203
+ "type": {
10204
+ "text": "Event"
10205
+ }
10206
+ }
10207
+ ],
10208
+ "inheritedFrom": {
10209
+ "name": "UmSelectionControl",
10210
+ "module": "src/shared/selection-control/selection-control.ts"
10211
+ }
10212
+ },
10213
+ {
10214
+ "kind": "method",
10215
+ "name": "_handleClick",
10216
+ "privacy": "protected",
9983
10217
  "parameters": [
9984
10218
  {
9985
10219
  "name": "e",
@@ -10058,29 +10292,7 @@
10058
10292
  "module": "/src/shared/selection-control/selection-control.js"
10059
10293
  },
10060
10294
  "tagName": "u-radio",
10061
- "customElement": true,
10062
- "events": [
10063
- {
10064
- "name": "input",
10065
- "type": {
10066
- "text": "InputEvent"
10067
- },
10068
- "inheritedFrom": {
10069
- "name": "UmSelectionControl",
10070
- "module": "src/shared/selection-control/selection-control.ts"
10071
- }
10072
- },
10073
- {
10074
- "name": "change",
10075
- "type": {
10076
- "text": "Event"
10077
- },
10078
- "inheritedFrom": {
10079
- "name": "UmSelectionControl",
10080
- "module": "src/shared/selection-control/selection-control.ts"
10081
- }
10082
- }
10083
- ]
10295
+ "customElement": true
10084
10296
  }
10085
10297
  ],
10086
10298
  "exports": [
@@ -12895,6 +13107,32 @@
12895
13107
  "module": "src/shared/selection-control/selection-control-list-item.ts"
12896
13108
  }
12897
13109
  },
13110
+ {
13111
+ "kind": "field",
13112
+ "name": "inputDescribedById",
13113
+ "type": {
13114
+ "text": "string | undefined"
13115
+ },
13116
+ "privacy": "protected",
13117
+ "default": "'description'",
13118
+ "inheritedFrom": {
13119
+ "name": "UmSelectionControl",
13120
+ "module": "src/shared/selection-control/selection-control.ts"
13121
+ }
13122
+ },
13123
+ {
13124
+ "kind": "field",
13125
+ "name": "inputLabelledById",
13126
+ "type": {
13127
+ "text": "string | undefined"
13128
+ },
13129
+ "privacy": "protected",
13130
+ "default": "'label'",
13131
+ "inheritedFrom": {
13132
+ "name": "UmSelectionControl",
13133
+ "module": "src/shared/selection-control/selection-control.ts"
13134
+ }
13135
+ },
12898
13136
  {
12899
13137
  "kind": "method",
12900
13138
  "name": "render",
@@ -13105,10 +13343,10 @@
13105
13343
  },
13106
13344
  {
13107
13345
  "kind": "method",
13108
- "name": "#handleClick",
13346
+ "name": "#handleInput",
13109
13347
  "parameters": [
13110
13348
  {
13111
- "name": "e",
13349
+ "name": "event",
13112
13350
  "type": {
13113
13351
  "text": "Event"
13114
13352
  }
@@ -13118,24 +13356,51 @@
13118
13356
  "name": "UmSelectionControl",
13119
13357
  "module": "src/shared/selection-control/selection-control.ts"
13120
13358
  }
13121
- }
13122
- ],
13123
- "events": [
13359
+ },
13124
13360
  {
13125
- "name": "input",
13126
- "type": {
13127
- "text": "InputEvent"
13128
- },
13361
+ "kind": "method",
13362
+ "name": "#handleChange",
13363
+ "parameters": [
13364
+ {
13365
+ "name": "event",
13366
+ "type": {
13367
+ "text": "Event"
13368
+ }
13369
+ }
13370
+ ],
13129
13371
  "inheritedFrom": {
13130
13372
  "name": "UmSelectionControl",
13131
13373
  "module": "src/shared/selection-control/selection-control.ts"
13132
13374
  }
13133
13375
  },
13134
13376
  {
13135
- "name": "change",
13136
- "type": {
13137
- "text": "Event"
13138
- },
13377
+ "kind": "method",
13378
+ "name": "#handleRippleClick",
13379
+ "parameters": [
13380
+ {
13381
+ "name": "e",
13382
+ "type": {
13383
+ "text": "Event"
13384
+ }
13385
+ }
13386
+ ],
13387
+ "inheritedFrom": {
13388
+ "name": "UmSelectionControl",
13389
+ "module": "src/shared/selection-control/selection-control.ts"
13390
+ }
13391
+ },
13392
+ {
13393
+ "kind": "method",
13394
+ "name": "_handleClick",
13395
+ "privacy": "protected",
13396
+ "parameters": [
13397
+ {
13398
+ "name": "e",
13399
+ "type": {
13400
+ "text": "Event"
13401
+ }
13402
+ }
13403
+ ],
13139
13404
  "inheritedFrom": {
13140
13405
  "name": "UmSelectionControl",
13141
13406
  "module": "src/shared/selection-control/selection-control.ts"
@@ -13170,7 +13435,7 @@
13170
13435
  {
13171
13436
  "kind": "variable",
13172
13437
  "name": "styles",
13173
- "default": "css `\n :host {\n --_state-layer-padding: var(--u-switch-state-layer-padding, 4px);\n --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n --_indicator-color: var(--u-switch-indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n display: inline-block;\n vertical-align: middle;\n }\n\n .container {\n cursor: pointer;\n position: relative;\n width: var(--_width);\n height: var(--_height);\n padding: var(--_state-layer-padding);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n :host([hide-state-layer]) .container {\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n padding: 0;\n }\n :host([hide-state-layer]) u-ripple {\n display: none;\n }\n\n input {\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n border-radius: inherit;\n appearance: none;\n pointer-events: none;\n }\n\n u-ripple {\n padding: var(--_state-layer-padding);\n }\n\n .indicator-container {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n pointer-events: none;\n }\n\n input:checked ~ .indicator-container {\n --_indicator-color: var(--u-switch-indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n :host([disabled]) {\n opacity: var(--u-switch-disabled-state-opacity, 0.38);\n }\n :host([disabled]) input,\n :host([disabled]) .container {\n cursor: default;\n }\n :host([disabled]) .indicator-container {\n --_indicator-color: var(--u-switch-indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n\n :host {\n --_width: 3.25rem;\n --_height: 2rem;\n --_state-layer-padding: 0;\n --_selected-track-background: var(--u-switch-track-bg-color, var(--u-color-primary, rgb(103, 80, 164)));\n --_state-layer-size: var(--u-switch-state-layer-size, 2.5rem);\n --_unselected-color: var(--u-switch-track-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n --_unselected-handle-size: var(--u-swich-unselected-handle-size, 1rem);\n --_selected-handle-size: var(--u-swich-unselected-handle-size, 1.5rem);\n --_active-handle-size: var(--u-swich-unselected-handle-size, 1.75rem);\n }\n\n .indicator-container {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n width: var(--_height);\n transition: width 200ms;\n }\n\n .state-layer,\n .indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .indicator {\n width: var(--_height);\n height: var(--_height);\n }\n\n .state-layer {\n flex-shrink: 0;\n width: var(--_state-layer-size);\n height: var(--_state-layer-size);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n .handle {\n width: var(--_unselected-handle-size);\n height: var(--_unselected-handle-size);\n background-color: var(--u-switch-unselected-handle-color, var(--_unselected-color));\n border-radius: var(--u-switch-handle-shape-corner, var(--u-shape-corner-full, 9999px));\n transition: background 200ms, width 200ms, height 200ms;\n }\n\n input {\n border: var(--u-switch-track-width, 0.125rem) solid var(--u-switch-unselected-track-outline-color, var(--_unselected-color));\n background-color: var(--u-switch-unselected-track-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));\n transition: background 200ms, border-color 200ms;\n }\n input:checked {\n background-color: var(--_selected-track-background);\n border-color: var(--_selected-track-background);\n }\n input:checked ~ .indicator-container {\n width: 100%;\n }\n input:checked ~ .indicator-container .handle {\n width: var(--_selected-handle-size);\n height: var(--_selected-handle-size);\n background-color: var(--u-switch-selected-handle-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n @media (hover: hover) {\n :host(:not([disabled]):hover) .state-layer {\n background-color: rgba(var(--u-color-on-surface-rgb, ), var(--u-switch-state-layer-hover-opacity, var(--u-state-hover-opacity, 0.08)));\n }\n }\n :host(:not([disabled]):active) .indicator-container .handle {\n width: var(--_active-handle-size);\n height: var(--_active-handle-size);\n }\n`"
13438
+ "default": "css `\n :host {\n --_width: 3.25rem;\n --_height: 2rem;\n --_state-layer-padding: 0;\n --_selected-track-background: var(--u-switch-track-bg-color, var(--u-color-primary, rgb(103, 80, 164)));\n --_state-layer-size: var(--u-switch-state-layer-size, 2.5rem);\n --_unselected-color: var(--u-switch-track-outline-color, var(--u-color-outline, rgb(121, 116, 126)));\n --_unselected-handle-size: var(--u-swich-unselected-handle-size, 1rem);\n --_selected-handle-size: var(--u-swich-unselected-handle-size, 1.5rem);\n --_active-handle-size: var(--u-swich-unselected-handle-size, 1.75rem);\n }\n\n .indicator-container {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n width: var(--_height);\n transition: width 200ms;\n }\n\n .state-layer,\n .indicator {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .indicator {\n width: var(--_height);\n height: var(--_height);\n }\n\n .state-layer {\n flex-shrink: 0;\n width: var(--_state-layer-size);\n height: var(--_state-layer-size);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n .handle {\n width: var(--_unselected-handle-size);\n height: var(--_unselected-handle-size);\n background-color: var(--u-switch-unselected-handle-color, var(--_unselected-color));\n border-radius: var(--u-switch-handle-shape-corner, var(--u-shape-corner-full, 9999px));\n transition: background 200ms, width 200ms, height 200ms;\n }\n\n input {\n border: var(--u-switch-track-width, 0.125rem) solid var(--u-switch-unselected-track-outline-color, var(--_unselected-color));\n background-color: var(--u-switch-unselected-track-bg-color, var(--u-color-surface-container-highest, rgb(230, 224, 233)));\n transition: background 200ms, border-color 200ms;\n }\n input:checked {\n background-color: var(--_selected-track-background);\n border-color: var(--_selected-track-background);\n }\n input:checked ~ .indicator-container {\n width: 100%;\n }\n input:checked ~ .indicator-container .handle {\n width: var(--_selected-handle-size);\n height: var(--_selected-handle-size);\n background-color: var(--u-switch-selected-handle-color, var(--u-color-on-primary, rgb(255, 255, 255)));\n }\n\n @media (hover: hover) {\n :host(:not([disabled]):hover) .state-layer {\n background-color: rgba(var(--u-color-on-surface-rgb, ), var(--u-switch-state-layer-hover-opacity, var(--u-state-hover-opacity, 0.08)));\n }\n }\n :host(:not([disabled]):active) .indicator-container .handle {\n width: var(--_active-handle-size);\n height: var(--_active-handle-size);\n }\n`"
13174
13439
  }
13175
13440
  ],
13176
13441
  "exports": [
@@ -13351,6 +13616,32 @@
13351
13616
  "module": "src/shared/selection-control/selection-control.ts"
13352
13617
  }
13353
13618
  },
13619
+ {
13620
+ "kind": "field",
13621
+ "name": "inputDescribedById",
13622
+ "type": {
13623
+ "text": "string | undefined"
13624
+ },
13625
+ "privacy": "protected",
13626
+ "default": "undefined",
13627
+ "inheritedFrom": {
13628
+ "name": "UmSelectionControl",
13629
+ "module": "src/shared/selection-control/selection-control.ts"
13630
+ }
13631
+ },
13632
+ {
13633
+ "kind": "field",
13634
+ "name": "inputLabelledById",
13635
+ "type": {
13636
+ "text": "string | undefined"
13637
+ },
13638
+ "privacy": "protected",
13639
+ "default": "undefined",
13640
+ "inheritedFrom": {
13641
+ "name": "UmSelectionControl",
13642
+ "module": "src/shared/selection-control/selection-control.ts"
13643
+ }
13644
+ },
13354
13645
  {
13355
13646
  "kind": "field",
13356
13647
  "name": "value",
@@ -13390,7 +13681,56 @@
13390
13681
  },
13391
13682
  {
13392
13683
  "kind": "method",
13393
- "name": "#handleClick",
13684
+ "name": "#handleInput",
13685
+ "parameters": [
13686
+ {
13687
+ "name": "event",
13688
+ "type": {
13689
+ "text": "Event"
13690
+ }
13691
+ }
13692
+ ],
13693
+ "inheritedFrom": {
13694
+ "name": "UmSelectionControl",
13695
+ "module": "src/shared/selection-control/selection-control.ts"
13696
+ }
13697
+ },
13698
+ {
13699
+ "kind": "method",
13700
+ "name": "#handleChange",
13701
+ "parameters": [
13702
+ {
13703
+ "name": "event",
13704
+ "type": {
13705
+ "text": "Event"
13706
+ }
13707
+ }
13708
+ ],
13709
+ "inheritedFrom": {
13710
+ "name": "UmSelectionControl",
13711
+ "module": "src/shared/selection-control/selection-control.ts"
13712
+ }
13713
+ },
13714
+ {
13715
+ "kind": "method",
13716
+ "name": "#handleRippleClick",
13717
+ "parameters": [
13718
+ {
13719
+ "name": "e",
13720
+ "type": {
13721
+ "text": "Event"
13722
+ }
13723
+ }
13724
+ ],
13725
+ "inheritedFrom": {
13726
+ "name": "UmSelectionControl",
13727
+ "module": "src/shared/selection-control/selection-control.ts"
13728
+ }
13729
+ },
13730
+ {
13731
+ "kind": "method",
13732
+ "name": "_handleClick",
13733
+ "privacy": "protected",
13394
13734
  "parameters": [
13395
13735
  {
13396
13736
  "name": "e",
@@ -13461,28 +13801,6 @@
13461
13801
  "module": "src/shared/selection-control/selection-control.ts"
13462
13802
  }
13463
13803
  }
13464
- ],
13465
- "events": [
13466
- {
13467
- "name": "input",
13468
- "type": {
13469
- "text": "InputEvent"
13470
- },
13471
- "inheritedFrom": {
13472
- "name": "UmSelectionControl",
13473
- "module": "src/shared/selection-control/selection-control.ts"
13474
- }
13475
- },
13476
- {
13477
- "name": "change",
13478
- "type": {
13479
- "text": "Event"
13480
- },
13481
- "inheritedFrom": {
13482
- "name": "UmSelectionControl",
13483
- "module": "src/shared/selection-control/selection-control.ts"
13484
- }
13485
- }
13486
13804
  ]
13487
13805
  }
13488
13806
  ],
@@ -17951,6 +18269,83 @@
17951
18269
  "declarations": [],
17952
18270
  "exports": []
17953
18271
  },
18272
+ {
18273
+ "kind": "javascript-module",
18274
+ "path": "src/shared/sets/set-base.styles.ts",
18275
+ "declarations": [
18276
+ {
18277
+ "kind": "variable",
18278
+ "name": "styles",
18279
+ "default": "css `\n :host {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-wrap: nowrap;\n }\n\n :host([alignment=start]) {\n justify-content: flex-start;\n }\n\n :host([alignment=center]) {\n justify-content: center;\n }\n\n :host([alignment=end]) {\n justify-content: flex-end;\n }\n`"
18280
+ }
18281
+ ],
18282
+ "exports": [
18283
+ {
18284
+ "kind": "js",
18285
+ "name": "styles",
18286
+ "declaration": {
18287
+ "name": "styles",
18288
+ "module": "src/shared/sets/set-base.styles.ts"
18289
+ }
18290
+ }
18291
+ ]
18292
+ },
18293
+ {
18294
+ "kind": "javascript-module",
18295
+ "path": "src/shared/sets/set-base.ts",
18296
+ "declarations": [
18297
+ {
18298
+ "kind": "class",
18299
+ "description": "",
18300
+ "name": "UmSetBase",
18301
+ "members": [
18302
+ {
18303
+ "kind": "field",
18304
+ "name": "alignment",
18305
+ "type": {
18306
+ "text": "'start' | 'center' | 'end'"
18307
+ },
18308
+ "default": "'start'",
18309
+ "description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
18310
+ "attribute": "alignment",
18311
+ "reflects": true
18312
+ }
18313
+ ],
18314
+ "attributes": [
18315
+ {
18316
+ "name": "alignment",
18317
+ "type": {
18318
+ "text": "'start' | 'center' | 'end'"
18319
+ },
18320
+ "default": "'start'",
18321
+ "description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
18322
+ "fieldName": "alignment"
18323
+ }
18324
+ ],
18325
+ "superclass": {
18326
+ "name": "LitElement",
18327
+ "package": "lit"
18328
+ },
18329
+ "customElement": true
18330
+ }
18331
+ ],
18332
+ "exports": [
18333
+ {
18334
+ "kind": "js",
18335
+ "name": "UmSetBase",
18336
+ "declaration": {
18337
+ "name": "UmSetBase",
18338
+ "module": "src/shared/sets/set-base.ts"
18339
+ }
18340
+ }
18341
+ ]
18342
+ },
18343
+ {
18344
+ "kind": "javascript-module",
18345
+ "path": "src/shared/selection-control/checkbox-base.ts",
18346
+ "declarations": [],
18347
+ "exports": []
18348
+ },
17954
18349
  {
17955
18350
  "kind": "javascript-module",
17956
18351
  "path": "src/shared/selection-control/selection-control-list-item.ts",
@@ -17978,6 +18373,24 @@
17978
18373
  "default": "false",
17979
18374
  "attribute": "leading"
17980
18375
  },
18376
+ {
18377
+ "kind": "field",
18378
+ "name": "inputDescribedById",
18379
+ "type": {
18380
+ "text": "string"
18381
+ },
18382
+ "privacy": "protected",
18383
+ "default": "'description'"
18384
+ },
18385
+ {
18386
+ "kind": "field",
18387
+ "name": "inputLabelledById",
18388
+ "type": {
18389
+ "text": "string"
18390
+ },
18391
+ "privacy": "protected",
18392
+ "default": "'label'"
18393
+ },
17981
18394
  {
17982
18395
  "kind": "method",
17983
18396
  "name": "render",
@@ -18026,7 +18439,7 @@
18026
18439
  {
18027
18440
  "kind": "variable",
18028
18441
  "name": "styles",
18029
- "default": "css `\n :host {\n --_state-layer-padding: var(--u--state-layer-padding, 4px);\n --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n --_indicator-color: var(--u--indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n display: inline-block;\n vertical-align: middle;\n }\n\n .container {\n cursor: pointer;\n position: relative;\n width: var(--_width);\n height: var(--_height);\n padding: var(--_state-layer-padding);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n :host([hide-state-layer]) .container {\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n padding: 0;\n }\n :host([hide-state-layer]) u-ripple {\n display: none;\n }\n\n input {\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n border-radius: inherit;\n appearance: none;\n pointer-events: none;\n }\n\n u-ripple {\n padding: var(--_state-layer-padding);\n }\n\n .indicator-container {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n pointer-events: none;\n }\n\n input:checked ~ .indicator-container {\n --_indicator-color: var(--u--indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n :host([disabled]) {\n opacity: var(--u--disabled-state-opacity, 0.38);\n }\n :host([disabled]) input,\n :host([disabled]) .container {\n cursor: default;\n }\n :host([disabled]) .indicator-container {\n --_indicator-color: var(--u--indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n`"
18442
+ "default": "css `\n :host {\n --_state-layer-padding: var(--u--state-layer-padding, 4px);\n --_input-size: calc(var(--_width) - var(--_state-layer-padding) * 2);\n --_indicator-color: var(--u--indicator-unselected-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n display: inline-block;\n vertical-align: middle;\n }\n\n .container {\n cursor: pointer;\n position: relative;\n width: var(--_width);\n height: var(--_height);\n padding: var(--_state-layer-padding);\n border-radius: var(--u-shape-corner-full, 9999px);\n }\n\n :host([hide-state-layer]) .container {\n width: var(--_indicator-size);\n height: var(--_indicator-size);\n padding: 0;\n }\n :host([hide-state-layer]) u-ripple {\n display: none;\n }\n\n input {\n cursor: pointer;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n border-radius: inherit;\n appearance: none;\n }\n\n u-ripple {\n padding: var(--_state-layer-padding);\n }\n\n .indicator-container {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n inset: 0;\n pointer-events: none;\n }\n\n input:checked ~ .indicator-container {\n --_indicator-color: var(--u--indicator-selected-color, var(--u-color-primary, rgb(103, 80, 164)));\n }\n\n :host([disabled]) {\n opacity: var(--u--disabled-state-opacity, 0.38);\n }\n :host([disabled]) input,\n :host([disabled]) .container {\n cursor: default;\n }\n :host([disabled]) .indicator-container {\n --_indicator-color: var(--u--indicator-disabled-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n`"
18030
18443
  }
18031
18444
  ],
18032
18445
  "exports": [
@@ -18044,6 +18457,18 @@
18044
18457
  "kind": "javascript-module",
18045
18458
  "path": "src/shared/selection-control/selection-control.ts",
18046
18459
  "declarations": [
18460
+ {
18461
+ "kind": "function",
18462
+ "name": "isActivationClick",
18463
+ "parameters": [
18464
+ {
18465
+ "name": "event",
18466
+ "type": {
18467
+ "text": "Event"
18468
+ }
18469
+ }
18470
+ ]
18471
+ },
18047
18472
  {
18048
18473
  "kind": "class",
18049
18474
  "description": "",
@@ -18149,6 +18574,24 @@
18149
18574
  "privacy": "protected",
18150
18575
  "default": "true"
18151
18576
  },
18577
+ {
18578
+ "kind": "field",
18579
+ "name": "inputDescribedById",
18580
+ "type": {
18581
+ "text": "string | undefined"
18582
+ },
18583
+ "privacy": "protected",
18584
+ "default": "undefined"
18585
+ },
18586
+ {
18587
+ "kind": "field",
18588
+ "name": "inputLabelledById",
18589
+ "type": {
18590
+ "text": "string | undefined"
18591
+ },
18592
+ "privacy": "protected",
18593
+ "default": "undefined"
18594
+ },
18152
18595
  {
18153
18596
  "kind": "method",
18154
18597
  "name": "renderIndicator",
@@ -18186,29 +18629,52 @@
18186
18629
  },
18187
18630
  {
18188
18631
  "kind": "method",
18189
- "name": "#handleClick",
18632
+ "name": "#handleInput",
18190
18633
  "parameters": [
18191
18634
  {
18192
- "name": "e",
18635
+ "name": "event",
18193
18636
  "type": {
18194
18637
  "text": "Event"
18195
18638
  }
18196
18639
  }
18197
18640
  ]
18198
- }
18199
- ],
18200
- "events": [
18641
+ },
18201
18642
  {
18202
- "name": "input",
18203
- "type": {
18204
- "text": "InputEvent"
18205
- }
18643
+ "kind": "method",
18644
+ "name": "#handleChange",
18645
+ "parameters": [
18646
+ {
18647
+ "name": "event",
18648
+ "type": {
18649
+ "text": "Event"
18650
+ }
18651
+ }
18652
+ ]
18206
18653
  },
18207
18654
  {
18208
- "name": "change",
18209
- "type": {
18210
- "text": "Event"
18211
- }
18655
+ "kind": "method",
18656
+ "name": "#handleRippleClick",
18657
+ "parameters": [
18658
+ {
18659
+ "name": "e",
18660
+ "type": {
18661
+ "text": "Event"
18662
+ }
18663
+ }
18664
+ ]
18665
+ },
18666
+ {
18667
+ "kind": "method",
18668
+ "name": "_handleClick",
18669
+ "privacy": "protected",
18670
+ "parameters": [
18671
+ {
18672
+ "name": "e",
18673
+ "type": {
18674
+ "text": "Event"
18675
+ }
18676
+ }
18677
+ ]
18212
18678
  }
18213
18679
  ],
18214
18680
  "attributes": [
@@ -18256,81 +18722,18 @@
18256
18722
  "exports": [
18257
18723
  {
18258
18724
  "kind": "js",
18259
- "name": "UmSelectionControl",
18725
+ "name": "isActivationClick",
18260
18726
  "declaration": {
18261
- "name": "UmSelectionControl",
18727
+ "name": "isActivationClick",
18262
18728
  "module": "src/shared/selection-control/selection-control.ts"
18263
18729
  }
18264
- }
18265
- ]
18266
- },
18267
- {
18268
- "kind": "javascript-module",
18269
- "path": "src/shared/sets/set-base.styles.ts",
18270
- "declarations": [
18271
- {
18272
- "kind": "variable",
18273
- "name": "styles",
18274
- "default": "css `\n :host {\n display: flex;\n gap: 8px;\n align-items: center;\n flex-wrap: nowrap;\n }\n\n :host([alignment=start]) {\n justify-content: flex-start;\n }\n\n :host([alignment=center]) {\n justify-content: center;\n }\n\n :host([alignment=end]) {\n justify-content: flex-end;\n }\n`"
18275
- }
18276
- ],
18277
- "exports": [
18278
- {
18279
- "kind": "js",
18280
- "name": "styles",
18281
- "declaration": {
18282
- "name": "styles",
18283
- "module": "src/shared/sets/set-base.styles.ts"
18284
- }
18285
- }
18286
- ]
18287
- },
18288
- {
18289
- "kind": "javascript-module",
18290
- "path": "src/shared/sets/set-base.ts",
18291
- "declarations": [
18292
- {
18293
- "kind": "class",
18294
- "description": "",
18295
- "name": "UmSetBase",
18296
- "members": [
18297
- {
18298
- "kind": "field",
18299
- "name": "alignment",
18300
- "type": {
18301
- "text": "'start' | 'center' | 'end'"
18302
- },
18303
- "default": "'start'",
18304
- "description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
18305
- "attribute": "alignment",
18306
- "reflects": true
18307
- }
18308
- ],
18309
- "attributes": [
18310
- {
18311
- "name": "alignment",
18312
- "type": {
18313
- "text": "'start' | 'center' | 'end'"
18314
- },
18315
- "default": "'start'",
18316
- "description": "Set the alignment of the set at the `start`, `center` or at the `end`.",
18317
- "fieldName": "alignment"
18318
- }
18319
- ],
18320
- "superclass": {
18321
- "name": "LitElement",
18322
- "package": "lit"
18323
- },
18324
- "customElement": true
18325
- }
18326
- ],
18327
- "exports": [
18730
+ },
18328
18731
  {
18329
18732
  "kind": "js",
18330
- "name": "UmSetBase",
18733
+ "name": "UmSelectionControl",
18331
18734
  "declaration": {
18332
- "name": "UmSetBase",
18333
- "module": "src/shared/sets/set-base.ts"
18735
+ "name": "UmSelectionControl",
18736
+ "module": "src/shared/selection-control/selection-control.ts"
18334
18737
  }
18335
18738
  }
18336
18739
  ]