@sky.ui/core 0.0.28 → 0.0.29

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 (8) hide show
  1. package/dist/custom-elements.json +1144 -1144
  2. package/package.json +15 -1
  3. package/plugins/ce-auto-import.d.ts +18 -0
  4. package/plugins/ce-auto-import.js +160 -0
  5. package/plugins/stack-resolvers.d.ts +10 -0
  6. package/plugins/stack-resolvers.js +43 -0
  7. package/plugins/vite-plugin.d.ts +6 -1
  8. package/plugins/vite-plugin.js +28 -7
package/dist/custom-elements.json CHANGED
@@ -685,233 +685,135 @@
685
685
  },
686
686
  {
687
687
  "kind": "javascript-module",
688
- "path": "src/sky-badge/sky-badge.ts",
688
+ "path": "src/sky-avatar/sky-avatar.ts",
689
689
  "declarations": [
690
690
  {
691
691
  "kind": "class",
692
692
  "description": "",
693
- "name": "SkyBadge",
693
+ "name": "SkyAvatar",
694
694
  "cssParts": [
695
695
  {
696
- "description": "Wrapper around the slotted content and the badge.",
697
- "name": "container"
696
+ "description": "The avatar container element.",
697
+ "name": "avatar"
698
698
  },
699
699
  {
700
- "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
701
- "name": "badge"
700
+ "description": "The loading overlay container (shown when `loading` is true).",
701
+ "name": "loading-overlay"
702
702
  },
703
703
  {
704
- "description": "The icon element when `isIcon` is true.",
705
- "name": "icon"
704
+ "description": "The spinner element shown when loading.",
705
+ "name": "spinner"
706
706
  }
707
707
  ],
708
708
  "slots": [
709
709
  {
710
- "description": "The content the badge attaches to.",
710
+ "description": "Fallback content (e.g., initials or an icon) rendered when `image` is empty.",
711
711
  "name": ""
712
- },
713
- {
714
- "description": "Optional slot to override the badge content entirely.",
715
- "name": "badge"
716
712
  }
717
713
  ],
718
714
  "members": [
719
715
  {
720
716
  "kind": "field",
721
- "name": "dependencies",
722
- "type": {
723
- "text": "Record<string, CustomElementConstructor>"
724
- },
725
- "static": true,
726
- "default": "{ \"sky-icon\": SkyIcon, }"
727
- },
728
- {
729
- "kind": "field",
730
- "name": "statusColor",
731
- "type": {
732
- "text": "string"
733
- },
734
- "default": "\"success\"",
735
- "description": "Badge background token or CSS color.",
736
- "attribute": "statusColor",
737
- "reflects": true
738
- },
739
- {
740
- "kind": "field",
741
- "name": "textColor",
717
+ "name": "size",
742
718
  "type": {
743
719
  "text": "string"
744
720
  },
745
- "default": "\"default\"",
746
- "description": "Text color token or CSS color.",
747
- "attribute": "textColor",
748
- "reflects": true
721
+ "default": "\"50px\"",
722
+ "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
723
+ "attribute": "size"
749
724
  },
750
725
  {
751
726
  "kind": "field",
752
- "name": "iconColor",
727
+ "name": "image",
753
728
  "type": {
754
729
  "text": "string"
755
730
  },
756
731
  "default": "\"\"",
757
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
758
- "attribute": "iconColor",
759
- "reflects": true
732
+ "description": "Image URL; fallback slot is shown on load error.",
733
+ "attribute": "image"
760
734
  },
761
735
  {
762
736
  "kind": "field",
763
- "name": "position",
737
+ "name": "fit",
764
738
  "type": {
765
- "text": "SkyBadgePosition"
739
+ "text": "SkyAvatarFit"
766
740
  },
767
- "default": "\"default\"",
768
- "description": "Layout mode: `default | floating | inline`.",
769
- "attribute": "position",
741
+ "default": "\"cover\"",
742
+ "description": "Image fill mode: `cover` (default) or `contain`.",
743
+ "attribute": "fit",
770
744
  "reflects": true
771
745
  },
772
746
  {
773
747
  "kind": "field",
774
- "name": "value",
748
+ "name": "radius",
775
749
  "type": {
776
750
  "text": "string"
777
751
  },
778
- "default": "\"\"",
779
- "description": "Badge text/count or icon name in icon mode.",
780
- "attribute": "value"
781
- },
782
- {
783
- "kind": "field",
784
- "name": "isIcon",
785
- "type": {
786
- "text": "boolean"
787
- },
788
- "default": "false",
789
- "description": "Renders icon mode when true.",
790
- "attribute": "isIcon",
791
- "reflects": true
752
+ "default": "\"md\"",
753
+ "description": "Border radius token or CSS value.",
754
+ "attribute": "radius"
792
755
  },
793
756
  {
794
757
  "kind": "field",
795
- "name": "size",
758
+ "name": "alt",
796
759
  "type": {
797
760
  "text": "string"
798
761
  },
799
762
  "default": "\"\"",
800
- "description": "Badge and icon size CSS length.",
801
- "attribute": "size",
802
- "reflects": true
803
- },
804
- {
805
- "kind": "field",
806
- "name": "shape",
807
- "type": {
808
- "text": "SkyBadgeShape"
809
- },
810
- "default": "\"custom\"",
811
- "description": "Badge shape: `circle | pill | custom`.",
812
- "attribute": "shape",
813
- "reflects": true
814
- },
815
- {
816
- "kind": "field",
817
- "name": "max",
818
- "type": {
819
- "text": "number"
820
- },
821
- "default": "99",
822
- "description": "Maximum numeric count before rendering overflow label.",
823
- "attribute": "max"
824
- },
825
- {
826
- "kind": "field",
827
- "name": "hideWhenZero",
828
- "type": {
829
- "text": "boolean"
830
- },
831
- "default": "false",
832
- "description": "Hides badge when value resolves to numeric zero.",
833
- "attribute": "hideWhenZero"
763
+ "description": "Accessible name when image content conveys meaning.",
764
+ "attribute": "alt"
834
765
  },
835
766
  {
836
767
  "kind": "field",
837
- "name": "show",
768
+ "name": "color",
838
769
  "type": {
839
- "text": "boolean"
770
+ "text": "string"
840
771
  },
841
- "default": "true",
842
- "description": "Forces badge visibility independent of value.",
843
- "attribute": "show",
844
- "reflects": true
772
+ "default": "\"dark\"",
773
+ "description": "Token or CSS color applied to fallback slot content.",
774
+ "attribute": "color"
845
775
  },
846
776
  {
847
777
  "kind": "field",
848
- "name": "offsetX",
778
+ "name": "outline",
849
779
  "type": {
850
780
  "text": "string"
851
781
  },
852
- "default": "\"0px\"",
853
- "description": "Horizontal offset CSS length.",
854
- "attribute": "offsetX"
782
+ "default": "\"\"",
783
+ "description": "CSS `outline` value.",
784
+ "attribute": "outline"
855
785
  },
856
786
  {
857
787
  "kind": "field",
858
- "name": "offsetY",
788
+ "name": "outlineOffset",
859
789
  "type": {
860
790
  "text": "string"
861
791
  },
862
- "default": "\"0px\"",
863
- "description": "Vertical offset CSS length.",
864
- "attribute": "offsetY"
792
+ "default": "\"2px\"",
793
+ "description": "CSS `outline-offset` value.",
794
+ "attribute": "outlineOffset"
865
795
  },
866
796
  {
867
797
  "kind": "field",
868
- "name": "ring",
798
+ "name": "loading",
869
799
  "type": {
870
800
  "text": "boolean"
871
801
  },
872
802
  "default": "false",
873
- "description": "Enables visual ring around the badge.",
874
- "attribute": "ring"
875
- },
876
- {
877
- "kind": "field",
878
- "name": "ringColor",
879
- "type": {
880
- "text": "string"
881
- },
882
- "default": "\"primary\"",
883
- "description": "Ring color token or CSS color.",
884
- "attribute": "ringColor"
885
- },
886
- {
887
- "kind": "field",
888
- "name": "ringOffset",
889
- "type": {
890
- "text": "string"
891
- },
892
- "default": "\"1px\"",
893
- "description": "Ring offset CSS length.",
894
- "attribute": "ringOffset"
895
- },
896
- {
897
- "kind": "field",
898
- "name": "badgeLabel",
899
- "type": {
900
- "text": "string | null"
901
- },
902
- "default": "null",
903
- "description": "ARIA label override.",
904
- "attribute": "badgeLabel"
803
+ "description": "Shows loading overlay when true.",
804
+ "attribute": "loading",
805
+ "reflects": true
905
806
  },
906
807
  {
907
808
  "kind": "field",
908
- "name": "badgeAriaHidden",
809
+ "name": "disabled",
909
810
  "type": {
910
811
  "text": "boolean"
911
812
  },
912
813
  "default": "false",
913
- "description": "Hides badge from assistive technology when true.",
914
- "attribute": "badgeAriaHidden"
814
+ "description": "Dims and disables pointer interactions.",
815
+ "attribute": "disabled",
816
+ "reflects": true
915
817
  },
916
818
  {
917
819
  "kind": "field",
@@ -920,318 +822,190 @@
920
822
  "text": "boolean"
921
823
  },
922
824
  "default": "false",
923
- "description": "Enables focus/activation and `badge-click` emission.",
825
+ "description": "Enables interactive behavior with keyboard/click activation.",
924
826
  "attribute": "interactive"
925
827
  },
926
828
  {
927
829
  "kind": "field",
928
- "name": "placement",
830
+ "name": "shadow",
929
831
  "type": {
930
- "text": "SkyBadgePlacement"
832
+ "text": "boolean"
931
833
  },
932
- "default": "\"custom\"",
933
- "description": "Anchor placement preset for badge positioning.",
934
- "attribute": "placement",
834
+ "default": "false",
835
+ "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
836
+ "attribute": "shadow",
935
837
  "reflects": true
936
838
  },
937
839
  {
938
840
  "kind": "field",
939
- "name": "_badgeEl",
841
+ "name": "_imageError",
940
842
  "type": {
941
- "text": "HTMLSpanElement"
843
+ "text": "boolean"
942
844
  },
943
- "privacy": "private"
845
+ "privacy": "private",
846
+ "default": "false",
847
+ "description": "True when image failed to load; show slot instead."
944
848
  },
945
849
  {
946
850
  "kind": "field",
947
- "name": "badgeRef",
948
- "privacy": "public",
949
- "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
851
+ "name": "_onImageLoad",
852
+ "privacy": "private",
853
+ "description": "Marks image load success and keeps image rendering active."
950
854
  },
951
855
  {
952
856
  "kind": "field",
953
- "name": "shadowRootOptions",
954
- "type": {
955
- "text": "ShadowRootInit"
956
- },
957
- "static": true,
958
- "default": "{ mode: \"open\", delegatesFocus: true, }"
857
+ "name": "_onImageError",
858
+ "privacy": "private",
859
+ "description": "Marks image load failure and enables fallback slot rendering."
959
860
  },
960
861
  {
961
862
  "kind": "method",
962
- "name": "showBadge",
963
- "privacy": "public",
863
+ "name": "_handleInteractiveClick",
864
+ "privacy": "private",
964
865
  "return": {
965
866
  "type": {
966
867
  "text": "void"
967
868
  }
968
869
  },
969
- "description": "Forces badge visibility on."
870
+ "parameters": [
871
+ {
872
+ "name": "e",
873
+ "type": {
874
+ "text": "Event"
875
+ }
876
+ }
877
+ ],
878
+ "description": "Re-dispatches click in interactive mode for host-level consumers."
970
879
  },
971
880
  {
972
881
  "kind": "method",
973
- "name": "hideBadge",
974
- "privacy": "public",
882
+ "name": "_handleInteractiveKeydown",
883
+ "privacy": "private",
975
884
  "return": {
976
885
  "type": {
977
886
  "text": "void"
978
887
  }
979
888
  },
980
- "description": "Forces badge visibility off."
981
- },
982
- {
983
- "kind": "method",
984
- "name": "setValue",
985
- "privacy": "public",
986
- "return": {
987
- "type": {
988
- "text": "void"
989
- }
990
- },
991
- "parameters": [
992
- {
993
- "name": "value",
994
- "type": {
995
- "text": "string"
996
- },
997
- "description": "Badge value or icon name."
998
- }
999
- ],
1000
- "description": "Updates badge value for text/count or icon modes."
1001
- },
1002
- {
1003
- "kind": "field",
1004
- "name": "_onActivate",
1005
- "privacy": "private",
1006
- "description": "Emits `badge-click` for interactive activation."
1007
- },
1008
- {
1009
- "kind": "field",
1010
- "name": "_onKeydown",
1011
- "privacy": "private",
1012
- "description": "Handles keyboard activation with Enter and Space."
1013
- },
1014
- {
1015
- "kind": "method",
1016
- "name": "_computeAriaLabel",
1017
- "privacy": "private",
1018
- "return": {
1019
- "type": {
1020
- "text": "string | null"
1021
- }
1022
- },
1023
889
  "parameters": [
1024
890
  {
1025
- "name": "displayValue",
1026
- "type": {
1027
- "text": "string | null"
1028
- }
1029
- }
1030
- ],
1031
- "description": "Computes accessible badge label from current render state."
1032
- },
1033
- {
1034
- "kind": "method",
1035
- "name": "_computeAnchors",
1036
- "privacy": "private",
1037
- "return": {
1038
- "type": {
1039
- "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
1040
- }
1041
- },
1042
- "parameters": [
1043
- {
1044
- "name": "placement",
891
+ "name": "e",
1045
892
  "type": {
1046
- "text": "SkyBadgePlacement"
893
+ "text": "KeyboardEvent"
1047
894
  }
1048
895
  }
1049
896
  ],
1050
- "description": "Resolves anchor edges from placement preset."
897
+ "description": "Handles keyboard activation in interactive mode."
1051
898
  },
1052
899
  {
1053
900
  "kind": "method",
1054
- "name": "_resolveBadgeSurface",
901
+ "name": "adjustSpinnerSize",
1055
902
  "privacy": "private",
1056
903
  "return": {
1057
904
  "type": {
1058
- "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
905
+ "text": "void"
1059
906
  }
1060
907
  },
1061
- "description": "Maps semantic status tokens to soft badge surface colors."
908
+ "description": "Derives spinner dimensions from current avatar size."
1062
909
  }
1063
910
  ],
1064
911
  "events": [
1065
912
  {
913
+ "name": "click",
1066
914
  "type": {
1067
- "text": "CustomEvent<SkyBadgeClickEventDetail>"
1068
- },
1069
- "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
1070
- "name": "badge-click"
915
+ "text": "Event"
916
+ }
1071
917
  }
1072
918
  ],
1073
919
  "attributes": [
1074
920
  {
1075
- "name": "statusColor",
1076
- "type": {
1077
- "text": "string"
1078
- },
1079
- "default": "\"success\"",
1080
- "description": "Badge background token or CSS color.",
1081
- "fieldName": "statusColor"
1082
- },
1083
- {
1084
- "name": "textColor",
921
+ "name": "size",
1085
922
  "type": {
1086
923
  "text": "string"
1087
924
  },
1088
- "default": "\"default\"",
1089
- "description": "Text color token or CSS color.",
1090
- "fieldName": "textColor"
925
+ "default": "\"50px\"",
926
+ "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
927
+ "fieldName": "size"
1091
928
  },
1092
929
  {
1093
- "name": "iconColor",
930
+ "name": "image",
1094
931
  "type": {
1095
932
  "text": "string"
1096
933
  },
1097
934
  "default": "\"\"",
1098
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1099
- "fieldName": "iconColor"
935
+ "description": "Image URL; fallback slot is shown on load error.",
936
+ "fieldName": "image"
1100
937
  },
1101
938
  {
1102
- "name": "position",
939
+ "name": "fit",
1103
940
  "type": {
1104
- "text": "SkyBadgePosition"
941
+ "text": "SkyAvatarFit"
1105
942
  },
1106
- "default": "\"default\"",
1107
- "description": "Layout mode: `default | floating | inline`.",
1108
- "fieldName": "position"
943
+ "default": "\"cover\"",
944
+ "description": "Image fill mode: `cover` (default) or `contain`.",
945
+ "fieldName": "fit"
1109
946
  },
1110
947
  {
1111
- "name": "value",
948
+ "name": "radius",
1112
949
  "type": {
1113
950
  "text": "string"
1114
951
  },
1115
- "default": "\"\"",
1116
- "description": "Badge text/count or icon name in icon mode.",
1117
- "fieldName": "value"
1118
- },
1119
- {
1120
- "name": "isIcon",
1121
- "type": {
1122
- "text": "boolean"
1123
- },
1124
- "default": "false",
1125
- "description": "Renders icon mode when true.",
1126
- "fieldName": "isIcon"
952
+ "default": "\"md\"",
953
+ "description": "Border radius token or CSS value.",
954
+ "fieldName": "radius"
1127
955
  },
1128
956
  {
1129
- "name": "size",
957
+ "name": "alt",
1130
958
  "type": {
1131
959
  "text": "string"
1132
960
  },
1133
961
  "default": "\"\"",
1134
- "description": "Badge and icon size CSS length.",
1135
- "fieldName": "size"
1136
- },
1137
- {
1138
- "name": "shape",
1139
- "type": {
1140
- "text": "SkyBadgeShape"
1141
- },
1142
- "default": "\"custom\"",
1143
- "description": "Badge shape: `circle | pill | custom`.",
1144
- "fieldName": "shape"
1145
- },
1146
- {
1147
- "name": "max",
1148
- "type": {
1149
- "text": "number"
1150
- },
1151
- "default": "99",
1152
- "description": "Maximum numeric count before rendering overflow label.",
1153
- "fieldName": "max"
1154
- },
1155
- {
1156
- "name": "hideWhenZero",
1157
- "type": {
1158
- "text": "boolean"
1159
- },
1160
- "default": "false",
1161
- "description": "Hides badge when value resolves to numeric zero.",
1162
- "fieldName": "hideWhenZero"
962
+ "description": "Accessible name when image content conveys meaning.",
963
+ "fieldName": "alt"
1163
964
  },
1164
965
  {
1165
- "name": "show",
966
+ "name": "color",
1166
967
  "type": {
1167
- "text": "boolean"
968
+ "text": "string"
1168
969
  },
1169
- "default": "true",
1170
- "description": "Forces badge visibility independent of value.",
1171
- "fieldName": "show"
970
+ "default": "\"dark\"",
971
+ "description": "Token or CSS color applied to fallback slot content.",
972
+ "fieldName": "color"
1172
973
  },
1173
974
  {
1174
- "name": "offsetX",
975
+ "name": "outline",
1175
976
  "type": {
1176
977
  "text": "string"
1177
978
  },
1178
- "default": "\"0px\"",
1179
- "description": "Horizontal offset CSS length.",
1180
- "fieldName": "offsetX"
979
+ "default": "\"\"",
980
+ "description": "CSS `outline` value.",
981
+ "fieldName": "outline"
1181
982
  },
1182
983
  {
1183
- "name": "offsetY",
984
+ "name": "outlineOffset",
1184
985
  "type": {
1185
986
  "text": "string"
1186
987
  },
1187
- "default": "\"0px\"",
1188
- "description": "Vertical offset CSS length.",
1189
- "fieldName": "offsetY"
988
+ "default": "\"2px\"",
989
+ "description": "CSS `outline-offset` value.",
990
+ "fieldName": "outlineOffset"
1190
991
  },
1191
992
  {
1192
- "name": "ring",
993
+ "name": "loading",
1193
994
  "type": {
1194
995
  "text": "boolean"
1195
996
  },
1196
997
  "default": "false",
1197
- "description": "Enables visual ring around the badge.",
1198
- "fieldName": "ring"
1199
- },
1200
- {
1201
- "name": "ringColor",
1202
- "type": {
1203
- "text": "string"
1204
- },
1205
- "default": "\"primary\"",
1206
- "description": "Ring color token or CSS color.",
1207
- "fieldName": "ringColor"
1208
- },
1209
- {
1210
- "name": "ringOffset",
1211
- "type": {
1212
- "text": "string"
1213
- },
1214
- "default": "\"1px\"",
1215
- "description": "Ring offset CSS length.",
1216
- "fieldName": "ringOffset"
1217
- },
1218
- {
1219
- "name": "badgeLabel",
1220
- "type": {
1221
- "text": "string | null"
1222
- },
1223
- "default": "null",
1224
- "description": "ARIA label override.",
1225
- "fieldName": "badgeLabel"
998
+ "description": "Shows loading overlay when true.",
999
+ "fieldName": "loading"
1226
1000
  },
1227
1001
  {
1228
- "name": "badgeAriaHidden",
1002
+ "name": "disabled",
1229
1003
  "type": {
1230
1004
  "text": "boolean"
1231
1005
  },
1232
1006
  "default": "false",
1233
- "description": "Hides badge from assistive technology when true.",
1234
- "fieldName": "badgeAriaHidden"
1007
+ "description": "Dims and disables pointer interactions.",
1008
+ "fieldName": "disabled"
1235
1009
  },
1236
1010
  {
1237
1011
  "name": "interactive",
@@ -1239,156 +1013,187 @@
1239
1013
  "text": "boolean"
1240
1014
  },
1241
1015
  "default": "false",
1242
- "description": "Enables focus/activation and `badge-click` emission.",
1016
+ "description": "Enables interactive behavior with keyboard/click activation.",
1243
1017
  "fieldName": "interactive"
1244
1018
  },
1245
1019
  {
1246
- "name": "placement",
1020
+ "name": "shadow",
1247
1021
  "type": {
1248
- "text": "SkyBadgePlacement"
1022
+ "text": "boolean"
1249
1023
  },
1250
- "default": "\"custom\"",
1251
- "description": "Anchor placement preset for badge positioning.",
1252
- "fieldName": "placement"
1024
+ "default": "false",
1025
+ "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
1026
+ "fieldName": "shadow"
1253
1027
  }
1254
1028
  ],
1255
1029
  "superclass": {
1256
1030
  "name": "LitElement",
1257
1031
  "package": "lit"
1258
1032
  },
1259
- "tagName": "sky-badge",
1033
+ "tagName": "sky-avatar",
1260
1034
  "customElement": true,
1261
- "summary": "Badge for status dots, counts, or icons anchored to slotted content."
1035
+ "summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
1262
1036
  }
1263
1037
  ],
1264
1038
  "exports": [
1265
1039
  {
1266
1040
  "kind": "js",
1267
- "name": "SkyBadge",
1041
+ "name": "SkyAvatar",
1268
1042
  "declaration": {
1269
- "name": "SkyBadge",
1270
- "module": "src/sky-badge/sky-badge.ts"
1043
+ "name": "SkyAvatar",
1044
+ "module": "src/sky-avatar/sky-avatar.ts"
1271
1045
  }
1272
1046
  },
1273
1047
  {
1274
1048
  "kind": "custom-element-definition",
1275
- "name": "sky-badge",
1049
+ "name": "sky-avatar",
1276
1050
  "declaration": {
1277
- "name": "SkyBadge",
1278
- "module": "src/sky-badge/sky-badge.ts"
1051
+ "name": "SkyAvatar",
1052
+ "module": "src/sky-avatar/sky-avatar.ts"
1279
1053
  }
1280
1054
  }
1281
1055
  ]
1282
1056
  },
1283
1057
  {
1284
1058
  "kind": "javascript-module",
1285
- "path": "src/sky-avatar/sky-avatar.ts",
1059
+ "path": "src/sky-button/sky-button.ts",
1286
1060
  "declarations": [
1287
1061
  {
1288
1062
  "kind": "class",
1289
1063
  "description": "",
1290
- "name": "SkyAvatar",
1064
+ "name": "SkyButton",
1291
1065
  "cssParts": [
1292
1066
  {
1293
- "description": "The avatar container element.",
1294
- "name": "avatar"
1067
+ "description": "The native `<button>` element.",
1068
+ "name": "button"
1295
1069
  },
1296
1070
  {
1297
- "description": "The loading overlay container (shown when `loading` is true).",
1071
+ "description": "The optional left/right icons.",
1072
+ "name": "icon"
1073
+ },
1074
+ {
1075
+ "description": "Overlay displayed when loading.",
1298
1076
  "name": "loading-overlay"
1299
1077
  },
1300
1078
  {
1301
- "description": "The spinner element shown when loading.",
1079
+ "description": "Spinner displayed when loading.",
1302
1080
  "name": "spinner"
1303
1081
  }
1304
1082
  ],
1305
1083
  "slots": [
1306
1084
  {
1307
- "description": "Fallback content (e.g., initials or an icon) rendered when `image` is empty.",
1085
+ "description": "Default slot for the button label (replaces `label` property if used).",
1308
1086
  "name": ""
1309
1087
  }
1310
1088
  ],
1311
1089
  "members": [
1312
1090
  {
1313
1091
  "kind": "field",
1314
- "name": "size",
1092
+ "name": "dependencies",
1315
1093
  "type": {
1316
- "text": "string"
1094
+ "text": "Record<string, CustomElementConstructor>"
1317
1095
  },
1318
- "default": "\"50px\"",
1319
- "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
1320
- "attribute": "size"
1096
+ "static": true,
1097
+ "default": "{ \"sky-icon\": SkyIcon, }"
1321
1098
  },
1322
1099
  {
1323
1100
  "kind": "field",
1324
- "name": "image",
1101
+ "name": "formAssociated",
1325
1102
  "type": {
1326
- "text": "string"
1103
+ "text": "boolean"
1327
1104
  },
1328
- "default": "\"\"",
1329
- "description": "Image URL; fallback slot is shown on load error.",
1330
- "attribute": "image"
1105
+ "static": true,
1106
+ "default": "true"
1331
1107
  },
1332
1108
  {
1333
1109
  "kind": "field",
1334
- "name": "fit",
1110
+ "name": "internals",
1335
1111
  "type": {
1336
- "text": "SkyAvatarFit"
1112
+ "text": "ElementInternals"
1337
1113
  },
1338
- "default": "\"cover\"",
1339
- "description": "Image fill mode: `cover` (default) or `contain`.",
1340
- "attribute": "fit",
1114
+ "privacy": "private"
1115
+ },
1116
+ {
1117
+ "kind": "field",
1118
+ "name": "variant",
1119
+ "type": {
1120
+ "text": "SkyButtonVariant"
1121
+ },
1122
+ "default": "\"solid\"",
1123
+ "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
1124
+ "attribute": "variant",
1341
1125
  "reflects": true
1342
1126
  },
1343
1127
  {
1344
1128
  "kind": "field",
1345
- "name": "radius",
1129
+ "name": "color",
1346
1130
  "type": {
1347
1131
  "text": "string"
1348
1132
  },
1349
- "default": "\"md\"",
1350
- "description": "Border radius token or CSS value.",
1351
- "attribute": "radius"
1133
+ "default": "\"primary\"",
1134
+ "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1135
+ "attribute": "color"
1352
1136
  },
1353
1137
  {
1354
1138
  "kind": "field",
1355
- "name": "alt",
1139
+ "name": "type",
1140
+ "type": {
1141
+ "text": "SkyButtonType"
1142
+ },
1143
+ "default": "\"button\"",
1144
+ "description": "Button type attribute. Default: `\"button\"`.",
1145
+ "attribute": "type"
1146
+ },
1147
+ {
1148
+ "kind": "field",
1149
+ "name": "form",
1356
1150
  "type": {
1357
1151
  "text": "string"
1358
1152
  },
1359
1153
  "default": "\"\"",
1360
- "description": "Accessible name when image content conveys meaning.",
1361
- "attribute": "alt"
1154
+ "description": "Associated form ID for custom submit handling.",
1155
+ "attribute": "form"
1362
1156
  },
1363
1157
  {
1364
1158
  "kind": "field",
1365
- "name": "color",
1159
+ "name": "size",
1366
1160
  "type": {
1367
1161
  "text": "string"
1368
1162
  },
1369
- "default": "\"dark\"",
1370
- "description": "Token or CSS color applied to fallback slot content.",
1371
- "attribute": "color"
1163
+ "default": "\"md\"",
1164
+ "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1165
+ "attribute": "size"
1372
1166
  },
1373
1167
  {
1374
1168
  "kind": "field",
1375
- "name": "outline",
1169
+ "name": "radius",
1376
1170
  "type": {
1377
1171
  "text": "string"
1378
1172
  },
1379
- "default": "\"\"",
1380
- "description": "CSS `outline` value.",
1381
- "attribute": "outline"
1173
+ "default": "\"md\"",
1174
+ "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
1175
+ "attribute": "radius"
1382
1176
  },
1383
1177
  {
1384
1178
  "kind": "field",
1385
- "name": "outlineOffset",
1179
+ "name": "label",
1386
1180
  "type": {
1387
1181
  "text": "string"
1388
1182
  },
1389
- "default": "\"2px\"",
1390
- "description": "CSS `outline-offset` value.",
1391
- "attribute": "outlineOffset"
1183
+ "default": "\"Button\"",
1184
+ "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
1185
+ "attribute": "label"
1186
+ },
1187
+ {
1188
+ "kind": "field",
1189
+ "name": "disabled",
1190
+ "type": {
1191
+ "text": "boolean"
1192
+ },
1193
+ "default": "false",
1194
+ "description": "Whether the button is disabled. Default: `false`.",
1195
+ "attribute": "disabled",
1196
+ "reflects": true
1392
1197
  },
1393
1198
  {
1394
1199
  "kind": "field",
@@ -1397,67 +1202,204 @@
1397
1202
  "text": "boolean"
1398
1203
  },
1399
1204
  "default": "false",
1400
- "description": "Shows loading overlay when true.",
1205
+ "description": "Shows a loading overlay when true. Default: `false`.",
1401
1206
  "attribute": "loading",
1402
1207
  "reflects": true
1403
1208
  },
1404
1209
  {
1405
1210
  "kind": "field",
1406
- "name": "disabled",
1211
+ "name": "iconL",
1212
+ "type": {
1213
+ "text": "string"
1214
+ },
1215
+ "default": "\"\"",
1216
+ "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
1217
+ "attribute": "iconL"
1218
+ },
1219
+ {
1220
+ "kind": "field",
1221
+ "name": "iconR",
1222
+ "type": {
1223
+ "text": "string"
1224
+ },
1225
+ "default": "\"\"",
1226
+ "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
1227
+ "attribute": "iconR"
1228
+ },
1229
+ {
1230
+ "kind": "field",
1231
+ "name": "iconOnly",
1407
1232
  "type": {
1408
1233
  "text": "boolean"
1409
1234
  },
1410
1235
  "default": "false",
1411
- "description": "Dims and disables pointer interactions.",
1412
- "attribute": "disabled",
1236
+ "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
1237
+ "attribute": "iconOnly",
1413
1238
  "reflects": true
1414
1239
  },
1415
1240
  {
1416
1241
  "kind": "field",
1417
- "name": "interactive",
1242
+ "name": "colors",
1243
+ "type": {
1244
+ "text": "string"
1245
+ },
1246
+ "default": "\"\"",
1247
+ "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
1248
+ "attribute": "colors"
1249
+ },
1250
+ {
1251
+ "kind": "field",
1252
+ "name": "animation",
1253
+ "type": {
1254
+ "text": "SkyButtonAnimation"
1255
+ },
1256
+ "default": "\"auto\"",
1257
+ "description": "Transform animation style. Default: `\"auto\"`.",
1258
+ "attribute": "animation",
1259
+ "reflects": true
1260
+ },
1261
+ {
1262
+ "kind": "field",
1263
+ "name": "_hasMeaningfulSlot",
1418
1264
  "type": {
1419
1265
  "text": "boolean"
1420
1266
  },
1421
- "default": "false",
1422
- "description": "Enables interactive behavior with keyboard/click activation.",
1423
- "attribute": "interactive"
1267
+ "privacy": "private",
1268
+ "default": "false"
1269
+ },
1270
+ {
1271
+ "kind": "field",
1272
+ "name": "_styleVars",
1273
+ "type": {
1274
+ "text": "Record<string, string>"
1275
+ },
1276
+ "privacy": "private",
1277
+ "default": "{}",
1278
+ "description": "Inline CSS variable cache."
1279
+ },
1280
+ {
1281
+ "kind": "method",
1282
+ "name": "_slotHasMeaningfulContent",
1283
+ "privacy": "private",
1284
+ "return": {
1285
+ "type": {
1286
+ "text": "boolean"
1287
+ }
1288
+ },
1289
+ "parameters": [
1290
+ {
1291
+ "name": "slotEl",
1292
+ "type": {
1293
+ "text": "HTMLSlotElement"
1294
+ }
1295
+ }
1296
+ ]
1297
+ },
1298
+ {
1299
+ "kind": "field",
1300
+ "name": "_onSlotChange",
1301
+ "privacy": "private"
1302
+ },
1303
+ {
1304
+ "kind": "method",
1305
+ "name": "_toSquarePadding",
1306
+ "privacy": "private",
1307
+ "return": {
1308
+ "type": {
1309
+ "text": "string"
1310
+ }
1311
+ },
1312
+ "parameters": [
1313
+ {
1314
+ "name": "padding",
1315
+ "type": {
1316
+ "text": "string"
1317
+ }
1318
+ }
1319
+ ],
1320
+ "description": "Uses vertical padding for equal sides (icon-only square control)."
1321
+ },
1322
+ {
1323
+ "kind": "method",
1324
+ "name": "_resolveSize",
1325
+ "privacy": "private",
1326
+ "return": {
1327
+ "type": {
1328
+ "text": "{\r\n padding: string;\r\n fontSize: string;\r\n gap: string;\r\n icon: string;\r\n spinner: string;\r\n }"
1329
+ }
1330
+ },
1331
+ "parameters": [
1332
+ {
1333
+ "name": "input",
1334
+ "type": {
1335
+ "text": "string"
1336
+ }
1337
+ }
1338
+ ]
1339
+ },
1340
+ {
1341
+ "kind": "method",
1342
+ "name": "_isThemeBorderShorthand",
1343
+ "privacy": "private",
1344
+ "return": {
1345
+ "type": {
1346
+ "text": "boolean"
1347
+ }
1348
+ },
1349
+ "parameters": [
1350
+ {
1351
+ "name": "border",
1352
+ "type": {
1353
+ "text": "string | undefined"
1354
+ }
1355
+ }
1356
+ ],
1357
+ "description": "Theme tokens like `var(--sky-border-primary)` are full border shorthands, not colors."
1424
1358
  },
1425
1359
  {
1426
- "kind": "field",
1427
- "name": "shadow",
1428
- "type": {
1429
- "text": "boolean"
1360
+ "kind": "method",
1361
+ "name": "_borderColorFromShorthand",
1362
+ "privacy": "private",
1363
+ "return": {
1364
+ "type": {
1365
+ "text": "string"
1366
+ }
1430
1367
  },
1431
- "default": "false",
1432
- "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
1433
- "attribute": "shadow",
1434
- "reflects": true
1368
+ "parameters": [
1369
+ {
1370
+ "name": "border",
1371
+ "type": {
1372
+ "text": "string | undefined"
1373
+ }
1374
+ }
1375
+ ],
1376
+ "description": "Extracts the color token from a `Npx solid …` border shorthand."
1435
1377
  },
1436
1378
  {
1437
- "kind": "field",
1438
- "name": "_imageError",
1439
- "type": {
1440
- "text": "boolean"
1379
+ "kind": "method",
1380
+ "name": "focusButton",
1381
+ "privacy": "public",
1382
+ "return": {
1383
+ "type": {
1384
+ "text": "void"
1385
+ }
1441
1386
  },
1442
- "privacy": "private",
1443
- "default": "false",
1444
- "description": "True when image failed to load; show slot instead."
1445
- },
1446
- {
1447
- "kind": "field",
1448
- "name": "_onImageLoad",
1449
- "privacy": "private",
1450
- "description": "Marks image load success and keeps image rendering active."
1387
+ "description": "Focuses the internal native button."
1451
1388
  },
1452
1389
  {
1453
- "kind": "field",
1454
- "name": "_onImageError",
1455
- "privacy": "private",
1456
- "description": "Marks image load failure and enables fallback slot rendering."
1390
+ "kind": "method",
1391
+ "name": "clickButton",
1392
+ "privacy": "public",
1393
+ "return": {
1394
+ "type": {
1395
+ "text": "void"
1396
+ }
1397
+ },
1398
+ "description": "Triggers a click on the internal native button when enabled."
1457
1399
  },
1458
1400
  {
1459
1401
  "kind": "method",
1460
- "name": "_handleInteractiveClick",
1402
+ "name": "_createRipple",
1461
1403
  "privacy": "private",
1462
1404
  "return": {
1463
1405
  "type": {
@@ -1466,18 +1408,16 @@
1466
1408
  },
1467
1409
  "parameters": [
1468
1410
  {
1469
- "name": "e",
1411
+ "name": "event",
1470
1412
  "type": {
1471
- "text": "Event"
1413
+ "text": "MouseEvent"
1472
1414
  }
1473
1415
  }
1474
- ],
1475
- "description": "Re-dispatches click in interactive mode for host-level consumers."
1416
+ ]
1476
1417
  },
1477
1418
  {
1478
1419
  "kind": "method",
1479
- "name": "_handleInteractiveKeydown",
1480
- "privacy": "private",
1420
+ "name": "formDisabledCallback",
1481
1421
  "return": {
1482
1422
  "type": {
1483
1423
  "text": "void"
@@ -1485,106 +1425,122 @@
1485
1425
  },
1486
1426
  "parameters": [
1487
1427
  {
1488
- "name": "e",
1428
+ "name": "disabled",
1489
1429
  "type": {
1490
- "text": "KeyboardEvent"
1430
+ "text": "boolean"
1491
1431
  }
1492
1432
  }
1493
- ],
1494
- "description": "Handles keyboard activation in interactive mode."
1433
+ ]
1434
+ },
1435
+ {
1436
+ "kind": "field",
1437
+ "name": "formOwner",
1438
+ "type": {
1439
+ "text": "HTMLFormElement | null"
1440
+ },
1441
+ "readonly": true
1495
1442
  },
1496
1443
  {
1497
1444
  "kind": "method",
1498
- "name": "adjustSpinnerSize",
1445
+ "name": "_handleClick",
1499
1446
  "privacy": "private",
1500
1447
  "return": {
1501
1448
  "type": {
1502
1449
  "text": "void"
1503
1450
  }
1504
1451
  },
1505
- "description": "Derives spinner dimensions from current avatar size."
1506
- }
1507
- ],
1508
- "events": [
1452
+ "parameters": [
1453
+ {
1454
+ "name": "event",
1455
+ "type": {
1456
+ "text": "MouseEvent"
1457
+ }
1458
+ }
1459
+ ]
1460
+ },
1509
1461
  {
1510
- "name": "click",
1511
- "type": {
1512
- "text": "Event"
1462
+ "kind": "method",
1463
+ "name": "_iconOnlyName",
1464
+ "privacy": "private",
1465
+ "return": {
1466
+ "type": {
1467
+ "text": "string"
1468
+ }
1513
1469
  }
1514
1470
  }
1515
1471
  ],
1516
1472
  "attributes": [
1517
1473
  {
1518
- "name": "size",
1474
+ "name": "variant",
1519
1475
  "type": {
1520
- "text": "string"
1476
+ "text": "SkyButtonVariant"
1521
1477
  },
1522
- "default": "\"50px\"",
1523
- "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
1524
- "fieldName": "size"
1478
+ "default": "\"solid\"",
1479
+ "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
1480
+ "fieldName": "variant"
1525
1481
  },
1526
1482
  {
1527
- "name": "image",
1483
+ "name": "color",
1528
1484
  "type": {
1529
1485
  "text": "string"
1530
1486
  },
1531
- "default": "\"\"",
1532
- "description": "Image URL; fallback slot is shown on load error.",
1533
- "fieldName": "image"
1487
+ "default": "\"primary\"",
1488
+ "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1489
+ "fieldName": "color"
1534
1490
  },
1535
1491
  {
1536
- "name": "fit",
1492
+ "name": "type",
1537
1493
  "type": {
1538
- "text": "SkyAvatarFit"
1494
+ "text": "SkyButtonType"
1539
1495
  },
1540
- "default": "\"cover\"",
1541
- "description": "Image fill mode: `cover` (default) or `contain`.",
1542
- "fieldName": "fit"
1496
+ "default": "\"button\"",
1497
+ "description": "Button type attribute. Default: `\"button\"`.",
1498
+ "fieldName": "type"
1543
1499
  },
1544
1500
  {
1545
- "name": "radius",
1501
+ "name": "form",
1546
1502
  "type": {
1547
1503
  "text": "string"
1548
1504
  },
1549
- "default": "\"md\"",
1550
- "description": "Border radius token or CSS value.",
1551
- "fieldName": "radius"
1505
+ "default": "\"\"",
1506
+ "description": "Associated form ID for custom submit handling.",
1507
+ "fieldName": "form"
1552
1508
  },
1553
1509
  {
1554
- "name": "alt",
1510
+ "name": "size",
1555
1511
  "type": {
1556
1512
  "text": "string"
1557
1513
  },
1558
- "default": "\"\"",
1559
- "description": "Accessible name when image content conveys meaning.",
1560
- "fieldName": "alt"
1514
+ "default": "\"md\"",
1515
+ "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1516
+ "fieldName": "size"
1561
1517
  },
1562
1518
  {
1563
- "name": "color",
1519
+ "name": "radius",
1564
1520
  "type": {
1565
1521
  "text": "string"
1566
1522
  },
1567
- "default": "\"dark\"",
1568
- "description": "Token or CSS color applied to fallback slot content.",
1569
- "fieldName": "color"
1523
+ "default": "\"md\"",
1524
+ "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
1525
+ "fieldName": "radius"
1570
1526
  },
1571
1527
  {
1572
- "name": "outline",
1528
+ "name": "label",
1573
1529
  "type": {
1574
1530
  "text": "string"
1575
1531
  },
1576
- "default": "\"\"",
1577
- "description": "CSS `outline` value.",
1578
- "fieldName": "outline"
1532
+ "default": "\"Button\"",
1533
+ "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
1534
+ "fieldName": "label"
1579
1535
  },
1580
1536
  {
1581
- "name": "outlineOffset",
1537
+ "name": "disabled",
1582
1538
  "type": {
1583
- "text": "string"
1539
+ "text": "boolean"
1584
1540
  },
1585
- "default": "\"2px\"",
1586
- "description": "CSS `outline-offset` value.",
1587
- "fieldName": "outlineOffset"
1541
+ "default": "false",
1542
+ "description": "Whether the button is disabled. Default: `false`.",
1543
+ "fieldName": "disabled"
1588
1544
  },
1589
1545
  {
1590
1546
  "name": "loading",
@@ -1592,95 +1548,113 @@
1592
1548
  "text": "boolean"
1593
1549
  },
1594
1550
  "default": "false",
1595
- "description": "Shows loading overlay when true.",
1551
+ "description": "Shows a loading overlay when true. Default: `false`.",
1596
1552
  "fieldName": "loading"
1597
1553
  },
1598
1554
  {
1599
- "name": "disabled",
1555
+ "name": "iconL",
1600
1556
  "type": {
1601
- "text": "boolean"
1557
+ "text": "string"
1602
1558
  },
1603
- "default": "false",
1604
- "description": "Dims and disables pointer interactions.",
1605
- "fieldName": "disabled"
1559
+ "default": "\"\"",
1560
+ "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
1561
+ "fieldName": "iconL"
1606
1562
  },
1607
1563
  {
1608
- "name": "interactive",
1564
+ "name": "iconR",
1609
1565
  "type": {
1610
- "text": "boolean"
1566
+ "text": "string"
1611
1567
  },
1612
- "default": "false",
1613
- "description": "Enables interactive behavior with keyboard/click activation.",
1614
- "fieldName": "interactive"
1568
+ "default": "\"\"",
1569
+ "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
1570
+ "fieldName": "iconR"
1615
1571
  },
1616
1572
  {
1617
- "name": "shadow",
1573
+ "name": "iconOnly",
1618
1574
  "type": {
1619
1575
  "text": "boolean"
1620
1576
  },
1621
1577
  "default": "false",
1622
- "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
1623
- "fieldName": "shadow"
1578
+ "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
1579
+ "fieldName": "iconOnly"
1580
+ },
1581
+ {
1582
+ "name": "colors",
1583
+ "type": {
1584
+ "text": "string"
1585
+ },
1586
+ "default": "\"\"",
1587
+ "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
1588
+ "fieldName": "colors"
1589
+ },
1590
+ {
1591
+ "name": "animation",
1592
+ "type": {
1593
+ "text": "SkyButtonAnimation"
1594
+ },
1595
+ "default": "\"auto\"",
1596
+ "description": "Transform animation style. Default: `\"auto\"`.",
1597
+ "fieldName": "animation"
1624
1598
  }
1625
1599
  ],
1626
1600
  "superclass": {
1627
1601
  "name": "LitElement",
1628
1602
  "package": "lit"
1629
1603
  },
1630
- "tagName": "sky-avatar",
1604
+ "tagName": "sky-button",
1631
1605
  "customElement": true,
1632
- "summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
1606
+ "summary": "Styled button supporting variants, icons, loading state, ripple feedback, and form-associated behavior."
1633
1607
  }
1634
1608
  ],
1635
1609
  "exports": [
1636
1610
  {
1637
1611
  "kind": "js",
1638
- "name": "SkyAvatar",
1612
+ "name": "SkyButton",
1639
1613
  "declaration": {
1640
- "name": "SkyAvatar",
1641
- "module": "src/sky-avatar/sky-avatar.ts"
1614
+ "name": "SkyButton",
1615
+ "module": "src/sky-button/sky-button.ts"
1642
1616
  }
1643
1617
  },
1644
1618
  {
1645
1619
  "kind": "custom-element-definition",
1646
- "name": "sky-avatar",
1620
+ "name": "sky-button",
1647
1621
  "declaration": {
1648
- "name": "SkyAvatar",
1649
- "module": "src/sky-avatar/sky-avatar.ts"
1622
+ "name": "SkyButton",
1623
+ "module": "src/sky-button/sky-button.ts"
1650
1624
  }
1651
1625
  }
1652
1626
  ]
1653
1627
  },
1654
1628
  {
1655
1629
  "kind": "javascript-module",
1656
- "path": "src/sky-button/sky-button.ts",
1630
+ "path": "src/sky-badge/sky-badge.ts",
1657
1631
  "declarations": [
1658
1632
  {
1659
1633
  "kind": "class",
1660
1634
  "description": "",
1661
- "name": "SkyButton",
1635
+ "name": "SkyBadge",
1662
1636
  "cssParts": [
1663
1637
  {
1664
- "description": "The native `<button>` element.",
1665
- "name": "button"
1666
- },
1667
- {
1668
- "description": "The optional left/right icons.",
1669
- "name": "icon"
1638
+ "description": "Wrapper around the slotted content and the badge.",
1639
+ "name": "container"
1670
1640
  },
1671
1641
  {
1672
- "description": "Overlay displayed when loading.",
1673
- "name": "loading-overlay"
1642
+ "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
1643
+ "name": "badge"
1674
1644
  },
1675
1645
  {
1676
- "description": "Spinner displayed when loading.",
1677
- "name": "spinner"
1646
+ "description": "The icon element when `isIcon` is true.",
1647
+ "name": "icon"
1678
1648
  }
1679
1649
  ],
1680
1650
  "slots": [
1681
1651
  {
1682
- "description": "Default slot for the button label (replaces `label` property if used).",
1652
+ "description": "The content the badge attaches to.",
1683
1653
  "name": ""
1654
+ },
1655
+ {
1656
+ "description": "Optional slot to override the badge content entirely.",
1657
+ "name": "badge"
1684
1658
  }
1685
1659
  ],
1686
1660
  "members": [
@@ -1695,61 +1669,68 @@
1695
1669
  },
1696
1670
  {
1697
1671
  "kind": "field",
1698
- "name": "formAssociated",
1672
+ "name": "statusColor",
1699
1673
  "type": {
1700
- "text": "boolean"
1674
+ "text": "string"
1701
1675
  },
1702
- "static": true,
1703
- "default": "true"
1676
+ "default": "\"success\"",
1677
+ "description": "Badge background token or CSS color.",
1678
+ "attribute": "statusColor",
1679
+ "reflects": true
1704
1680
  },
1705
1681
  {
1706
1682
  "kind": "field",
1707
- "name": "internals",
1683
+ "name": "textColor",
1708
1684
  "type": {
1709
- "text": "ElementInternals"
1685
+ "text": "string"
1710
1686
  },
1711
- "privacy": "private"
1687
+ "default": "\"default\"",
1688
+ "description": "Text color token or CSS color.",
1689
+ "attribute": "textColor",
1690
+ "reflects": true
1712
1691
  },
1713
1692
  {
1714
1693
  "kind": "field",
1715
- "name": "variant",
1694
+ "name": "iconColor",
1716
1695
  "type": {
1717
- "text": "SkyButtonVariant"
1696
+ "text": "string"
1718
1697
  },
1719
- "default": "\"solid\"",
1720
- "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
1721
- "attribute": "variant",
1698
+ "default": "\"\"",
1699
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1700
+ "attribute": "iconColor",
1722
1701
  "reflects": true
1723
1702
  },
1724
1703
  {
1725
1704
  "kind": "field",
1726
- "name": "color",
1705
+ "name": "position",
1727
1706
  "type": {
1728
- "text": "string"
1707
+ "text": "SkyBadgePosition"
1729
1708
  },
1730
- "default": "\"primary\"",
1731
- "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1732
- "attribute": "color"
1709
+ "default": "\"default\"",
1710
+ "description": "Layout mode: `default | floating | inline`.",
1711
+ "attribute": "position",
1712
+ "reflects": true
1733
1713
  },
1734
1714
  {
1735
1715
  "kind": "field",
1736
- "name": "type",
1716
+ "name": "value",
1737
1717
  "type": {
1738
- "text": "SkyButtonType"
1718
+ "text": "string"
1739
1719
  },
1740
- "default": "\"button\"",
1741
- "description": "Button type attribute. Default: `\"button\"`.",
1742
- "attribute": "type"
1720
+ "default": "\"\"",
1721
+ "description": "Badge text/count or icon name in icon mode.",
1722
+ "attribute": "value"
1743
1723
  },
1744
1724
  {
1745
1725
  "kind": "field",
1746
- "name": "form",
1726
+ "name": "isIcon",
1747
1727
  "type": {
1748
- "text": "string"
1728
+ "text": "boolean"
1749
1729
  },
1750
- "default": "\"\"",
1751
- "description": "Associated form ID for custom submit handling.",
1752
- "attribute": "form"
1730
+ "default": "false",
1731
+ "description": "Renders icon mode when true.",
1732
+ "attribute": "isIcon",
1733
+ "reflects": true
1753
1734
  },
1754
1735
  {
1755
1736
  "kind": "field",
@@ -1757,247 +1738,193 @@
1757
1738
  "type": {
1758
1739
  "text": "string"
1759
1740
  },
1760
- "default": "\"md\"",
1761
- "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1762
- "attribute": "size"
1741
+ "default": "\"\"",
1742
+ "description": "Badge and icon size CSS length.",
1743
+ "attribute": "size",
1744
+ "reflects": true
1763
1745
  },
1764
1746
  {
1765
1747
  "kind": "field",
1766
- "name": "radius",
1748
+ "name": "shape",
1767
1749
  "type": {
1768
- "text": "string"
1750
+ "text": "SkyBadgeShape"
1769
1751
  },
1770
- "default": "\"md\"",
1771
- "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
1772
- "attribute": "radius"
1752
+ "default": "\"custom\"",
1753
+ "description": "Badge shape: `circle | pill | custom`.",
1754
+ "attribute": "shape",
1755
+ "reflects": true
1773
1756
  },
1774
1757
  {
1775
1758
  "kind": "field",
1776
- "name": "label",
1759
+ "name": "max",
1777
1760
  "type": {
1778
- "text": "string"
1761
+ "text": "number"
1779
1762
  },
1780
- "default": "\"Button\"",
1781
- "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
1782
- "attribute": "label"
1763
+ "default": "99",
1764
+ "description": "Maximum numeric count before rendering overflow label.",
1765
+ "attribute": "max"
1783
1766
  },
1784
1767
  {
1785
1768
  "kind": "field",
1786
- "name": "disabled",
1769
+ "name": "hideWhenZero",
1787
1770
  "type": {
1788
1771
  "text": "boolean"
1789
1772
  },
1790
1773
  "default": "false",
1791
- "description": "Whether the button is disabled. Default: `false`.",
1792
- "attribute": "disabled",
1793
- "reflects": true
1774
+ "description": "Hides badge when value resolves to numeric zero.",
1775
+ "attribute": "hideWhenZero"
1794
1776
  },
1795
1777
  {
1796
1778
  "kind": "field",
1797
- "name": "loading",
1779
+ "name": "show",
1798
1780
  "type": {
1799
1781
  "text": "boolean"
1800
1782
  },
1801
- "default": "false",
1802
- "description": "Shows a loading overlay when true. Default: `false`.",
1803
- "attribute": "loading",
1783
+ "default": "true",
1784
+ "description": "Forces badge visibility independent of value.",
1785
+ "attribute": "show",
1804
1786
  "reflects": true
1805
1787
  },
1806
1788
  {
1807
1789
  "kind": "field",
1808
- "name": "iconL",
1790
+ "name": "offsetX",
1809
1791
  "type": {
1810
1792
  "text": "string"
1811
1793
  },
1812
- "default": "\"\"",
1813
- "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
1814
- "attribute": "iconL"
1794
+ "default": "\"0px\"",
1795
+ "description": "Horizontal offset CSS length.",
1796
+ "attribute": "offsetX"
1815
1797
  },
1816
1798
  {
1817
1799
  "kind": "field",
1818
- "name": "iconR",
1800
+ "name": "offsetY",
1819
1801
  "type": {
1820
1802
  "text": "string"
1821
1803
  },
1822
- "default": "\"\"",
1823
- "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
1824
- "attribute": "iconR"
1804
+ "default": "\"0px\"",
1805
+ "description": "Vertical offset CSS length.",
1806
+ "attribute": "offsetY"
1825
1807
  },
1826
1808
  {
1827
1809
  "kind": "field",
1828
- "name": "iconOnly",
1810
+ "name": "ring",
1829
1811
  "type": {
1830
1812
  "text": "boolean"
1831
1813
  },
1832
1814
  "default": "false",
1833
- "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
1834
- "attribute": "iconOnly",
1835
- "reflects": true
1815
+ "description": "Enables visual ring around the badge.",
1816
+ "attribute": "ring"
1836
1817
  },
1837
1818
  {
1838
1819
  "kind": "field",
1839
- "name": "colors",
1820
+ "name": "ringColor",
1840
1821
  "type": {
1841
1822
  "text": "string"
1842
1823
  },
1843
- "default": "\"\"",
1844
- "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
1845
- "attribute": "colors"
1824
+ "default": "\"primary\"",
1825
+ "description": "Ring color token or CSS color.",
1826
+ "attribute": "ringColor"
1846
1827
  },
1847
1828
  {
1848
1829
  "kind": "field",
1849
- "name": "animation",
1830
+ "name": "ringOffset",
1850
1831
  "type": {
1851
- "text": "SkyButtonAnimation"
1832
+ "text": "string"
1852
1833
  },
1853
- "default": "\"auto\"",
1854
- "description": "Transform animation style. Default: `\"auto\"`.",
1855
- "attribute": "animation",
1856
- "reflects": true
1834
+ "default": "\"1px\"",
1835
+ "description": "Ring offset CSS length.",
1836
+ "attribute": "ringOffset"
1857
1837
  },
1858
1838
  {
1859
1839
  "kind": "field",
1860
- "name": "_hasMeaningfulSlot",
1840
+ "name": "badgeLabel",
1861
1841
  "type": {
1862
- "text": "boolean"
1842
+ "text": "string | null"
1863
1843
  },
1864
- "privacy": "private",
1865
- "default": "false"
1844
+ "default": "null",
1845
+ "description": "ARIA label override.",
1846
+ "attribute": "badgeLabel"
1866
1847
  },
1867
1848
  {
1868
1849
  "kind": "field",
1869
- "name": "_styleVars",
1850
+ "name": "badgeAriaHidden",
1870
1851
  "type": {
1871
- "text": "Record<string, string>"
1852
+ "text": "boolean"
1872
1853
  },
1873
- "privacy": "private",
1874
- "default": "{}",
1875
- "description": "Inline CSS variable cache."
1854
+ "default": "false",
1855
+ "description": "Hides badge from assistive technology when true.",
1856
+ "attribute": "badgeAriaHidden"
1876
1857
  },
1877
1858
  {
1878
- "kind": "method",
1879
- "name": "_slotHasMeaningfulContent",
1880
- "privacy": "private",
1881
- "return": {
1882
- "type": {
1883
- "text": "boolean"
1884
- }
1859
+ "kind": "field",
1860
+ "name": "interactive",
1861
+ "type": {
1862
+ "text": "boolean"
1885
1863
  },
1886
- "parameters": [
1887
- {
1888
- "name": "slotEl",
1889
- "type": {
1890
- "text": "HTMLSlotElement"
1891
- }
1892
- }
1893
- ]
1864
+ "default": "false",
1865
+ "description": "Enables focus/activation and `badge-click` emission.",
1866
+ "attribute": "interactive"
1894
1867
  },
1895
1868
  {
1896
1869
  "kind": "field",
1897
- "name": "_onSlotChange",
1898
- "privacy": "private"
1899
- },
1900
- {
1901
- "kind": "method",
1902
- "name": "_toSquarePadding",
1903
- "privacy": "private",
1904
- "return": {
1905
- "type": {
1906
- "text": "string"
1907
- }
1870
+ "name": "placement",
1871
+ "type": {
1872
+ "text": "SkyBadgePlacement"
1908
1873
  },
1909
- "parameters": [
1910
- {
1911
- "name": "padding",
1912
- "type": {
1913
- "text": "string"
1914
- }
1915
- }
1916
- ],
1917
- "description": "Uses vertical padding for equal sides (icon-only square control)."
1874
+ "default": "\"custom\"",
1875
+ "description": "Anchor placement preset for badge positioning.",
1876
+ "attribute": "placement",
1877
+ "reflects": true
1918
1878
  },
1919
1879
  {
1920
- "kind": "method",
1921
- "name": "_resolveSize",
1922
- "privacy": "private",
1923
- "return": {
1924
- "type": {
1925
- "text": "{\r\n padding: string;\r\n fontSize: string;\r\n gap: string;\r\n icon: string;\r\n spinner: string;\r\n }"
1926
- }
1927
- },
1928
- "parameters": [
1929
- {
1930
- "name": "input",
1931
- "type": {
1932
- "text": "string"
1933
- }
1934
- }
1935
- ]
1880
+ "kind": "field",
1881
+ "name": "_badgeEl",
1882
+ "type": {
1883
+ "text": "HTMLSpanElement"
1884
+ },
1885
+ "privacy": "private"
1936
1886
  },
1937
1887
  {
1938
- "kind": "method",
1939
- "name": "_isThemeBorderShorthand",
1940
- "privacy": "private",
1941
- "return": {
1942
- "type": {
1943
- "text": "boolean"
1944
- }
1945
- },
1946
- "parameters": [
1947
- {
1948
- "name": "border",
1949
- "type": {
1950
- "text": "string | undefined"
1951
- }
1952
- }
1953
- ],
1954
- "description": "Theme tokens like `var(--sky-border-primary)` are full border shorthands, not colors."
1888
+ "kind": "field",
1889
+ "name": "badgeRef",
1890
+ "privacy": "public",
1891
+ "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
1955
1892
  },
1956
1893
  {
1957
- "kind": "method",
1958
- "name": "_borderColorFromShorthand",
1959
- "privacy": "private",
1960
- "return": {
1961
- "type": {
1962
- "text": "string"
1963
- }
1894
+ "kind": "field",
1895
+ "name": "shadowRootOptions",
1896
+ "type": {
1897
+ "text": "ShadowRootInit"
1964
1898
  },
1965
- "parameters": [
1966
- {
1967
- "name": "border",
1968
- "type": {
1969
- "text": "string | undefined"
1970
- }
1971
- }
1972
- ],
1973
- "description": "Extracts the color token from a `Npx solid …` border shorthand."
1899
+ "static": true,
1900
+ "default": "{ mode: \"open\", delegatesFocus: true, }"
1974
1901
  },
1975
1902
  {
1976
1903
  "kind": "method",
1977
- "name": "focusButton",
1904
+ "name": "showBadge",
1978
1905
  "privacy": "public",
1979
1906
  "return": {
1980
1907
  "type": {
1981
1908
  "text": "void"
1982
1909
  }
1983
1910
  },
1984
- "description": "Focuses the internal native button."
1911
+ "description": "Forces badge visibility on."
1985
1912
  },
1986
1913
  {
1987
1914
  "kind": "method",
1988
- "name": "clickButton",
1915
+ "name": "hideBadge",
1989
1916
  "privacy": "public",
1990
1917
  "return": {
1991
1918
  "type": {
1992
1919
  "text": "void"
1993
1920
  }
1994
1921
  },
1995
- "description": "Triggers a click on the internal native button when enabled."
1922
+ "description": "Forces badge visibility off."
1996
1923
  },
1997
1924
  {
1998
1925
  "kind": "method",
1999
- "name": "_createRipple",
2000
- "privacy": "private",
1926
+ "name": "setValue",
1927
+ "privacy": "public",
2001
1928
  "return": {
2002
1929
  "type": {
2003
1930
  "text": "void"
@@ -2005,219 +1932,292 @@
2005
1932
  },
2006
1933
  "parameters": [
2007
1934
  {
2008
- "name": "event",
1935
+ "name": "value",
2009
1936
  "type": {
2010
- "text": "MouseEvent"
2011
- }
1937
+ "text": "string"
1938
+ },
1939
+ "description": "Badge value or icon name."
2012
1940
  }
2013
- ]
1941
+ ],
1942
+ "description": "Updates badge value for text/count or icon modes."
1943
+ },
1944
+ {
1945
+ "kind": "field",
1946
+ "name": "_onActivate",
1947
+ "privacy": "private",
1948
+ "description": "Emits `badge-click` for interactive activation."
1949
+ },
1950
+ {
1951
+ "kind": "field",
1952
+ "name": "_onKeydown",
1953
+ "privacy": "private",
1954
+ "description": "Handles keyboard activation with Enter and Space."
2014
1955
  },
2015
1956
  {
2016
1957
  "kind": "method",
2017
- "name": "formDisabledCallback",
1958
+ "name": "_computeAriaLabel",
1959
+ "privacy": "private",
2018
1960
  "return": {
2019
1961
  "type": {
2020
- "text": "void"
1962
+ "text": "string | null"
2021
1963
  }
2022
1964
  },
2023
1965
  "parameters": [
2024
1966
  {
2025
- "name": "disabled",
1967
+ "name": "displayValue",
2026
1968
  "type": {
2027
- "text": "boolean"
1969
+ "text": "string | null"
2028
1970
  }
2029
1971
  }
2030
- ]
2031
- },
2032
- {
2033
- "kind": "field",
2034
- "name": "formOwner",
2035
- "type": {
2036
- "text": "HTMLFormElement | null"
2037
- },
2038
- "readonly": true
1972
+ ],
1973
+ "description": "Computes accessible badge label from current render state."
2039
1974
  },
2040
1975
  {
2041
1976
  "kind": "method",
2042
- "name": "_handleClick",
1977
+ "name": "_computeAnchors",
2043
1978
  "privacy": "private",
2044
1979
  "return": {
2045
1980
  "type": {
2046
- "text": "void"
1981
+ "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
2047
1982
  }
2048
1983
  },
2049
1984
  "parameters": [
2050
1985
  {
2051
- "name": "event",
1986
+ "name": "placement",
2052
1987
  "type": {
2053
- "text": "MouseEvent"
1988
+ "text": "SkyBadgePlacement"
2054
1989
  }
2055
1990
  }
2056
- ]
1991
+ ],
1992
+ "description": "Resolves anchor edges from placement preset."
2057
1993
  },
2058
1994
  {
2059
1995
  "kind": "method",
2060
- "name": "_iconOnlyName",
1996
+ "name": "_resolveBadgeSurface",
2061
1997
  "privacy": "private",
2062
1998
  "return": {
2063
1999
  "type": {
2064
- "text": "string"
2000
+ "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
2065
2001
  }
2066
- }
2002
+ },
2003
+ "description": "Maps semantic status tokens to soft badge surface colors."
2004
+ }
2005
+ ],
2006
+ "events": [
2007
+ {
2008
+ "type": {
2009
+ "text": "CustomEvent<SkyBadgeClickEventDetail>"
2010
+ },
2011
+ "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
2012
+ "name": "badge-click"
2067
2013
  }
2068
2014
  ],
2069
2015
  "attributes": [
2070
2016
  {
2071
- "name": "variant",
2017
+ "name": "statusColor",
2072
2018
  "type": {
2073
- "text": "SkyButtonVariant"
2019
+ "text": "string"
2074
2020
  },
2075
- "default": "\"solid\"",
2076
- "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
2077
- "fieldName": "variant"
2021
+ "default": "\"success\"",
2022
+ "description": "Badge background token or CSS color.",
2023
+ "fieldName": "statusColor"
2078
2024
  },
2079
2025
  {
2080
- "name": "color",
2026
+ "name": "textColor",
2081
2027
  "type": {
2082
2028
  "text": "string"
2083
2029
  },
2084
- "default": "\"primary\"",
2085
- "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
2086
- "fieldName": "color"
2030
+ "default": "\"default\"",
2031
+ "description": "Text color token or CSS color.",
2032
+ "fieldName": "textColor"
2087
2033
  },
2088
2034
  {
2089
- "name": "type",
2035
+ "name": "iconColor",
2090
2036
  "type": {
2091
- "text": "SkyButtonType"
2037
+ "text": "string"
2092
2038
  },
2093
- "default": "\"button\"",
2094
- "description": "Button type attribute. Default: `\"button\"`.",
2095
- "fieldName": "type"
2039
+ "default": "\"\"",
2040
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
2041
+ "fieldName": "iconColor"
2096
2042
  },
2097
2043
  {
2098
- "name": "form",
2044
+ "name": "position",
2045
+ "type": {
2046
+ "text": "SkyBadgePosition"
2047
+ },
2048
+ "default": "\"default\"",
2049
+ "description": "Layout mode: `default | floating | inline`.",
2050
+ "fieldName": "position"
2051
+ },
2052
+ {
2053
+ "name": "value",
2099
2054
  "type": {
2100
2055
  "text": "string"
2101
2056
  },
2102
2057
  "default": "\"\"",
2103
- "description": "Associated form ID for custom submit handling.",
2104
- "fieldName": "form"
2058
+ "description": "Badge text/count or icon name in icon mode.",
2059
+ "fieldName": "value"
2060
+ },
2061
+ {
2062
+ "name": "isIcon",
2063
+ "type": {
2064
+ "text": "boolean"
2065
+ },
2066
+ "default": "false",
2067
+ "description": "Renders icon mode when true.",
2068
+ "fieldName": "isIcon"
2105
2069
  },
2106
2070
  {
2107
2071
  "name": "size",
2108
2072
  "type": {
2109
2073
  "text": "string"
2110
2074
  },
2111
- "default": "\"md\"",
2112
- "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
2075
+ "default": "\"\"",
2076
+ "description": "Badge and icon size CSS length.",
2113
2077
  "fieldName": "size"
2114
2078
  },
2115
2079
  {
2116
- "name": "radius",
2080
+ "name": "shape",
2117
2081
  "type": {
2118
- "text": "string"
2082
+ "text": "SkyBadgeShape"
2119
2083
  },
2120
- "default": "\"md\"",
2121
- "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
2122
- "fieldName": "radius"
2084
+ "default": "\"custom\"",
2085
+ "description": "Badge shape: `circle | pill | custom`.",
2086
+ "fieldName": "shape"
2123
2087
  },
2124
2088
  {
2125
- "name": "label",
2089
+ "name": "max",
2126
2090
  "type": {
2127
- "text": "string"
2091
+ "text": "number"
2128
2092
  },
2129
- "default": "\"Button\"",
2130
- "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
2131
- "fieldName": "label"
2093
+ "default": "99",
2094
+ "description": "Maximum numeric count before rendering overflow label.",
2095
+ "fieldName": "max"
2132
2096
  },
2133
2097
  {
2134
- "name": "disabled",
2098
+ "name": "hideWhenZero",
2135
2099
  "type": {
2136
2100
  "text": "boolean"
2137
2101
  },
2138
2102
  "default": "false",
2139
- "description": "Whether the button is disabled. Default: `false`.",
2140
- "fieldName": "disabled"
2103
+ "description": "Hides badge when value resolves to numeric zero.",
2104
+ "fieldName": "hideWhenZero"
2141
2105
  },
2142
2106
  {
2143
- "name": "loading",
2107
+ "name": "show",
2108
+ "type": {
2109
+ "text": "boolean"
2110
+ },
2111
+ "default": "true",
2112
+ "description": "Forces badge visibility independent of value.",
2113
+ "fieldName": "show"
2114
+ },
2115
+ {
2116
+ "name": "offsetX",
2117
+ "type": {
2118
+ "text": "string"
2119
+ },
2120
+ "default": "\"0px\"",
2121
+ "description": "Horizontal offset CSS length.",
2122
+ "fieldName": "offsetX"
2123
+ },
2124
+ {
2125
+ "name": "offsetY",
2126
+ "type": {
2127
+ "text": "string"
2128
+ },
2129
+ "default": "\"0px\"",
2130
+ "description": "Vertical offset CSS length.",
2131
+ "fieldName": "offsetY"
2132
+ },
2133
+ {
2134
+ "name": "ring",
2144
2135
  "type": {
2145
2136
  "text": "boolean"
2146
2137
  },
2147
2138
  "default": "false",
2148
- "description": "Shows a loading overlay when true. Default: `false`.",
2149
- "fieldName": "loading"
2139
+ "description": "Enables visual ring around the badge.",
2140
+ "fieldName": "ring"
2150
2141
  },
2151
2142
  {
2152
- "name": "iconL",
2143
+ "name": "ringColor",
2153
2144
  "type": {
2154
2145
  "text": "string"
2155
2146
  },
2156
- "default": "\"\"",
2157
- "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
2158
- "fieldName": "iconL"
2147
+ "default": "\"primary\"",
2148
+ "description": "Ring color token or CSS color.",
2149
+ "fieldName": "ringColor"
2150
+ },
2151
+ {
2152
+ "name": "ringOffset",
2153
+ "type": {
2154
+ "text": "string"
2155
+ },
2156
+ "default": "\"1px\"",
2157
+ "description": "Ring offset CSS length.",
2158
+ "fieldName": "ringOffset"
2159
2159
  },
2160
2160
  {
2161
- "name": "iconR",
2161
+ "name": "badgeLabel",
2162
2162
  "type": {
2163
- "text": "string"
2163
+ "text": "string | null"
2164
2164
  },
2165
- "default": "\"\"",
2166
- "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
2167
- "fieldName": "iconR"
2165
+ "default": "null",
2166
+ "description": "ARIA label override.",
2167
+ "fieldName": "badgeLabel"
2168
2168
  },
2169
2169
  {
2170
- "name": "iconOnly",
2170
+ "name": "badgeAriaHidden",
2171
2171
  "type": {
2172
2172
  "text": "boolean"
2173
2173
  },
2174
2174
  "default": "false",
2175
- "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
2176
- "fieldName": "iconOnly"
2175
+ "description": "Hides badge from assistive technology when true.",
2176
+ "fieldName": "badgeAriaHidden"
2177
2177
  },
2178
2178
  {
2179
- "name": "colors",
2179
+ "name": "interactive",
2180
2180
  "type": {
2181
- "text": "string"
2181
+ "text": "boolean"
2182
2182
  },
2183
- "default": "\"\"",
2184
- "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
2185
- "fieldName": "colors"
2183
+ "default": "false",
2184
+ "description": "Enables focus/activation and `badge-click` emission.",
2185
+ "fieldName": "interactive"
2186
2186
  },
2187
2187
  {
2188
- "name": "animation",
2188
+ "name": "placement",
2189
2189
  "type": {
2190
- "text": "SkyButtonAnimation"
2190
+ "text": "SkyBadgePlacement"
2191
2191
  },
2192
- "default": "\"auto\"",
2193
- "description": "Transform animation style. Default: `\"auto\"`.",
2194
- "fieldName": "animation"
2192
+ "default": "\"custom\"",
2193
+ "description": "Anchor placement preset for badge positioning.",
2194
+ "fieldName": "placement"
2195
2195
  }
2196
2196
  ],
2197
2197
  "superclass": {
2198
2198
  "name": "LitElement",
2199
2199
  "package": "lit"
2200
2200
  },
2201
- "tagName": "sky-button",
2201
+ "tagName": "sky-badge",
2202
2202
  "customElement": true,
2203
- "summary": "Styled button supporting variants, icons, loading state, ripple feedback, and form-associated behavior."
2203
+ "summary": "Badge for status dots, counts, or icons anchored to slotted content."
2204
2204
  }
2205
2205
  ],
2206
2206
  "exports": [
2207
2207
  {
2208
2208
  "kind": "js",
2209
- "name": "SkyButton",
2209
+ "name": "SkyBadge",
2210
2210
  "declaration": {
2211
- "name": "SkyButton",
2212
- "module": "src/sky-button/sky-button.ts"
2211
+ "name": "SkyBadge",
2212
+ "module": "src/sky-badge/sky-badge.ts"
2213
2213
  }
2214
2214
  },
2215
2215
  {
2216
2216
  "kind": "custom-element-definition",
2217
- "name": "sky-button",
2217
+ "name": "sky-badge",
2218
2218
  "declaration": {
2219
- "name": "SkyButton",
2220
- "module": "src/sky-button/sky-button.ts"
2219
+ "name": "SkyBadge",
2220
+ "module": "src/sky-badge/sky-badge.ts"
2221
2221
  }
2222
2222
  }
2223
2223
  ]
@@ -6667,308 +6667,102 @@
6667
6667
  "fieldName": "overlay"
6668
6668
  },
6669
6669
  {
6670
- "name": "width",
6671
- "type": {
6672
- "text": "string"
6673
- },
6674
- "default": "\"auto\"",
6675
- "description": "Max width of the dialog surface.",
6676
- "fieldName": "width"
6677
- },
6678
- {
6679
- "name": "separator",
6680
- "type": {
6681
- "text": "boolean"
6682
- },
6683
- "default": "false",
6684
- "description": "Shows separators around header/footer regions.",
6685
- "fieldName": "separator"
6686
- },
6687
- {
6688
- "name": "persistent",
6689
- "type": {
6690
- "text": "boolean"
6691
- },
6692
- "default": "false",
6693
- "description": "Prevents outside/Escape close and highlights surface instead.",
6694
- "fieldName": "persistent"
6695
- },
6696
- {
6697
- "name": "closeOnEsc",
6698
- "type": {
6699
- "text": "boolean"
6700
- },
6701
- "default": "false",
6702
- "description": "Enables close intent on Escape key.",
6703
- "fieldName": "closeOnEsc"
6704
- },
6705
- {
6706
- "name": "headerPadding",
6707
- "type": {
6708
- "text": "SkyDialogPadding"
6709
- },
6710
- "default": "\"sm\"",
6711
- "description": "Header padding token.",
6712
- "fieldName": "headerPadding"
6713
- },
6714
- {
6715
- "name": "bodyPadding",
6716
- "type": {
6717
- "text": "SkyDialogPadding"
6718
- },
6719
- "default": "\"sm\"",
6720
- "description": "Body padding token.",
6721
- "fieldName": "bodyPadding"
6722
- },
6723
- {
6724
- "name": "footerPadding",
6725
- "type": {
6726
- "text": "SkyDialogPadding"
6727
- },
6728
- "default": "\"sm\"",
6729
- "description": "Footer padding token.",
6730
- "fieldName": "footerPadding"
6731
- },
6732
- {
6733
- "name": "highlightOnOutsideClick",
6734
- "type": {
6735
- "text": "boolean"
6736
- },
6737
- "default": "true",
6738
- "description": "Enables highlight animation on rejected outside click.",
6739
- "fieldName": "highlightOnOutsideClick"
6740
- }
6741
- ],
6742
- "superclass": {
6743
- "name": "LitElement",
6744
- "package": "lit"
6745
- },
6746
- "tagName": "sky-dialog",
6747
- "customElement": true,
6748
- "summary": "Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling."
6749
- }
6750
- ],
6751
- "exports": [
6752
- {
6753
- "kind": "js",
6754
- "name": "SkyDialog",
6755
- "declaration": {
6756
- "name": "SkyDialog",
6757
- "module": "src/sky-dialog/sky-dialog.ts"
6758
- }
6759
- },
6760
- {
6761
- "kind": "custom-element-definition",
6762
- "name": "sky-dialog",
6763
- "declaration": {
6764
- "name": "SkyDialog",
6765
- "module": "src/sky-dialog/sky-dialog.ts"
6766
- }
6767
- }
6768
- ]
6769
- },
6770
- {
6771
- "kind": "javascript-module",
6772
- "path": "src/sky-divider/sky-divider.ts",
6773
- "declarations": [
6774
- {
6775
- "kind": "class",
6776
- "description": "",
6777
- "name": "SkyDivider",
6778
- "cssProperties": [
6779
- {
6780
- "description": "CSS custom property for divider color.",
6781
- "name": "--divider-color"
6782
- },
6783
- {
6784
- "description": "CSS custom property for divider thickness.",
6785
- "name": "--divider-thickness"
6786
- },
6787
- {
6788
- "description": "CSS custom property for divider margin.",
6789
- "name": "--divider-margin"
6790
- },
6791
- {
6792
- "description": "CSS custom property for vertical divider height.",
6793
- "name": "--divider-height"
6794
- }
6795
- ],
6796
- "cssParts": [
6797
- {
6798
- "description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
6799
- "name": "divider"
6800
- }
6801
- ],
6802
- "members": [
6803
- {
6804
- "kind": "field",
6805
- "name": "color",
6806
- "type": {
6807
- "text": "string"
6808
- },
6809
- "default": "\"muted\"",
6810
- "description": "Divider color token or CSS color.",
6811
- "privacy": "public",
6812
- "attribute": "color"
6813
- },
6814
- {
6815
- "kind": "field",
6816
- "name": "thickness",
6817
- "type": {
6818
- "text": "string"
6819
- },
6820
- "default": "\"1px\"",
6821
- "description": "Divider thickness (for example `1px` or `2px`).",
6822
- "privacy": "public",
6823
- "attribute": "thickness"
6824
- },
6825
- {
6826
- "kind": "field",
6827
- "name": "margin",
6828
- "type": {
6829
- "text": "string"
6830
- },
6831
- "default": "\"\"",
6832
- "description": "Outer margin around the divider.",
6833
- "privacy": "public",
6834
- "attribute": "margin"
6835
- },
6836
- {
6837
- "kind": "field",
6838
- "name": "direction",
6839
- "type": {
6840
- "text": "SkyDividerDirection"
6841
- },
6842
- "default": "\"horizontal\"",
6843
- "description": "Divider orientation.",
6844
- "privacy": "public",
6845
- "attribute": "direction"
6846
- },
6847
- {
6848
- "kind": "field",
6849
- "name": "inset",
6850
- "type": {
6851
- "text": "boolean"
6852
- },
6853
- "default": "false",
6854
- "description": "Enables indented divider layout.",
6855
- "privacy": "public",
6856
- "attribute": "inset"
6857
- },
6858
- {
6859
- "kind": "field",
6860
- "name": "height",
6861
- "type": {
6862
- "text": "string"
6863
- },
6864
- "default": "\"100%\"",
6865
- "description": "Height used for vertical orientation.",
6866
- "privacy": "public",
6867
- "attribute": "height"
6868
- },
6869
- {
6870
- "kind": "method",
6871
- "name": "getComputedColor",
6872
- "privacy": "public",
6873
- "return": {
6874
- "type": {
6875
- "text": ""
6876
- }
6670
+ "name": "width",
6671
+ "type": {
6672
+ "text": "string"
6877
6673
  },
6878
- "description": "Gets the current computed color of the divider."
6674
+ "default": "\"auto\"",
6675
+ "description": "Max width of the dialog surface.",
6676
+ "fieldName": "width"
6879
6677
  },
6880
6678
  {
6881
- "kind": "method",
6882
- "name": "getComputedThickness",
6883
- "privacy": "public",
6884
- "return": {
6885
- "type": {
6886
- "text": ""
6887
- }
6679
+ "name": "separator",
6680
+ "type": {
6681
+ "text": "boolean"
6888
6682
  },
6889
- "description": "Gets the current computed thickness of the divider."
6890
- }
6891
- ],
6892
- "attributes": [
6683
+ "default": "false",
6684
+ "description": "Shows separators around header/footer regions.",
6685
+ "fieldName": "separator"
6686
+ },
6893
6687
  {
6894
- "name": "color",
6688
+ "name": "persistent",
6895
6689
  "type": {
6896
- "text": "string"
6690
+ "text": "boolean"
6897
6691
  },
6898
- "default": "\"muted\"",
6899
- "description": "Divider color token or CSS color.",
6900
- "fieldName": "color"
6692
+ "default": "false",
6693
+ "description": "Prevents outside/Escape close and highlights surface instead.",
6694
+ "fieldName": "persistent"
6901
6695
  },
6902
6696
  {
6903
- "name": "thickness",
6697
+ "name": "closeOnEsc",
6904
6698
  "type": {
6905
- "text": "string"
6699
+ "text": "boolean"
6906
6700
  },
6907
- "default": "\"1px\"",
6908
- "description": "Divider thickness (for example `1px` or `2px`).",
6909
- "fieldName": "thickness"
6701
+ "default": "false",
6702
+ "description": "Enables close intent on Escape key.",
6703
+ "fieldName": "closeOnEsc"
6910
6704
  },
6911
6705
  {
6912
- "name": "margin",
6706
+ "name": "headerPadding",
6913
6707
  "type": {
6914
- "text": "string"
6708
+ "text": "SkyDialogPadding"
6915
6709
  },
6916
- "default": "\"\"",
6917
- "description": "Outer margin around the divider.",
6918
- "fieldName": "margin"
6710
+ "default": "\"sm\"",
6711
+ "description": "Header padding token.",
6712
+ "fieldName": "headerPadding"
6919
6713
  },
6920
6714
  {
6921
- "name": "direction",
6715
+ "name": "bodyPadding",
6922
6716
  "type": {
6923
- "text": "SkyDividerDirection"
6717
+ "text": "SkyDialogPadding"
6924
6718
  },
6925
- "default": "\"horizontal\"",
6926
- "description": "Divider orientation.",
6927
- "fieldName": "direction"
6719
+ "default": "\"sm\"",
6720
+ "description": "Body padding token.",
6721
+ "fieldName": "bodyPadding"
6928
6722
  },
6929
6723
  {
6930
- "name": "inset",
6724
+ "name": "footerPadding",
6931
6725
  "type": {
6932
- "text": "boolean"
6726
+ "text": "SkyDialogPadding"
6933
6727
  },
6934
- "default": "false",
6935
- "description": "Enables indented divider layout.",
6936
- "fieldName": "inset"
6728
+ "default": "\"sm\"",
6729
+ "description": "Footer padding token.",
6730
+ "fieldName": "footerPadding"
6937
6731
  },
6938
6732
  {
6939
- "name": "height",
6733
+ "name": "highlightOnOutsideClick",
6940
6734
  "type": {
6941
- "text": "string"
6735
+ "text": "boolean"
6942
6736
  },
6943
- "default": "\"100%\"",
6944
- "description": "Height used for vertical orientation.",
6945
- "fieldName": "height"
6737
+ "default": "true",
6738
+ "description": "Enables highlight animation on rejected outside click.",
6739
+ "fieldName": "highlightOnOutsideClick"
6946
6740
  }
6947
6741
  ],
6948
6742
  "superclass": {
6949
6743
  "name": "LitElement",
6950
6744
  "package": "lit"
6951
6745
  },
6952
- "tagName": "sky-divider",
6746
+ "tagName": "sky-dialog",
6953
6747
  "customElement": true,
6954
- "summary": "Visual separator component for horizontal and vertical layout separation."
6748
+ "summary": "Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling."
6955
6749
  }
6956
6750
  ],
6957
6751
  "exports": [
6958
6752
  {
6959
6753
  "kind": "js",
6960
- "name": "SkyDivider",
6754
+ "name": "SkyDialog",
6961
6755
  "declaration": {
6962
- "name": "SkyDivider",
6963
- "module": "src/sky-divider/sky-divider.ts"
6756
+ "name": "SkyDialog",
6757
+ "module": "src/sky-dialog/sky-dialog.ts"
6964
6758
  }
6965
6759
  },
6966
6760
  {
6967
6761
  "kind": "custom-element-definition",
6968
- "name": "sky-divider",
6762
+ "name": "sky-dialog",
6969
6763
  "declaration": {
6970
- "name": "SkyDivider",
6971
- "module": "src/sky-divider/sky-divider.ts"
6764
+ "name": "SkyDialog",
6765
+ "module": "src/sky-dialog/sky-dialog.ts"
6972
6766
  }
6973
6767
  }
6974
6768
  ]
@@ -7200,120 +6994,326 @@
7200
6994
  "description": "Clamps span value to valid range (1 to column count)."
7201
6995
  }
7202
6996
  ],
7203
- "events": [
6997
+ "events": [
6998
+ {
6999
+ "type": {
7000
+ "text": "Event"
7001
+ },
7002
+ "description": "Fired when slotted children change.",
7003
+ "name": "slotchange"
7004
+ }
7005
+ ],
7006
+ "attributes": [
7007
+ {
7008
+ "name": "direction",
7009
+ "type": {
7010
+ "text": "SkyFlexboxDirection"
7011
+ },
7012
+ "default": "\"row\"",
7013
+ "description": "Flex direction.",
7014
+ "fieldName": "direction"
7015
+ },
7016
+ {
7017
+ "name": "wrap",
7018
+ "type": {
7019
+ "text": "SkyFlexboxWrap"
7020
+ },
7021
+ "default": "\"wrap\"",
7022
+ "description": "Flex wrap behavior.",
7023
+ "fieldName": "wrap"
7024
+ },
7025
+ {
7026
+ "name": "justify",
7027
+ "type": {
7028
+ "text": "SkyFlexboxJustify"
7029
+ },
7030
+ "default": "\"flex-start\"",
7031
+ "description": "Main-axis alignment.",
7032
+ "fieldName": "justify"
7033
+ },
7034
+ {
7035
+ "name": "align",
7036
+ "type": {
7037
+ "text": "SkyFlexboxAlign"
7038
+ },
7039
+ "default": "\"stretch\"",
7040
+ "description": "Cross-axis alignment.",
7041
+ "fieldName": "align"
7042
+ },
7043
+ {
7044
+ "name": "alignContent",
7045
+ "type": {
7046
+ "text": "SkyFlexboxAlignContent"
7047
+ },
7048
+ "default": "\"normal\"",
7049
+ "description": "Multi-line cross-axis distribution.",
7050
+ "fieldName": "alignContent"
7051
+ },
7052
+ {
7053
+ "name": "gap",
7054
+ "type": {
7055
+ "text": "string"
7056
+ },
7057
+ "default": "\"16px\"",
7058
+ "description": "Shared row/column gap value.",
7059
+ "fieldName": "gap"
7060
+ },
7061
+ {
7062
+ "name": "gapX",
7063
+ "type": {
7064
+ "text": "string | undefined"
7065
+ },
7066
+ "description": "Horizontal gap override.",
7067
+ "fieldName": "gapX"
7068
+ },
7069
+ {
7070
+ "name": "gapY",
7071
+ "type": {
7072
+ "text": "string | undefined"
7073
+ },
7074
+ "description": "Vertical gap override.",
7075
+ "fieldName": "gapY"
7076
+ },
7077
+ {
7078
+ "name": "col",
7079
+ "type": {
7080
+ "text": "number"
7081
+ },
7082
+ "default": "12",
7083
+ "description": "Total column count used for span calculations.",
7084
+ "fieldName": "col"
7085
+ }
7086
+ ],
7087
+ "superclass": {
7088
+ "name": "LitElement",
7089
+ "package": "lit"
7090
+ },
7091
+ "tagName": "sky-flexbox",
7092
+ "customElement": true,
7093
+ "summary": "Flexbox container with grid-like span support for slotted children."
7094
+ }
7095
+ ],
7096
+ "exports": [
7097
+ {
7098
+ "kind": "js",
7099
+ "name": "SkyFlexbox",
7100
+ "declaration": {
7101
+ "name": "SkyFlexbox",
7102
+ "module": "src/sky-flexbox/sky-flexbox.ts"
7103
+ }
7104
+ },
7105
+ {
7106
+ "kind": "custom-element-definition",
7107
+ "name": "sky-flexbox",
7108
+ "declaration": {
7109
+ "name": "SkyFlexbox",
7110
+ "module": "src/sky-flexbox/sky-flexbox.ts"
7111
+ }
7112
+ }
7113
+ ]
7114
+ },
7115
+ {
7116
+ "kind": "javascript-module",
7117
+ "path": "src/sky-divider/sky-divider.ts",
7118
+ "declarations": [
7119
+ {
7120
+ "kind": "class",
7121
+ "description": "",
7122
+ "name": "SkyDivider",
7123
+ "cssProperties": [
7124
+ {
7125
+ "description": "CSS custom property for divider color.",
7126
+ "name": "--divider-color"
7127
+ },
7128
+ {
7129
+ "description": "CSS custom property for divider thickness.",
7130
+ "name": "--divider-thickness"
7131
+ },
7132
+ {
7133
+ "description": "CSS custom property for divider margin.",
7134
+ "name": "--divider-margin"
7135
+ },
7136
+ {
7137
+ "description": "CSS custom property for vertical divider height.",
7138
+ "name": "--divider-height"
7139
+ }
7140
+ ],
7141
+ "cssParts": [
7142
+ {
7143
+ "description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
7144
+ "name": "divider"
7145
+ }
7146
+ ],
7147
+ "members": [
7204
7148
  {
7149
+ "kind": "field",
7150
+ "name": "color",
7205
7151
  "type": {
7206
- "text": "Event"
7152
+ "text": "string"
7207
7153
  },
7208
- "description": "Fired when slotted children change.",
7209
- "name": "slotchange"
7210
- }
7211
- ],
7212
- "attributes": [
7154
+ "default": "\"muted\"",
7155
+ "description": "Divider color token or CSS color.",
7156
+ "privacy": "public",
7157
+ "attribute": "color"
7158
+ },
7159
+ {
7160
+ "kind": "field",
7161
+ "name": "thickness",
7162
+ "type": {
7163
+ "text": "string"
7164
+ },
7165
+ "default": "\"1px\"",
7166
+ "description": "Divider thickness (for example `1px` or `2px`).",
7167
+ "privacy": "public",
7168
+ "attribute": "thickness"
7169
+ },
7170
+ {
7171
+ "kind": "field",
7172
+ "name": "margin",
7173
+ "type": {
7174
+ "text": "string"
7175
+ },
7176
+ "default": "\"\"",
7177
+ "description": "Outer margin around the divider.",
7178
+ "privacy": "public",
7179
+ "attribute": "margin"
7180
+ },
7213
7181
  {
7182
+ "kind": "field",
7214
7183
  "name": "direction",
7215
7184
  "type": {
7216
- "text": "SkyFlexboxDirection"
7185
+ "text": "SkyDividerDirection"
7217
7186
  },
7218
- "default": "\"row\"",
7219
- "description": "Flex direction.",
7220
- "fieldName": "direction"
7187
+ "default": "\"horizontal\"",
7188
+ "description": "Divider orientation.",
7189
+ "privacy": "public",
7190
+ "attribute": "direction"
7221
7191
  },
7222
7192
  {
7223
- "name": "wrap",
7193
+ "kind": "field",
7194
+ "name": "inset",
7224
7195
  "type": {
7225
- "text": "SkyFlexboxWrap"
7196
+ "text": "boolean"
7226
7197
  },
7227
- "default": "\"wrap\"",
7228
- "description": "Flex wrap behavior.",
7229
- "fieldName": "wrap"
7198
+ "default": "false",
7199
+ "description": "Enables indented divider layout.",
7200
+ "privacy": "public",
7201
+ "attribute": "inset"
7230
7202
  },
7231
7203
  {
7232
- "name": "justify",
7204
+ "kind": "field",
7205
+ "name": "height",
7233
7206
  "type": {
7234
- "text": "SkyFlexboxJustify"
7207
+ "text": "string"
7235
7208
  },
7236
- "default": "\"flex-start\"",
7237
- "description": "Main-axis alignment.",
7238
- "fieldName": "justify"
7209
+ "default": "\"100%\"",
7210
+ "description": "Height used for vertical orientation.",
7211
+ "privacy": "public",
7212
+ "attribute": "height"
7239
7213
  },
7240
7214
  {
7241
- "name": "align",
7215
+ "kind": "method",
7216
+ "name": "getComputedColor",
7217
+ "privacy": "public",
7218
+ "return": {
7219
+ "type": {
7220
+ "text": ""
7221
+ }
7222
+ },
7223
+ "description": "Gets the current computed color of the divider."
7224
+ },
7225
+ {
7226
+ "kind": "method",
7227
+ "name": "getComputedThickness",
7228
+ "privacy": "public",
7229
+ "return": {
7230
+ "type": {
7231
+ "text": ""
7232
+ }
7233
+ },
7234
+ "description": "Gets the current computed thickness of the divider."
7235
+ }
7236
+ ],
7237
+ "attributes": [
7238
+ {
7239
+ "name": "color",
7242
7240
  "type": {
7243
- "text": "SkyFlexboxAlign"
7241
+ "text": "string"
7244
7242
  },
7245
- "default": "\"stretch\"",
7246
- "description": "Cross-axis alignment.",
7247
- "fieldName": "align"
7243
+ "default": "\"muted\"",
7244
+ "description": "Divider color token or CSS color.",
7245
+ "fieldName": "color"
7248
7246
  },
7249
7247
  {
7250
- "name": "alignContent",
7248
+ "name": "thickness",
7251
7249
  "type": {
7252
- "text": "SkyFlexboxAlignContent"
7250
+ "text": "string"
7253
7251
  },
7254
- "default": "\"normal\"",
7255
- "description": "Multi-line cross-axis distribution.",
7256
- "fieldName": "alignContent"
7252
+ "default": "\"1px\"",
7253
+ "description": "Divider thickness (for example `1px` or `2px`).",
7254
+ "fieldName": "thickness"
7257
7255
  },
7258
7256
  {
7259
- "name": "gap",
7257
+ "name": "margin",
7260
7258
  "type": {
7261
7259
  "text": "string"
7262
7260
  },
7263
- "default": "\"16px\"",
7264
- "description": "Shared row/column gap value.",
7265
- "fieldName": "gap"
7261
+ "default": "\"\"",
7262
+ "description": "Outer margin around the divider.",
7263
+ "fieldName": "margin"
7266
7264
  },
7267
7265
  {
7268
- "name": "gapX",
7266
+ "name": "direction",
7269
7267
  "type": {
7270
- "text": "string | undefined"
7268
+ "text": "SkyDividerDirection"
7271
7269
  },
7272
- "description": "Horizontal gap override.",
7273
- "fieldName": "gapX"
7270
+ "default": "\"horizontal\"",
7271
+ "description": "Divider orientation.",
7272
+ "fieldName": "direction"
7274
7273
  },
7275
7274
  {
7276
- "name": "gapY",
7275
+ "name": "inset",
7277
7276
  "type": {
7278
- "text": "string | undefined"
7277
+ "text": "boolean"
7279
7278
  },
7280
- "description": "Vertical gap override.",
7281
- "fieldName": "gapY"
7279
+ "default": "false",
7280
+ "description": "Enables indented divider layout.",
7281
+ "fieldName": "inset"
7282
7282
  },
7283
7283
  {
7284
- "name": "col",
7284
+ "name": "height",
7285
7285
  "type": {
7286
- "text": "number"
7286
+ "text": "string"
7287
7287
  },
7288
- "default": "12",
7289
- "description": "Total column count used for span calculations.",
7290
- "fieldName": "col"
7288
+ "default": "\"100%\"",
7289
+ "description": "Height used for vertical orientation.",
7290
+ "fieldName": "height"
7291
7291
  }
7292
7292
  ],
7293
7293
  "superclass": {
7294
7294
  "name": "LitElement",
7295
7295
  "package": "lit"
7296
7296
  },
7297
- "tagName": "sky-flexbox",
7297
+ "tagName": "sky-divider",
7298
7298
  "customElement": true,
7299
- "summary": "Flexbox container with grid-like span support for slotted children."
7299
+ "summary": "Visual separator component for horizontal and vertical layout separation."
7300
7300
  }
7301
7301
  ],
7302
7302
  "exports": [
7303
7303
  {
7304
7304
  "kind": "js",
7305
- "name": "SkyFlexbox",
7305
+ "name": "SkyDivider",
7306
7306
  "declaration": {
7307
- "name": "SkyFlexbox",
7308
- "module": "src/sky-flexbox/sky-flexbox.ts"
7307
+ "name": "SkyDivider",
7308
+ "module": "src/sky-divider/sky-divider.ts"
7309
7309
  }
7310
7310
  },
7311
7311
  {
7312
7312
  "kind": "custom-element-definition",
7313
- "name": "sky-flexbox",
7313
+ "name": "sky-divider",
7314
7314
  "declaration": {
7315
- "name": "SkyFlexbox",
7316
- "module": "src/sky-flexbox/sky-flexbox.ts"
7315
+ "name": "SkyDivider",
7316
+ "module": "src/sky-divider/sky-divider.ts"
7317
7317
  }
7318
7318
  }
7319
7319
  ]
@@ -12122,6 +12122,49 @@
12122
12122
  }
12123
12123
  ]
12124
12124
  },
12125
+ {
12126
+ "kind": "javascript-module",
12127
+ "path": "src/sky-row/sky-row.ts",
12128
+ "declarations": [
12129
+ {
12130
+ "kind": "class",
12131
+ "description": "",
12132
+ "name": "SkyRow",
12133
+ "slots": [
12134
+ {
12135
+ "description": "Default slot for child content.",
12136
+ "name": ""
12137
+ }
12138
+ ],
12139
+ "members": [],
12140
+ "superclass": {
12141
+ "name": "LitElement",
12142
+ "package": "lit"
12143
+ },
12144
+ "tagName": "sky-row",
12145
+ "customElement": true,
12146
+ "summary": "Lightweight semantic row wrapper for use inside `sky-grid`."
12147
+ }
12148
+ ],
12149
+ "exports": [
12150
+ {
12151
+ "kind": "js",
12152
+ "name": "SkyRow",
12153
+ "declaration": {
12154
+ "name": "SkyRow",
12155
+ "module": "src/sky-row/sky-row.ts"
12156
+ }
12157
+ },
12158
+ {
12159
+ "kind": "custom-element-definition",
12160
+ "name": "sky-row",
12161
+ "declaration": {
12162
+ "name": "SkyRow",
12163
+ "module": "src/sky-row/sky-row.ts"
12164
+ }
12165
+ }
12166
+ ]
12167
+ },
12125
12168
  {
12126
12169
  "kind": "javascript-module",
12127
12170
  "path": "src/sky-sheet/sky-sheet.ts",
@@ -12304,49 +12347,6 @@
12304
12347
  }
12305
12348
  ]
12306
12349
  },
12307
- {
12308
- "kind": "javascript-module",
12309
- "path": "src/sky-row/sky-row.ts",
12310
- "declarations": [
12311
- {
12312
- "kind": "class",
12313
- "description": "",
12314
- "name": "SkyRow",
12315
- "slots": [
12316
- {
12317
- "description": "Default slot for child content.",
12318
- "name": ""
12319
- }
12320
- ],
12321
- "members": [],
12322
- "superclass": {
12323
- "name": "LitElement",
12324
- "package": "lit"
12325
- },
12326
- "tagName": "sky-row",
12327
- "customElement": true,
12328
- "summary": "Lightweight semantic row wrapper for use inside `sky-grid`."
12329
- }
12330
- ],
12331
- "exports": [
12332
- {
12333
- "kind": "js",
12334
- "name": "SkyRow",
12335
- "declaration": {
12336
- "name": "SkyRow",
12337
- "module": "src/sky-row/sky-row.ts"
12338
- }
12339
- },
12340
- {
12341
- "kind": "custom-element-definition",
12342
- "name": "sky-row",
12343
- "declaration": {
12344
- "name": "SkyRow",
12345
- "module": "src/sky-row/sky-row.ts"
12346
- }
12347
- }
12348
- ]
12349
- },
12350
12350
  {
12351
12351
  "kind": "javascript-module",
12352
12352
  "path": "src/sky-simple-table/sky-simple-table.ts",