@sky.ui/core 0.0.60 → 0.0.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/custom-elements.json +1358 -1316
  2. package/dist/sky-color-picker/sky-color-picker.d.ts +2 -1
  3. package/dist/sky-color-picker/sky-color-picker.js +203 -171
  4. package/dist/sky-color-picker/sky-color-picker.js.map +1 -1
  5. package/package.json +1 -1
package/dist/custom-elements.json CHANGED
@@ -488,59 +488,83 @@
488
488
  },
489
489
  {
490
490
  "kind": "javascript-module",
491
- "path": "src/sky-appbar/sky-appbar.ts",
491
+ "path": "src/sky-avatar/sky-avatar.ts",
492
492
  "declarations": [
493
493
  {
494
494
  "kind": "class",
495
495
  "description": "",
496
- "name": "SkyAppbar",
496
+ "name": "SkyAvatar",
497
497
  "cssParts": [
498
498
  {
499
- "description": "Wrapper that contains the leading slot, title, and actions.",
500
- "name": "content"
501
- },
502
- {
503
- "description": "Container for the leading slot (e.g. menu button).",
504
- "name": "leading"
499
+ "description": "The avatar container element.",
500
+ "name": "avatar"
505
501
  },
506
502
  {
507
- "description": "The title area (contains .title-text with the title string).",
508
- "name": "title"
503
+ "description": "The loading overlay container (shown when `loading` is true).",
504
+ "name": "loading-overlay"
509
505
  },
510
506
  {
511
- "description": "The trailing actions container.",
512
- "name": "actions"
507
+ "description": "The spinner element shown when loading.",
508
+ "name": "spinner"
513
509
  }
514
510
  ],
515
511
  "slots": [
516
512
  {
517
- "description": "Leading area (e.g., menu/back button). Defaults to a hamburger icon.",
518
- "name": "button"
519
- },
520
- {
521
- "description": "Trailing actions (icons/buttons). This is the default slot.",
513
+ "description": "Fallback content (e.g., initials or an icon) rendered when `image` is empty.",
522
514
  "name": ""
523
515
  }
524
516
  ],
525
517
  "members": [
526
518
  {
527
519
  "kind": "field",
528
- "name": "dependencies",
520
+ "name": "size",
529
521
  "type": {
530
- "text": "Record<string, CustomElementConstructor>"
522
+ "text": "string"
531
523
  },
532
- "static": true,
533
- "default": "{ \"sky-icon\": SkyIcon, }"
524
+ "default": "\"50px\"",
525
+ "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
526
+ "attribute": "size"
534
527
  },
535
528
  {
536
529
  "kind": "field",
537
- "name": "title",
530
+ "name": "image",
538
531
  "type": {
539
532
  "text": "string"
540
533
  },
541
- "default": "\"App Bar\"",
542
- "description": "Title text displayed in the app bar.",
543
- "attribute": "title"
534
+ "default": "\"\"",
535
+ "description": "Image URL; fallback slot is shown on load error.",
536
+ "attribute": "image"
537
+ },
538
+ {
539
+ "kind": "field",
540
+ "name": "fit",
541
+ "type": {
542
+ "text": "SkyAvatarFit"
543
+ },
544
+ "default": "\"cover\"",
545
+ "description": "Image fill mode: `cover` (default) or `contain`.",
546
+ "attribute": "fit",
547
+ "reflects": true
548
+ },
549
+ {
550
+ "kind": "field",
551
+ "name": "radius",
552
+ "type": {
553
+ "text": "string"
554
+ },
555
+ "default": "\"md\"",
556
+ "description": "Border radius token or CSS value.",
557
+ "attribute": "radius"
558
+ },
559
+ {
560
+ "kind": "field",
561
+ "name": "alt",
562
+ "type": {
563
+ "text": "string"
564
+ },
565
+ "default": "\"\"",
566
+ "description": "Accessible name when image content conveys meaning.",
567
+ "attribute": "alt"
544
568
  },
545
569
  {
546
570
  "kind": "field",
@@ -548,59 +572,82 @@
548
572
  "type": {
549
573
  "text": "string"
550
574
  },
551
- "default": "\"default\"",
552
- "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
575
+ "default": "\"dark\"",
576
+ "description": "Token or CSS color applied to fallback slot content.",
553
577
  "attribute": "color"
554
578
  },
555
579
  {
556
580
  "kind": "field",
557
- "name": "url",
581
+ "name": "outline",
558
582
  "type": {
559
583
  "text": "string"
560
584
  },
561
585
  "default": "\"\"",
562
- "description": "Background image URL.",
563
- "attribute": "url"
586
+ "description": "CSS `outline` value.",
587
+ "attribute": "outline"
564
588
  },
565
589
  {
566
590
  "kind": "field",
567
- "name": "banner",
591
+ "name": "outlineOffset",
592
+ "type": {
593
+ "text": "string"
594
+ },
595
+ "default": "\"2px\"",
596
+ "description": "CSS `outline-offset` value.",
597
+ "attribute": "outlineOffset"
598
+ },
599
+ {
600
+ "kind": "field",
601
+ "name": "loading",
568
602
  "type": {
569
603
  "text": "boolean"
570
604
  },
571
- "default": "true",
572
- "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
573
- "attribute": "banner"
605
+ "default": "false",
606
+ "description": "Shows loading overlay when true.",
607
+ "attribute": "loading",
608
+ "reflects": true
574
609
  },
575
610
  {
576
611
  "kind": "field",
577
- "name": "dense",
612
+ "name": "disabled",
578
613
  "type": {
579
614
  "text": "boolean"
580
615
  },
581
616
  "default": "false",
582
- "description": "Enables compact vertical spacing.",
583
- "attribute": "dense"
617
+ "description": "Dims and disables pointer interactions.",
618
+ "attribute": "disabled",
619
+ "reflects": true
584
620
  },
585
621
  {
586
622
  "kind": "field",
587
- "name": "elevated",
623
+ "name": "interactive",
588
624
  "type": {
589
625
  "text": "boolean"
590
626
  },
591
627
  "default": "false",
592
- "description": "Applies elevated shadow styling.",
593
- "attribute": "elevated"
628
+ "description": "Enables interactive behavior with keyboard/click activation.",
629
+ "attribute": "interactive"
594
630
  },
595
631
  {
596
632
  "kind": "field",
597
- "name": "leadingLabel",
633
+ "name": "shadow",
598
634
  "type": {
599
- "text": "string"
635
+ "text": "boolean"
600
636
  },
601
- "default": "\"Open menu\"",
602
- "description": "Accessible label for default leading button fallback.",
603
- "attribute": "leadingLabel"
637
+ "default": "false",
638
+ "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
639
+ "attribute": "shadow",
640
+ "reflects": true
641
+ },
642
+ {
643
+ "kind": "field",
644
+ "name": "_imageError",
645
+ "type": {
646
+ "text": "boolean"
647
+ },
648
+ "privacy": "private",
649
+ "default": "false",
650
+ "description": "True when image failed to load; show slot instead."
604
651
  },
605
652
  {
606
653
  "kind": "field",
@@ -619,161 +666,253 @@
619
666
  "privacy": "private",
620
667
  "default": "new PresetController(this)"
621
668
  },
669
+ {
670
+ "kind": "field",
671
+ "name": "_onImageLoad",
672
+ "privacy": "private",
673
+ "description": "Marks image load success and keeps image rendering active."
674
+ },
675
+ {
676
+ "kind": "field",
677
+ "name": "_onImageError",
678
+ "privacy": "private",
679
+ "description": "Marks image load failure and enables fallback slot rendering."
680
+ },
622
681
  {
623
682
  "kind": "method",
624
- "name": "_applyColorSurface",
683
+ "name": "_handleInteractiveClick",
625
684
  "privacy": "private",
626
685
  "return": {
627
686
  "type": {
628
687
  "text": "void"
629
688
  }
630
689
  },
631
- "description": "Applies glass vs solid surface tokens from `color`."
690
+ "parameters": [
691
+ {
692
+ "name": "e",
693
+ "type": {
694
+ "text": "Event"
695
+ }
696
+ }
697
+ ],
698
+ "description": "Re-dispatches click in interactive mode for host-level consumers."
632
699
  },
633
700
  {
634
701
  "kind": "method",
635
- "name": "_applyBackgroundImage",
702
+ "name": "_handleInteractiveKeydown",
636
703
  "privacy": "private",
637
704
  "return": {
638
705
  "type": {
639
706
  "text": "void"
640
707
  }
641
708
  },
642
- "description": "Sets background image CSS variable from `url`."
709
+ "parameters": [
710
+ {
711
+ "name": "e",
712
+ "type": {
713
+ "text": "KeyboardEvent"
714
+ }
715
+ }
716
+ ],
717
+ "description": "Handles keyboard activation in interactive mode."
718
+ },
719
+ {
720
+ "kind": "method",
721
+ "name": "adjustSpinnerSize",
722
+ "privacy": "private",
723
+ "return": {
724
+ "type": {
725
+ "text": "void"
726
+ }
727
+ },
728
+ "description": "Derives spinner dimensions from current avatar size."
643
729
  }
644
730
  ],
645
- "attributes": [
731
+ "events": [
646
732
  {
647
- "name": "title",
733
+ "name": "click",
648
734
  "type": {
649
- "text": "string"
650
- },
651
- "default": "\"App Bar\"",
652
- "description": "Title text displayed in the app bar.",
653
- "fieldName": "title"
654
- },
735
+ "text": "Event"
736
+ }
737
+ }
738
+ ],
739
+ "attributes": [
655
740
  {
656
- "name": "color",
741
+ "name": "size",
657
742
  "type": {
658
743
  "text": "string"
659
744
  },
660
- "default": "\"default\"",
661
- "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
662
- "fieldName": "color"
745
+ "default": "\"50px\"",
746
+ "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
747
+ "fieldName": "size"
663
748
  },
664
749
  {
665
- "name": "url",
750
+ "name": "image",
666
751
  "type": {
667
752
  "text": "string"
668
753
  },
669
754
  "default": "\"\"",
670
- "description": "Background image URL.",
671
- "fieldName": "url"
755
+ "description": "Image URL; fallback slot is shown on load error.",
756
+ "fieldName": "image"
672
757
  },
673
758
  {
674
- "name": "banner",
759
+ "name": "fit",
675
760
  "type": {
676
- "text": "boolean"
761
+ "text": "SkyAvatarFit"
677
762
  },
678
- "default": "true",
679
- "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
680
- "fieldName": "banner"
763
+ "default": "\"cover\"",
764
+ "description": "Image fill mode: `cover` (default) or `contain`.",
765
+ "fieldName": "fit"
681
766
  },
682
767
  {
683
- "name": "dense",
768
+ "name": "radius",
684
769
  "type": {
685
- "text": "boolean"
770
+ "text": "string"
686
771
  },
687
- "default": "false",
688
- "description": "Enables compact vertical spacing.",
689
- "fieldName": "dense"
772
+ "default": "\"md\"",
773
+ "description": "Border radius token or CSS value.",
774
+ "fieldName": "radius"
690
775
  },
691
776
  {
692
- "name": "elevated",
777
+ "name": "alt",
693
778
  "type": {
694
- "text": "boolean"
779
+ "text": "string"
695
780
  },
696
- "default": "false",
697
- "description": "Applies elevated shadow styling.",
698
- "fieldName": "elevated"
781
+ "default": "\"\"",
782
+ "description": "Accessible name when image content conveys meaning.",
783
+ "fieldName": "alt"
699
784
  },
700
785
  {
701
- "name": "leadingLabel",
786
+ "name": "color",
702
787
  "type": {
703
788
  "text": "string"
704
789
  },
705
- "default": "\"Open menu\"",
706
- "description": "Accessible label for default leading button fallback.",
707
- "fieldName": "leadingLabel"
790
+ "default": "\"dark\"",
791
+ "description": "Token or CSS color applied to fallback slot content.",
792
+ "fieldName": "color"
708
793
  },
709
794
  {
710
- "name": "preset",
795
+ "name": "outline",
711
796
  "type": {
712
797
  "text": "string"
713
798
  },
714
799
  "default": "\"\"",
715
- "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
716
- "fieldName": "preset"
717
- }
800
+ "description": "CSS `outline` value.",
801
+ "fieldName": "outline"
802
+ },
803
+ {
804
+ "name": "outlineOffset",
805
+ "type": {
806
+ "text": "string"
807
+ },
808
+ "default": "\"2px\"",
809
+ "description": "CSS `outline-offset` value.",
810
+ "fieldName": "outlineOffset"
811
+ },
812
+ {
813
+ "name": "loading",
814
+ "type": {
815
+ "text": "boolean"
816
+ },
817
+ "default": "false",
818
+ "description": "Shows loading overlay when true.",
819
+ "fieldName": "loading"
820
+ },
821
+ {
822
+ "name": "disabled",
823
+ "type": {
824
+ "text": "boolean"
825
+ },
826
+ "default": "false",
827
+ "description": "Dims and disables pointer interactions.",
828
+ "fieldName": "disabled"
829
+ },
830
+ {
831
+ "name": "interactive",
832
+ "type": {
833
+ "text": "boolean"
834
+ },
835
+ "default": "false",
836
+ "description": "Enables interactive behavior with keyboard/click activation.",
837
+ "fieldName": "interactive"
838
+ },
839
+ {
840
+ "name": "shadow",
841
+ "type": {
842
+ "text": "boolean"
843
+ },
844
+ "default": "false",
845
+ "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
846
+ "fieldName": "shadow"
847
+ },
848
+ {
849
+ "name": "preset",
850
+ "type": {
851
+ "text": "string"
852
+ },
853
+ "default": "\"\"",
854
+ "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
855
+ "fieldName": "preset"
856
+ }
718
857
  ],
719
858
  "superclass": {
720
859
  "name": "LitElement",
721
860
  "package": "lit"
722
861
  },
723
- "tagName": "sky-appbar",
862
+ "tagName": "sky-avatar",
724
863
  "customElement": true,
725
- "summary": "Application top bar with title, optional leading control, trailing actions, and optional color/image background."
864
+ "summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
726
865
  }
727
866
  ],
728
867
  "exports": [
729
868
  {
730
869
  "kind": "js",
731
- "name": "SkyAppbar",
870
+ "name": "SkyAvatar",
732
871
  "declaration": {
733
- "name": "SkyAppbar",
734
- "module": "src/sky-appbar/sky-appbar.ts"
872
+ "name": "SkyAvatar",
873
+ "module": "src/sky-avatar/sky-avatar.ts"
735
874
  }
736
875
  },
737
876
  {
738
877
  "kind": "custom-element-definition",
739
- "name": "sky-appbar",
878
+ "name": "sky-avatar",
740
879
  "declaration": {
741
- "name": "SkyAppbar",
742
- "module": "src/sky-appbar/sky-appbar.ts"
880
+ "name": "SkyAvatar",
881
+ "module": "src/sky-avatar/sky-avatar.ts"
743
882
  }
744
883
  }
745
884
  ]
746
885
  },
747
886
  {
748
887
  "kind": "javascript-module",
749
- "path": "src/sky-button/sky-button.ts",
888
+ "path": "src/sky-badge/sky-badge.ts",
750
889
  "declarations": [
751
890
  {
752
891
  "kind": "class",
753
892
  "description": "",
754
- "name": "SkyButton",
893
+ "name": "SkyBadge",
755
894
  "cssParts": [
756
895
  {
757
- "description": "The native `<button>` element.",
758
- "name": "button"
759
- },
760
- {
761
- "description": "The optional left/right icons.",
762
- "name": "icon"
896
+ "description": "Wrapper around the slotted content and the badge.",
897
+ "name": "container"
763
898
  },
764
899
  {
765
- "description": "Overlay displayed when loading.",
766
- "name": "loading-overlay"
900
+ "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
901
+ "name": "badge"
767
902
  },
768
903
  {
769
- "description": "Spinner displayed when loading.",
770
- "name": "spinner"
904
+ "description": "The icon element when `isIcon` is true.",
905
+ "name": "icon"
771
906
  }
772
907
  ],
773
908
  "slots": [
774
909
  {
775
- "description": "Default slot for the button label (replaces `label` property if used).",
910
+ "description": "The content the badge attaches to.",
776
911
  "name": ""
912
+ },
913
+ {
914
+ "description": "Optional slot to override the badge content entirely.",
915
+ "name": "badge"
777
916
  }
778
917
  ],
779
918
  "members": [
@@ -788,61 +927,68 @@
788
927
  },
789
928
  {
790
929
  "kind": "field",
791
- "name": "formAssociated",
930
+ "name": "statusColor",
792
931
  "type": {
793
- "text": "boolean"
932
+ "text": "string"
794
933
  },
795
- "static": true,
796
- "default": "true"
934
+ "default": "\"success\"",
935
+ "description": "Badge background token or CSS color.",
936
+ "attribute": "statusColor",
937
+ "reflects": true
797
938
  },
798
939
  {
799
940
  "kind": "field",
800
- "name": "internals",
941
+ "name": "textColor",
801
942
  "type": {
802
- "text": "ElementInternals"
943
+ "text": "string"
803
944
  },
804
- "privacy": "private"
945
+ "default": "\"default\"",
946
+ "description": "Text color token or CSS color.",
947
+ "attribute": "textColor",
948
+ "reflects": true
805
949
  },
806
950
  {
807
951
  "kind": "field",
808
- "name": "variant",
952
+ "name": "iconColor",
809
953
  "type": {
810
- "text": "SkyButtonVariant"
954
+ "text": "string"
811
955
  },
812
- "default": "\"solid\"",
813
- "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
814
- "attribute": "variant",
956
+ "default": "\"\"",
957
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
958
+ "attribute": "iconColor",
815
959
  "reflects": true
816
960
  },
817
961
  {
818
962
  "kind": "field",
819
- "name": "color",
963
+ "name": "position",
820
964
  "type": {
821
- "text": "string"
965
+ "text": "SkyBadgePosition"
822
966
  },
823
- "default": "\"primary\"",
824
- "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
825
- "attribute": "color"
967
+ "default": "\"default\"",
968
+ "description": "Layout mode: `default | floating | inline`.",
969
+ "attribute": "position",
970
+ "reflects": true
826
971
  },
827
972
  {
828
973
  "kind": "field",
829
- "name": "type",
974
+ "name": "value",
830
975
  "type": {
831
- "text": "SkyButtonType"
976
+ "text": "string"
832
977
  },
833
- "default": "\"button\"",
834
- "description": "Button type attribute. Default: `\"button\"`.",
835
- "attribute": "type"
978
+ "default": "\"\"",
979
+ "description": "Badge text/count or icon name in icon mode.",
980
+ "attribute": "value"
836
981
  },
837
982
  {
838
983
  "kind": "field",
839
- "name": "form",
984
+ "name": "isIcon",
840
985
  "type": {
841
- "text": "string"
986
+ "text": "boolean"
842
987
  },
843
- "default": "\"\"",
844
- "description": "Associated form ID for custom submit handling.",
845
- "attribute": "form"
988
+ "default": "false",
989
+ "description": "Renders icon mode when true.",
990
+ "attribute": "isIcon",
991
+ "reflects": true
846
992
  },
847
993
  {
848
994
  "kind": "field",
@@ -850,495 +996,477 @@
850
996
  "type": {
851
997
  "text": "string"
852
998
  },
853
- "default": "\"md\"",
854
- "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
855
- "attribute": "size"
999
+ "default": "\"\"",
1000
+ "description": "Badge and icon size CSS length.",
1001
+ "attribute": "size",
1002
+ "reflects": true
856
1003
  },
857
1004
  {
858
1005
  "kind": "field",
859
- "name": "radius",
1006
+ "name": "shape",
860
1007
  "type": {
861
- "text": "string"
1008
+ "text": "SkyBadgeShape"
862
1009
  },
863
- "default": "\"md\"",
864
- "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
865
- "attribute": "radius"
1010
+ "default": "\"custom\"",
1011
+ "description": "Badge shape: `circle | pill | custom`.",
1012
+ "attribute": "shape",
1013
+ "reflects": true
866
1014
  },
867
1015
  {
868
1016
  "kind": "field",
869
- "name": "label",
1017
+ "name": "max",
870
1018
  "type": {
871
- "text": "string"
1019
+ "text": "number"
872
1020
  },
873
- "default": "\"Button\"",
874
- "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
875
- "attribute": "label"
1021
+ "default": "99",
1022
+ "description": "Maximum numeric count before rendering overflow label.",
1023
+ "attribute": "max"
876
1024
  },
877
1025
  {
878
1026
  "kind": "field",
879
- "name": "disabled",
1027
+ "name": "hideWhenZero",
880
1028
  "type": {
881
1029
  "text": "boolean"
882
1030
  },
883
1031
  "default": "false",
884
- "description": "Whether the button is disabled. Default: `false`.",
885
- "attribute": "disabled",
886
- "reflects": true
1032
+ "description": "Hides badge when value resolves to numeric zero.",
1033
+ "attribute": "hideWhenZero"
887
1034
  },
888
1035
  {
889
1036
  "kind": "field",
890
- "name": "loading",
1037
+ "name": "show",
891
1038
  "type": {
892
1039
  "text": "boolean"
893
1040
  },
894
- "default": "false",
895
- "description": "Shows a loading overlay when true. Default: `false`.",
896
- "attribute": "loading",
1041
+ "default": "true",
1042
+ "description": "Forces badge visibility independent of value.",
1043
+ "attribute": "show",
897
1044
  "reflects": true
898
1045
  },
899
1046
  {
900
1047
  "kind": "field",
901
- "name": "iconL",
1048
+ "name": "offsetX",
902
1049
  "type": {
903
1050
  "text": "string"
904
1051
  },
905
- "default": "\"\"",
906
- "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
907
- "attribute": "iconL"
1052
+ "default": "\"0px\"",
1053
+ "description": "Horizontal offset CSS length.",
1054
+ "attribute": "offsetX"
908
1055
  },
909
1056
  {
910
1057
  "kind": "field",
911
- "name": "iconR",
1058
+ "name": "offsetY",
912
1059
  "type": {
913
1060
  "text": "string"
914
1061
  },
915
- "default": "\"\"",
916
- "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
917
- "attribute": "iconR"
1062
+ "default": "\"0px\"",
1063
+ "description": "Vertical offset CSS length.",
1064
+ "attribute": "offsetY"
918
1065
  },
919
1066
  {
920
1067
  "kind": "field",
921
- "name": "iconOnly",
1068
+ "name": "ring",
922
1069
  "type": {
923
1070
  "text": "boolean"
924
1071
  },
925
1072
  "default": "false",
926
- "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
927
- "attribute": "iconOnly",
928
- "reflects": true
1073
+ "description": "Enables visual ring around the badge.",
1074
+ "attribute": "ring"
929
1075
  },
930
1076
  {
931
1077
  "kind": "field",
932
- "name": "colors",
1078
+ "name": "ringColor",
933
1079
  "type": {
934
1080
  "text": "string"
935
1081
  },
936
- "default": "\"\"",
937
- "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
938
- "attribute": "colors"
1082
+ "default": "\"primary\"",
1083
+ "description": "Ring color token or CSS color.",
1084
+ "attribute": "ringColor"
939
1085
  },
940
1086
  {
941
1087
  "kind": "field",
942
- "name": "animation",
1088
+ "name": "ringOffset",
943
1089
  "type": {
944
- "text": "SkyButtonAnimation"
1090
+ "text": "string"
945
1091
  },
946
- "default": "\"auto\"",
947
- "description": "Transform animation style. Default: `\"auto\"`.",
948
- "attribute": "animation",
949
- "reflects": true
1092
+ "default": "\"1px\"",
1093
+ "description": "Ring offset CSS length.",
1094
+ "attribute": "ringOffset"
950
1095
  },
951
1096
  {
952
1097
  "kind": "field",
953
- "name": "preset",
1098
+ "name": "badgeLabel",
954
1099
  "type": {
955
- "text": "string"
1100
+ "text": "string | null"
956
1101
  },
957
- "default": "\"\"",
958
- "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
959
- "attribute": "preset",
960
- "reflects": true
1102
+ "default": "null",
1103
+ "description": "ARIA label override.",
1104
+ "attribute": "badgeLabel"
961
1105
  },
962
1106
  {
963
1107
  "kind": "field",
964
- "name": "_hasMeaningfulSlot",
1108
+ "name": "badgeAriaHidden",
965
1109
  "type": {
966
1110
  "text": "boolean"
967
1111
  },
968
- "privacy": "private",
969
- "default": "false"
1112
+ "default": "false",
1113
+ "description": "Hides badge from assistive technology when true.",
1114
+ "attribute": "badgeAriaHidden"
970
1115
  },
971
1116
  {
972
1117
  "kind": "field",
973
- "name": "_styleVars",
1118
+ "name": "interactive",
974
1119
  "type": {
975
- "text": "Record<string, string>"
1120
+ "text": "boolean"
976
1121
  },
977
- "privacy": "private",
978
- "default": "{}",
979
- "description": "Inline CSS variable cache."
1122
+ "default": "false",
1123
+ "description": "Enables focus/activation and `badge-click` emission.",
1124
+ "attribute": "interactive"
980
1125
  },
981
1126
  {
982
1127
  "kind": "field",
983
- "name": "_presets",
984
- "privacy": "private",
985
- "default": "new PresetController(this, { isPaused: () => this.inGroup, onChange: () => { this._styleDirty = true; }, })"
1128
+ "name": "placement",
1129
+ "type": {
1130
+ "text": "SkyBadgePlacement"
1131
+ },
1132
+ "default": "\"custom\"",
1133
+ "description": "Anchor placement preset for badge positioning.",
1134
+ "attribute": "placement",
1135
+ "reflects": true
986
1136
  },
987
1137
  {
988
1138
  "kind": "field",
989
- "name": "_lastPresetRevision",
1139
+ "name": "preset",
990
1140
  "type": {
991
- "text": "number"
1141
+ "text": "string"
992
1142
  },
1143
+ "default": "\"\"",
1144
+ "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
1145
+ "attribute": "preset",
1146
+ "reflects": true
1147
+ },
1148
+ {
1149
+ "kind": "field",
1150
+ "name": "_presets",
993
1151
  "privacy": "private",
994
- "default": "-1"
1152
+ "default": "new PresetController(this)"
995
1153
  },
996
1154
  {
997
1155
  "kind": "field",
998
- "name": "_styleDirty",
1156
+ "name": "_badgeEl",
999
1157
  "type": {
1000
- "text": "boolean"
1158
+ "text": "HTMLSpanElement"
1001
1159
  },
1002
- "privacy": "private",
1003
- "default": "true",
1004
- "description": "Set when presets change so `update()` rebuilds CSS vars after hostUpdate."
1160
+ "privacy": "private"
1005
1161
  },
1006
1162
  {
1007
- "kind": "method",
1008
- "name": "_slotHasMeaningfulContent",
1009
- "privacy": "private",
1010
- "return": {
1011
- "type": {
1012
- "text": "boolean"
1013
- }
1014
- },
1015
- "parameters": [
1016
- {
1017
- "name": "slotEl",
1018
- "type": {
1019
- "text": "HTMLSlotElement"
1020
- }
1021
- }
1022
- ]
1163
+ "kind": "field",
1164
+ "name": "badgeRef",
1165
+ "privacy": "public",
1166
+ "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
1023
1167
  },
1024
1168
  {
1025
1169
  "kind": "field",
1026
- "name": "_onSlotChange",
1027
- "privacy": "private"
1170
+ "name": "shadowRootOptions",
1171
+ "type": {
1172
+ "text": "ShadowRootInit"
1173
+ },
1174
+ "static": true,
1175
+ "default": "{ mode: \"open\", delegatesFocus: true, }"
1028
1176
  },
1029
1177
  {
1030
1178
  "kind": "method",
1031
- "name": "_toSquarePadding",
1032
- "privacy": "private",
1179
+ "name": "showBadge",
1180
+ "privacy": "public",
1033
1181
  "return": {
1034
1182
  "type": {
1035
- "text": "string"
1183
+ "text": "void"
1036
1184
  }
1037
1185
  },
1038
- "parameters": [
1039
- {
1040
- "name": "padding",
1041
- "type": {
1042
- "text": "string"
1043
- }
1044
- }
1045
- ],
1046
- "description": "Uses vertical padding for equal sides (icon-only square control)."
1186
+ "description": "Forces badge visibility on."
1047
1187
  },
1048
1188
  {
1049
1189
  "kind": "method",
1050
- "name": "_resolveSize",
1051
- "privacy": "private",
1190
+ "name": "hideBadge",
1191
+ "privacy": "public",
1052
1192
  "return": {
1053
1193
  "type": {
1054
- "text": "{\r\n padding: string;\r\n fontSize: string;\r\n gap: string;\r\n icon: string;\r\n spinner: string;\r\n }"
1194
+ "text": "void"
1055
1195
  }
1056
1196
  },
1057
- "parameters": [
1058
- {
1059
- "name": "input",
1060
- "type": {
1061
- "text": "string"
1062
- }
1063
- }
1064
- ]
1197
+ "description": "Forces badge visibility off."
1065
1198
  },
1066
1199
  {
1067
1200
  "kind": "method",
1068
- "name": "_isThemeBorderShorthand",
1069
- "privacy": "private",
1201
+ "name": "setValue",
1202
+ "privacy": "public",
1070
1203
  "return": {
1071
1204
  "type": {
1072
- "text": "boolean"
1205
+ "text": "void"
1073
1206
  }
1074
1207
  },
1075
1208
  "parameters": [
1076
1209
  {
1077
- "name": "border",
1210
+ "name": "value",
1078
1211
  "type": {
1079
- "text": "string | undefined"
1080
- }
1212
+ "text": "string"
1213
+ },
1214
+ "description": "Badge value or icon name."
1081
1215
  }
1082
1216
  ],
1083
- "description": "Theme tokens like `var(--sky-border-primary)` are full border shorthands, not colors."
1217
+ "description": "Updates badge value for text/count or icon modes."
1218
+ },
1219
+ {
1220
+ "kind": "field",
1221
+ "name": "_onActivate",
1222
+ "privacy": "private",
1223
+ "description": "Emits `badge-click` for interactive activation."
1224
+ },
1225
+ {
1226
+ "kind": "field",
1227
+ "name": "_onKeydown",
1228
+ "privacy": "private",
1229
+ "description": "Handles keyboard activation with Enter and Space."
1084
1230
  },
1085
1231
  {
1086
1232
  "kind": "method",
1087
- "name": "_borderColorFromShorthand",
1233
+ "name": "_computeAriaLabel",
1088
1234
  "privacy": "private",
1089
1235
  "return": {
1090
1236
  "type": {
1091
- "text": "string"
1237
+ "text": "string | null"
1092
1238
  }
1093
1239
  },
1094
1240
  "parameters": [
1095
1241
  {
1096
- "name": "border",
1242
+ "name": "displayValue",
1097
1243
  "type": {
1098
- "text": "string | undefined"
1244
+ "text": "string | null"
1099
1245
  }
1100
1246
  }
1101
1247
  ],
1102
- "description": "Extracts the color token from a `Npx solid …` border shorthand."
1248
+ "description": "Computes accessible badge label from current render state."
1103
1249
  },
1104
1250
  {
1105
1251
  "kind": "method",
1106
- "name": "_rebuildStyleVars",
1252
+ "name": "_computeAnchors",
1107
1253
  "privacy": "private",
1108
1254
  "return": {
1109
1255
  "type": {
1110
- "text": "void"
1256
+ "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
1111
1257
  }
1112
1258
  },
1113
1259
  "parameters": [
1114
1260
  {
1115
- "name": "changedProperties",
1261
+ "name": "placement",
1116
1262
  "type": {
1117
- "text": "Map<string, unknown>"
1263
+ "text": "SkyBadgePlacement"
1118
1264
  }
1119
1265
  }
1120
- ]
1266
+ ],
1267
+ "description": "Resolves anchor edges from placement preset."
1121
1268
  },
1122
1269
  {
1123
1270
  "kind": "method",
1124
- "name": "focusButton",
1125
- "privacy": "public",
1271
+ "name": "_resolveBadgeSurface",
1272
+ "privacy": "private",
1126
1273
  "return": {
1127
1274
  "type": {
1128
- "text": "void"
1275
+ "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
1129
1276
  }
1130
1277
  },
1131
- "description": "Focuses the internal native button."
1132
- },
1278
+ "description": "Maps semantic status tokens to soft badge surface colors."
1279
+ }
1280
+ ],
1281
+ "events": [
1133
1282
  {
1134
- "kind": "method",
1135
- "name": "clickButton",
1136
- "privacy": "public",
1137
- "return": {
1138
- "type": {
1139
- "text": "void"
1140
- }
1283
+ "type": {
1284
+ "text": "CustomEvent<SkyBadgeClickEventDetail>"
1141
1285
  },
1142
- "description": "Triggers a click on the internal native button when enabled."
1143
- },
1286
+ "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
1287
+ "name": "badge-click"
1288
+ }
1289
+ ],
1290
+ "attributes": [
1144
1291
  {
1145
- "kind": "method",
1146
- "name": "_createRipple",
1147
- "privacy": "private",
1148
- "return": {
1149
- "type": {
1150
- "text": "void"
1151
- }
1292
+ "name": "statusColor",
1293
+ "type": {
1294
+ "text": "string"
1152
1295
  },
1153
- "parameters": [
1154
- {
1155
- "name": "event",
1156
- "type": {
1157
- "text": "MouseEvent"
1158
- }
1159
- }
1160
- ]
1296
+ "default": "\"success\"",
1297
+ "description": "Badge background token or CSS color.",
1298
+ "fieldName": "statusColor"
1161
1299
  },
1162
1300
  {
1163
- "kind": "method",
1164
- "name": "formDisabledCallback",
1165
- "return": {
1166
- "type": {
1167
- "text": "void"
1168
- }
1301
+ "name": "textColor",
1302
+ "type": {
1303
+ "text": "string"
1169
1304
  },
1170
- "parameters": [
1171
- {
1172
- "name": "disabled",
1173
- "type": {
1174
- "text": "boolean"
1175
- }
1176
- }
1177
- ]
1305
+ "default": "\"default\"",
1306
+ "description": "Text color token or CSS color.",
1307
+ "fieldName": "textColor"
1178
1308
  },
1179
1309
  {
1180
- "kind": "field",
1181
- "name": "formOwner",
1310
+ "name": "iconColor",
1182
1311
  "type": {
1183
- "text": "HTMLFormElement | null"
1312
+ "text": "string"
1184
1313
  },
1185
- "readonly": true
1314
+ "default": "\"\"",
1315
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1316
+ "fieldName": "iconColor"
1186
1317
  },
1187
1318
  {
1188
- "kind": "method",
1189
- "name": "_handleClick",
1190
- "privacy": "private",
1191
- "return": {
1192
- "type": {
1193
- "text": "void"
1194
- }
1319
+ "name": "position",
1320
+ "type": {
1321
+ "text": "SkyBadgePosition"
1195
1322
  },
1196
- "parameters": [
1197
- {
1198
- "name": "event",
1199
- "type": {
1200
- "text": "MouseEvent"
1201
- }
1202
- }
1203
- ]
1323
+ "default": "\"default\"",
1324
+ "description": "Layout mode: `default | floating | inline`.",
1325
+ "fieldName": "position"
1204
1326
  },
1205
1327
  {
1206
- "kind": "method",
1207
- "name": "_iconOnlyName",
1208
- "privacy": "private",
1209
- "return": {
1210
- "type": {
1211
- "text": "string"
1212
- }
1213
- }
1214
- }
1215
- ],
1216
- "attributes": [
1328
+ "name": "value",
1329
+ "type": {
1330
+ "text": "string"
1331
+ },
1332
+ "default": "\"\"",
1333
+ "description": "Badge text/count or icon name in icon mode.",
1334
+ "fieldName": "value"
1335
+ },
1217
1336
  {
1218
- "name": "variant",
1337
+ "name": "isIcon",
1219
1338
  "type": {
1220
- "text": "SkyButtonVariant"
1339
+ "text": "boolean"
1221
1340
  },
1222
- "default": "\"solid\"",
1223
- "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
1224
- "fieldName": "variant"
1341
+ "default": "false",
1342
+ "description": "Renders icon mode when true.",
1343
+ "fieldName": "isIcon"
1225
1344
  },
1226
1345
  {
1227
- "name": "color",
1346
+ "name": "size",
1228
1347
  "type": {
1229
1348
  "text": "string"
1230
1349
  },
1231
- "default": "\"primary\"",
1232
- "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1233
- "fieldName": "color"
1350
+ "default": "\"\"",
1351
+ "description": "Badge and icon size CSS length.",
1352
+ "fieldName": "size"
1234
1353
  },
1235
1354
  {
1236
- "name": "type",
1355
+ "name": "shape",
1237
1356
  "type": {
1238
- "text": "SkyButtonType"
1357
+ "text": "SkyBadgeShape"
1239
1358
  },
1240
- "default": "\"button\"",
1241
- "description": "Button type attribute. Default: `\"button\"`.",
1242
- "fieldName": "type"
1359
+ "default": "\"custom\"",
1360
+ "description": "Badge shape: `circle | pill | custom`.",
1361
+ "fieldName": "shape"
1243
1362
  },
1244
1363
  {
1245
- "name": "form",
1364
+ "name": "max",
1246
1365
  "type": {
1247
- "text": "string"
1366
+ "text": "number"
1248
1367
  },
1249
- "default": "\"\"",
1250
- "description": "Associated form ID for custom submit handling.",
1251
- "fieldName": "form"
1368
+ "default": "99",
1369
+ "description": "Maximum numeric count before rendering overflow label.",
1370
+ "fieldName": "max"
1252
1371
  },
1253
1372
  {
1254
- "name": "size",
1373
+ "name": "hideWhenZero",
1255
1374
  "type": {
1256
- "text": "string"
1375
+ "text": "boolean"
1257
1376
  },
1258
- "default": "\"md\"",
1259
- "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1260
- "fieldName": "size"
1377
+ "default": "false",
1378
+ "description": "Hides badge when value resolves to numeric zero.",
1379
+ "fieldName": "hideWhenZero"
1261
1380
  },
1262
1381
  {
1263
- "name": "radius",
1382
+ "name": "show",
1383
+ "type": {
1384
+ "text": "boolean"
1385
+ },
1386
+ "default": "true",
1387
+ "description": "Forces badge visibility independent of value.",
1388
+ "fieldName": "show"
1389
+ },
1390
+ {
1391
+ "name": "offsetX",
1264
1392
  "type": {
1265
1393
  "text": "string"
1266
1394
  },
1267
- "default": "\"md\"",
1268
- "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
1269
- "fieldName": "radius"
1395
+ "default": "\"0px\"",
1396
+ "description": "Horizontal offset CSS length.",
1397
+ "fieldName": "offsetX"
1270
1398
  },
1271
1399
  {
1272
- "name": "label",
1400
+ "name": "offsetY",
1273
1401
  "type": {
1274
1402
  "text": "string"
1275
1403
  },
1276
- "default": "\"Button\"",
1277
- "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
1278
- "fieldName": "label"
1404
+ "default": "\"0px\"",
1405
+ "description": "Vertical offset CSS length.",
1406
+ "fieldName": "offsetY"
1279
1407
  },
1280
1408
  {
1281
- "name": "disabled",
1409
+ "name": "ring",
1282
1410
  "type": {
1283
1411
  "text": "boolean"
1284
1412
  },
1285
1413
  "default": "false",
1286
- "description": "Whether the button is disabled. Default: `false`.",
1287
- "fieldName": "disabled"
1414
+ "description": "Enables visual ring around the badge.",
1415
+ "fieldName": "ring"
1288
1416
  },
1289
1417
  {
1290
- "name": "loading",
1418
+ "name": "ringColor",
1291
1419
  "type": {
1292
- "text": "boolean"
1420
+ "text": "string"
1293
1421
  },
1294
- "default": "false",
1295
- "description": "Shows a loading overlay when true. Default: `false`.",
1296
- "fieldName": "loading"
1422
+ "default": "\"primary\"",
1423
+ "description": "Ring color token or CSS color.",
1424
+ "fieldName": "ringColor"
1297
1425
  },
1298
1426
  {
1299
- "name": "iconL",
1427
+ "name": "ringOffset",
1300
1428
  "type": {
1301
1429
  "text": "string"
1302
1430
  },
1303
- "default": "\"\"",
1304
- "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
1305
- "fieldName": "iconL"
1431
+ "default": "\"1px\"",
1432
+ "description": "Ring offset CSS length.",
1433
+ "fieldName": "ringOffset"
1306
1434
  },
1307
1435
  {
1308
- "name": "iconR",
1436
+ "name": "badgeLabel",
1309
1437
  "type": {
1310
- "text": "string"
1438
+ "text": "string | null"
1311
1439
  },
1312
- "default": "\"\"",
1313
- "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
1314
- "fieldName": "iconR"
1440
+ "default": "null",
1441
+ "description": "ARIA label override.",
1442
+ "fieldName": "badgeLabel"
1315
1443
  },
1316
1444
  {
1317
- "name": "iconOnly",
1445
+ "name": "badgeAriaHidden",
1318
1446
  "type": {
1319
1447
  "text": "boolean"
1320
1448
  },
1321
1449
  "default": "false",
1322
- "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
1323
- "fieldName": "iconOnly"
1450
+ "description": "Hides badge from assistive technology when true.",
1451
+ "fieldName": "badgeAriaHidden"
1324
1452
  },
1325
1453
  {
1326
- "name": "colors",
1454
+ "name": "interactive",
1327
1455
  "type": {
1328
- "text": "string"
1456
+ "text": "boolean"
1329
1457
  },
1330
- "default": "\"\"",
1331
- "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
1332
- "fieldName": "colors"
1458
+ "default": "false",
1459
+ "description": "Enables focus/activation and `badge-click` emission.",
1460
+ "fieldName": "interactive"
1333
1461
  },
1334
1462
  {
1335
- "name": "animation",
1463
+ "name": "placement",
1336
1464
  "type": {
1337
- "text": "SkyButtonAnimation"
1465
+ "text": "SkyBadgePlacement"
1338
1466
  },
1339
- "default": "\"auto\"",
1340
- "description": "Transform animation style. Default: `\"auto\"`.",
1341
- "fieldName": "animation"
1467
+ "default": "\"custom\"",
1468
+ "description": "Anchor placement preset for badge positioning.",
1469
+ "fieldName": "placement"
1342
1470
  },
1343
1471
  {
1344
1472
  "name": "preset",
@@ -1354,60 +1482,60 @@
1354
1482
  "name": "LitElement",
1355
1483
  "package": "lit"
1356
1484
  },
1357
- "tagName": "sky-button",
1485
+ "tagName": "sky-badge",
1358
1486
  "customElement": true,
1359
- "summary": "Styled button supporting variants, icons, loading state, ripple feedback, and form-associated behavior."
1487
+ "summary": "Badge for status dots, counts, or icons anchored to slotted content."
1360
1488
  }
1361
1489
  ],
1362
1490
  "exports": [
1363
1491
  {
1364
1492
  "kind": "js",
1365
- "name": "SkyButton",
1493
+ "name": "SkyBadge",
1366
1494
  "declaration": {
1367
- "name": "SkyButton",
1368
- "module": "src/sky-button/sky-button.ts"
1495
+ "name": "SkyBadge",
1496
+ "module": "src/sky-badge/sky-badge.ts"
1369
1497
  }
1370
1498
  },
1371
1499
  {
1372
1500
  "kind": "custom-element-definition",
1373
- "name": "sky-button",
1501
+ "name": "sky-badge",
1374
1502
  "declaration": {
1375
- "name": "SkyButton",
1376
- "module": "src/sky-button/sky-button.ts"
1503
+ "name": "SkyBadge",
1504
+ "module": "src/sky-badge/sky-badge.ts"
1377
1505
  }
1378
1506
  }
1379
1507
  ]
1380
1508
  },
1381
1509
  {
1382
1510
  "kind": "javascript-module",
1383
- "path": "src/sky-badge/sky-badge.ts",
1511
+ "path": "src/sky-button/sky-button.ts",
1384
1512
  "declarations": [
1385
1513
  {
1386
1514
  "kind": "class",
1387
1515
  "description": "",
1388
- "name": "SkyBadge",
1516
+ "name": "SkyButton",
1389
1517
  "cssParts": [
1390
1518
  {
1391
- "description": "Wrapper around the slotted content and the badge.",
1392
- "name": "container"
1519
+ "description": "The native `<button>` element.",
1520
+ "name": "button"
1393
1521
  },
1394
1522
  {
1395
- "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
1396
- "name": "badge"
1523
+ "description": "The optional left/right icons.",
1524
+ "name": "icon"
1397
1525
  },
1398
1526
  {
1399
- "description": "The icon element when `isIcon` is true.",
1400
- "name": "icon"
1527
+ "description": "Overlay displayed when loading.",
1528
+ "name": "loading-overlay"
1529
+ },
1530
+ {
1531
+ "description": "Spinner displayed when loading.",
1532
+ "name": "spinner"
1401
1533
  }
1402
1534
  ],
1403
1535
  "slots": [
1404
1536
  {
1405
- "description": "The content the badge attaches to.",
1537
+ "description": "Default slot for the button label (replaces `label` property if used).",
1406
1538
  "name": ""
1407
- },
1408
- {
1409
- "description": "Optional slot to override the badge content entirely.",
1410
- "name": "badge"
1411
1539
  }
1412
1540
  ],
1413
1541
  "members": [
@@ -1422,211 +1550,164 @@
1422
1550
  },
1423
1551
  {
1424
1552
  "kind": "field",
1425
- "name": "statusColor",
1426
- "type": {
1427
- "text": "string"
1428
- },
1429
- "default": "\"success\"",
1430
- "description": "Badge background token or CSS color.",
1431
- "attribute": "statusColor",
1432
- "reflects": true
1433
- },
1434
- {
1435
- "kind": "field",
1436
- "name": "textColor",
1553
+ "name": "formAssociated",
1437
1554
  "type": {
1438
- "text": "string"
1555
+ "text": "boolean"
1439
1556
  },
1440
- "default": "\"default\"",
1441
- "description": "Text color token or CSS color.",
1442
- "attribute": "textColor",
1443
- "reflects": true
1557
+ "static": true,
1558
+ "default": "true"
1444
1559
  },
1445
1560
  {
1446
1561
  "kind": "field",
1447
- "name": "iconColor",
1562
+ "name": "internals",
1448
1563
  "type": {
1449
- "text": "string"
1564
+ "text": "ElementInternals"
1450
1565
  },
1451
- "default": "\"\"",
1452
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1453
- "attribute": "iconColor",
1454
- "reflects": true
1566
+ "privacy": "private"
1455
1567
  },
1456
1568
  {
1457
1569
  "kind": "field",
1458
- "name": "position",
1570
+ "name": "variant",
1459
1571
  "type": {
1460
- "text": "SkyBadgePosition"
1572
+ "text": "SkyButtonVariant"
1461
1573
  },
1462
- "default": "\"default\"",
1463
- "description": "Layout mode: `default | floating | inline`.",
1464
- "attribute": "position",
1574
+ "default": "\"solid\"",
1575
+ "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
1576
+ "attribute": "variant",
1465
1577
  "reflects": true
1466
1578
  },
1467
1579
  {
1468
1580
  "kind": "field",
1469
- "name": "value",
1581
+ "name": "color",
1470
1582
  "type": {
1471
1583
  "text": "string"
1472
1584
  },
1473
- "default": "\"\"",
1474
- "description": "Badge text/count or icon name in icon mode.",
1475
- "attribute": "value"
1585
+ "default": "\"primary\"",
1586
+ "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1587
+ "attribute": "color"
1476
1588
  },
1477
1589
  {
1478
1590
  "kind": "field",
1479
- "name": "isIcon",
1591
+ "name": "type",
1480
1592
  "type": {
1481
- "text": "boolean"
1593
+ "text": "SkyButtonType"
1482
1594
  },
1483
- "default": "false",
1484
- "description": "Renders icon mode when true.",
1485
- "attribute": "isIcon",
1486
- "reflects": true
1595
+ "default": "\"button\"",
1596
+ "description": "Button type attribute. Default: `\"button\"`.",
1597
+ "attribute": "type"
1487
1598
  },
1488
1599
  {
1489
1600
  "kind": "field",
1490
- "name": "size",
1601
+ "name": "form",
1491
1602
  "type": {
1492
1603
  "text": "string"
1493
1604
  },
1494
1605
  "default": "\"\"",
1495
- "description": "Badge and icon size CSS length.",
1496
- "attribute": "size",
1497
- "reflects": true
1606
+ "description": "Associated form ID for custom submit handling.",
1607
+ "attribute": "form"
1498
1608
  },
1499
1609
  {
1500
1610
  "kind": "field",
1501
- "name": "shape",
1611
+ "name": "size",
1502
1612
  "type": {
1503
- "text": "SkyBadgeShape"
1613
+ "text": "string"
1504
1614
  },
1505
- "default": "\"custom\"",
1506
- "description": "Badge shape: `circle | pill | custom`.",
1507
- "attribute": "shape",
1508
- "reflects": true
1615
+ "default": "\"md\"",
1616
+ "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1617
+ "attribute": "size"
1509
1618
  },
1510
1619
  {
1511
1620
  "kind": "field",
1512
- "name": "max",
1621
+ "name": "radius",
1513
1622
  "type": {
1514
- "text": "number"
1623
+ "text": "string"
1515
1624
  },
1516
- "default": "99",
1517
- "description": "Maximum numeric count before rendering overflow label.",
1518
- "attribute": "max"
1625
+ "default": "\"md\"",
1626
+ "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
1627
+ "attribute": "radius"
1519
1628
  },
1520
1629
  {
1521
1630
  "kind": "field",
1522
- "name": "hideWhenZero",
1631
+ "name": "label",
1523
1632
  "type": {
1524
- "text": "boolean"
1633
+ "text": "string"
1525
1634
  },
1526
- "default": "false",
1527
- "description": "Hides badge when value resolves to numeric zero.",
1528
- "attribute": "hideWhenZero"
1635
+ "default": "\"Button\"",
1636
+ "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
1637
+ "attribute": "label"
1529
1638
  },
1530
1639
  {
1531
1640
  "kind": "field",
1532
- "name": "show",
1641
+ "name": "disabled",
1533
1642
  "type": {
1534
1643
  "text": "boolean"
1535
1644
  },
1536
- "default": "true",
1537
- "description": "Forces badge visibility independent of value.",
1538
- "attribute": "show",
1645
+ "default": "false",
1646
+ "description": "Whether the button is disabled. Default: `false`.",
1647
+ "attribute": "disabled",
1539
1648
  "reflects": true
1540
1649
  },
1541
1650
  {
1542
1651
  "kind": "field",
1543
- "name": "offsetX",
1544
- "type": {
1545
- "text": "string"
1546
- },
1547
- "default": "\"0px\"",
1548
- "description": "Horizontal offset CSS length.",
1549
- "attribute": "offsetX"
1550
- },
1551
- {
1552
- "kind": "field",
1553
- "name": "offsetY",
1554
- "type": {
1555
- "text": "string"
1556
- },
1557
- "default": "\"0px\"",
1558
- "description": "Vertical offset CSS length.",
1559
- "attribute": "offsetY"
1560
- },
1561
- {
1562
- "kind": "field",
1563
- "name": "ring",
1652
+ "name": "loading",
1564
1653
  "type": {
1565
1654
  "text": "boolean"
1566
1655
  },
1567
1656
  "default": "false",
1568
- "description": "Enables visual ring around the badge.",
1569
- "attribute": "ring"
1657
+ "description": "Shows a loading overlay when true. Default: `false`.",
1658
+ "attribute": "loading",
1659
+ "reflects": true
1570
1660
  },
1571
1661
  {
1572
1662
  "kind": "field",
1573
- "name": "ringColor",
1663
+ "name": "iconL",
1574
1664
  "type": {
1575
1665
  "text": "string"
1576
1666
  },
1577
- "default": "\"primary\"",
1578
- "description": "Ring color token or CSS color.",
1579
- "attribute": "ringColor"
1667
+ "default": "\"\"",
1668
+ "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
1669
+ "attribute": "iconL"
1580
1670
  },
1581
1671
  {
1582
1672
  "kind": "field",
1583
- "name": "ringOffset",
1673
+ "name": "iconR",
1584
1674
  "type": {
1585
1675
  "text": "string"
1586
1676
  },
1587
- "default": "\"1px\"",
1588
- "description": "Ring offset CSS length.",
1589
- "attribute": "ringOffset"
1590
- },
1591
- {
1592
- "kind": "field",
1593
- "name": "badgeLabel",
1594
- "type": {
1595
- "text": "string | null"
1596
- },
1597
- "default": "null",
1598
- "description": "ARIA label override.",
1599
- "attribute": "badgeLabel"
1677
+ "default": "\"\"",
1678
+ "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
1679
+ "attribute": "iconR"
1600
1680
  },
1601
1681
  {
1602
1682
  "kind": "field",
1603
- "name": "badgeAriaHidden",
1683
+ "name": "iconOnly",
1604
1684
  "type": {
1605
1685
  "text": "boolean"
1606
1686
  },
1607
1687
  "default": "false",
1608
- "description": "Hides badge from assistive technology when true.",
1609
- "attribute": "badgeAriaHidden"
1688
+ "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
1689
+ "attribute": "iconOnly",
1690
+ "reflects": true
1610
1691
  },
1611
1692
  {
1612
1693
  "kind": "field",
1613
- "name": "interactive",
1694
+ "name": "colors",
1614
1695
  "type": {
1615
- "text": "boolean"
1696
+ "text": "string"
1616
1697
  },
1617
- "default": "false",
1618
- "description": "Enables focus/activation and `badge-click` emission.",
1619
- "attribute": "interactive"
1698
+ "default": "\"\"",
1699
+ "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
1700
+ "attribute": "colors"
1620
1701
  },
1621
1702
  {
1622
1703
  "kind": "field",
1623
- "name": "placement",
1704
+ "name": "animation",
1624
1705
  "type": {
1625
- "text": "SkyBadgePlacement"
1706
+ "text": "SkyButtonAnimation"
1626
1707
  },
1627
- "default": "\"custom\"",
1628
- "description": "Anchor placement preset for badge positioning.",
1629
- "attribute": "placement",
1708
+ "default": "\"auto\"",
1709
+ "description": "Transform animation style. Default: `\"auto\"`.",
1710
+ "attribute": "animation",
1630
1711
  "reflects": true
1631
1712
  },
1632
1713
  {
@@ -1642,326 +1723,384 @@
1642
1723
  },
1643
1724
  {
1644
1725
  "kind": "field",
1645
- "name": "_presets",
1726
+ "name": "_hasMeaningfulSlot",
1727
+ "type": {
1728
+ "text": "boolean"
1729
+ },
1646
1730
  "privacy": "private",
1647
- "default": "new PresetController(this)"
1731
+ "default": "false"
1648
1732
  },
1649
1733
  {
1650
1734
  "kind": "field",
1651
- "name": "_badgeEl",
1735
+ "name": "_styleVars",
1652
1736
  "type": {
1653
- "text": "HTMLSpanElement"
1737
+ "text": "Record<string, string>"
1654
1738
  },
1655
- "privacy": "private"
1739
+ "privacy": "private",
1740
+ "default": "{}",
1741
+ "description": "Inline CSS variable cache."
1656
1742
  },
1657
1743
  {
1658
1744
  "kind": "field",
1659
- "name": "badgeRef",
1660
- "privacy": "public",
1661
- "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
1745
+ "name": "_presets",
1746
+ "privacy": "private",
1747
+ "default": "new PresetController(this, { isPaused: () => this.inGroup, onChange: () => { this._styleDirty = true; }, })"
1662
1748
  },
1663
1749
  {
1664
1750
  "kind": "field",
1665
- "name": "shadowRootOptions",
1751
+ "name": "_lastPresetRevision",
1666
1752
  "type": {
1667
- "text": "ShadowRootInit"
1753
+ "text": "number"
1668
1754
  },
1669
- "static": true,
1670
- "default": "{ mode: \"open\", delegatesFocus: true, }"
1755
+ "privacy": "private",
1756
+ "default": "-1"
1757
+ },
1758
+ {
1759
+ "kind": "field",
1760
+ "name": "_styleDirty",
1761
+ "type": {
1762
+ "text": "boolean"
1763
+ },
1764
+ "privacy": "private",
1765
+ "default": "true",
1766
+ "description": "Set when presets change so `update()` rebuilds CSS vars after hostUpdate."
1671
1767
  },
1672
1768
  {
1673
1769
  "kind": "method",
1674
- "name": "showBadge",
1675
- "privacy": "public",
1770
+ "name": "_slotHasMeaningfulContent",
1771
+ "privacy": "private",
1676
1772
  "return": {
1677
1773
  "type": {
1678
- "text": "void"
1774
+ "text": "boolean"
1679
1775
  }
1680
1776
  },
1681
- "description": "Forces badge visibility on."
1777
+ "parameters": [
1778
+ {
1779
+ "name": "slotEl",
1780
+ "type": {
1781
+ "text": "HTMLSlotElement"
1782
+ }
1783
+ }
1784
+ ]
1785
+ },
1786
+ {
1787
+ "kind": "field",
1788
+ "name": "_onSlotChange",
1789
+ "privacy": "private"
1682
1790
  },
1683
1791
  {
1684
1792
  "kind": "method",
1685
- "name": "hideBadge",
1686
- "privacy": "public",
1793
+ "name": "_toSquarePadding",
1794
+ "privacy": "private",
1687
1795
  "return": {
1688
1796
  "type": {
1689
- "text": "void"
1797
+ "text": "string"
1690
1798
  }
1691
1799
  },
1692
- "description": "Forces badge visibility off."
1800
+ "parameters": [
1801
+ {
1802
+ "name": "padding",
1803
+ "type": {
1804
+ "text": "string"
1805
+ }
1806
+ }
1807
+ ],
1808
+ "description": "Uses vertical padding for equal sides (icon-only square control)."
1693
1809
  },
1694
1810
  {
1695
1811
  "kind": "method",
1696
- "name": "setValue",
1697
- "privacy": "public",
1812
+ "name": "_resolveSize",
1813
+ "privacy": "private",
1698
1814
  "return": {
1699
1815
  "type": {
1700
- "text": "void"
1816
+ "text": "{\r\n padding: string;\r\n fontSize: string;\r\n gap: string;\r\n icon: string;\r\n spinner: string;\r\n }"
1701
1817
  }
1702
1818
  },
1703
1819
  "parameters": [
1704
1820
  {
1705
- "name": "value",
1821
+ "name": "input",
1706
1822
  "type": {
1707
1823
  "text": "string"
1708
- },
1709
- "description": "Badge value or icon name."
1824
+ }
1710
1825
  }
1711
- ],
1712
- "description": "Updates badge value for text/count or icon modes."
1826
+ ]
1713
1827
  },
1714
1828
  {
1715
- "kind": "field",
1716
- "name": "_onActivate",
1829
+ "kind": "method",
1830
+ "name": "_isThemeBorderShorthand",
1717
1831
  "privacy": "private",
1718
- "description": "Emits `badge-click` for interactive activation."
1832
+ "return": {
1833
+ "type": {
1834
+ "text": "boolean"
1835
+ }
1836
+ },
1837
+ "parameters": [
1838
+ {
1839
+ "name": "border",
1840
+ "type": {
1841
+ "text": "string | undefined"
1842
+ }
1843
+ }
1844
+ ],
1845
+ "description": "Theme tokens like `var(--sky-border-primary)` are full border shorthands, not colors."
1719
1846
  },
1720
1847
  {
1721
- "kind": "field",
1722
- "name": "_onKeydown",
1848
+ "kind": "method",
1849
+ "name": "_borderColorFromShorthand",
1723
1850
  "privacy": "private",
1724
- "description": "Handles keyboard activation with Enter and Space."
1851
+ "return": {
1852
+ "type": {
1853
+ "text": "string"
1854
+ }
1855
+ },
1856
+ "parameters": [
1857
+ {
1858
+ "name": "border",
1859
+ "type": {
1860
+ "text": "string | undefined"
1861
+ }
1862
+ }
1863
+ ],
1864
+ "description": "Extracts the color token from a `Npx solid …` border shorthand."
1725
1865
  },
1726
1866
  {
1727
1867
  "kind": "method",
1728
- "name": "_computeAriaLabel",
1868
+ "name": "_rebuildStyleVars",
1729
1869
  "privacy": "private",
1730
1870
  "return": {
1731
1871
  "type": {
1732
- "text": "string | null"
1872
+ "text": "void"
1733
1873
  }
1734
1874
  },
1735
1875
  "parameters": [
1736
1876
  {
1737
- "name": "displayValue",
1877
+ "name": "changedProperties",
1738
1878
  "type": {
1739
- "text": "string | null"
1879
+ "text": "Map<string, unknown>"
1740
1880
  }
1741
1881
  }
1742
- ],
1743
- "description": "Computes accessible badge label from current render state."
1882
+ ]
1744
1883
  },
1745
1884
  {
1746
1885
  "kind": "method",
1747
- "name": "_computeAnchors",
1886
+ "name": "focusButton",
1887
+ "privacy": "public",
1888
+ "return": {
1889
+ "type": {
1890
+ "text": "void"
1891
+ }
1892
+ },
1893
+ "description": "Focuses the internal native button."
1894
+ },
1895
+ {
1896
+ "kind": "method",
1897
+ "name": "clickButton",
1898
+ "privacy": "public",
1899
+ "return": {
1900
+ "type": {
1901
+ "text": "void"
1902
+ }
1903
+ },
1904
+ "description": "Triggers a click on the internal native button when enabled."
1905
+ },
1906
+ {
1907
+ "kind": "method",
1908
+ "name": "_createRipple",
1748
1909
  "privacy": "private",
1749
1910
  "return": {
1750
1911
  "type": {
1751
- "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
1912
+ "text": "void"
1752
1913
  }
1753
1914
  },
1754
1915
  "parameters": [
1755
1916
  {
1756
- "name": "placement",
1917
+ "name": "event",
1757
1918
  "type": {
1758
- "text": "SkyBadgePlacement"
1919
+ "text": "MouseEvent"
1759
1920
  }
1760
1921
  }
1761
- ],
1762
- "description": "Resolves anchor edges from placement preset."
1922
+ ]
1763
1923
  },
1764
1924
  {
1765
1925
  "kind": "method",
1766
- "name": "_resolveBadgeSurface",
1767
- "privacy": "private",
1926
+ "name": "formDisabledCallback",
1768
1927
  "return": {
1769
1928
  "type": {
1770
- "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
1929
+ "text": "void"
1771
1930
  }
1772
1931
  },
1773
- "description": "Maps semantic status tokens to soft badge surface colors."
1774
- }
1775
- ],
1776
- "events": [
1932
+ "parameters": [
1933
+ {
1934
+ "name": "disabled",
1935
+ "type": {
1936
+ "text": "boolean"
1937
+ }
1938
+ }
1939
+ ]
1940
+ },
1777
1941
  {
1942
+ "kind": "field",
1943
+ "name": "formOwner",
1778
1944
  "type": {
1779
- "text": "CustomEvent<SkyBadgeClickEventDetail>"
1945
+ "text": "HTMLFormElement | null"
1780
1946
  },
1781
- "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
1782
- "name": "badge-click"
1783
- }
1784
- ],
1785
- "attributes": [
1947
+ "readonly": true
1948
+ },
1786
1949
  {
1787
- "name": "statusColor",
1788
- "type": {
1789
- "text": "string"
1950
+ "kind": "method",
1951
+ "name": "_handleClick",
1952
+ "privacy": "private",
1953
+ "return": {
1954
+ "type": {
1955
+ "text": "void"
1956
+ }
1790
1957
  },
1791
- "default": "\"success\"",
1792
- "description": "Badge background token or CSS color.",
1793
- "fieldName": "statusColor"
1958
+ "parameters": [
1959
+ {
1960
+ "name": "event",
1961
+ "type": {
1962
+ "text": "MouseEvent"
1963
+ }
1964
+ }
1965
+ ]
1794
1966
  },
1795
1967
  {
1796
- "name": "textColor",
1968
+ "kind": "method",
1969
+ "name": "_iconOnlyName",
1970
+ "privacy": "private",
1971
+ "return": {
1972
+ "type": {
1973
+ "text": "string"
1974
+ }
1975
+ }
1976
+ }
1977
+ ],
1978
+ "attributes": [
1979
+ {
1980
+ "name": "variant",
1797
1981
  "type": {
1798
- "text": "string"
1799
- },
1800
- "default": "\"default\"",
1801
- "description": "Text color token or CSS color.",
1802
- "fieldName": "textColor"
1982
+ "text": "SkyButtonVariant"
1983
+ },
1984
+ "default": "\"solid\"",
1985
+ "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
1986
+ "fieldName": "variant"
1803
1987
  },
1804
1988
  {
1805
- "name": "iconColor",
1989
+ "name": "color",
1806
1990
  "type": {
1807
1991
  "text": "string"
1808
1992
  },
1809
- "default": "\"\"",
1810
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1811
- "fieldName": "iconColor"
1993
+ "default": "\"primary\"",
1994
+ "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1995
+ "fieldName": "color"
1812
1996
  },
1813
1997
  {
1814
- "name": "position",
1998
+ "name": "type",
1815
1999
  "type": {
1816
- "text": "SkyBadgePosition"
2000
+ "text": "SkyButtonType"
1817
2001
  },
1818
- "default": "\"default\"",
1819
- "description": "Layout mode: `default | floating | inline`.",
1820
- "fieldName": "position"
2002
+ "default": "\"button\"",
2003
+ "description": "Button type attribute. Default: `\"button\"`.",
2004
+ "fieldName": "type"
1821
2005
  },
1822
2006
  {
1823
- "name": "value",
2007
+ "name": "form",
1824
2008
  "type": {
1825
2009
  "text": "string"
1826
2010
  },
1827
2011
  "default": "\"\"",
1828
- "description": "Badge text/count or icon name in icon mode.",
1829
- "fieldName": "value"
1830
- },
1831
- {
1832
- "name": "isIcon",
1833
- "type": {
1834
- "text": "boolean"
1835
- },
1836
- "default": "false",
1837
- "description": "Renders icon mode when true.",
1838
- "fieldName": "isIcon"
2012
+ "description": "Associated form ID for custom submit handling.",
2013
+ "fieldName": "form"
1839
2014
  },
1840
2015
  {
1841
2016
  "name": "size",
1842
2017
  "type": {
1843
2018
  "text": "string"
1844
2019
  },
1845
- "default": "\"\"",
1846
- "description": "Badge and icon size CSS length.",
2020
+ "default": "\"md\"",
2021
+ "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1847
2022
  "fieldName": "size"
1848
2023
  },
1849
2024
  {
1850
- "name": "shape",
2025
+ "name": "radius",
1851
2026
  "type": {
1852
- "text": "SkyBadgeShape"
2027
+ "text": "string"
1853
2028
  },
1854
- "default": "\"custom\"",
1855
- "description": "Badge shape: `circle | pill | custom`.",
1856
- "fieldName": "shape"
2029
+ "default": "\"md\"",
2030
+ "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
2031
+ "fieldName": "radius"
1857
2032
  },
1858
2033
  {
1859
- "name": "max",
2034
+ "name": "label",
1860
2035
  "type": {
1861
- "text": "number"
2036
+ "text": "string"
1862
2037
  },
1863
- "default": "99",
1864
- "description": "Maximum numeric count before rendering overflow label.",
1865
- "fieldName": "max"
2038
+ "default": "\"Button\"",
2039
+ "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
2040
+ "fieldName": "label"
1866
2041
  },
1867
2042
  {
1868
- "name": "hideWhenZero",
2043
+ "name": "disabled",
1869
2044
  "type": {
1870
2045
  "text": "boolean"
1871
2046
  },
1872
2047
  "default": "false",
1873
- "description": "Hides badge when value resolves to numeric zero.",
1874
- "fieldName": "hideWhenZero"
1875
- },
1876
- {
1877
- "name": "show",
1878
- "type": {
1879
- "text": "boolean"
1880
- },
1881
- "default": "true",
1882
- "description": "Forces badge visibility independent of value.",
1883
- "fieldName": "show"
1884
- },
1885
- {
1886
- "name": "offsetX",
1887
- "type": {
1888
- "text": "string"
1889
- },
1890
- "default": "\"0px\"",
1891
- "description": "Horizontal offset CSS length.",
1892
- "fieldName": "offsetX"
1893
- },
1894
- {
1895
- "name": "offsetY",
1896
- "type": {
1897
- "text": "string"
1898
- },
1899
- "default": "\"0px\"",
1900
- "description": "Vertical offset CSS length.",
1901
- "fieldName": "offsetY"
2048
+ "description": "Whether the button is disabled. Default: `false`.",
2049
+ "fieldName": "disabled"
1902
2050
  },
1903
2051
  {
1904
- "name": "ring",
2052
+ "name": "loading",
1905
2053
  "type": {
1906
2054
  "text": "boolean"
1907
2055
  },
1908
2056
  "default": "false",
1909
- "description": "Enables visual ring around the badge.",
1910
- "fieldName": "ring"
2057
+ "description": "Shows a loading overlay when true. Default: `false`.",
2058
+ "fieldName": "loading"
1911
2059
  },
1912
2060
  {
1913
- "name": "ringColor",
2061
+ "name": "iconL",
1914
2062
  "type": {
1915
2063
  "text": "string"
1916
2064
  },
1917
- "default": "\"primary\"",
1918
- "description": "Ring color token or CSS color.",
1919
- "fieldName": "ringColor"
2065
+ "default": "\"\"",
2066
+ "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
2067
+ "fieldName": "iconL"
1920
2068
  },
1921
2069
  {
1922
- "name": "ringOffset",
2070
+ "name": "iconR",
1923
2071
  "type": {
1924
2072
  "text": "string"
1925
2073
  },
1926
- "default": "\"1px\"",
1927
- "description": "Ring offset CSS length.",
1928
- "fieldName": "ringOffset"
1929
- },
1930
- {
1931
- "name": "badgeLabel",
1932
- "type": {
1933
- "text": "string | null"
1934
- },
1935
- "default": "null",
1936
- "description": "ARIA label override.",
1937
- "fieldName": "badgeLabel"
2074
+ "default": "\"\"",
2075
+ "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
2076
+ "fieldName": "iconR"
1938
2077
  },
1939
2078
  {
1940
- "name": "badgeAriaHidden",
2079
+ "name": "iconOnly",
1941
2080
  "type": {
1942
2081
  "text": "boolean"
1943
2082
  },
1944
2083
  "default": "false",
1945
- "description": "Hides badge from assistive technology when true.",
1946
- "fieldName": "badgeAriaHidden"
2084
+ "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
2085
+ "fieldName": "iconOnly"
1947
2086
  },
1948
2087
  {
1949
- "name": "interactive",
2088
+ "name": "colors",
1950
2089
  "type": {
1951
- "text": "boolean"
2090
+ "text": "string"
1952
2091
  },
1953
- "default": "false",
1954
- "description": "Enables focus/activation and `badge-click` emission.",
1955
- "fieldName": "interactive"
2092
+ "default": "\"\"",
2093
+ "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
2094
+ "fieldName": "colors"
1956
2095
  },
1957
2096
  {
1958
- "name": "placement",
2097
+ "name": "animation",
1959
2098
  "type": {
1960
- "text": "SkyBadgePlacement"
2099
+ "text": "SkyButtonAnimation"
1961
2100
  },
1962
- "default": "\"custom\"",
1963
- "description": "Anchor placement preset for badge positioning.",
1964
- "fieldName": "placement"
2101
+ "default": "\"auto\"",
2102
+ "description": "Transform animation style. Default: `\"auto\"`.",
2103
+ "fieldName": "animation"
1965
2104
  },
1966
2105
  {
1967
2106
  "name": "preset",
@@ -1977,192 +2116,145 @@
1977
2116
  "name": "LitElement",
1978
2117
  "package": "lit"
1979
2118
  },
1980
- "tagName": "sky-badge",
2119
+ "tagName": "sky-button",
1981
2120
  "customElement": true,
1982
- "summary": "Badge for status dots, counts, or icons anchored to slotted content."
2121
+ "summary": "Styled button supporting variants, icons, loading state, ripple feedback, and form-associated behavior."
1983
2122
  }
1984
2123
  ],
1985
2124
  "exports": [
1986
2125
  {
1987
2126
  "kind": "js",
1988
- "name": "SkyBadge",
2127
+ "name": "SkyButton",
1989
2128
  "declaration": {
1990
- "name": "SkyBadge",
1991
- "module": "src/sky-badge/sky-badge.ts"
2129
+ "name": "SkyButton",
2130
+ "module": "src/sky-button/sky-button.ts"
1992
2131
  }
1993
2132
  },
1994
2133
  {
1995
2134
  "kind": "custom-element-definition",
1996
- "name": "sky-badge",
2135
+ "name": "sky-button",
1997
2136
  "declaration": {
1998
- "name": "SkyBadge",
1999
- "module": "src/sky-badge/sky-badge.ts"
2137
+ "name": "SkyButton",
2138
+ "module": "src/sky-button/sky-button.ts"
2000
2139
  }
2001
2140
  }
2002
2141
  ]
2003
2142
  },
2004
2143
  {
2005
2144
  "kind": "javascript-module",
2006
- "path": "src/sky-avatar/sky-avatar.ts",
2145
+ "path": "src/sky-appbar/sky-appbar.ts",
2007
2146
  "declarations": [
2008
2147
  {
2009
2148
  "kind": "class",
2010
2149
  "description": "",
2011
- "name": "SkyAvatar",
2150
+ "name": "SkyAppbar",
2012
2151
  "cssParts": [
2013
2152
  {
2014
- "description": "The avatar container element.",
2015
- "name": "avatar"
2153
+ "description": "Wrapper that contains the leading slot, title, and actions.",
2154
+ "name": "content"
2016
2155
  },
2017
2156
  {
2018
- "description": "The loading overlay container (shown when `loading` is true).",
2019
- "name": "loading-overlay"
2157
+ "description": "Container for the leading slot (e.g. menu button).",
2158
+ "name": "leading"
2020
2159
  },
2021
2160
  {
2022
- "description": "The spinner element shown when loading.",
2023
- "name": "spinner"
2161
+ "description": "The title area (contains .title-text with the title string).",
2162
+ "name": "title"
2163
+ },
2164
+ {
2165
+ "description": "The trailing actions container.",
2166
+ "name": "actions"
2024
2167
  }
2025
2168
  ],
2026
2169
  "slots": [
2027
2170
  {
2028
- "description": "Fallback content (e.g., initials or an icon) rendered when `image` is empty.",
2171
+ "description": "Leading area (e.g., menu/back button). Defaults to a hamburger icon.",
2172
+ "name": "button"
2173
+ },
2174
+ {
2175
+ "description": "Trailing actions (icons/buttons). This is the default slot.",
2029
2176
  "name": ""
2030
2177
  }
2031
2178
  ],
2032
2179
  "members": [
2033
2180
  {
2034
2181
  "kind": "field",
2035
- "name": "size",
2036
- "type": {
2037
- "text": "string"
2038
- },
2039
- "default": "\"50px\"",
2040
- "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
2041
- "attribute": "size"
2042
- },
2043
- {
2044
- "kind": "field",
2045
- "name": "image",
2046
- "type": {
2047
- "text": "string"
2048
- },
2049
- "default": "\"\"",
2050
- "description": "Image URL; fallback slot is shown on load error.",
2051
- "attribute": "image"
2052
- },
2053
- {
2054
- "kind": "field",
2055
- "name": "fit",
2056
- "type": {
2057
- "text": "SkyAvatarFit"
2058
- },
2059
- "default": "\"cover\"",
2060
- "description": "Image fill mode: `cover` (default) or `contain`.",
2061
- "attribute": "fit",
2062
- "reflects": true
2063
- },
2064
- {
2065
- "kind": "field",
2066
- "name": "radius",
2067
- "type": {
2068
- "text": "string"
2069
- },
2070
- "default": "\"md\"",
2071
- "description": "Border radius token or CSS value.",
2072
- "attribute": "radius"
2073
- },
2074
- {
2075
- "kind": "field",
2076
- "name": "alt",
2077
- "type": {
2078
- "text": "string"
2079
- },
2080
- "default": "\"\"",
2081
- "description": "Accessible name when image content conveys meaning.",
2082
- "attribute": "alt"
2083
- },
2084
- {
2085
- "kind": "field",
2086
- "name": "color",
2182
+ "name": "dependencies",
2087
2183
  "type": {
2088
- "text": "string"
2184
+ "text": "Record<string, CustomElementConstructor>"
2089
2185
  },
2090
- "default": "\"dark\"",
2091
- "description": "Token or CSS color applied to fallback slot content.",
2092
- "attribute": "color"
2186
+ "static": true,
2187
+ "default": "{ \"sky-icon\": SkyIcon, }"
2093
2188
  },
2094
2189
  {
2095
2190
  "kind": "field",
2096
- "name": "outline",
2191
+ "name": "title",
2097
2192
  "type": {
2098
2193
  "text": "string"
2099
2194
  },
2100
- "default": "\"\"",
2101
- "description": "CSS `outline` value.",
2102
- "attribute": "outline"
2195
+ "default": "\"App Bar\"",
2196
+ "description": "Title text displayed in the app bar.",
2197
+ "attribute": "title"
2103
2198
  },
2104
2199
  {
2105
2200
  "kind": "field",
2106
- "name": "outlineOffset",
2201
+ "name": "color",
2107
2202
  "type": {
2108
2203
  "text": "string"
2109
2204
  },
2110
- "default": "\"2px\"",
2111
- "description": "CSS `outline-offset` value.",
2112
- "attribute": "outlineOffset"
2205
+ "default": "\"default\"",
2206
+ "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
2207
+ "attribute": "color"
2113
2208
  },
2114
2209
  {
2115
2210
  "kind": "field",
2116
- "name": "loading",
2211
+ "name": "url",
2117
2212
  "type": {
2118
- "text": "boolean"
2213
+ "text": "string"
2119
2214
  },
2120
- "default": "false",
2121
- "description": "Shows loading overlay when true.",
2122
- "attribute": "loading",
2123
- "reflects": true
2215
+ "default": "\"\"",
2216
+ "description": "Background image URL.",
2217
+ "attribute": "url"
2124
2218
  },
2125
2219
  {
2126
2220
  "kind": "field",
2127
- "name": "disabled",
2221
+ "name": "banner",
2128
2222
  "type": {
2129
2223
  "text": "boolean"
2130
2224
  },
2131
- "default": "false",
2132
- "description": "Dims and disables pointer interactions.",
2133
- "attribute": "disabled",
2134
- "reflects": true
2225
+ "default": "true",
2226
+ "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
2227
+ "attribute": "banner"
2135
2228
  },
2136
2229
  {
2137
2230
  "kind": "field",
2138
- "name": "interactive",
2231
+ "name": "dense",
2139
2232
  "type": {
2140
2233
  "text": "boolean"
2141
2234
  },
2142
2235
  "default": "false",
2143
- "description": "Enables interactive behavior with keyboard/click activation.",
2144
- "attribute": "interactive"
2236
+ "description": "Enables compact vertical spacing.",
2237
+ "attribute": "dense"
2145
2238
  },
2146
2239
  {
2147
2240
  "kind": "field",
2148
- "name": "shadow",
2241
+ "name": "elevated",
2149
2242
  "type": {
2150
2243
  "text": "boolean"
2151
2244
  },
2152
2245
  "default": "false",
2153
- "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
2154
- "attribute": "shadow",
2155
- "reflects": true
2246
+ "description": "Applies elevated shadow styling.",
2247
+ "attribute": "elevated"
2156
2248
  },
2157
2249
  {
2158
2250
  "kind": "field",
2159
- "name": "_imageError",
2251
+ "name": "leadingLabel",
2160
2252
  "type": {
2161
- "text": "boolean"
2253
+ "text": "string"
2162
2254
  },
2163
- "privacy": "private",
2164
- "default": "false",
2165
- "description": "True when image failed to load; show slot instead."
2255
+ "default": "\"Open menu\"",
2256
+ "description": "Accessible label for default leading button fallback.",
2257
+ "attribute": "leadingLabel"
2166
2258
  },
2167
2259
  {
2168
2260
  "kind": "field",
@@ -2181,184 +2273,92 @@
2181
2273
  "privacy": "private",
2182
2274
  "default": "new PresetController(this)"
2183
2275
  },
2184
- {
2185
- "kind": "field",
2186
- "name": "_onImageLoad",
2187
- "privacy": "private",
2188
- "description": "Marks image load success and keeps image rendering active."
2189
- },
2190
- {
2191
- "kind": "field",
2192
- "name": "_onImageError",
2193
- "privacy": "private",
2194
- "description": "Marks image load failure and enables fallback slot rendering."
2195
- },
2196
- {
2197
- "kind": "method",
2198
- "name": "_handleInteractiveClick",
2199
- "privacy": "private",
2200
- "return": {
2201
- "type": {
2202
- "text": "void"
2203
- }
2204
- },
2205
- "parameters": [
2206
- {
2207
- "name": "e",
2208
- "type": {
2209
- "text": "Event"
2210
- }
2211
- }
2212
- ],
2213
- "description": "Re-dispatches click in interactive mode for host-level consumers."
2214
- },
2215
2276
  {
2216
2277
  "kind": "method",
2217
- "name": "_handleInteractiveKeydown",
2278
+ "name": "_applyColorSurface",
2218
2279
  "privacy": "private",
2219
2280
  "return": {
2220
2281
  "type": {
2221
2282
  "text": "void"
2222
2283
  }
2223
2284
  },
2224
- "parameters": [
2225
- {
2226
- "name": "e",
2227
- "type": {
2228
- "text": "KeyboardEvent"
2229
- }
2230
- }
2231
- ],
2232
- "description": "Handles keyboard activation in interactive mode."
2285
+ "description": "Applies glass vs solid surface tokens from `color`."
2233
2286
  },
2234
2287
  {
2235
2288
  "kind": "method",
2236
- "name": "adjustSpinnerSize",
2289
+ "name": "_applyBackgroundImage",
2237
2290
  "privacy": "private",
2238
2291
  "return": {
2239
2292
  "type": {
2240
2293
  "text": "void"
2241
2294
  }
2242
2295
  },
2243
- "description": "Derives spinner dimensions from current avatar size."
2244
- }
2245
- ],
2246
- "events": [
2247
- {
2248
- "name": "click",
2249
- "type": {
2250
- "text": "Event"
2251
- }
2296
+ "description": "Sets background image CSS variable from `url`."
2252
2297
  }
2253
2298
  ],
2254
2299
  "attributes": [
2255
2300
  {
2256
- "name": "size",
2257
- "type": {
2258
- "text": "string"
2259
- },
2260
- "default": "\"50px\"",
2261
- "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
2262
- "fieldName": "size"
2263
- },
2264
- {
2265
- "name": "image",
2266
- "type": {
2267
- "text": "string"
2268
- },
2269
- "default": "\"\"",
2270
- "description": "Image URL; fallback slot is shown on load error.",
2271
- "fieldName": "image"
2272
- },
2273
- {
2274
- "name": "fit",
2275
- "type": {
2276
- "text": "SkyAvatarFit"
2277
- },
2278
- "default": "\"cover\"",
2279
- "description": "Image fill mode: `cover` (default) or `contain`.",
2280
- "fieldName": "fit"
2281
- },
2282
- {
2283
- "name": "radius",
2284
- "type": {
2285
- "text": "string"
2286
- },
2287
- "default": "\"md\"",
2288
- "description": "Border radius token or CSS value.",
2289
- "fieldName": "radius"
2290
- },
2291
- {
2292
- "name": "alt",
2301
+ "name": "title",
2293
2302
  "type": {
2294
2303
  "text": "string"
2295
2304
  },
2296
- "default": "\"\"",
2297
- "description": "Accessible name when image content conveys meaning.",
2298
- "fieldName": "alt"
2305
+ "default": "\"App Bar\"",
2306
+ "description": "Title text displayed in the app bar.",
2307
+ "fieldName": "title"
2299
2308
  },
2300
2309
  {
2301
2310
  "name": "color",
2302
2311
  "type": {
2303
2312
  "text": "string"
2304
2313
  },
2305
- "default": "\"dark\"",
2306
- "description": "Token or CSS color applied to fallback slot content.",
2314
+ "default": "\"default\"",
2315
+ "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
2307
2316
  "fieldName": "color"
2308
2317
  },
2309
2318
  {
2310
- "name": "outline",
2319
+ "name": "url",
2311
2320
  "type": {
2312
2321
  "text": "string"
2313
2322
  },
2314
2323
  "default": "\"\"",
2315
- "description": "CSS `outline` value.",
2316
- "fieldName": "outline"
2317
- },
2318
- {
2319
- "name": "outlineOffset",
2320
- "type": {
2321
- "text": "string"
2322
- },
2323
- "default": "\"2px\"",
2324
- "description": "CSS `outline-offset` value.",
2325
- "fieldName": "outlineOffset"
2324
+ "description": "Background image URL.",
2325
+ "fieldName": "url"
2326
2326
  },
2327
2327
  {
2328
- "name": "loading",
2328
+ "name": "banner",
2329
2329
  "type": {
2330
2330
  "text": "boolean"
2331
2331
  },
2332
- "default": "false",
2333
- "description": "Shows loading overlay when true.",
2334
- "fieldName": "loading"
2332
+ "default": "true",
2333
+ "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
2334
+ "fieldName": "banner"
2335
2335
  },
2336
2336
  {
2337
- "name": "disabled",
2337
+ "name": "dense",
2338
2338
  "type": {
2339
2339
  "text": "boolean"
2340
2340
  },
2341
2341
  "default": "false",
2342
- "description": "Dims and disables pointer interactions.",
2343
- "fieldName": "disabled"
2342
+ "description": "Enables compact vertical spacing.",
2343
+ "fieldName": "dense"
2344
2344
  },
2345
2345
  {
2346
- "name": "interactive",
2346
+ "name": "elevated",
2347
2347
  "type": {
2348
2348
  "text": "boolean"
2349
2349
  },
2350
2350
  "default": "false",
2351
- "description": "Enables interactive behavior with keyboard/click activation.",
2352
- "fieldName": "interactive"
2351
+ "description": "Applies elevated shadow styling.",
2352
+ "fieldName": "elevated"
2353
2353
  },
2354
2354
  {
2355
- "name": "shadow",
2355
+ "name": "leadingLabel",
2356
2356
  "type": {
2357
- "text": "boolean"
2357
+ "text": "string"
2358
2358
  },
2359
- "default": "false",
2360
- "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
2361
- "fieldName": "shadow"
2359
+ "default": "\"Open menu\"",
2360
+ "description": "Accessible label for default leading button fallback.",
2361
+ "fieldName": "leadingLabel"
2362
2362
  },
2363
2363
  {
2364
2364
  "name": "preset",
@@ -2374,26 +2374,26 @@
2374
2374
  "name": "LitElement",
2375
2375
  "package": "lit"
2376
2376
  },
2377
- "tagName": "sky-avatar",
2377
+ "tagName": "sky-appbar",
2378
2378
  "customElement": true,
2379
- "summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
2379
+ "summary": "Application top bar with title, optional leading control, trailing actions, and optional color/image background."
2380
2380
  }
2381
2381
  ],
2382
2382
  "exports": [
2383
2383
  {
2384
2384
  "kind": "js",
2385
- "name": "SkyAvatar",
2385
+ "name": "SkyAppbar",
2386
2386
  "declaration": {
2387
- "name": "SkyAvatar",
2388
- "module": "src/sky-avatar/sky-avatar.ts"
2387
+ "name": "SkyAppbar",
2388
+ "module": "src/sky-appbar/sky-appbar.ts"
2389
2389
  }
2390
2390
  },
2391
2391
  {
2392
2392
  "kind": "custom-element-definition",
2393
- "name": "sky-avatar",
2393
+ "name": "sky-appbar",
2394
2394
  "declaration": {
2395
- "name": "SkyAvatar",
2396
- "module": "src/sky-avatar/sky-avatar.ts"
2395
+ "name": "SkyAppbar",
2396
+ "module": "src/sky-appbar/sky-appbar.ts"
2397
2397
  }
2398
2398
  }
2399
2399
  ]
@@ -5129,19 +5129,61 @@
5129
5129
  "privacy": "private",
5130
5130
  "parameters": [
5131
5131
  {
5132
- "name": "e",
5132
+ "name": "e",
5133
+ "type": {
5134
+ "text": "Event"
5135
+ }
5136
+ }
5137
+ ]
5138
+ },
5139
+ {
5140
+ "kind": "field",
5141
+ "name": "_formatLabel",
5142
+ "privacy": "private",
5143
+ "readonly": true
5144
+ },
5145
+ {
5146
+ "kind": "method",
5147
+ "name": "_formatTrigger",
5148
+ "privacy": "private"
5149
+ },
5150
+ {
5151
+ "kind": "method",
5152
+ "name": "_num",
5153
+ "privacy": "private",
5154
+ "parameters": [
5155
+ {
5156
+ "name": "label",
5157
+ "type": {
5158
+ "text": "string"
5159
+ }
5160
+ },
5161
+ {
5162
+ "name": "value",
5163
+ "type": {
5164
+ "text": "string"
5165
+ }
5166
+ },
5167
+ {
5168
+ "name": "min",
5169
+ "type": {
5170
+ "text": "number"
5171
+ }
5172
+ },
5173
+ {
5174
+ "name": "max",
5133
5175
  "type": {
5134
- "text": "Event"
5176
+ "text": "number"
5177
+ }
5178
+ },
5179
+ {
5180
+ "name": "onInput",
5181
+ "type": {
5182
+ "text": "(e: Event) => void"
5135
5183
  }
5136
5184
  }
5137
5185
  ]
5138
5186
  },
5139
- {
5140
- "kind": "field",
5141
- "name": "_formatLabel",
5142
- "privacy": "private",
5143
- "readonly": true
5144
- },
5145
5187
  {
5146
5188
  "kind": "field",
5147
5189
  "name": "_canEye",
@@ -7294,249 +7336,9 @@
7294
7336
  "type": {
7295
7337
  "text": "SkyComboboxMultiDisplay"
7296
7338
  },
7297
- "default": "\"chips\"",
7298
- "description": "Multi-select value UI: `chips` (default), `text` (comma-joined), or `count` (“N selected”).",
7299
- "fieldName": "multiDisplay"
7300
- },
7301
- {
7302
- "name": "preset",
7303
- "type": {
7304
- "text": "string"
7305
- },
7306
- "default": "\"\"",
7307
- "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
7308
- "fieldName": "preset"
7309
- }
7310
- ],
7311
- "superclass": {
7312
- "name": "FormControlBase",
7313
- "module": "/src/helper/internals/form-control-base"
7314
- },
7315
- "tagName": "sky-combobox",
7316
- "customElement": true,
7317
- "summary": "Interactive combobox with single/multi select, search, chips, validation, and popover-based option selection."
7318
- }
7319
- ],
7320
- "exports": [
7321
- {
7322
- "kind": "js",
7323
- "name": "COMBOBOX_RENDERERS_STATE_KEY",
7324
- "declaration": {
7325
- "name": "COMBOBOX_RENDERERS_STATE_KEY",
7326
- "module": "src/sky-combobox/sky-combobox.ts"
7327
- }
7328
- },
7329
- {
7330
- "kind": "js",
7331
- "name": "SkyCombobox",
7332
- "declaration": {
7333
- "name": "SkyCombobox",
7334
- "module": "src/sky-combobox/sky-combobox.ts"
7335
- }
7336
- },
7337
- {
7338
- "kind": "custom-element-definition",
7339
- "name": "sky-combobox",
7340
- "declaration": {
7341
- "name": "SkyCombobox",
7342
- "module": "src/sky-combobox/sky-combobox.ts"
7343
- }
7344
- }
7345
- ]
7346
- },
7347
- {
7348
- "kind": "javascript-module",
7349
- "path": "src/sky-divider/sky-divider.ts",
7350
- "declarations": [
7351
- {
7352
- "kind": "class",
7353
- "description": "",
7354
- "name": "SkyDivider",
7355
- "cssProperties": [
7356
- {
7357
- "description": "CSS custom property for divider color.",
7358
- "name": "--divider-color"
7359
- },
7360
- {
7361
- "description": "CSS custom property for divider thickness.",
7362
- "name": "--divider-thickness"
7363
- },
7364
- {
7365
- "description": "CSS custom property for divider margin.",
7366
- "name": "--divider-margin"
7367
- },
7368
- {
7369
- "description": "CSS custom property for vertical divider height.",
7370
- "name": "--divider-height"
7371
- }
7372
- ],
7373
- "cssParts": [
7374
- {
7375
- "description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
7376
- "name": "divider"
7377
- }
7378
- ],
7379
- "members": [
7380
- {
7381
- "kind": "field",
7382
- "name": "color",
7383
- "type": {
7384
- "text": "string"
7385
- },
7386
- "default": "\"muted\"",
7387
- "description": "Divider color token or CSS color.",
7388
- "privacy": "public",
7389
- "attribute": "color"
7390
- },
7391
- {
7392
- "kind": "field",
7393
- "name": "thickness",
7394
- "type": {
7395
- "text": "string"
7396
- },
7397
- "default": "\"1px\"",
7398
- "description": "Divider thickness (for example `1px` or `2px`).",
7399
- "privacy": "public",
7400
- "attribute": "thickness"
7401
- },
7402
- {
7403
- "kind": "field",
7404
- "name": "margin",
7405
- "type": {
7406
- "text": "string"
7407
- },
7408
- "default": "\"\"",
7409
- "description": "Outer margin around the divider.",
7410
- "privacy": "public",
7411
- "attribute": "margin"
7412
- },
7413
- {
7414
- "kind": "field",
7415
- "name": "direction",
7416
- "type": {
7417
- "text": "SkyDividerDirection"
7418
- },
7419
- "default": "\"horizontal\"",
7420
- "description": "Divider orientation.",
7421
- "privacy": "public",
7422
- "attribute": "direction"
7423
- },
7424
- {
7425
- "kind": "field",
7426
- "name": "inset",
7427
- "type": {
7428
- "text": "boolean"
7429
- },
7430
- "default": "false",
7431
- "description": "Enables indented divider layout.",
7432
- "privacy": "public",
7433
- "attribute": "inset"
7434
- },
7435
- {
7436
- "kind": "field",
7437
- "name": "height",
7438
- "type": {
7439
- "text": "string"
7440
- },
7441
- "default": "\"100%\"",
7442
- "description": "Height used for vertical orientation.",
7443
- "privacy": "public",
7444
- "attribute": "height"
7445
- },
7446
- {
7447
- "kind": "field",
7448
- "name": "preset",
7449
- "type": {
7450
- "text": "string"
7451
- },
7452
- "default": "\"\"",
7453
- "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
7454
- "attribute": "preset",
7455
- "reflects": true
7456
- },
7457
- {
7458
- "kind": "field",
7459
- "name": "_presets",
7460
- "privacy": "private",
7461
- "default": "new PresetController(this)"
7462
- },
7463
- {
7464
- "kind": "method",
7465
- "name": "getComputedColor",
7466
- "privacy": "public",
7467
- "return": {
7468
- "type": {
7469
- "text": ""
7470
- }
7471
- },
7472
- "description": "Gets the current computed color of the divider."
7473
- },
7474
- {
7475
- "kind": "method",
7476
- "name": "getComputedThickness",
7477
- "privacy": "public",
7478
- "return": {
7479
- "type": {
7480
- "text": ""
7481
- }
7482
- },
7483
- "description": "Gets the current computed thickness of the divider."
7484
- }
7485
- ],
7486
- "attributes": [
7487
- {
7488
- "name": "color",
7489
- "type": {
7490
- "text": "string"
7491
- },
7492
- "default": "\"muted\"",
7493
- "description": "Divider color token or CSS color.",
7494
- "fieldName": "color"
7495
- },
7496
- {
7497
- "name": "thickness",
7498
- "type": {
7499
- "text": "string"
7500
- },
7501
- "default": "\"1px\"",
7502
- "description": "Divider thickness (for example `1px` or `2px`).",
7503
- "fieldName": "thickness"
7504
- },
7505
- {
7506
- "name": "margin",
7507
- "type": {
7508
- "text": "string"
7509
- },
7510
- "default": "\"\"",
7511
- "description": "Outer margin around the divider.",
7512
- "fieldName": "margin"
7513
- },
7514
- {
7515
- "name": "direction",
7516
- "type": {
7517
- "text": "SkyDividerDirection"
7518
- },
7519
- "default": "\"horizontal\"",
7520
- "description": "Divider orientation.",
7521
- "fieldName": "direction"
7522
- },
7523
- {
7524
- "name": "inset",
7525
- "type": {
7526
- "text": "boolean"
7527
- },
7528
- "default": "false",
7529
- "description": "Enables indented divider layout.",
7530
- "fieldName": "inset"
7531
- },
7532
- {
7533
- "name": "height",
7534
- "type": {
7535
- "text": "string"
7536
- },
7537
- "default": "\"100%\"",
7538
- "description": "Height used for vertical orientation.",
7539
- "fieldName": "height"
7339
+ "default": "\"chips\"",
7340
+ "description": "Multi-select value UI: `chips` (default), `text` (comma-joined), or `count` (“N selected”).",
7341
+ "fieldName": "multiDisplay"
7540
7342
  },
7541
7343
  {
7542
7344
  "name": "preset",
@@ -7549,29 +7351,37 @@
7549
7351
  }
7550
7352
  ],
7551
7353
  "superclass": {
7552
- "name": "LitElement",
7553
- "package": "lit"
7354
+ "name": "FormControlBase",
7355
+ "module": "/src/helper/internals/form-control-base"
7554
7356
  },
7555
- "tagName": "sky-divider",
7357
+ "tagName": "sky-combobox",
7556
7358
  "customElement": true,
7557
- "summary": "Visual separator component for horizontal and vertical layout separation."
7359
+ "summary": "Interactive combobox with single/multi select, search, chips, validation, and popover-based option selection."
7558
7360
  }
7559
7361
  ],
7560
7362
  "exports": [
7561
7363
  {
7562
7364
  "kind": "js",
7563
- "name": "SkyDivider",
7365
+ "name": "COMBOBOX_RENDERERS_STATE_KEY",
7564
7366
  "declaration": {
7565
- "name": "SkyDivider",
7566
- "module": "src/sky-divider/sky-divider.ts"
7367
+ "name": "COMBOBOX_RENDERERS_STATE_KEY",
7368
+ "module": "src/sky-combobox/sky-combobox.ts"
7369
+ }
7370
+ },
7371
+ {
7372
+ "kind": "js",
7373
+ "name": "SkyCombobox",
7374
+ "declaration": {
7375
+ "name": "SkyCombobox",
7376
+ "module": "src/sky-combobox/sky-combobox.ts"
7567
7377
  }
7568
7378
  },
7569
7379
  {
7570
7380
  "kind": "custom-element-definition",
7571
- "name": "sky-divider",
7381
+ "name": "sky-combobox",
7572
7382
  "declaration": {
7573
- "name": "SkyDivider",
7574
- "module": "src/sky-divider/sky-divider.ts"
7383
+ "name": "SkyCombobox",
7384
+ "module": "src/sky-combobox/sky-combobox.ts"
7575
7385
  }
7576
7386
  }
7577
7387
  ]
@@ -8145,76 +7955,308 @@
8145
7955
  "fieldName": "overlay"
8146
7956
  },
8147
7957
  {
8148
- "name": "width",
8149
- "type": {
8150
- "text": "string"
7958
+ "name": "width",
7959
+ "type": {
7960
+ "text": "string"
7961
+ },
7962
+ "default": "\"auto\"",
7963
+ "description": "Max width of the dialog surface.",
7964
+ "fieldName": "width"
7965
+ },
7966
+ {
7967
+ "name": "separator",
7968
+ "type": {
7969
+ "text": "boolean"
7970
+ },
7971
+ "default": "false",
7972
+ "description": "Shows separators around header/footer regions.",
7973
+ "fieldName": "separator"
7974
+ },
7975
+ {
7976
+ "name": "persistent",
7977
+ "type": {
7978
+ "text": "boolean"
7979
+ },
7980
+ "default": "false",
7981
+ "description": "Prevents outside/Escape close and highlights surface instead.",
7982
+ "fieldName": "persistent"
7983
+ },
7984
+ {
7985
+ "name": "closeOnEsc",
7986
+ "type": {
7987
+ "text": "boolean"
7988
+ },
7989
+ "default": "false",
7990
+ "description": "Enables close intent on Escape key.",
7991
+ "fieldName": "closeOnEsc"
7992
+ },
7993
+ {
7994
+ "name": "headerPadding",
7995
+ "type": {
7996
+ "text": "SkyDialogPadding"
7997
+ },
7998
+ "default": "\"sm\"",
7999
+ "description": "Header padding token.",
8000
+ "fieldName": "headerPadding"
8001
+ },
8002
+ {
8003
+ "name": "bodyPadding",
8004
+ "type": {
8005
+ "text": "SkyDialogPadding"
8006
+ },
8007
+ "default": "\"sm\"",
8008
+ "description": "Body padding token.",
8009
+ "fieldName": "bodyPadding"
8010
+ },
8011
+ {
8012
+ "name": "footerPadding",
8013
+ "type": {
8014
+ "text": "SkyDialogPadding"
8015
+ },
8016
+ "default": "\"sm\"",
8017
+ "description": "Footer padding token.",
8018
+ "fieldName": "footerPadding"
8019
+ },
8020
+ {
8021
+ "name": "highlightOnOutsideClick",
8022
+ "type": {
8023
+ "text": "boolean"
8024
+ },
8025
+ "default": "true",
8026
+ "description": "Enables highlight animation on rejected outside click.",
8027
+ "fieldName": "highlightOnOutsideClick"
8028
+ },
8029
+ {
8030
+ "name": "preset",
8031
+ "type": {
8032
+ "text": "string"
8033
+ },
8034
+ "default": "\"\"",
8035
+ "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
8036
+ "fieldName": "preset"
8037
+ }
8038
+ ],
8039
+ "superclass": {
8040
+ "name": "LitElement",
8041
+ "package": "lit"
8042
+ },
8043
+ "tagName": "sky-dialog",
8044
+ "customElement": true,
8045
+ "summary": "Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling."
8046
+ }
8047
+ ],
8048
+ "exports": [
8049
+ {
8050
+ "kind": "js",
8051
+ "name": "SkyDialog",
8052
+ "declaration": {
8053
+ "name": "SkyDialog",
8054
+ "module": "src/sky-dialog/sky-dialog.ts"
8055
+ }
8056
+ },
8057
+ {
8058
+ "kind": "custom-element-definition",
8059
+ "name": "sky-dialog",
8060
+ "declaration": {
8061
+ "name": "SkyDialog",
8062
+ "module": "src/sky-dialog/sky-dialog.ts"
8063
+ }
8064
+ }
8065
+ ]
8066
+ },
8067
+ {
8068
+ "kind": "javascript-module",
8069
+ "path": "src/sky-divider/sky-divider.ts",
8070
+ "declarations": [
8071
+ {
8072
+ "kind": "class",
8073
+ "description": "",
8074
+ "name": "SkyDivider",
8075
+ "cssProperties": [
8076
+ {
8077
+ "description": "CSS custom property for divider color.",
8078
+ "name": "--divider-color"
8079
+ },
8080
+ {
8081
+ "description": "CSS custom property for divider thickness.",
8082
+ "name": "--divider-thickness"
8083
+ },
8084
+ {
8085
+ "description": "CSS custom property for divider margin.",
8086
+ "name": "--divider-margin"
8087
+ },
8088
+ {
8089
+ "description": "CSS custom property for vertical divider height.",
8090
+ "name": "--divider-height"
8091
+ }
8092
+ ],
8093
+ "cssParts": [
8094
+ {
8095
+ "description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
8096
+ "name": "divider"
8097
+ }
8098
+ ],
8099
+ "members": [
8100
+ {
8101
+ "kind": "field",
8102
+ "name": "color",
8103
+ "type": {
8104
+ "text": "string"
8105
+ },
8106
+ "default": "\"muted\"",
8107
+ "description": "Divider color token or CSS color.",
8108
+ "privacy": "public",
8109
+ "attribute": "color"
8110
+ },
8111
+ {
8112
+ "kind": "field",
8113
+ "name": "thickness",
8114
+ "type": {
8115
+ "text": "string"
8116
+ },
8117
+ "default": "\"1px\"",
8118
+ "description": "Divider thickness (for example `1px` or `2px`).",
8119
+ "privacy": "public",
8120
+ "attribute": "thickness"
8121
+ },
8122
+ {
8123
+ "kind": "field",
8124
+ "name": "margin",
8125
+ "type": {
8126
+ "text": "string"
8127
+ },
8128
+ "default": "\"\"",
8129
+ "description": "Outer margin around the divider.",
8130
+ "privacy": "public",
8131
+ "attribute": "margin"
8132
+ },
8133
+ {
8134
+ "kind": "field",
8135
+ "name": "direction",
8136
+ "type": {
8137
+ "text": "SkyDividerDirection"
8138
+ },
8139
+ "default": "\"horizontal\"",
8140
+ "description": "Divider orientation.",
8141
+ "privacy": "public",
8142
+ "attribute": "direction"
8143
+ },
8144
+ {
8145
+ "kind": "field",
8146
+ "name": "inset",
8147
+ "type": {
8148
+ "text": "boolean"
8149
+ },
8150
+ "default": "false",
8151
+ "description": "Enables indented divider layout.",
8152
+ "privacy": "public",
8153
+ "attribute": "inset"
8154
+ },
8155
+ {
8156
+ "kind": "field",
8157
+ "name": "height",
8158
+ "type": {
8159
+ "text": "string"
8160
+ },
8161
+ "default": "\"100%\"",
8162
+ "description": "Height used for vertical orientation.",
8163
+ "privacy": "public",
8164
+ "attribute": "height"
8165
+ },
8166
+ {
8167
+ "kind": "field",
8168
+ "name": "preset",
8169
+ "type": {
8170
+ "text": "string"
8171
+ },
8172
+ "default": "\"\"",
8173
+ "description": "Named prop preset from nearest `sky-config-provider`. Default: `\"\"`.",
8174
+ "attribute": "preset",
8175
+ "reflects": true
8176
+ },
8177
+ {
8178
+ "kind": "field",
8179
+ "name": "_presets",
8180
+ "privacy": "private",
8181
+ "default": "new PresetController(this)"
8182
+ },
8183
+ {
8184
+ "kind": "method",
8185
+ "name": "getComputedColor",
8186
+ "privacy": "public",
8187
+ "return": {
8188
+ "type": {
8189
+ "text": ""
8190
+ }
8151
8191
  },
8152
- "default": "\"auto\"",
8153
- "description": "Max width of the dialog surface.",
8154
- "fieldName": "width"
8192
+ "description": "Gets the current computed color of the divider."
8155
8193
  },
8156
8194
  {
8157
- "name": "separator",
8158
- "type": {
8159
- "text": "boolean"
8195
+ "kind": "method",
8196
+ "name": "getComputedThickness",
8197
+ "privacy": "public",
8198
+ "return": {
8199
+ "type": {
8200
+ "text": ""
8201
+ }
8160
8202
  },
8161
- "default": "false",
8162
- "description": "Shows separators around header/footer regions.",
8163
- "fieldName": "separator"
8164
- },
8203
+ "description": "Gets the current computed thickness of the divider."
8204
+ }
8205
+ ],
8206
+ "attributes": [
8165
8207
  {
8166
- "name": "persistent",
8208
+ "name": "color",
8167
8209
  "type": {
8168
- "text": "boolean"
8210
+ "text": "string"
8169
8211
  },
8170
- "default": "false",
8171
- "description": "Prevents outside/Escape close and highlights surface instead.",
8172
- "fieldName": "persistent"
8212
+ "default": "\"muted\"",
8213
+ "description": "Divider color token or CSS color.",
8214
+ "fieldName": "color"
8173
8215
  },
8174
8216
  {
8175
- "name": "closeOnEsc",
8217
+ "name": "thickness",
8176
8218
  "type": {
8177
- "text": "boolean"
8219
+ "text": "string"
8178
8220
  },
8179
- "default": "false",
8180
- "description": "Enables close intent on Escape key.",
8181
- "fieldName": "closeOnEsc"
8221
+ "default": "\"1px\"",
8222
+ "description": "Divider thickness (for example `1px` or `2px`).",
8223
+ "fieldName": "thickness"
8182
8224
  },
8183
8225
  {
8184
- "name": "headerPadding",
8226
+ "name": "margin",
8185
8227
  "type": {
8186
- "text": "SkyDialogPadding"
8228
+ "text": "string"
8187
8229
  },
8188
- "default": "\"sm\"",
8189
- "description": "Header padding token.",
8190
- "fieldName": "headerPadding"
8230
+ "default": "\"\"",
8231
+ "description": "Outer margin around the divider.",
8232
+ "fieldName": "margin"
8191
8233
  },
8192
8234
  {
8193
- "name": "bodyPadding",
8235
+ "name": "direction",
8194
8236
  "type": {
8195
- "text": "SkyDialogPadding"
8237
+ "text": "SkyDividerDirection"
8196
8238
  },
8197
- "default": "\"sm\"",
8198
- "description": "Body padding token.",
8199
- "fieldName": "bodyPadding"
8239
+ "default": "\"horizontal\"",
8240
+ "description": "Divider orientation.",
8241
+ "fieldName": "direction"
8200
8242
  },
8201
8243
  {
8202
- "name": "footerPadding",
8244
+ "name": "inset",
8203
8245
  "type": {
8204
- "text": "SkyDialogPadding"
8246
+ "text": "boolean"
8205
8247
  },
8206
- "default": "\"sm\"",
8207
- "description": "Footer padding token.",
8208
- "fieldName": "footerPadding"
8248
+ "default": "false",
8249
+ "description": "Enables indented divider layout.",
8250
+ "fieldName": "inset"
8209
8251
  },
8210
8252
  {
8211
- "name": "highlightOnOutsideClick",
8253
+ "name": "height",
8212
8254
  "type": {
8213
- "text": "boolean"
8255
+ "text": "string"
8214
8256
  },
8215
- "default": "true",
8216
- "description": "Enables highlight animation on rejected outside click.",
8217
- "fieldName": "highlightOnOutsideClick"
8257
+ "default": "\"100%\"",
8258
+ "description": "Height used for vertical orientation.",
8259
+ "fieldName": "height"
8218
8260
  },
8219
8261
  {
8220
8262
  "name": "preset",
@@ -8230,26 +8272,26 @@
8230
8272
  "name": "LitElement",
8231
8273
  "package": "lit"
8232
8274
  },
8233
- "tagName": "sky-dialog",
8275
+ "tagName": "sky-divider",
8234
8276
  "customElement": true,
8235
- "summary": "Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling."
8277
+ "summary": "Visual separator component for horizontal and vertical layout separation."
8236
8278
  }
8237
8279
  ],
8238
8280
  "exports": [
8239
8281
  {
8240
8282
  "kind": "js",
8241
- "name": "SkyDialog",
8283
+ "name": "SkyDivider",
8242
8284
  "declaration": {
8243
- "name": "SkyDialog",
8244
- "module": "src/sky-dialog/sky-dialog.ts"
8285
+ "name": "SkyDivider",
8286
+ "module": "src/sky-divider/sky-divider.ts"
8245
8287
  }
8246
8288
  },
8247
8289
  {
8248
8290
  "kind": "custom-element-definition",
8249
- "name": "sky-dialog",
8291
+ "name": "sky-divider",
8250
8292
  "declaration": {
8251
- "name": "SkyDialog",
8252
- "module": "src/sky-dialog/sky-dialog.ts"
8293
+ "name": "SkyDivider",
8294
+ "module": "src/sky-divider/sky-divider.ts"
8253
8295
  }
8254
8296
  }
8255
8297
  ]
@@ -13285,78 +13327,6 @@
13285
13327
  }
13286
13328
  ]
13287
13329
  },
13288
- {
13289
- "kind": "javascript-module",
13290
- "path": "src/sky-row/sky-row.ts",
13291
- "declarations": [
13292
- {
13293
- "kind": "class",
13294
- "description": "",
13295
- "name": "SkyRow",
13296
- "slots": [
13297
- {
13298
- "description": "Default slot for child content.",
13299
- "name": ""
13300
- }
13301
- ],
13302
- "members": [
13303
- {
13304
- "kind": "field",
13305
- "name": "preset",
13306
- "type": {
13307
- "text": "string"
13308
- },
13309
- "default": "\"\"",
13310
- "description": "Named prop preset from nearest `sky-config-provider`.",
13311
- "attribute": "preset",
13312
- "reflects": true
13313
- },
13314
- {
13315
- "kind": "field",
13316
- "name": "_presets",
13317
- "privacy": "private",
13318
- "default": "new PresetController(this)"
13319
- }
13320
- ],
13321
- "attributes": [
13322
- {
13323
- "name": "preset",
13324
- "type": {
13325
- "text": "string"
13326
- },
13327
- "default": "\"\"",
13328
- "description": "Named prop preset from nearest `sky-config-provider`.",
13329
- "fieldName": "preset"
13330
- }
13331
- ],
13332
- "superclass": {
13333
- "name": "LitElement",
13334
- "package": "lit"
13335
- },
13336
- "tagName": "sky-row",
13337
- "customElement": true,
13338
- "summary": "Lightweight semantic row wrapper for use inside `sky-grid`."
13339
- }
13340
- ],
13341
- "exports": [
13342
- {
13343
- "kind": "js",
13344
- "name": "SkyRow",
13345
- "declaration": {
13346
- "name": "SkyRow",
13347
- "module": "src/sky-row/sky-row.ts"
13348
- }
13349
- },
13350
- {
13351
- "kind": "custom-element-definition",
13352
- "name": "sky-row",
13353
- "declaration": {
13354
- "name": "SkyRow",
13355
- "module": "src/sky-row/sky-row.ts"
13356
- }
13357
- }
13358
- ]
13359
- },
13360
13330
  {
13361
13331
  "kind": "javascript-module",
13362
13332
  "path": "src/sky-radio/sky-radio.ts",
@@ -13800,6 +13770,78 @@
13800
13770
  }
13801
13771
  ]
13802
13772
  },
13773
+ {
13774
+ "kind": "javascript-module",
13775
+ "path": "src/sky-row/sky-row.ts",
13776
+ "declarations": [
13777
+ {
13778
+ "kind": "class",
13779
+ "description": "",
13780
+ "name": "SkyRow",
13781
+ "slots": [
13782
+ {
13783
+ "description": "Default slot for child content.",
13784
+ "name": ""
13785
+ }
13786
+ ],
13787
+ "members": [
13788
+ {
13789
+ "kind": "field",
13790
+ "name": "preset",
13791
+ "type": {
13792
+ "text": "string"
13793
+ },
13794
+ "default": "\"\"",
13795
+ "description": "Named prop preset from nearest `sky-config-provider`.",
13796
+ "attribute": "preset",
13797
+ "reflects": true
13798
+ },
13799
+ {
13800
+ "kind": "field",
13801
+ "name": "_presets",
13802
+ "privacy": "private",
13803
+ "default": "new PresetController(this)"
13804
+ }
13805
+ ],
13806
+ "attributes": [
13807
+ {
13808
+ "name": "preset",
13809
+ "type": {
13810
+ "text": "string"
13811
+ },
13812
+ "default": "\"\"",
13813
+ "description": "Named prop preset from nearest `sky-config-provider`.",
13814
+ "fieldName": "preset"
13815
+ }
13816
+ ],
13817
+ "superclass": {
13818
+ "name": "LitElement",
13819
+ "package": "lit"
13820
+ },
13821
+ "tagName": "sky-row",
13822
+ "customElement": true,
13823
+ "summary": "Lightweight semantic row wrapper for use inside `sky-grid`."
13824
+ }
13825
+ ],
13826
+ "exports": [
13827
+ {
13828
+ "kind": "js",
13829
+ "name": "SkyRow",
13830
+ "declaration": {
13831
+ "name": "SkyRow",
13832
+ "module": "src/sky-row/sky-row.ts"
13833
+ }
13834
+ },
13835
+ {
13836
+ "kind": "custom-element-definition",
13837
+ "name": "sky-row",
13838
+ "declaration": {
13839
+ "name": "SkyRow",
13840
+ "module": "src/sky-row/sky-row.ts"
13841
+ }
13842
+ }
13843
+ ]
13844
+ },
13803
13845
  {
13804
13846
  "kind": "javascript-module",
13805
13847
  "path": "src/sky-sheet/sky-sheet.ts",