@sky.ui/core 0.0.29 → 0.0.30

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 (4) hide show
  1. package/auto-import.js +1 -1
  2. package/dist/custom-elements.json +1148 -1148
  3. package/package.json +1 -1
  4. package/plugins/ce-auto-import.js +1 -1
package/dist/custom-elements.json CHANGED
@@ -453,38 +453,34 @@
453
453
  },
454
454
  {
455
455
  "kind": "javascript-module",
456
- "path": "src/sky-appbar/sky-appbar.ts",
456
+ "path": "src/sky-badge/sky-badge.ts",
457
457
  "declarations": [
458
458
  {
459
459
  "kind": "class",
460
460
  "description": "",
461
- "name": "SkyAppbar",
461
+ "name": "SkyBadge",
462
462
  "cssParts": [
463
463
  {
464
- "description": "Wrapper that contains the leading slot, title, and actions.",
465
- "name": "content"
466
- },
467
- {
468
- "description": "Container for the leading slot (e.g. menu button).",
469
- "name": "leading"
464
+ "description": "Wrapper around the slotted content and the badge.",
465
+ "name": "container"
470
466
  },
471
467
  {
472
- "description": "The title area (contains .title-text with the title string).",
473
- "name": "title"
468
+ "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
469
+ "name": "badge"
474
470
  },
475
471
  {
476
- "description": "The trailing actions container.",
477
- "name": "actions"
472
+ "description": "The icon element when `isIcon` is true.",
473
+ "name": "icon"
478
474
  }
479
475
  ],
480
476
  "slots": [
481
477
  {
482
- "description": "Leading area (e.g., menu/back button). Defaults to a hamburger icon.",
483
- "name": "button"
478
+ "description": "The content the badge attaches to.",
479
+ "name": ""
484
480
  },
485
481
  {
486
- "description": "Trailing actions (icons/buttons). This is the default slot.",
487
- "name": ""
482
+ "description": "Optional slot to override the badge content entirely.",
483
+ "name": "badge"
488
484
  }
489
485
  ],
490
486
  "members": [
@@ -499,269 +495,614 @@
499
495
  },
500
496
  {
501
497
  "kind": "field",
502
- "name": "title",
498
+ "name": "statusColor",
503
499
  "type": {
504
500
  "text": "string"
505
501
  },
506
- "default": "\"App Bar\"",
507
- "description": "Title text displayed in the app bar.",
508
- "attribute": "title"
502
+ "default": "\"success\"",
503
+ "description": "Badge background token or CSS color.",
504
+ "attribute": "statusColor",
505
+ "reflects": true
509
506
  },
510
507
  {
511
508
  "kind": "field",
512
- "name": "color",
509
+ "name": "textColor",
513
510
  "type": {
514
511
  "text": "string"
515
512
  },
516
513
  "default": "\"default\"",
517
- "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
518
- "attribute": "color"
514
+ "description": "Text color token or CSS color.",
515
+ "attribute": "textColor",
516
+ "reflects": true
519
517
  },
520
518
  {
521
519
  "kind": "field",
522
- "name": "url",
520
+ "name": "iconColor",
523
521
  "type": {
524
522
  "text": "string"
525
523
  },
526
524
  "default": "\"\"",
527
- "description": "Background image URL.",
528
- "attribute": "url"
525
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
526
+ "attribute": "iconColor",
527
+ "reflects": true
529
528
  },
530
529
  {
531
530
  "kind": "field",
532
- "name": "banner",
531
+ "name": "position",
532
+ "type": {
533
+ "text": "SkyBadgePosition"
534
+ },
535
+ "default": "\"default\"",
536
+ "description": "Layout mode: `default | floating | inline`.",
537
+ "attribute": "position",
538
+ "reflects": true
539
+ },
540
+ {
541
+ "kind": "field",
542
+ "name": "value",
543
+ "type": {
544
+ "text": "string"
545
+ },
546
+ "default": "\"\"",
547
+ "description": "Badge text/count or icon name in icon mode.",
548
+ "attribute": "value"
549
+ },
550
+ {
551
+ "kind": "field",
552
+ "name": "isIcon",
533
553
  "type": {
534
554
  "text": "boolean"
535
555
  },
536
- "default": "true",
537
- "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
538
- "attribute": "banner"
556
+ "default": "false",
557
+ "description": "Renders icon mode when true.",
558
+ "attribute": "isIcon",
559
+ "reflects": true
539
560
  },
540
561
  {
541
562
  "kind": "field",
542
- "name": "dense",
563
+ "name": "size",
564
+ "type": {
565
+ "text": "string"
566
+ },
567
+ "default": "\"\"",
568
+ "description": "Badge and icon size CSS length.",
569
+ "attribute": "size",
570
+ "reflects": true
571
+ },
572
+ {
573
+ "kind": "field",
574
+ "name": "shape",
575
+ "type": {
576
+ "text": "SkyBadgeShape"
577
+ },
578
+ "default": "\"custom\"",
579
+ "description": "Badge shape: `circle | pill | custom`.",
580
+ "attribute": "shape",
581
+ "reflects": true
582
+ },
583
+ {
584
+ "kind": "field",
585
+ "name": "max",
586
+ "type": {
587
+ "text": "number"
588
+ },
589
+ "default": "99",
590
+ "description": "Maximum numeric count before rendering overflow label.",
591
+ "attribute": "max"
592
+ },
593
+ {
594
+ "kind": "field",
595
+ "name": "hideWhenZero",
543
596
  "type": {
544
597
  "text": "boolean"
545
598
  },
546
599
  "default": "false",
547
- "description": "Enables compact vertical spacing.",
548
- "attribute": "dense"
600
+ "description": "Hides badge when value resolves to numeric zero.",
601
+ "attribute": "hideWhenZero"
549
602
  },
550
603
  {
551
604
  "kind": "field",
552
- "name": "elevated",
605
+ "name": "show",
606
+ "type": {
607
+ "text": "boolean"
608
+ },
609
+ "default": "true",
610
+ "description": "Forces badge visibility independent of value.",
611
+ "attribute": "show",
612
+ "reflects": true
613
+ },
614
+ {
615
+ "kind": "field",
616
+ "name": "offsetX",
617
+ "type": {
618
+ "text": "string"
619
+ },
620
+ "default": "\"0px\"",
621
+ "description": "Horizontal offset CSS length.",
622
+ "attribute": "offsetX"
623
+ },
624
+ {
625
+ "kind": "field",
626
+ "name": "offsetY",
627
+ "type": {
628
+ "text": "string"
629
+ },
630
+ "default": "\"0px\"",
631
+ "description": "Vertical offset CSS length.",
632
+ "attribute": "offsetY"
633
+ },
634
+ {
635
+ "kind": "field",
636
+ "name": "ring",
553
637
  "type": {
554
638
  "text": "boolean"
555
639
  },
556
640
  "default": "false",
557
- "description": "Applies elevated shadow styling.",
558
- "attribute": "elevated"
641
+ "description": "Enables visual ring around the badge.",
642
+ "attribute": "ring"
559
643
  },
560
644
  {
561
645
  "kind": "field",
562
- "name": "leadingLabel",
646
+ "name": "ringColor",
563
647
  "type": {
564
648
  "text": "string"
565
649
  },
566
- "default": "\"Open menu\"",
567
- "description": "Accessible label for default leading button fallback.",
568
- "attribute": "leadingLabel"
650
+ "default": "\"primary\"",
651
+ "description": "Ring color token or CSS color.",
652
+ "attribute": "ringColor"
653
+ },
654
+ {
655
+ "kind": "field",
656
+ "name": "ringOffset",
657
+ "type": {
658
+ "text": "string"
659
+ },
660
+ "default": "\"1px\"",
661
+ "description": "Ring offset CSS length.",
662
+ "attribute": "ringOffset"
663
+ },
664
+ {
665
+ "kind": "field",
666
+ "name": "badgeLabel",
667
+ "type": {
668
+ "text": "string | null"
669
+ },
670
+ "default": "null",
671
+ "description": "ARIA label override.",
672
+ "attribute": "badgeLabel"
673
+ },
674
+ {
675
+ "kind": "field",
676
+ "name": "badgeAriaHidden",
677
+ "type": {
678
+ "text": "boolean"
679
+ },
680
+ "default": "false",
681
+ "description": "Hides badge from assistive technology when true.",
682
+ "attribute": "badgeAriaHidden"
683
+ },
684
+ {
685
+ "kind": "field",
686
+ "name": "interactive",
687
+ "type": {
688
+ "text": "boolean"
689
+ },
690
+ "default": "false",
691
+ "description": "Enables focus/activation and `badge-click` emission.",
692
+ "attribute": "interactive"
693
+ },
694
+ {
695
+ "kind": "field",
696
+ "name": "placement",
697
+ "type": {
698
+ "text": "SkyBadgePlacement"
699
+ },
700
+ "default": "\"custom\"",
701
+ "description": "Anchor placement preset for badge positioning.",
702
+ "attribute": "placement",
703
+ "reflects": true
704
+ },
705
+ {
706
+ "kind": "field",
707
+ "name": "_badgeEl",
708
+ "type": {
709
+ "text": "HTMLSpanElement"
710
+ },
711
+ "privacy": "private"
712
+ },
713
+ {
714
+ "kind": "field",
715
+ "name": "badgeRef",
716
+ "privacy": "public",
717
+ "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
718
+ },
719
+ {
720
+ "kind": "field",
721
+ "name": "shadowRootOptions",
722
+ "type": {
723
+ "text": "ShadowRootInit"
724
+ },
725
+ "static": true,
726
+ "default": "{ mode: \"open\", delegatesFocus: true, }"
569
727
  },
570
728
  {
571
729
  "kind": "method",
572
- "name": "_applyColorSurface",
573
- "privacy": "private",
730
+ "name": "showBadge",
731
+ "privacy": "public",
574
732
  "return": {
575
733
  "type": {
576
734
  "text": "void"
577
735
  }
578
736
  },
579
- "description": "Applies glass vs solid surface tokens from `color`."
737
+ "description": "Forces badge visibility on."
580
738
  },
581
739
  {
582
740
  "kind": "method",
583
- "name": "_applyBackgroundImage",
584
- "privacy": "private",
741
+ "name": "hideBadge",
742
+ "privacy": "public",
585
743
  "return": {
586
744
  "type": {
587
745
  "text": "void"
588
746
  }
589
747
  },
590
- "description": "Sets background image CSS variable from `url`."
748
+ "description": "Forces badge visibility off."
749
+ },
750
+ {
751
+ "kind": "method",
752
+ "name": "setValue",
753
+ "privacy": "public",
754
+ "return": {
755
+ "type": {
756
+ "text": "void"
757
+ }
758
+ },
759
+ "parameters": [
760
+ {
761
+ "name": "value",
762
+ "type": {
763
+ "text": "string"
764
+ },
765
+ "description": "Badge value or icon name."
766
+ }
767
+ ],
768
+ "description": "Updates badge value for text/count or icon modes."
769
+ },
770
+ {
771
+ "kind": "field",
772
+ "name": "_onActivate",
773
+ "privacy": "private",
774
+ "description": "Emits `badge-click` for interactive activation."
775
+ },
776
+ {
777
+ "kind": "field",
778
+ "name": "_onKeydown",
779
+ "privacy": "private",
780
+ "description": "Handles keyboard activation with Enter and Space."
781
+ },
782
+ {
783
+ "kind": "method",
784
+ "name": "_computeAriaLabel",
785
+ "privacy": "private",
786
+ "return": {
787
+ "type": {
788
+ "text": "string | null"
789
+ }
790
+ },
791
+ "parameters": [
792
+ {
793
+ "name": "displayValue",
794
+ "type": {
795
+ "text": "string | null"
796
+ }
797
+ }
798
+ ],
799
+ "description": "Computes accessible badge label from current render state."
800
+ },
801
+ {
802
+ "kind": "method",
803
+ "name": "_computeAnchors",
804
+ "privacy": "private",
805
+ "return": {
806
+ "type": {
807
+ "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
808
+ }
809
+ },
810
+ "parameters": [
811
+ {
812
+ "name": "placement",
813
+ "type": {
814
+ "text": "SkyBadgePlacement"
815
+ }
816
+ }
817
+ ],
818
+ "description": "Resolves anchor edges from placement preset."
819
+ },
820
+ {
821
+ "kind": "method",
822
+ "name": "_resolveBadgeSurface",
823
+ "privacy": "private",
824
+ "return": {
825
+ "type": {
826
+ "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
827
+ }
828
+ },
829
+ "description": "Maps semantic status tokens to soft badge surface colors."
830
+ }
831
+ ],
832
+ "events": [
833
+ {
834
+ "type": {
835
+ "text": "CustomEvent<SkyBadgeClickEventDetail>"
836
+ },
837
+ "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
838
+ "name": "badge-click"
591
839
  }
592
840
  ],
593
841
  "attributes": [
594
842
  {
595
- "name": "title",
843
+ "name": "statusColor",
596
844
  "type": {
597
845
  "text": "string"
598
846
  },
599
- "default": "\"App Bar\"",
600
- "description": "Title text displayed in the app bar.",
601
- "fieldName": "title"
847
+ "default": "\"success\"",
848
+ "description": "Badge background token or CSS color.",
849
+ "fieldName": "statusColor"
602
850
  },
603
851
  {
604
- "name": "color",
852
+ "name": "textColor",
605
853
  "type": {
606
854
  "text": "string"
607
855
  },
608
856
  "default": "\"default\"",
609
- "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
610
- "fieldName": "color"
857
+ "description": "Text color token or CSS color.",
858
+ "fieldName": "textColor"
611
859
  },
612
860
  {
613
- "name": "url",
861
+ "name": "iconColor",
614
862
  "type": {
615
863
  "text": "string"
616
864
  },
617
865
  "default": "\"\"",
618
- "description": "Background image URL.",
619
- "fieldName": "url"
866
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
867
+ "fieldName": "iconColor"
620
868
  },
621
869
  {
622
- "name": "banner",
870
+ "name": "position",
871
+ "type": {
872
+ "text": "SkyBadgePosition"
873
+ },
874
+ "default": "\"default\"",
875
+ "description": "Layout mode: `default | floating | inline`.",
876
+ "fieldName": "position"
877
+ },
878
+ {
879
+ "name": "value",
880
+ "type": {
881
+ "text": "string"
882
+ },
883
+ "default": "\"\"",
884
+ "description": "Badge text/count or icon name in icon mode.",
885
+ "fieldName": "value"
886
+ },
887
+ {
888
+ "name": "isIcon",
623
889
  "type": {
624
890
  "text": "boolean"
625
891
  },
626
- "default": "true",
627
- "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
628
- "fieldName": "banner"
892
+ "default": "false",
893
+ "description": "Renders icon mode when true.",
894
+ "fieldName": "isIcon"
629
895
  },
630
896
  {
631
- "name": "dense",
897
+ "name": "size",
898
+ "type": {
899
+ "text": "string"
900
+ },
901
+ "default": "\"\"",
902
+ "description": "Badge and icon size CSS length.",
903
+ "fieldName": "size"
904
+ },
905
+ {
906
+ "name": "shape",
907
+ "type": {
908
+ "text": "SkyBadgeShape"
909
+ },
910
+ "default": "\"custom\"",
911
+ "description": "Badge shape: `circle | pill | custom`.",
912
+ "fieldName": "shape"
913
+ },
914
+ {
915
+ "name": "max",
916
+ "type": {
917
+ "text": "number"
918
+ },
919
+ "default": "99",
920
+ "description": "Maximum numeric count before rendering overflow label.",
921
+ "fieldName": "max"
922
+ },
923
+ {
924
+ "name": "hideWhenZero",
632
925
  "type": {
633
926
  "text": "boolean"
634
927
  },
635
928
  "default": "false",
636
- "description": "Enables compact vertical spacing.",
637
- "fieldName": "dense"
929
+ "description": "Hides badge when value resolves to numeric zero.",
930
+ "fieldName": "hideWhenZero"
638
931
  },
639
932
  {
640
- "name": "elevated",
933
+ "name": "show",
934
+ "type": {
935
+ "text": "boolean"
936
+ },
937
+ "default": "true",
938
+ "description": "Forces badge visibility independent of value.",
939
+ "fieldName": "show"
940
+ },
941
+ {
942
+ "name": "offsetX",
943
+ "type": {
944
+ "text": "string"
945
+ },
946
+ "default": "\"0px\"",
947
+ "description": "Horizontal offset CSS length.",
948
+ "fieldName": "offsetX"
949
+ },
950
+ {
951
+ "name": "offsetY",
952
+ "type": {
953
+ "text": "string"
954
+ },
955
+ "default": "\"0px\"",
956
+ "description": "Vertical offset CSS length.",
957
+ "fieldName": "offsetY"
958
+ },
959
+ {
960
+ "name": "ring",
641
961
  "type": {
642
962
  "text": "boolean"
643
963
  },
644
964
  "default": "false",
645
- "description": "Applies elevated shadow styling.",
646
- "fieldName": "elevated"
965
+ "description": "Enables visual ring around the badge.",
966
+ "fieldName": "ring"
647
967
  },
648
968
  {
649
- "name": "leadingLabel",
969
+ "name": "ringColor",
650
970
  "type": {
651
971
  "text": "string"
652
972
  },
653
- "default": "\"Open menu\"",
654
- "description": "Accessible label for default leading button fallback.",
655
- "fieldName": "leadingLabel"
973
+ "default": "\"primary\"",
974
+ "description": "Ring color token or CSS color.",
975
+ "fieldName": "ringColor"
976
+ },
977
+ {
978
+ "name": "ringOffset",
979
+ "type": {
980
+ "text": "string"
981
+ },
982
+ "default": "\"1px\"",
983
+ "description": "Ring offset CSS length.",
984
+ "fieldName": "ringOffset"
985
+ },
986
+ {
987
+ "name": "badgeLabel",
988
+ "type": {
989
+ "text": "string | null"
990
+ },
991
+ "default": "null",
992
+ "description": "ARIA label override.",
993
+ "fieldName": "badgeLabel"
994
+ },
995
+ {
996
+ "name": "badgeAriaHidden",
997
+ "type": {
998
+ "text": "boolean"
999
+ },
1000
+ "default": "false",
1001
+ "description": "Hides badge from assistive technology when true.",
1002
+ "fieldName": "badgeAriaHidden"
1003
+ },
1004
+ {
1005
+ "name": "interactive",
1006
+ "type": {
1007
+ "text": "boolean"
1008
+ },
1009
+ "default": "false",
1010
+ "description": "Enables focus/activation and `badge-click` emission.",
1011
+ "fieldName": "interactive"
1012
+ },
1013
+ {
1014
+ "name": "placement",
1015
+ "type": {
1016
+ "text": "SkyBadgePlacement"
1017
+ },
1018
+ "default": "\"custom\"",
1019
+ "description": "Anchor placement preset for badge positioning.",
1020
+ "fieldName": "placement"
656
1021
  }
657
1022
  ],
658
1023
  "superclass": {
659
1024
  "name": "LitElement",
660
1025
  "package": "lit"
661
1026
  },
662
- "tagName": "sky-appbar",
1027
+ "tagName": "sky-badge",
663
1028
  "customElement": true,
664
- "summary": "Application top bar with title, optional leading control, trailing actions, and optional color/image background."
1029
+ "summary": "Badge for status dots, counts, or icons anchored to slotted content."
665
1030
  }
666
1031
  ],
667
1032
  "exports": [
668
1033
  {
669
1034
  "kind": "js",
670
- "name": "SkyAppbar",
1035
+ "name": "SkyBadge",
671
1036
  "declaration": {
672
- "name": "SkyAppbar",
673
- "module": "src/sky-appbar/sky-appbar.ts"
1037
+ "name": "SkyBadge",
1038
+ "module": "src/sky-badge/sky-badge.ts"
674
1039
  }
675
1040
  },
676
1041
  {
677
1042
  "kind": "custom-element-definition",
678
- "name": "sky-appbar",
1043
+ "name": "sky-badge",
679
1044
  "declaration": {
680
- "name": "SkyAppbar",
681
- "module": "src/sky-appbar/sky-appbar.ts"
1045
+ "name": "SkyBadge",
1046
+ "module": "src/sky-badge/sky-badge.ts"
682
1047
  }
683
1048
  }
684
1049
  ]
685
1050
  },
686
1051
  {
687
1052
  "kind": "javascript-module",
688
- "path": "src/sky-avatar/sky-avatar.ts",
1053
+ "path": "src/sky-appbar/sky-appbar.ts",
689
1054
  "declarations": [
690
1055
  {
691
1056
  "kind": "class",
692
1057
  "description": "",
693
- "name": "SkyAvatar",
1058
+ "name": "SkyAppbar",
694
1059
  "cssParts": [
695
1060
  {
696
- "description": "The avatar container element.",
697
- "name": "avatar"
1061
+ "description": "Wrapper that contains the leading slot, title, and actions.",
1062
+ "name": "content"
698
1063
  },
699
1064
  {
700
- "description": "The loading overlay container (shown when `loading` is true).",
701
- "name": "loading-overlay"
1065
+ "description": "Container for the leading slot (e.g. menu button).",
1066
+ "name": "leading"
702
1067
  },
703
1068
  {
704
- "description": "The spinner element shown when loading.",
705
- "name": "spinner"
1069
+ "description": "The title area (contains .title-text with the title string).",
1070
+ "name": "title"
1071
+ },
1072
+ {
1073
+ "description": "The trailing actions container.",
1074
+ "name": "actions"
706
1075
  }
707
1076
  ],
708
1077
  "slots": [
709
1078
  {
710
- "description": "Fallback content (e.g., initials or an icon) rendered when `image` is empty.",
1079
+ "description": "Leading area (e.g., menu/back button). Defaults to a hamburger icon.",
1080
+ "name": "button"
1081
+ },
1082
+ {
1083
+ "description": "Trailing actions (icons/buttons). This is the default slot.",
711
1084
  "name": ""
712
1085
  }
713
1086
  ],
714
1087
  "members": [
715
1088
  {
716
1089
  "kind": "field",
717
- "name": "size",
718
- "type": {
719
- "text": "string"
720
- },
721
- "default": "\"50px\"",
722
- "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
723
- "attribute": "size"
724
- },
725
- {
726
- "kind": "field",
727
- "name": "image",
728
- "type": {
729
- "text": "string"
730
- },
731
- "default": "\"\"",
732
- "description": "Image URL; fallback slot is shown on load error.",
733
- "attribute": "image"
734
- },
735
- {
736
- "kind": "field",
737
- "name": "fit",
738
- "type": {
739
- "text": "SkyAvatarFit"
740
- },
741
- "default": "\"cover\"",
742
- "description": "Image fill mode: `cover` (default) or `contain`.",
743
- "attribute": "fit",
744
- "reflects": true
745
- },
746
- {
747
- "kind": "field",
748
- "name": "radius",
1090
+ "name": "dependencies",
749
1091
  "type": {
750
- "text": "string"
1092
+ "text": "Record<string, CustomElementConstructor>"
751
1093
  },
752
- "default": "\"md\"",
753
- "description": "Border radius token or CSS value.",
754
- "attribute": "radius"
1094
+ "static": true,
1095
+ "default": "{ \"sky-icon\": SkyIcon, }"
755
1096
  },
756
1097
  {
757
1098
  "kind": "field",
758
- "name": "alt",
1099
+ "name": "title",
759
1100
  "type": {
760
1101
  "text": "string"
761
1102
  },
762
- "default": "\"\"",
763
- "description": "Accessible name when image content conveys meaning.",
764
- "attribute": "alt"
1103
+ "default": "\"App Bar\"",
1104
+ "description": "Title text displayed in the app bar.",
1105
+ "attribute": "title"
765
1106
  },
766
1107
  {
767
1108
  "kind": "field",
@@ -769,287 +1110,172 @@
769
1110
  "type": {
770
1111
  "text": "string"
771
1112
  },
772
- "default": "\"dark\"",
773
- "description": "Token or CSS color applied to fallback slot content.",
1113
+ "default": "\"default\"",
1114
+ "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
774
1115
  "attribute": "color"
775
1116
  },
776
1117
  {
777
1118
  "kind": "field",
778
- "name": "outline",
1119
+ "name": "url",
779
1120
  "type": {
780
1121
  "text": "string"
781
1122
  },
782
1123
  "default": "\"\"",
783
- "description": "CSS `outline` value.",
784
- "attribute": "outline"
785
- },
786
- {
787
- "kind": "field",
788
- "name": "outlineOffset",
789
- "type": {
790
- "text": "string"
791
- },
792
- "default": "\"2px\"",
793
- "description": "CSS `outline-offset` value.",
794
- "attribute": "outlineOffset"
795
- },
796
- {
797
- "kind": "field",
798
- "name": "loading",
799
- "type": {
800
- "text": "boolean"
801
- },
802
- "default": "false",
803
- "description": "Shows loading overlay when true.",
804
- "attribute": "loading",
805
- "reflects": true
1124
+ "description": "Background image URL.",
1125
+ "attribute": "url"
806
1126
  },
807
1127
  {
808
1128
  "kind": "field",
809
- "name": "disabled",
1129
+ "name": "banner",
810
1130
  "type": {
811
1131
  "text": "boolean"
812
1132
  },
813
- "default": "false",
814
- "description": "Dims and disables pointer interactions.",
815
- "attribute": "disabled",
816
- "reflects": true
1133
+ "default": "true",
1134
+ "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
1135
+ "attribute": "banner"
817
1136
  },
818
1137
  {
819
1138
  "kind": "field",
820
- "name": "interactive",
1139
+ "name": "dense",
821
1140
  "type": {
822
1141
  "text": "boolean"
823
1142
  },
824
1143
  "default": "false",
825
- "description": "Enables interactive behavior with keyboard/click activation.",
826
- "attribute": "interactive"
1144
+ "description": "Enables compact vertical spacing.",
1145
+ "attribute": "dense"
827
1146
  },
828
1147
  {
829
1148
  "kind": "field",
830
- "name": "shadow",
1149
+ "name": "elevated",
831
1150
  "type": {
832
1151
  "text": "boolean"
833
1152
  },
834
1153
  "default": "false",
835
- "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
836
- "attribute": "shadow",
837
- "reflects": true
1154
+ "description": "Applies elevated shadow styling.",
1155
+ "attribute": "elevated"
838
1156
  },
839
1157
  {
840
1158
  "kind": "field",
841
- "name": "_imageError",
1159
+ "name": "leadingLabel",
842
1160
  "type": {
843
- "text": "boolean"
844
- },
845
- "privacy": "private",
846
- "default": "false",
847
- "description": "True when image failed to load; show slot instead."
848
- },
849
- {
850
- "kind": "field",
851
- "name": "_onImageLoad",
852
- "privacy": "private",
853
- "description": "Marks image load success and keeps image rendering active."
854
- },
855
- {
856
- "kind": "field",
857
- "name": "_onImageError",
858
- "privacy": "private",
859
- "description": "Marks image load failure and enables fallback slot rendering."
860
- },
861
- {
862
- "kind": "method",
863
- "name": "_handleInteractiveClick",
864
- "privacy": "private",
865
- "return": {
866
- "type": {
867
- "text": "void"
868
- }
1161
+ "text": "string"
869
1162
  },
870
- "parameters": [
871
- {
872
- "name": "e",
873
- "type": {
874
- "text": "Event"
875
- }
876
- }
877
- ],
878
- "description": "Re-dispatches click in interactive mode for host-level consumers."
1163
+ "default": "\"Open menu\"",
1164
+ "description": "Accessible label for default leading button fallback.",
1165
+ "attribute": "leadingLabel"
879
1166
  },
880
1167
  {
881
1168
  "kind": "method",
882
- "name": "_handleInteractiveKeydown",
1169
+ "name": "_applyColorSurface",
883
1170
  "privacy": "private",
884
1171
  "return": {
885
1172
  "type": {
886
1173
  "text": "void"
887
1174
  }
888
1175
  },
889
- "parameters": [
890
- {
891
- "name": "e",
892
- "type": {
893
- "text": "KeyboardEvent"
894
- }
895
- }
896
- ],
897
- "description": "Handles keyboard activation in interactive mode."
1176
+ "description": "Applies glass vs solid surface tokens from `color`."
898
1177
  },
899
1178
  {
900
1179
  "kind": "method",
901
- "name": "adjustSpinnerSize",
1180
+ "name": "_applyBackgroundImage",
902
1181
  "privacy": "private",
903
1182
  "return": {
904
1183
  "type": {
905
1184
  "text": "void"
906
1185
  }
907
1186
  },
908
- "description": "Derives spinner dimensions from current avatar size."
909
- }
910
- ],
911
- "events": [
912
- {
913
- "name": "click",
914
- "type": {
915
- "text": "Event"
916
- }
1187
+ "description": "Sets background image CSS variable from `url`."
917
1188
  }
918
1189
  ],
919
1190
  "attributes": [
920
1191
  {
921
- "name": "size",
922
- "type": {
923
- "text": "string"
924
- },
925
- "default": "\"50px\"",
926
- "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
927
- "fieldName": "size"
928
- },
929
- {
930
- "name": "image",
931
- "type": {
932
- "text": "string"
933
- },
934
- "default": "\"\"",
935
- "description": "Image URL; fallback slot is shown on load error.",
936
- "fieldName": "image"
937
- },
938
- {
939
- "name": "fit",
940
- "type": {
941
- "text": "SkyAvatarFit"
942
- },
943
- "default": "\"cover\"",
944
- "description": "Image fill mode: `cover` (default) or `contain`.",
945
- "fieldName": "fit"
946
- },
947
- {
948
- "name": "radius",
949
- "type": {
950
- "text": "string"
951
- },
952
- "default": "\"md\"",
953
- "description": "Border radius token or CSS value.",
954
- "fieldName": "radius"
955
- },
956
- {
957
- "name": "alt",
958
- "type": {
959
- "text": "string"
960
- },
961
- "default": "\"\"",
962
- "description": "Accessible name when image content conveys meaning.",
963
- "fieldName": "alt"
964
- },
965
- {
966
- "name": "color",
1192
+ "name": "title",
967
1193
  "type": {
968
1194
  "text": "string"
969
1195
  },
970
- "default": "\"dark\"",
971
- "description": "Token or CSS color applied to fallback slot content.",
972
- "fieldName": "color"
1196
+ "default": "\"App Bar\"",
1197
+ "description": "Title text displayed in the app bar.",
1198
+ "fieldName": "title"
973
1199
  },
974
1200
  {
975
- "name": "outline",
1201
+ "name": "color",
976
1202
  "type": {
977
1203
  "text": "string"
978
1204
  },
979
- "default": "\"\"",
980
- "description": "CSS `outline` value.",
981
- "fieldName": "outline"
1205
+ "default": "\"default\"",
1206
+ "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
1207
+ "fieldName": "color"
982
1208
  },
983
1209
  {
984
- "name": "outlineOffset",
1210
+ "name": "url",
985
1211
  "type": {
986
1212
  "text": "string"
987
1213
  },
988
- "default": "\"2px\"",
989
- "description": "CSS `outline-offset` value.",
990
- "fieldName": "outlineOffset"
1214
+ "default": "\"\"",
1215
+ "description": "Background image URL.",
1216
+ "fieldName": "url"
991
1217
  },
992
1218
  {
993
- "name": "loading",
1219
+ "name": "banner",
994
1220
  "type": {
995
1221
  "text": "boolean"
996
1222
  },
997
- "default": "false",
998
- "description": "Shows loading overlay when true.",
999
- "fieldName": "loading"
1223
+ "default": "true",
1224
+ "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
1225
+ "fieldName": "banner"
1000
1226
  },
1001
1227
  {
1002
- "name": "disabled",
1228
+ "name": "dense",
1003
1229
  "type": {
1004
1230
  "text": "boolean"
1005
1231
  },
1006
1232
  "default": "false",
1007
- "description": "Dims and disables pointer interactions.",
1008
- "fieldName": "disabled"
1233
+ "description": "Enables compact vertical spacing.",
1234
+ "fieldName": "dense"
1009
1235
  },
1010
1236
  {
1011
- "name": "interactive",
1237
+ "name": "elevated",
1012
1238
  "type": {
1013
1239
  "text": "boolean"
1014
1240
  },
1015
1241
  "default": "false",
1016
- "description": "Enables interactive behavior with keyboard/click activation.",
1017
- "fieldName": "interactive"
1242
+ "description": "Applies elevated shadow styling.",
1243
+ "fieldName": "elevated"
1018
1244
  },
1019
1245
  {
1020
- "name": "shadow",
1246
+ "name": "leadingLabel",
1021
1247
  "type": {
1022
- "text": "boolean"
1248
+ "text": "string"
1023
1249
  },
1024
- "default": "false",
1025
- "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
1026
- "fieldName": "shadow"
1250
+ "default": "\"Open menu\"",
1251
+ "description": "Accessible label for default leading button fallback.",
1252
+ "fieldName": "leadingLabel"
1027
1253
  }
1028
1254
  ],
1029
1255
  "superclass": {
1030
1256
  "name": "LitElement",
1031
1257
  "package": "lit"
1032
1258
  },
1033
- "tagName": "sky-avatar",
1259
+ "tagName": "sky-appbar",
1034
1260
  "customElement": true,
1035
- "summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
1261
+ "summary": "Application top bar with title, optional leading control, trailing actions, and optional color/image background."
1036
1262
  }
1037
1263
  ],
1038
1264
  "exports": [
1039
1265
  {
1040
1266
  "kind": "js",
1041
- "name": "SkyAvatar",
1267
+ "name": "SkyAppbar",
1042
1268
  "declaration": {
1043
- "name": "SkyAvatar",
1044
- "module": "src/sky-avatar/sky-avatar.ts"
1269
+ "name": "SkyAppbar",
1270
+ "module": "src/sky-appbar/sky-appbar.ts"
1045
1271
  }
1046
1272
  },
1047
1273
  {
1048
1274
  "kind": "custom-element-definition",
1049
- "name": "sky-avatar",
1275
+ "name": "sky-appbar",
1050
1276
  "declaration": {
1051
- "name": "SkyAvatar",
1052
- "module": "src/sky-avatar/sky-avatar.ts"
1277
+ "name": "SkyAppbar",
1278
+ "module": "src/sky-appbar/sky-appbar.ts"
1053
1279
  }
1054
1280
  }
1055
1281
  ]
@@ -1627,233 +1853,135 @@
1627
1853
  },
1628
1854
  {
1629
1855
  "kind": "javascript-module",
1630
- "path": "src/sky-badge/sky-badge.ts",
1856
+ "path": "src/sky-avatar/sky-avatar.ts",
1631
1857
  "declarations": [
1632
1858
  {
1633
1859
  "kind": "class",
1634
1860
  "description": "",
1635
- "name": "SkyBadge",
1861
+ "name": "SkyAvatar",
1636
1862
  "cssParts": [
1637
1863
  {
1638
- "description": "Wrapper around the slotted content and the badge.",
1639
- "name": "container"
1864
+ "description": "The avatar container element.",
1865
+ "name": "avatar"
1640
1866
  },
1641
1867
  {
1642
- "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
1643
- "name": "badge"
1868
+ "description": "The loading overlay container (shown when `loading` is true).",
1869
+ "name": "loading-overlay"
1644
1870
  },
1645
1871
  {
1646
- "description": "The icon element when `isIcon` is true.",
1647
- "name": "icon"
1872
+ "description": "The spinner element shown when loading.",
1873
+ "name": "spinner"
1648
1874
  }
1649
1875
  ],
1650
1876
  "slots": [
1651
1877
  {
1652
- "description": "The content the badge attaches to.",
1878
+ "description": "Fallback content (e.g., initials or an icon) rendered when `image` is empty.",
1653
1879
  "name": ""
1654
- },
1655
- {
1656
- "description": "Optional slot to override the badge content entirely.",
1657
- "name": "badge"
1658
1880
  }
1659
1881
  ],
1660
1882
  "members": [
1661
1883
  {
1662
1884
  "kind": "field",
1663
- "name": "dependencies",
1664
- "type": {
1665
- "text": "Record<string, CustomElementConstructor>"
1666
- },
1667
- "static": true,
1668
- "default": "{ \"sky-icon\": SkyIcon, }"
1669
- },
1670
- {
1671
- "kind": "field",
1672
- "name": "statusColor",
1673
- "type": {
1674
- "text": "string"
1675
- },
1676
- "default": "\"success\"",
1677
- "description": "Badge background token or CSS color.",
1678
- "attribute": "statusColor",
1679
- "reflects": true
1680
- },
1681
- {
1682
- "kind": "field",
1683
- "name": "textColor",
1885
+ "name": "size",
1684
1886
  "type": {
1685
1887
  "text": "string"
1686
1888
  },
1687
- "default": "\"default\"",
1688
- "description": "Text color token or CSS color.",
1689
- "attribute": "textColor",
1690
- "reflects": true
1889
+ "default": "\"50px\"",
1890
+ "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
1891
+ "attribute": "size"
1691
1892
  },
1692
1893
  {
1693
1894
  "kind": "field",
1694
- "name": "iconColor",
1895
+ "name": "image",
1695
1896
  "type": {
1696
1897
  "text": "string"
1697
1898
  },
1698
1899
  "default": "\"\"",
1699
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1700
- "attribute": "iconColor",
1701
- "reflects": true
1900
+ "description": "Image URL; fallback slot is shown on load error.",
1901
+ "attribute": "image"
1702
1902
  },
1703
1903
  {
1704
1904
  "kind": "field",
1705
- "name": "position",
1905
+ "name": "fit",
1706
1906
  "type": {
1707
- "text": "SkyBadgePosition"
1907
+ "text": "SkyAvatarFit"
1708
1908
  },
1709
- "default": "\"default\"",
1710
- "description": "Layout mode: `default | floating | inline`.",
1711
- "attribute": "position",
1909
+ "default": "\"cover\"",
1910
+ "description": "Image fill mode: `cover` (default) or `contain`.",
1911
+ "attribute": "fit",
1712
1912
  "reflects": true
1713
1913
  },
1714
1914
  {
1715
1915
  "kind": "field",
1716
- "name": "value",
1916
+ "name": "radius",
1717
1917
  "type": {
1718
1918
  "text": "string"
1719
1919
  },
1720
- "default": "\"\"",
1721
- "description": "Badge text/count or icon name in icon mode.",
1722
- "attribute": "value"
1723
- },
1724
- {
1725
- "kind": "field",
1726
- "name": "isIcon",
1727
- "type": {
1728
- "text": "boolean"
1729
- },
1730
- "default": "false",
1731
- "description": "Renders icon mode when true.",
1732
- "attribute": "isIcon",
1733
- "reflects": true
1920
+ "default": "\"md\"",
1921
+ "description": "Border radius token or CSS value.",
1922
+ "attribute": "radius"
1734
1923
  },
1735
1924
  {
1736
1925
  "kind": "field",
1737
- "name": "size",
1926
+ "name": "alt",
1738
1927
  "type": {
1739
1928
  "text": "string"
1740
1929
  },
1741
1930
  "default": "\"\"",
1742
- "description": "Badge and icon size CSS length.",
1743
- "attribute": "size",
1744
- "reflects": true
1745
- },
1746
- {
1747
- "kind": "field",
1748
- "name": "shape",
1749
- "type": {
1750
- "text": "SkyBadgeShape"
1751
- },
1752
- "default": "\"custom\"",
1753
- "description": "Badge shape: `circle | pill | custom`.",
1754
- "attribute": "shape",
1755
- "reflects": true
1756
- },
1757
- {
1758
- "kind": "field",
1759
- "name": "max",
1760
- "type": {
1761
- "text": "number"
1762
- },
1763
- "default": "99",
1764
- "description": "Maximum numeric count before rendering overflow label.",
1765
- "attribute": "max"
1766
- },
1767
- {
1768
- "kind": "field",
1769
- "name": "hideWhenZero",
1770
- "type": {
1771
- "text": "boolean"
1772
- },
1773
- "default": "false",
1774
- "description": "Hides badge when value resolves to numeric zero.",
1775
- "attribute": "hideWhenZero"
1776
- },
1777
- {
1778
- "kind": "field",
1779
- "name": "show",
1780
- "type": {
1781
- "text": "boolean"
1782
- },
1783
- "default": "true",
1784
- "description": "Forces badge visibility independent of value.",
1785
- "attribute": "show",
1786
- "reflects": true
1787
- },
1788
- {
1789
- "kind": "field",
1790
- "name": "offsetX",
1791
- "type": {
1792
- "text": "string"
1793
- },
1794
- "default": "\"0px\"",
1795
- "description": "Horizontal offset CSS length.",
1796
- "attribute": "offsetX"
1931
+ "description": "Accessible name when image content conveys meaning.",
1932
+ "attribute": "alt"
1797
1933
  },
1798
1934
  {
1799
1935
  "kind": "field",
1800
- "name": "offsetY",
1936
+ "name": "color",
1801
1937
  "type": {
1802
1938
  "text": "string"
1803
1939
  },
1804
- "default": "\"0px\"",
1805
- "description": "Vertical offset CSS length.",
1806
- "attribute": "offsetY"
1807
- },
1808
- {
1809
- "kind": "field",
1810
- "name": "ring",
1811
- "type": {
1812
- "text": "boolean"
1813
- },
1814
- "default": "false",
1815
- "description": "Enables visual ring around the badge.",
1816
- "attribute": "ring"
1940
+ "default": "\"dark\"",
1941
+ "description": "Token or CSS color applied to fallback slot content.",
1942
+ "attribute": "color"
1817
1943
  },
1818
1944
  {
1819
1945
  "kind": "field",
1820
- "name": "ringColor",
1946
+ "name": "outline",
1821
1947
  "type": {
1822
1948
  "text": "string"
1823
1949
  },
1824
- "default": "\"primary\"",
1825
- "description": "Ring color token or CSS color.",
1826
- "attribute": "ringColor"
1950
+ "default": "\"\"",
1951
+ "description": "CSS `outline` value.",
1952
+ "attribute": "outline"
1827
1953
  },
1828
1954
  {
1829
1955
  "kind": "field",
1830
- "name": "ringOffset",
1956
+ "name": "outlineOffset",
1831
1957
  "type": {
1832
1958
  "text": "string"
1833
1959
  },
1834
- "default": "\"1px\"",
1835
- "description": "Ring offset CSS length.",
1836
- "attribute": "ringOffset"
1960
+ "default": "\"2px\"",
1961
+ "description": "CSS `outline-offset` value.",
1962
+ "attribute": "outlineOffset"
1837
1963
  },
1838
1964
  {
1839
1965
  "kind": "field",
1840
- "name": "badgeLabel",
1966
+ "name": "loading",
1841
1967
  "type": {
1842
- "text": "string | null"
1843
- },
1844
- "default": "null",
1845
- "description": "ARIA label override.",
1846
- "attribute": "badgeLabel"
1968
+ "text": "boolean"
1969
+ },
1970
+ "default": "false",
1971
+ "description": "Shows loading overlay when true.",
1972
+ "attribute": "loading",
1973
+ "reflects": true
1847
1974
  },
1848
1975
  {
1849
1976
  "kind": "field",
1850
- "name": "badgeAriaHidden",
1977
+ "name": "disabled",
1851
1978
  "type": {
1852
1979
  "text": "boolean"
1853
1980
  },
1854
1981
  "default": "false",
1855
- "description": "Hides badge from assistive technology when true.",
1856
- "attribute": "badgeAriaHidden"
1982
+ "description": "Dims and disables pointer interactions.",
1983
+ "attribute": "disabled",
1984
+ "reflects": true
1857
1985
  },
1858
1986
  {
1859
1987
  "kind": "field",
@@ -1862,318 +1990,190 @@
1862
1990
  "text": "boolean"
1863
1991
  },
1864
1992
  "default": "false",
1865
- "description": "Enables focus/activation and `badge-click` emission.",
1993
+ "description": "Enables interactive behavior with keyboard/click activation.",
1866
1994
  "attribute": "interactive"
1867
1995
  },
1868
1996
  {
1869
1997
  "kind": "field",
1870
- "name": "placement",
1998
+ "name": "shadow",
1871
1999
  "type": {
1872
- "text": "SkyBadgePlacement"
2000
+ "text": "boolean"
1873
2001
  },
1874
- "default": "\"custom\"",
1875
- "description": "Anchor placement preset for badge positioning.",
1876
- "attribute": "placement",
2002
+ "default": "false",
2003
+ "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
2004
+ "attribute": "shadow",
1877
2005
  "reflects": true
1878
2006
  },
1879
2007
  {
1880
2008
  "kind": "field",
1881
- "name": "_badgeEl",
1882
- "type": {
1883
- "text": "HTMLSpanElement"
1884
- },
1885
- "privacy": "private"
1886
- },
1887
- {
1888
- "kind": "field",
1889
- "name": "badgeRef",
1890
- "privacy": "public",
1891
- "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
1892
- },
1893
- {
1894
- "kind": "field",
1895
- "name": "shadowRootOptions",
2009
+ "name": "_imageError",
1896
2010
  "type": {
1897
- "text": "ShadowRootInit"
1898
- },
1899
- "static": true,
1900
- "default": "{ mode: \"open\", delegatesFocus: true, }"
1901
- },
1902
- {
1903
- "kind": "method",
1904
- "name": "showBadge",
1905
- "privacy": "public",
1906
- "return": {
1907
- "type": {
1908
- "text": "void"
1909
- }
1910
- },
1911
- "description": "Forces badge visibility on."
1912
- },
1913
- {
1914
- "kind": "method",
1915
- "name": "hideBadge",
1916
- "privacy": "public",
1917
- "return": {
1918
- "type": {
1919
- "text": "void"
1920
- }
1921
- },
1922
- "description": "Forces badge visibility off."
1923
- },
1924
- {
1925
- "kind": "method",
1926
- "name": "setValue",
1927
- "privacy": "public",
1928
- "return": {
1929
- "type": {
1930
- "text": "void"
1931
- }
2011
+ "text": "boolean"
1932
2012
  },
1933
- "parameters": [
1934
- {
1935
- "name": "value",
1936
- "type": {
1937
- "text": "string"
1938
- },
1939
- "description": "Badge value or icon name."
1940
- }
1941
- ],
1942
- "description": "Updates badge value for text/count or icon modes."
2013
+ "privacy": "private",
2014
+ "default": "false",
2015
+ "description": "True when image failed to load; show slot instead."
1943
2016
  },
1944
2017
  {
1945
2018
  "kind": "field",
1946
- "name": "_onActivate",
2019
+ "name": "_onImageLoad",
1947
2020
  "privacy": "private",
1948
- "description": "Emits `badge-click` for interactive activation."
2021
+ "description": "Marks image load success and keeps image rendering active."
1949
2022
  },
1950
2023
  {
1951
2024
  "kind": "field",
1952
- "name": "_onKeydown",
2025
+ "name": "_onImageError",
1953
2026
  "privacy": "private",
1954
- "description": "Handles keyboard activation with Enter and Space."
2027
+ "description": "Marks image load failure and enables fallback slot rendering."
1955
2028
  },
1956
2029
  {
1957
2030
  "kind": "method",
1958
- "name": "_computeAriaLabel",
2031
+ "name": "_handleInteractiveClick",
1959
2032
  "privacy": "private",
1960
2033
  "return": {
1961
2034
  "type": {
1962
- "text": "string | null"
2035
+ "text": "void"
1963
2036
  }
1964
2037
  },
1965
2038
  "parameters": [
1966
2039
  {
1967
- "name": "displayValue",
2040
+ "name": "e",
1968
2041
  "type": {
1969
- "text": "string | null"
2042
+ "text": "Event"
1970
2043
  }
1971
2044
  }
1972
2045
  ],
1973
- "description": "Computes accessible badge label from current render state."
2046
+ "description": "Re-dispatches click in interactive mode for host-level consumers."
1974
2047
  },
1975
2048
  {
1976
2049
  "kind": "method",
1977
- "name": "_computeAnchors",
2050
+ "name": "_handleInteractiveKeydown",
1978
2051
  "privacy": "private",
1979
2052
  "return": {
1980
2053
  "type": {
1981
- "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
2054
+ "text": "void"
1982
2055
  }
1983
2056
  },
1984
2057
  "parameters": [
1985
2058
  {
1986
- "name": "placement",
2059
+ "name": "e",
1987
2060
  "type": {
1988
- "text": "SkyBadgePlacement"
2061
+ "text": "KeyboardEvent"
1989
2062
  }
1990
2063
  }
1991
2064
  ],
1992
- "description": "Resolves anchor edges from placement preset."
2065
+ "description": "Handles keyboard activation in interactive mode."
1993
2066
  },
1994
2067
  {
1995
2068
  "kind": "method",
1996
- "name": "_resolveBadgeSurface",
2069
+ "name": "adjustSpinnerSize",
1997
2070
  "privacy": "private",
1998
2071
  "return": {
1999
2072
  "type": {
2000
- "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
2073
+ "text": "void"
2001
2074
  }
2002
2075
  },
2003
- "description": "Maps semantic status tokens to soft badge surface colors."
2076
+ "description": "Derives spinner dimensions from current avatar size."
2004
2077
  }
2005
2078
  ],
2006
2079
  "events": [
2007
2080
  {
2081
+ "name": "click",
2008
2082
  "type": {
2009
- "text": "CustomEvent<SkyBadgeClickEventDetail>"
2010
- },
2011
- "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
2012
- "name": "badge-click"
2083
+ "text": "Event"
2084
+ }
2013
2085
  }
2014
2086
  ],
2015
2087
  "attributes": [
2016
2088
  {
2017
- "name": "statusColor",
2018
- "type": {
2019
- "text": "string"
2020
- },
2021
- "default": "\"success\"",
2022
- "description": "Badge background token or CSS color.",
2023
- "fieldName": "statusColor"
2024
- },
2025
- {
2026
- "name": "textColor",
2089
+ "name": "size",
2027
2090
  "type": {
2028
2091
  "text": "string"
2029
2092
  },
2030
- "default": "\"default\"",
2031
- "description": "Text color token or CSS color.",
2032
- "fieldName": "textColor"
2093
+ "default": "\"50px\"",
2094
+ "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
2095
+ "fieldName": "size"
2033
2096
  },
2034
2097
  {
2035
- "name": "iconColor",
2098
+ "name": "image",
2036
2099
  "type": {
2037
2100
  "text": "string"
2038
2101
  },
2039
2102
  "default": "\"\"",
2040
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
2041
- "fieldName": "iconColor"
2103
+ "description": "Image URL; fallback slot is shown on load error.",
2104
+ "fieldName": "image"
2042
2105
  },
2043
2106
  {
2044
- "name": "position",
2107
+ "name": "fit",
2045
2108
  "type": {
2046
- "text": "SkyBadgePosition"
2109
+ "text": "SkyAvatarFit"
2047
2110
  },
2048
- "default": "\"default\"",
2049
- "description": "Layout mode: `default | floating | inline`.",
2050
- "fieldName": "position"
2111
+ "default": "\"cover\"",
2112
+ "description": "Image fill mode: `cover` (default) or `contain`.",
2113
+ "fieldName": "fit"
2051
2114
  },
2052
2115
  {
2053
- "name": "value",
2116
+ "name": "radius",
2054
2117
  "type": {
2055
2118
  "text": "string"
2056
2119
  },
2057
- "default": "\"\"",
2058
- "description": "Badge text/count or icon name in icon mode.",
2059
- "fieldName": "value"
2060
- },
2061
- {
2062
- "name": "isIcon",
2063
- "type": {
2064
- "text": "boolean"
2065
- },
2066
- "default": "false",
2067
- "description": "Renders icon mode when true.",
2068
- "fieldName": "isIcon"
2120
+ "default": "\"md\"",
2121
+ "description": "Border radius token or CSS value.",
2122
+ "fieldName": "radius"
2069
2123
  },
2070
2124
  {
2071
- "name": "size",
2125
+ "name": "alt",
2072
2126
  "type": {
2073
2127
  "text": "string"
2074
2128
  },
2075
2129
  "default": "\"\"",
2076
- "description": "Badge and icon size CSS length.",
2077
- "fieldName": "size"
2078
- },
2079
- {
2080
- "name": "shape",
2081
- "type": {
2082
- "text": "SkyBadgeShape"
2083
- },
2084
- "default": "\"custom\"",
2085
- "description": "Badge shape: `circle | pill | custom`.",
2086
- "fieldName": "shape"
2087
- },
2088
- {
2089
- "name": "max",
2090
- "type": {
2091
- "text": "number"
2092
- },
2093
- "default": "99",
2094
- "description": "Maximum numeric count before rendering overflow label.",
2095
- "fieldName": "max"
2096
- },
2097
- {
2098
- "name": "hideWhenZero",
2099
- "type": {
2100
- "text": "boolean"
2101
- },
2102
- "default": "false",
2103
- "description": "Hides badge when value resolves to numeric zero.",
2104
- "fieldName": "hideWhenZero"
2105
- },
2106
- {
2107
- "name": "show",
2108
- "type": {
2109
- "text": "boolean"
2110
- },
2111
- "default": "true",
2112
- "description": "Forces badge visibility independent of value.",
2113
- "fieldName": "show"
2114
- },
2115
- {
2116
- "name": "offsetX",
2117
- "type": {
2118
- "text": "string"
2119
- },
2120
- "default": "\"0px\"",
2121
- "description": "Horizontal offset CSS length.",
2122
- "fieldName": "offsetX"
2130
+ "description": "Accessible name when image content conveys meaning.",
2131
+ "fieldName": "alt"
2123
2132
  },
2124
2133
  {
2125
- "name": "offsetY",
2134
+ "name": "color",
2126
2135
  "type": {
2127
2136
  "text": "string"
2128
2137
  },
2129
- "default": "\"0px\"",
2130
- "description": "Vertical offset CSS length.",
2131
- "fieldName": "offsetY"
2132
- },
2133
- {
2134
- "name": "ring",
2135
- "type": {
2136
- "text": "boolean"
2137
- },
2138
- "default": "false",
2139
- "description": "Enables visual ring around the badge.",
2140
- "fieldName": "ring"
2138
+ "default": "\"dark\"",
2139
+ "description": "Token or CSS color applied to fallback slot content.",
2140
+ "fieldName": "color"
2141
2141
  },
2142
2142
  {
2143
- "name": "ringColor",
2143
+ "name": "outline",
2144
2144
  "type": {
2145
2145
  "text": "string"
2146
2146
  },
2147
- "default": "\"primary\"",
2148
- "description": "Ring color token or CSS color.",
2149
- "fieldName": "ringColor"
2147
+ "default": "\"\"",
2148
+ "description": "CSS `outline` value.",
2149
+ "fieldName": "outline"
2150
2150
  },
2151
2151
  {
2152
- "name": "ringOffset",
2152
+ "name": "outlineOffset",
2153
2153
  "type": {
2154
2154
  "text": "string"
2155
2155
  },
2156
- "default": "\"1px\"",
2157
- "description": "Ring offset CSS length.",
2158
- "fieldName": "ringOffset"
2156
+ "default": "\"2px\"",
2157
+ "description": "CSS `outline-offset` value.",
2158
+ "fieldName": "outlineOffset"
2159
2159
  },
2160
2160
  {
2161
- "name": "badgeLabel",
2161
+ "name": "loading",
2162
2162
  "type": {
2163
- "text": "string | null"
2163
+ "text": "boolean"
2164
2164
  },
2165
- "default": "null",
2166
- "description": "ARIA label override.",
2167
- "fieldName": "badgeLabel"
2165
+ "default": "false",
2166
+ "description": "Shows loading overlay when true.",
2167
+ "fieldName": "loading"
2168
2168
  },
2169
2169
  {
2170
- "name": "badgeAriaHidden",
2170
+ "name": "disabled",
2171
2171
  "type": {
2172
2172
  "text": "boolean"
2173
2173
  },
2174
2174
  "default": "false",
2175
- "description": "Hides badge from assistive technology when true.",
2176
- "fieldName": "badgeAriaHidden"
2175
+ "description": "Dims and disables pointer interactions.",
2176
+ "fieldName": "disabled"
2177
2177
  },
2178
2178
  {
2179
2179
  "name": "interactive",
@@ -2181,43 +2181,43 @@
2181
2181
  "text": "boolean"
2182
2182
  },
2183
2183
  "default": "false",
2184
- "description": "Enables focus/activation and `badge-click` emission.",
2184
+ "description": "Enables interactive behavior with keyboard/click activation.",
2185
2185
  "fieldName": "interactive"
2186
2186
  },
2187
2187
  {
2188
- "name": "placement",
2188
+ "name": "shadow",
2189
2189
  "type": {
2190
- "text": "SkyBadgePlacement"
2190
+ "text": "boolean"
2191
2191
  },
2192
- "default": "\"custom\"",
2193
- "description": "Anchor placement preset for badge positioning.",
2194
- "fieldName": "placement"
2192
+ "default": "false",
2193
+ "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
2194
+ "fieldName": "shadow"
2195
2195
  }
2196
2196
  ],
2197
2197
  "superclass": {
2198
2198
  "name": "LitElement",
2199
2199
  "package": "lit"
2200
2200
  },
2201
- "tagName": "sky-badge",
2201
+ "tagName": "sky-avatar",
2202
2202
  "customElement": true,
2203
- "summary": "Badge for status dots, counts, or icons anchored to slotted content."
2203
+ "summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
2204
2204
  }
2205
2205
  ],
2206
2206
  "exports": [
2207
2207
  {
2208
2208
  "kind": "js",
2209
- "name": "SkyBadge",
2209
+ "name": "SkyAvatar",
2210
2210
  "declaration": {
2211
- "name": "SkyBadge",
2212
- "module": "src/sky-badge/sky-badge.ts"
2211
+ "name": "SkyAvatar",
2212
+ "module": "src/sky-avatar/sky-avatar.ts"
2213
2213
  }
2214
2214
  },
2215
2215
  {
2216
2216
  "kind": "custom-element-definition",
2217
- "name": "sky-badge",
2217
+ "name": "sky-avatar",
2218
2218
  "declaration": {
2219
- "name": "SkyBadge",
2220
- "module": "src/sky-badge/sky-badge.ts"
2219
+ "name": "SkyAvatar",
2220
+ "module": "src/sky-avatar/sky-avatar.ts"
2221
2221
  }
2222
2222
  }
2223
2223
  ]
@@ -6712,57 +6712,263 @@
6712
6712
  "fieldName": "headerPadding"
6713
6713
  },
6714
6714
  {
6715
- "name": "bodyPadding",
6715
+ "name": "bodyPadding",
6716
+ "type": {
6717
+ "text": "SkyDialogPadding"
6718
+ },
6719
+ "default": "\"sm\"",
6720
+ "description": "Body padding token.",
6721
+ "fieldName": "bodyPadding"
6722
+ },
6723
+ {
6724
+ "name": "footerPadding",
6725
+ "type": {
6726
+ "text": "SkyDialogPadding"
6727
+ },
6728
+ "default": "\"sm\"",
6729
+ "description": "Footer padding token.",
6730
+ "fieldName": "footerPadding"
6731
+ },
6732
+ {
6733
+ "name": "highlightOnOutsideClick",
6734
+ "type": {
6735
+ "text": "boolean"
6736
+ },
6737
+ "default": "true",
6738
+ "description": "Enables highlight animation on rejected outside click.",
6739
+ "fieldName": "highlightOnOutsideClick"
6740
+ }
6741
+ ],
6742
+ "superclass": {
6743
+ "name": "LitElement",
6744
+ "package": "lit"
6745
+ },
6746
+ "tagName": "sky-dialog",
6747
+ "customElement": true,
6748
+ "summary": "Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling."
6749
+ }
6750
+ ],
6751
+ "exports": [
6752
+ {
6753
+ "kind": "js",
6754
+ "name": "SkyDialog",
6755
+ "declaration": {
6756
+ "name": "SkyDialog",
6757
+ "module": "src/sky-dialog/sky-dialog.ts"
6758
+ }
6759
+ },
6760
+ {
6761
+ "kind": "custom-element-definition",
6762
+ "name": "sky-dialog",
6763
+ "declaration": {
6764
+ "name": "SkyDialog",
6765
+ "module": "src/sky-dialog/sky-dialog.ts"
6766
+ }
6767
+ }
6768
+ ]
6769
+ },
6770
+ {
6771
+ "kind": "javascript-module",
6772
+ "path": "src/sky-divider/sky-divider.ts",
6773
+ "declarations": [
6774
+ {
6775
+ "kind": "class",
6776
+ "description": "",
6777
+ "name": "SkyDivider",
6778
+ "cssProperties": [
6779
+ {
6780
+ "description": "CSS custom property for divider color.",
6781
+ "name": "--divider-color"
6782
+ },
6783
+ {
6784
+ "description": "CSS custom property for divider thickness.",
6785
+ "name": "--divider-thickness"
6786
+ },
6787
+ {
6788
+ "description": "CSS custom property for divider margin.",
6789
+ "name": "--divider-margin"
6790
+ },
6791
+ {
6792
+ "description": "CSS custom property for vertical divider height.",
6793
+ "name": "--divider-height"
6794
+ }
6795
+ ],
6796
+ "cssParts": [
6797
+ {
6798
+ "description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
6799
+ "name": "divider"
6800
+ }
6801
+ ],
6802
+ "members": [
6803
+ {
6804
+ "kind": "field",
6805
+ "name": "color",
6806
+ "type": {
6807
+ "text": "string"
6808
+ },
6809
+ "default": "\"muted\"",
6810
+ "description": "Divider color token or CSS color.",
6811
+ "privacy": "public",
6812
+ "attribute": "color"
6813
+ },
6814
+ {
6815
+ "kind": "field",
6816
+ "name": "thickness",
6817
+ "type": {
6818
+ "text": "string"
6819
+ },
6820
+ "default": "\"1px\"",
6821
+ "description": "Divider thickness (for example `1px` or `2px`).",
6822
+ "privacy": "public",
6823
+ "attribute": "thickness"
6824
+ },
6825
+ {
6826
+ "kind": "field",
6827
+ "name": "margin",
6828
+ "type": {
6829
+ "text": "string"
6830
+ },
6831
+ "default": "\"\"",
6832
+ "description": "Outer margin around the divider.",
6833
+ "privacy": "public",
6834
+ "attribute": "margin"
6835
+ },
6836
+ {
6837
+ "kind": "field",
6838
+ "name": "direction",
6839
+ "type": {
6840
+ "text": "SkyDividerDirection"
6841
+ },
6842
+ "default": "\"horizontal\"",
6843
+ "description": "Divider orientation.",
6844
+ "privacy": "public",
6845
+ "attribute": "direction"
6846
+ },
6847
+ {
6848
+ "kind": "field",
6849
+ "name": "inset",
6850
+ "type": {
6851
+ "text": "boolean"
6852
+ },
6853
+ "default": "false",
6854
+ "description": "Enables indented divider layout.",
6855
+ "privacy": "public",
6856
+ "attribute": "inset"
6857
+ },
6858
+ {
6859
+ "kind": "field",
6860
+ "name": "height",
6861
+ "type": {
6862
+ "text": "string"
6863
+ },
6864
+ "default": "\"100%\"",
6865
+ "description": "Height used for vertical orientation.",
6866
+ "privacy": "public",
6867
+ "attribute": "height"
6868
+ },
6869
+ {
6870
+ "kind": "method",
6871
+ "name": "getComputedColor",
6872
+ "privacy": "public",
6873
+ "return": {
6874
+ "type": {
6875
+ "text": ""
6876
+ }
6877
+ },
6878
+ "description": "Gets the current computed color of the divider."
6879
+ },
6880
+ {
6881
+ "kind": "method",
6882
+ "name": "getComputedThickness",
6883
+ "privacy": "public",
6884
+ "return": {
6885
+ "type": {
6886
+ "text": ""
6887
+ }
6888
+ },
6889
+ "description": "Gets the current computed thickness of the divider."
6890
+ }
6891
+ ],
6892
+ "attributes": [
6893
+ {
6894
+ "name": "color",
6895
+ "type": {
6896
+ "text": "string"
6897
+ },
6898
+ "default": "\"muted\"",
6899
+ "description": "Divider color token or CSS color.",
6900
+ "fieldName": "color"
6901
+ },
6902
+ {
6903
+ "name": "thickness",
6904
+ "type": {
6905
+ "text": "string"
6906
+ },
6907
+ "default": "\"1px\"",
6908
+ "description": "Divider thickness (for example `1px` or `2px`).",
6909
+ "fieldName": "thickness"
6910
+ },
6911
+ {
6912
+ "name": "margin",
6913
+ "type": {
6914
+ "text": "string"
6915
+ },
6916
+ "default": "\"\"",
6917
+ "description": "Outer margin around the divider.",
6918
+ "fieldName": "margin"
6919
+ },
6920
+ {
6921
+ "name": "direction",
6716
6922
  "type": {
6717
- "text": "SkyDialogPadding"
6923
+ "text": "SkyDividerDirection"
6718
6924
  },
6719
- "default": "\"sm\"",
6720
- "description": "Body padding token.",
6721
- "fieldName": "bodyPadding"
6925
+ "default": "\"horizontal\"",
6926
+ "description": "Divider orientation.",
6927
+ "fieldName": "direction"
6722
6928
  },
6723
6929
  {
6724
- "name": "footerPadding",
6930
+ "name": "inset",
6725
6931
  "type": {
6726
- "text": "SkyDialogPadding"
6932
+ "text": "boolean"
6727
6933
  },
6728
- "default": "\"sm\"",
6729
- "description": "Footer padding token.",
6730
- "fieldName": "footerPadding"
6934
+ "default": "false",
6935
+ "description": "Enables indented divider layout.",
6936
+ "fieldName": "inset"
6731
6937
  },
6732
6938
  {
6733
- "name": "highlightOnOutsideClick",
6939
+ "name": "height",
6734
6940
  "type": {
6735
- "text": "boolean"
6941
+ "text": "string"
6736
6942
  },
6737
- "default": "true",
6738
- "description": "Enables highlight animation on rejected outside click.",
6739
- "fieldName": "highlightOnOutsideClick"
6943
+ "default": "\"100%\"",
6944
+ "description": "Height used for vertical orientation.",
6945
+ "fieldName": "height"
6740
6946
  }
6741
6947
  ],
6742
6948
  "superclass": {
6743
6949
  "name": "LitElement",
6744
6950
  "package": "lit"
6745
6951
  },
6746
- "tagName": "sky-dialog",
6952
+ "tagName": "sky-divider",
6747
6953
  "customElement": true,
6748
- "summary": "Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling."
6954
+ "summary": "Visual separator component for horizontal and vertical layout separation."
6749
6955
  }
6750
6956
  ],
6751
6957
  "exports": [
6752
6958
  {
6753
6959
  "kind": "js",
6754
- "name": "SkyDialog",
6960
+ "name": "SkyDivider",
6755
6961
  "declaration": {
6756
- "name": "SkyDialog",
6757
- "module": "src/sky-dialog/sky-dialog.ts"
6962
+ "name": "SkyDivider",
6963
+ "module": "src/sky-divider/sky-divider.ts"
6758
6964
  }
6759
6965
  },
6760
6966
  {
6761
6967
  "kind": "custom-element-definition",
6762
- "name": "sky-dialog",
6968
+ "name": "sky-divider",
6763
6969
  "declaration": {
6764
- "name": "SkyDialog",
6765
- "module": "src/sky-dialog/sky-dialog.ts"
6970
+ "name": "SkyDivider",
6971
+ "module": "src/sky-divider/sky-divider.ts"
6766
6972
  }
6767
6973
  }
6768
6974
  ]
@@ -7071,249 +7277,43 @@
7071
7277
  "type": {
7072
7278
  "text": "string | undefined"
7073
7279
  },
7074
- "description": "Vertical gap override.",
7075
- "fieldName": "gapY"
7076
- },
7077
- {
7078
- "name": "col",
7079
- "type": {
7080
- "text": "number"
7081
- },
7082
- "default": "12",
7083
- "description": "Total column count used for span calculations.",
7084
- "fieldName": "col"
7085
- }
7086
- ],
7087
- "superclass": {
7088
- "name": "LitElement",
7089
- "package": "lit"
7090
- },
7091
- "tagName": "sky-flexbox",
7092
- "customElement": true,
7093
- "summary": "Flexbox container with grid-like span support for slotted children."
7094
- }
7095
- ],
7096
- "exports": [
7097
- {
7098
- "kind": "js",
7099
- "name": "SkyFlexbox",
7100
- "declaration": {
7101
- "name": "SkyFlexbox",
7102
- "module": "src/sky-flexbox/sky-flexbox.ts"
7103
- }
7104
- },
7105
- {
7106
- "kind": "custom-element-definition",
7107
- "name": "sky-flexbox",
7108
- "declaration": {
7109
- "name": "SkyFlexbox",
7110
- "module": "src/sky-flexbox/sky-flexbox.ts"
7111
- }
7112
- }
7113
- ]
7114
- },
7115
- {
7116
- "kind": "javascript-module",
7117
- "path": "src/sky-divider/sky-divider.ts",
7118
- "declarations": [
7119
- {
7120
- "kind": "class",
7121
- "description": "",
7122
- "name": "SkyDivider",
7123
- "cssProperties": [
7124
- {
7125
- "description": "CSS custom property for divider color.",
7126
- "name": "--divider-color"
7127
- },
7128
- {
7129
- "description": "CSS custom property for divider thickness.",
7130
- "name": "--divider-thickness"
7131
- },
7132
- {
7133
- "description": "CSS custom property for divider margin.",
7134
- "name": "--divider-margin"
7135
- },
7136
- {
7137
- "description": "CSS custom property for vertical divider height.",
7138
- "name": "--divider-height"
7139
- }
7140
- ],
7141
- "cssParts": [
7142
- {
7143
- "description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
7144
- "name": "divider"
7145
- }
7146
- ],
7147
- "members": [
7148
- {
7149
- "kind": "field",
7150
- "name": "color",
7151
- "type": {
7152
- "text": "string"
7153
- },
7154
- "default": "\"muted\"",
7155
- "description": "Divider color token or CSS color.",
7156
- "privacy": "public",
7157
- "attribute": "color"
7158
- },
7159
- {
7160
- "kind": "field",
7161
- "name": "thickness",
7162
- "type": {
7163
- "text": "string"
7164
- },
7165
- "default": "\"1px\"",
7166
- "description": "Divider thickness (for example `1px` or `2px`).",
7167
- "privacy": "public",
7168
- "attribute": "thickness"
7169
- },
7170
- {
7171
- "kind": "field",
7172
- "name": "margin",
7173
- "type": {
7174
- "text": "string"
7175
- },
7176
- "default": "\"\"",
7177
- "description": "Outer margin around the divider.",
7178
- "privacy": "public",
7179
- "attribute": "margin"
7180
- },
7181
- {
7182
- "kind": "field",
7183
- "name": "direction",
7184
- "type": {
7185
- "text": "SkyDividerDirection"
7186
- },
7187
- "default": "\"horizontal\"",
7188
- "description": "Divider orientation.",
7189
- "privacy": "public",
7190
- "attribute": "direction"
7191
- },
7192
- {
7193
- "kind": "field",
7194
- "name": "inset",
7195
- "type": {
7196
- "text": "boolean"
7197
- },
7198
- "default": "false",
7199
- "description": "Enables indented divider layout.",
7200
- "privacy": "public",
7201
- "attribute": "inset"
7202
- },
7203
- {
7204
- "kind": "field",
7205
- "name": "height",
7206
- "type": {
7207
- "text": "string"
7208
- },
7209
- "default": "\"100%\"",
7210
- "description": "Height used for vertical orientation.",
7211
- "privacy": "public",
7212
- "attribute": "height"
7213
- },
7214
- {
7215
- "kind": "method",
7216
- "name": "getComputedColor",
7217
- "privacy": "public",
7218
- "return": {
7219
- "type": {
7220
- "text": ""
7221
- }
7222
- },
7223
- "description": "Gets the current computed color of the divider."
7224
- },
7225
- {
7226
- "kind": "method",
7227
- "name": "getComputedThickness",
7228
- "privacy": "public",
7229
- "return": {
7230
- "type": {
7231
- "text": ""
7232
- }
7233
- },
7234
- "description": "Gets the current computed thickness of the divider."
7235
- }
7236
- ],
7237
- "attributes": [
7238
- {
7239
- "name": "color",
7240
- "type": {
7241
- "text": "string"
7242
- },
7243
- "default": "\"muted\"",
7244
- "description": "Divider color token or CSS color.",
7245
- "fieldName": "color"
7246
- },
7247
- {
7248
- "name": "thickness",
7249
- "type": {
7250
- "text": "string"
7251
- },
7252
- "default": "\"1px\"",
7253
- "description": "Divider thickness (for example `1px` or `2px`).",
7254
- "fieldName": "thickness"
7255
- },
7256
- {
7257
- "name": "margin",
7258
- "type": {
7259
- "text": "string"
7260
- },
7261
- "default": "\"\"",
7262
- "description": "Outer margin around the divider.",
7263
- "fieldName": "margin"
7264
- },
7265
- {
7266
- "name": "direction",
7267
- "type": {
7268
- "text": "SkyDividerDirection"
7269
- },
7270
- "default": "\"horizontal\"",
7271
- "description": "Divider orientation.",
7272
- "fieldName": "direction"
7273
- },
7274
- {
7275
- "name": "inset",
7276
- "type": {
7277
- "text": "boolean"
7278
- },
7279
- "default": "false",
7280
- "description": "Enables indented divider layout.",
7281
- "fieldName": "inset"
7280
+ "description": "Vertical gap override.",
7281
+ "fieldName": "gapY"
7282
7282
  },
7283
7283
  {
7284
- "name": "height",
7284
+ "name": "col",
7285
7285
  "type": {
7286
- "text": "string"
7286
+ "text": "number"
7287
7287
  },
7288
- "default": "\"100%\"",
7289
- "description": "Height used for vertical orientation.",
7290
- "fieldName": "height"
7288
+ "default": "12",
7289
+ "description": "Total column count used for span calculations.",
7290
+ "fieldName": "col"
7291
7291
  }
7292
7292
  ],
7293
7293
  "superclass": {
7294
7294
  "name": "LitElement",
7295
7295
  "package": "lit"
7296
7296
  },
7297
- "tagName": "sky-divider",
7297
+ "tagName": "sky-flexbox",
7298
7298
  "customElement": true,
7299
- "summary": "Visual separator component for horizontal and vertical layout separation."
7299
+ "summary": "Flexbox container with grid-like span support for slotted children."
7300
7300
  }
7301
7301
  ],
7302
7302
  "exports": [
7303
7303
  {
7304
7304
  "kind": "js",
7305
- "name": "SkyDivider",
7305
+ "name": "SkyFlexbox",
7306
7306
  "declaration": {
7307
- "name": "SkyDivider",
7308
- "module": "src/sky-divider/sky-divider.ts"
7307
+ "name": "SkyFlexbox",
7308
+ "module": "src/sky-flexbox/sky-flexbox.ts"
7309
7309
  }
7310
7310
  },
7311
7311
  {
7312
7312
  "kind": "custom-element-definition",
7313
- "name": "sky-divider",
7313
+ "name": "sky-flexbox",
7314
7314
  "declaration": {
7315
- "name": "SkyDivider",
7316
- "module": "src/sky-divider/sky-divider.ts"
7315
+ "name": "SkyFlexbox",
7316
+ "module": "src/sky-flexbox/sky-flexbox.ts"
7317
7317
  }
7318
7318
  }
7319
7319
  ]
@@ -11143,34 +11143,264 @@
11143
11143
  "type": {
11144
11144
  "text": "string"
11145
11145
  },
11146
- "default": "'default'",
11147
- "fieldName": "variant"
11146
+ "default": "'default'",
11147
+ "fieldName": "variant"
11148
+ }
11149
+ ],
11150
+ "superclass": {
11151
+ "name": "FormControlBase",
11152
+ "module": "/src/helper/internals/form-control-base"
11153
+ },
11154
+ "tagName": "sky-input",
11155
+ "customElement": true,
11156
+ "summary": "Versatile form input supporting text, password, number, textarea, and file workflows."
11157
+ }
11158
+ ],
11159
+ "exports": [
11160
+ {
11161
+ "kind": "js",
11162
+ "name": "SkyInput",
11163
+ "declaration": {
11164
+ "name": "SkyInput",
11165
+ "module": "src/sky-input/sky-input.ts"
11166
+ }
11167
+ },
11168
+ {
11169
+ "kind": "custom-element-definition",
11170
+ "name": "sky-input",
11171
+ "declaration": {
11172
+ "name": "SkyInput",
11173
+ "module": "src/sky-input/sky-input.ts"
11174
+ }
11175
+ }
11176
+ ]
11177
+ },
11178
+ {
11179
+ "kind": "javascript-module",
11180
+ "path": "src/sky-listitem/sky-listitem.ts",
11181
+ "declarations": [
11182
+ {
11183
+ "kind": "class",
11184
+ "description": "",
11185
+ "name": "SkyListitem",
11186
+ "cssParts": [
11187
+ {
11188
+ "description": "The main list item container.",
11189
+ "name": "list-item"
11190
+ },
11191
+ {
11192
+ "description": "The leading section (avatar container).",
11193
+ "name": "leading"
11194
+ },
11195
+ {
11196
+ "description": "The avatar image element.",
11197
+ "name": "avatar"
11198
+ },
11199
+ {
11200
+ "description": "The content wrapper for the main slot.",
11201
+ "name": "content"
11202
+ },
11203
+ {
11204
+ "description": "The trailing actions container.",
11205
+ "name": "actions"
11206
+ },
11207
+ {
11208
+ "description": "The subheader divider element.",
11209
+ "name": "subheader"
11210
+ }
11211
+ ],
11212
+ "slots": [
11213
+ {
11214
+ "description": "Main content of the list item (usually label or text).",
11215
+ "name": "content"
11216
+ },
11217
+ {
11218
+ "description": "Trailing action elements (e.g., icons, buttons).",
11219
+ "name": "actions"
11220
+ }
11221
+ ],
11222
+ "members": [
11223
+ {
11224
+ "kind": "field",
11225
+ "name": "avatar",
11226
+ "type": {
11227
+ "text": "string"
11228
+ },
11229
+ "default": "\"\"",
11230
+ "description": "Optional avatar image URL.",
11231
+ "attribute": "avatar"
11232
+ },
11233
+ {
11234
+ "kind": "field",
11235
+ "name": "value",
11236
+ "type": {
11237
+ "text": "string"
11238
+ },
11239
+ "default": "\"\"",
11240
+ "description": "Stable id for selection (`sky-list` `selectedValues` / `list-change`). Default: `\"\"`.",
11241
+ "attribute": "value"
11242
+ },
11243
+ {
11244
+ "kind": "field",
11245
+ "name": "subheader",
11246
+ "type": {
11247
+ "text": "string"
11248
+ },
11249
+ "default": "\"\"",
11250
+ "description": "Subheader text; when set, item renders as a section header.",
11251
+ "attribute": "subheader",
11252
+ "reflects": true
11253
+ },
11254
+ {
11255
+ "kind": "field",
11256
+ "name": "selected",
11257
+ "type": {
11258
+ "text": "boolean"
11259
+ },
11260
+ "default": "false",
11261
+ "description": "Whether item is selected.",
11262
+ "attribute": "selected",
11263
+ "reflects": true
11264
+ },
11265
+ {
11266
+ "kind": "field",
11267
+ "name": "dense",
11268
+ "type": {
11269
+ "text": "boolean"
11270
+ },
11271
+ "default": "false",
11272
+ "description": "Whether compact spacing is used.",
11273
+ "attribute": "dense",
11274
+ "reflects": true
11275
+ },
11276
+ {
11277
+ "kind": "field",
11278
+ "name": "disabled",
11279
+ "type": {
11280
+ "text": "boolean"
11281
+ },
11282
+ "default": "false",
11283
+ "description": "Whether interaction is disabled.",
11284
+ "attribute": "disabled",
11285
+ "reflects": true
11286
+ },
11287
+ {
11288
+ "kind": "method",
11289
+ "name": "onClick",
11290
+ "privacy": "private",
11291
+ "return": {
11292
+ "type": {
11293
+ "text": "void"
11294
+ }
11295
+ }
11296
+ },
11297
+ {
11298
+ "kind": "method",
11299
+ "name": "setSelected",
11300
+ "return": {
11301
+ "type": {
11302
+ "text": "void"
11303
+ }
11304
+ },
11305
+ "parameters": [
11306
+ {
11307
+ "name": "selected",
11308
+ "type": {
11309
+ "text": "boolean"
11310
+ }
11311
+ }
11312
+ ]
11313
+ }
11314
+ ],
11315
+ "events": [
11316
+ {
11317
+ "name": "item-activate",
11318
+ "type": {
11319
+ "text": "CustomEvent<SkyListitemActivateDetail>"
11320
+ },
11321
+ "description": "Fired when the item is activated."
11322
+ }
11323
+ ],
11324
+ "attributes": [
11325
+ {
11326
+ "name": "avatar",
11327
+ "type": {
11328
+ "text": "string"
11329
+ },
11330
+ "default": "\"\"",
11331
+ "description": "Optional avatar image URL.",
11332
+ "fieldName": "avatar"
11333
+ },
11334
+ {
11335
+ "name": "value",
11336
+ "type": {
11337
+ "text": "string"
11338
+ },
11339
+ "default": "\"\"",
11340
+ "description": "Stable id for selection (`sky-list` `selectedValues` / `list-change`). Default: `\"\"`.",
11341
+ "fieldName": "value"
11342
+ },
11343
+ {
11344
+ "name": "subheader",
11345
+ "type": {
11346
+ "text": "string"
11347
+ },
11348
+ "default": "\"\"",
11349
+ "description": "Subheader text; when set, item renders as a section header.",
11350
+ "fieldName": "subheader"
11351
+ },
11352
+ {
11353
+ "name": "selected",
11354
+ "type": {
11355
+ "text": "boolean"
11356
+ },
11357
+ "default": "false",
11358
+ "description": "Whether item is selected.",
11359
+ "fieldName": "selected"
11360
+ },
11361
+ {
11362
+ "name": "dense",
11363
+ "type": {
11364
+ "text": "boolean"
11365
+ },
11366
+ "default": "false",
11367
+ "description": "Whether compact spacing is used.",
11368
+ "fieldName": "dense"
11369
+ },
11370
+ {
11371
+ "name": "disabled",
11372
+ "type": {
11373
+ "text": "boolean"
11374
+ },
11375
+ "default": "false",
11376
+ "description": "Whether interaction is disabled.",
11377
+ "fieldName": "disabled"
11148
11378
  }
11149
11379
  ],
11150
11380
  "superclass": {
11151
- "name": "FormControlBase",
11152
- "module": "/src/helper/internals/form-control-base"
11381
+ "name": "LitElement",
11382
+ "package": "lit"
11153
11383
  },
11154
- "tagName": "sky-input",
11384
+ "tagName": "sky-listitem",
11155
11385
  "customElement": true,
11156
- "summary": "Versatile form input supporting text, password, number, textarea, and file workflows."
11386
+ "summary": "List item with optional avatar, actions, subheader mode, and selectable state."
11157
11387
  }
11158
11388
  ],
11159
11389
  "exports": [
11160
11390
  {
11161
11391
  "kind": "js",
11162
- "name": "SkyInput",
11392
+ "name": "SkyListitem",
11163
11393
  "declaration": {
11164
- "name": "SkyInput",
11165
- "module": "src/sky-input/sky-input.ts"
11394
+ "name": "SkyListitem",
11395
+ "module": "src/sky-listitem/sky-listitem.ts"
11166
11396
  }
11167
11397
  },
11168
11398
  {
11169
11399
  "kind": "custom-element-definition",
11170
- "name": "sky-input",
11400
+ "name": "sky-listitem",
11171
11401
  "declaration": {
11172
- "name": "SkyInput",
11173
- "module": "src/sky-input/sky-input.ts"
11402
+ "name": "SkyListitem",
11403
+ "module": "src/sky-listitem/sky-listitem.ts"
11174
11404
  }
11175
11405
  }
11176
11406
  ]
@@ -11495,236 +11725,6 @@
11495
11725
  }
11496
11726
  ]
11497
11727
  },
11498
- {
11499
- "kind": "javascript-module",
11500
- "path": "src/sky-listitem/sky-listitem.ts",
11501
- "declarations": [
11502
- {
11503
- "kind": "class",
11504
- "description": "",
11505
- "name": "SkyListitem",
11506
- "cssParts": [
11507
- {
11508
- "description": "The main list item container.",
11509
- "name": "list-item"
11510
- },
11511
- {
11512
- "description": "The leading section (avatar container).",
11513
- "name": "leading"
11514
- },
11515
- {
11516
- "description": "The avatar image element.",
11517
- "name": "avatar"
11518
- },
11519
- {
11520
- "description": "The content wrapper for the main slot.",
11521
- "name": "content"
11522
- },
11523
- {
11524
- "description": "The trailing actions container.",
11525
- "name": "actions"
11526
- },
11527
- {
11528
- "description": "The subheader divider element.",
11529
- "name": "subheader"
11530
- }
11531
- ],
11532
- "slots": [
11533
- {
11534
- "description": "Main content of the list item (usually label or text).",
11535
- "name": "content"
11536
- },
11537
- {
11538
- "description": "Trailing action elements (e.g., icons, buttons).",
11539
- "name": "actions"
11540
- }
11541
- ],
11542
- "members": [
11543
- {
11544
- "kind": "field",
11545
- "name": "avatar",
11546
- "type": {
11547
- "text": "string"
11548
- },
11549
- "default": "\"\"",
11550
- "description": "Optional avatar image URL.",
11551
- "attribute": "avatar"
11552
- },
11553
- {
11554
- "kind": "field",
11555
- "name": "value",
11556
- "type": {
11557
- "text": "string"
11558
- },
11559
- "default": "\"\"",
11560
- "description": "Stable id for selection (`sky-list` `selectedValues` / `list-change`). Default: `\"\"`.",
11561
- "attribute": "value"
11562
- },
11563
- {
11564
- "kind": "field",
11565
- "name": "subheader",
11566
- "type": {
11567
- "text": "string"
11568
- },
11569
- "default": "\"\"",
11570
- "description": "Subheader text; when set, item renders as a section header.",
11571
- "attribute": "subheader",
11572
- "reflects": true
11573
- },
11574
- {
11575
- "kind": "field",
11576
- "name": "selected",
11577
- "type": {
11578
- "text": "boolean"
11579
- },
11580
- "default": "false",
11581
- "description": "Whether item is selected.",
11582
- "attribute": "selected",
11583
- "reflects": true
11584
- },
11585
- {
11586
- "kind": "field",
11587
- "name": "dense",
11588
- "type": {
11589
- "text": "boolean"
11590
- },
11591
- "default": "false",
11592
- "description": "Whether compact spacing is used.",
11593
- "attribute": "dense",
11594
- "reflects": true
11595
- },
11596
- {
11597
- "kind": "field",
11598
- "name": "disabled",
11599
- "type": {
11600
- "text": "boolean"
11601
- },
11602
- "default": "false",
11603
- "description": "Whether interaction is disabled.",
11604
- "attribute": "disabled",
11605
- "reflects": true
11606
- },
11607
- {
11608
- "kind": "method",
11609
- "name": "onClick",
11610
- "privacy": "private",
11611
- "return": {
11612
- "type": {
11613
- "text": "void"
11614
- }
11615
- }
11616
- },
11617
- {
11618
- "kind": "method",
11619
- "name": "setSelected",
11620
- "return": {
11621
- "type": {
11622
- "text": "void"
11623
- }
11624
- },
11625
- "parameters": [
11626
- {
11627
- "name": "selected",
11628
- "type": {
11629
- "text": "boolean"
11630
- }
11631
- }
11632
- ]
11633
- }
11634
- ],
11635
- "events": [
11636
- {
11637
- "name": "item-activate",
11638
- "type": {
11639
- "text": "CustomEvent<SkyListitemActivateDetail>"
11640
- },
11641
- "description": "Fired when the item is activated."
11642
- }
11643
- ],
11644
- "attributes": [
11645
- {
11646
- "name": "avatar",
11647
- "type": {
11648
- "text": "string"
11649
- },
11650
- "default": "\"\"",
11651
- "description": "Optional avatar image URL.",
11652
- "fieldName": "avatar"
11653
- },
11654
- {
11655
- "name": "value",
11656
- "type": {
11657
- "text": "string"
11658
- },
11659
- "default": "\"\"",
11660
- "description": "Stable id for selection (`sky-list` `selectedValues` / `list-change`). Default: `\"\"`.",
11661
- "fieldName": "value"
11662
- },
11663
- {
11664
- "name": "subheader",
11665
- "type": {
11666
- "text": "string"
11667
- },
11668
- "default": "\"\"",
11669
- "description": "Subheader text; when set, item renders as a section header.",
11670
- "fieldName": "subheader"
11671
- },
11672
- {
11673
- "name": "selected",
11674
- "type": {
11675
- "text": "boolean"
11676
- },
11677
- "default": "false",
11678
- "description": "Whether item is selected.",
11679
- "fieldName": "selected"
11680
- },
11681
- {
11682
- "name": "dense",
11683
- "type": {
11684
- "text": "boolean"
11685
- },
11686
- "default": "false",
11687
- "description": "Whether compact spacing is used.",
11688
- "fieldName": "dense"
11689
- },
11690
- {
11691
- "name": "disabled",
11692
- "type": {
11693
- "text": "boolean"
11694
- },
11695
- "default": "false",
11696
- "description": "Whether interaction is disabled.",
11697
- "fieldName": "disabled"
11698
- }
11699
- ],
11700
- "superclass": {
11701
- "name": "LitElement",
11702
- "package": "lit"
11703
- },
11704
- "tagName": "sky-listitem",
11705
- "customElement": true,
11706
- "summary": "List item with optional avatar, actions, subheader mode, and selectable state."
11707
- }
11708
- ],
11709
- "exports": [
11710
- {
11711
- "kind": "js",
11712
- "name": "SkyListitem",
11713
- "declaration": {
11714
- "name": "SkyListitem",
11715
- "module": "src/sky-listitem/sky-listitem.ts"
11716
- }
11717
- },
11718
- {
11719
- "kind": "custom-element-definition",
11720
- "name": "sky-listitem",
11721
- "declaration": {
11722
- "name": "SkyListitem",
11723
- "module": "src/sky-listitem/sky-listitem.ts"
11724
- }
11725
- }
11726
- ]
11727
- },
11728
11728
  {
11729
11729
  "kind": "javascript-module",
11730
11730
  "path": "src/sky-radio/sky-radio.ts",