@sky.ui/core 0.0.27 → 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 (9) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/custom-elements.json +1257 -1257
  3. package/package.json +15 -1
  4. package/plugins/ce-auto-import.d.ts +18 -0
  5. package/plugins/ce-auto-import.js +160 -0
  6. package/plugins/stack-resolvers.d.ts +10 -0
  7. package/plugins/stack-resolvers.js +43 -0
  8. package/plugins/vite-plugin.d.ts +6 -1
  9. package/plugins/vite-plugin.js +28 -7
package/dist/custom-elements.json CHANGED
@@ -451,6 +451,238 @@
451
451
  }
452
452
  ]
453
453
  },
454
+ {
455
+ "kind": "javascript-module",
456
+ "path": "src/sky-appbar/sky-appbar.ts",
457
+ "declarations": [
458
+ {
459
+ "kind": "class",
460
+ "description": "",
461
+ "name": "SkyAppbar",
462
+ "cssParts": [
463
+ {
464
+ "description": "Wrapper that contains the leading slot, title, and actions.",
465
+ "name": "content"
466
+ },
467
+ {
468
+ "description": "Container for the leading slot (e.g. menu button).",
469
+ "name": "leading"
470
+ },
471
+ {
472
+ "description": "The title area (contains .title-text with the title string).",
473
+ "name": "title"
474
+ },
475
+ {
476
+ "description": "The trailing actions container.",
477
+ "name": "actions"
478
+ }
479
+ ],
480
+ "slots": [
481
+ {
482
+ "description": "Leading area (e.g., menu/back button). Defaults to a hamburger icon.",
483
+ "name": "button"
484
+ },
485
+ {
486
+ "description": "Trailing actions (icons/buttons). This is the default slot.",
487
+ "name": ""
488
+ }
489
+ ],
490
+ "members": [
491
+ {
492
+ "kind": "field",
493
+ "name": "dependencies",
494
+ "type": {
495
+ "text": "Record<string, CustomElementConstructor>"
496
+ },
497
+ "static": true,
498
+ "default": "{ \"sky-icon\": SkyIcon, }"
499
+ },
500
+ {
501
+ "kind": "field",
502
+ "name": "title",
503
+ "type": {
504
+ "text": "string"
505
+ },
506
+ "default": "\"App Bar\"",
507
+ "description": "Title text displayed in the app bar.",
508
+ "attribute": "title"
509
+ },
510
+ {
511
+ "kind": "field",
512
+ "name": "color",
513
+ "type": {
514
+ "text": "string"
515
+ },
516
+ "default": "\"default\"",
517
+ "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
518
+ "attribute": "color"
519
+ },
520
+ {
521
+ "kind": "field",
522
+ "name": "url",
523
+ "type": {
524
+ "text": "string"
525
+ },
526
+ "default": "\"\"",
527
+ "description": "Background image URL.",
528
+ "attribute": "url"
529
+ },
530
+ {
531
+ "kind": "field",
532
+ "name": "banner",
533
+ "type": {
534
+ "text": "boolean"
535
+ },
536
+ "default": "true",
537
+ "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
538
+ "attribute": "banner"
539
+ },
540
+ {
541
+ "kind": "field",
542
+ "name": "dense",
543
+ "type": {
544
+ "text": "boolean"
545
+ },
546
+ "default": "false",
547
+ "description": "Enables compact vertical spacing.",
548
+ "attribute": "dense"
549
+ },
550
+ {
551
+ "kind": "field",
552
+ "name": "elevated",
553
+ "type": {
554
+ "text": "boolean"
555
+ },
556
+ "default": "false",
557
+ "description": "Applies elevated shadow styling.",
558
+ "attribute": "elevated"
559
+ },
560
+ {
561
+ "kind": "field",
562
+ "name": "leadingLabel",
563
+ "type": {
564
+ "text": "string"
565
+ },
566
+ "default": "\"Open menu\"",
567
+ "description": "Accessible label for default leading button fallback.",
568
+ "attribute": "leadingLabel"
569
+ },
570
+ {
571
+ "kind": "method",
572
+ "name": "_applyColorSurface",
573
+ "privacy": "private",
574
+ "return": {
575
+ "type": {
576
+ "text": "void"
577
+ }
578
+ },
579
+ "description": "Applies glass vs solid surface tokens from `color`."
580
+ },
581
+ {
582
+ "kind": "method",
583
+ "name": "_applyBackgroundImage",
584
+ "privacy": "private",
585
+ "return": {
586
+ "type": {
587
+ "text": "void"
588
+ }
589
+ },
590
+ "description": "Sets background image CSS variable from `url`."
591
+ }
592
+ ],
593
+ "attributes": [
594
+ {
595
+ "name": "title",
596
+ "type": {
597
+ "text": "string"
598
+ },
599
+ "default": "\"App Bar\"",
600
+ "description": "Title text displayed in the app bar.",
601
+ "fieldName": "title"
602
+ },
603
+ {
604
+ "name": "color",
605
+ "type": {
606
+ "text": "string"
607
+ },
608
+ "default": "\"default\"",
609
+ "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
610
+ "fieldName": "color"
611
+ },
612
+ {
613
+ "name": "url",
614
+ "type": {
615
+ "text": "string"
616
+ },
617
+ "default": "\"\"",
618
+ "description": "Background image URL.",
619
+ "fieldName": "url"
620
+ },
621
+ {
622
+ "name": "banner",
623
+ "type": {
624
+ "text": "boolean"
625
+ },
626
+ "default": "true",
627
+ "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
628
+ "fieldName": "banner"
629
+ },
630
+ {
631
+ "name": "dense",
632
+ "type": {
633
+ "text": "boolean"
634
+ },
635
+ "default": "false",
636
+ "description": "Enables compact vertical spacing.",
637
+ "fieldName": "dense"
638
+ },
639
+ {
640
+ "name": "elevated",
641
+ "type": {
642
+ "text": "boolean"
643
+ },
644
+ "default": "false",
645
+ "description": "Applies elevated shadow styling.",
646
+ "fieldName": "elevated"
647
+ },
648
+ {
649
+ "name": "leadingLabel",
650
+ "type": {
651
+ "text": "string"
652
+ },
653
+ "default": "\"Open menu\"",
654
+ "description": "Accessible label for default leading button fallback.",
655
+ "fieldName": "leadingLabel"
656
+ }
657
+ ],
658
+ "superclass": {
659
+ "name": "LitElement",
660
+ "package": "lit"
661
+ },
662
+ "tagName": "sky-appbar",
663
+ "customElement": true,
664
+ "summary": "Application top bar with title, optional leading control, trailing actions, and optional color/image background."
665
+ }
666
+ ],
667
+ "exports": [
668
+ {
669
+ "kind": "js",
670
+ "name": "SkyAppbar",
671
+ "declaration": {
672
+ "name": "SkyAppbar",
673
+ "module": "src/sky-appbar/sky-appbar.ts"
674
+ }
675
+ },
676
+ {
677
+ "kind": "custom-element-definition",
678
+ "name": "sky-appbar",
679
+ "declaration": {
680
+ "name": "SkyAppbar",
681
+ "module": "src/sky-appbar/sky-appbar.ts"
682
+ }
683
+ }
684
+ ]
685
+ },
454
686
  {
455
687
  "kind": "javascript-module",
456
688
  "path": "src/sky-avatar/sky-avatar.ts",
@@ -824,37 +1056,33 @@
824
1056
  },
825
1057
  {
826
1058
  "kind": "javascript-module",
827
- "path": "src/sky-appbar/sky-appbar.ts",
1059
+ "path": "src/sky-button/sky-button.ts",
828
1060
  "declarations": [
829
1061
  {
830
1062
  "kind": "class",
831
1063
  "description": "",
832
- "name": "SkyAppbar",
1064
+ "name": "SkyButton",
833
1065
  "cssParts": [
834
1066
  {
835
- "description": "Wrapper that contains the leading slot, title, and actions.",
836
- "name": "content"
1067
+ "description": "The native `<button>` element.",
1068
+ "name": "button"
837
1069
  },
838
1070
  {
839
- "description": "Container for the leading slot (e.g. menu button).",
840
- "name": "leading"
1071
+ "description": "The optional left/right icons.",
1072
+ "name": "icon"
841
1073
  },
842
1074
  {
843
- "description": "The title area (contains .title-text with the title string).",
844
- "name": "title"
1075
+ "description": "Overlay displayed when loading.",
1076
+ "name": "loading-overlay"
845
1077
  },
846
1078
  {
847
- "description": "The trailing actions container.",
848
- "name": "actions"
1079
+ "description": "Spinner displayed when loading.",
1080
+ "name": "spinner"
849
1081
  }
850
1082
  ],
851
1083
  "slots": [
852
1084
  {
853
- "description": "Leading area (e.g., menu/back button). Defaults to a hamburger icon.",
854
- "name": "button"
855
- },
856
- {
857
- "description": "Trailing actions (icons/buttons). This is the default slot.",
1085
+ "description": "Default slot for the button label (replaces `label` property if used).",
858
1086
  "name": ""
859
1087
  }
860
1088
  ],
@@ -870,490 +1098,309 @@
870
1098
  },
871
1099
  {
872
1100
  "kind": "field",
873
- "name": "title",
874
- "type": {
875
- "text": "string"
876
- },
877
- "default": "\"App Bar\"",
878
- "description": "Title text displayed in the app bar.",
879
- "attribute": "title"
880
- },
881
- {
882
- "kind": "field",
883
- "name": "color",
1101
+ "name": "formAssociated",
884
1102
  "type": {
885
- "text": "string"
1103
+ "text": "boolean"
886
1104
  },
887
- "default": "\"default\"",
888
- "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
889
- "attribute": "color"
1105
+ "static": true,
1106
+ "default": "true"
890
1107
  },
891
1108
  {
892
1109
  "kind": "field",
893
- "name": "url",
1110
+ "name": "internals",
894
1111
  "type": {
895
- "text": "string"
1112
+ "text": "ElementInternals"
896
1113
  },
897
- "default": "\"\"",
898
- "description": "Background image URL.",
899
- "attribute": "url"
1114
+ "privacy": "private"
900
1115
  },
901
1116
  {
902
1117
  "kind": "field",
903
- "name": "banner",
1118
+ "name": "variant",
904
1119
  "type": {
905
- "text": "boolean"
1120
+ "text": "SkyButtonVariant"
906
1121
  },
907
- "default": "true",
908
- "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
909
- "attribute": "banner"
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",
1125
+ "reflects": true
910
1126
  },
911
1127
  {
912
1128
  "kind": "field",
913
- "name": "dense",
1129
+ "name": "color",
914
1130
  "type": {
915
- "text": "boolean"
1131
+ "text": "string"
916
1132
  },
917
- "default": "false",
918
- "description": "Enables compact vertical spacing.",
919
- "attribute": "dense"
1133
+ "default": "\"primary\"",
1134
+ "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1135
+ "attribute": "color"
920
1136
  },
921
1137
  {
922
1138
  "kind": "field",
923
- "name": "elevated",
1139
+ "name": "type",
924
1140
  "type": {
925
- "text": "boolean"
1141
+ "text": "SkyButtonType"
926
1142
  },
927
- "default": "false",
928
- "description": "Applies elevated shadow styling.",
929
- "attribute": "elevated"
1143
+ "default": "\"button\"",
1144
+ "description": "Button type attribute. Default: `\"button\"`.",
1145
+ "attribute": "type"
930
1146
  },
931
1147
  {
932
1148
  "kind": "field",
933
- "name": "leadingLabel",
1149
+ "name": "form",
934
1150
  "type": {
935
1151
  "text": "string"
936
1152
  },
937
- "default": "\"Open menu\"",
938
- "description": "Accessible label for default leading button fallback.",
939
- "attribute": "leadingLabel"
940
- },
941
- {
942
- "kind": "method",
943
- "name": "_applyColorSurface",
944
- "privacy": "private",
945
- "return": {
946
- "type": {
947
- "text": "void"
948
- }
949
- },
950
- "description": "Applies glass vs solid surface tokens from `color`."
1153
+ "default": "\"\"",
1154
+ "description": "Associated form ID for custom submit handling.",
1155
+ "attribute": "form"
951
1156
  },
952
1157
  {
953
- "kind": "method",
954
- "name": "_applyBackgroundImage",
955
- "privacy": "private",
956
- "return": {
957
- "type": {
958
- "text": "void"
959
- }
960
- },
961
- "description": "Sets background image CSS variable from `url`."
962
- }
963
- ],
964
- "attributes": [
965
- {
966
- "name": "title",
1158
+ "kind": "field",
1159
+ "name": "size",
967
1160
  "type": {
968
1161
  "text": "string"
969
1162
  },
970
- "default": "\"App Bar\"",
971
- "description": "Title text displayed in the app bar.",
972
- "fieldName": "title"
1163
+ "default": "\"md\"",
1164
+ "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1165
+ "attribute": "size"
973
1166
  },
974
1167
  {
975
- "name": "color",
1168
+ "kind": "field",
1169
+ "name": "radius",
976
1170
  "type": {
977
1171
  "text": "string"
978
1172
  },
979
- "default": "\"default\"",
980
- "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
981
- "fieldName": "color"
1173
+ "default": "\"md\"",
1174
+ "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
1175
+ "attribute": "radius"
982
1176
  },
983
1177
  {
984
- "name": "url",
1178
+ "kind": "field",
1179
+ "name": "label",
985
1180
  "type": {
986
1181
  "text": "string"
987
1182
  },
988
- "default": "\"\"",
989
- "description": "Background image URL.",
990
- "fieldName": "url"
991
- },
992
- {
993
- "name": "banner",
994
- "type": {
995
- "text": "boolean"
996
- },
997
- "default": "true",
998
- "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
999
- "fieldName": "banner"
1183
+ "default": "\"Button\"",
1184
+ "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
1185
+ "attribute": "label"
1000
1186
  },
1001
1187
  {
1002
- "name": "dense",
1188
+ "kind": "field",
1189
+ "name": "disabled",
1003
1190
  "type": {
1004
1191
  "text": "boolean"
1005
1192
  },
1006
1193
  "default": "false",
1007
- "description": "Enables compact vertical spacing.",
1008
- "fieldName": "dense"
1194
+ "description": "Whether the button is disabled. Default: `false`.",
1195
+ "attribute": "disabled",
1196
+ "reflects": true
1009
1197
  },
1010
1198
  {
1011
- "name": "elevated",
1199
+ "kind": "field",
1200
+ "name": "loading",
1012
1201
  "type": {
1013
1202
  "text": "boolean"
1014
1203
  },
1015
1204
  "default": "false",
1016
- "description": "Applies elevated shadow styling.",
1017
- "fieldName": "elevated"
1205
+ "description": "Shows a loading overlay when true. Default: `false`.",
1206
+ "attribute": "loading",
1207
+ "reflects": true
1018
1208
  },
1019
1209
  {
1020
- "name": "leadingLabel",
1210
+ "kind": "field",
1211
+ "name": "iconL",
1021
1212
  "type": {
1022
1213
  "text": "string"
1023
1214
  },
1024
- "default": "\"Open menu\"",
1025
- "description": "Accessible label for default leading button fallback.",
1026
- "fieldName": "leadingLabel"
1027
- }
1028
- ],
1029
- "superclass": {
1030
- "name": "LitElement",
1031
- "package": "lit"
1032
- },
1033
- "tagName": "sky-appbar",
1034
- "customElement": true,
1035
- "summary": "Application top bar with title, optional leading control, trailing actions, and optional color/image background."
1036
- }
1037
- ],
1038
- "exports": [
1039
- {
1040
- "kind": "js",
1041
- "name": "SkyAppbar",
1042
- "declaration": {
1043
- "name": "SkyAppbar",
1044
- "module": "src/sky-appbar/sky-appbar.ts"
1045
- }
1046
- },
1047
- {
1048
- "kind": "custom-element-definition",
1049
- "name": "sky-appbar",
1050
- "declaration": {
1051
- "name": "SkyAppbar",
1052
- "module": "src/sky-appbar/sky-appbar.ts"
1053
- }
1054
- }
1055
- ]
1056
- },
1057
- {
1058
- "kind": "javascript-module",
1059
- "path": "src/sky-badge/sky-badge.ts",
1060
- "declarations": [
1061
- {
1062
- "kind": "class",
1063
- "description": "",
1064
- "name": "SkyBadge",
1065
- "cssParts": [
1066
- {
1067
- "description": "Wrapper around the slotted content and the badge.",
1068
- "name": "container"
1069
- },
1070
- {
1071
- "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
1072
- "name": "badge"
1073
- },
1074
- {
1075
- "description": "The icon element when `isIcon` is true.",
1076
- "name": "icon"
1077
- }
1078
- ],
1079
- "slots": [
1080
- {
1081
- "description": "The content the badge attaches to.",
1082
- "name": ""
1215
+ "default": "\"\"",
1216
+ "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
1217
+ "attribute": "iconL"
1083
1218
  },
1084
- {
1085
- "description": "Optional slot to override the badge content entirely.",
1086
- "name": "badge"
1087
- }
1088
- ],
1089
- "members": [
1090
1219
  {
1091
1220
  "kind": "field",
1092
- "name": "dependencies",
1221
+ "name": "iconR",
1093
1222
  "type": {
1094
- "text": "Record<string, CustomElementConstructor>"
1223
+ "text": "string"
1095
1224
  },
1096
- "static": true,
1097
- "default": "{ \"sky-icon\": SkyIcon, }"
1225
+ "default": "\"\"",
1226
+ "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
1227
+ "attribute": "iconR"
1098
1228
  },
1099
1229
  {
1100
1230
  "kind": "field",
1101
- "name": "statusColor",
1231
+ "name": "iconOnly",
1102
1232
  "type": {
1103
- "text": "string"
1233
+ "text": "boolean"
1104
1234
  },
1105
- "default": "\"success\"",
1106
- "description": "Badge background token or CSS color.",
1107
- "attribute": "statusColor",
1235
+ "default": "false",
1236
+ "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
1237
+ "attribute": "iconOnly",
1108
1238
  "reflects": true
1109
1239
  },
1110
1240
  {
1111
1241
  "kind": "field",
1112
- "name": "textColor",
1242
+ "name": "colors",
1113
1243
  "type": {
1114
1244
  "text": "string"
1115
1245
  },
1116
- "default": "\"default\"",
1117
- "description": "Text color token or CSS color.",
1118
- "attribute": "textColor",
1119
- "reflects": true
1246
+ "default": "\"\"",
1247
+ "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
1248
+ "attribute": "colors"
1120
1249
  },
1121
1250
  {
1122
1251
  "kind": "field",
1123
- "name": "iconColor",
1252
+ "name": "animation",
1124
1253
  "type": {
1125
- "text": "string"
1254
+ "text": "SkyButtonAnimation"
1126
1255
  },
1127
- "default": "\"\"",
1128
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1129
- "attribute": "iconColor",
1256
+ "default": "\"auto\"",
1257
+ "description": "Transform animation style. Default: `\"auto\"`.",
1258
+ "attribute": "animation",
1130
1259
  "reflects": true
1131
1260
  },
1132
1261
  {
1133
1262
  "kind": "field",
1134
- "name": "position",
1135
- "type": {
1136
- "text": "SkyBadgePosition"
1137
- },
1138
- "default": "\"default\"",
1139
- "description": "Layout mode: `default | floating | inline`.",
1140
- "attribute": "position",
1141
- "reflects": true
1142
- },
1143
- {
1144
- "kind": "field",
1145
- "name": "value",
1146
- "type": {
1147
- "text": "string"
1148
- },
1149
- "default": "\"\"",
1150
- "description": "Badge text/count or icon name in icon mode.",
1151
- "attribute": "value"
1152
- },
1153
- {
1154
- "kind": "field",
1155
- "name": "isIcon",
1263
+ "name": "_hasMeaningfulSlot",
1156
1264
  "type": {
1157
1265
  "text": "boolean"
1158
1266
  },
1159
- "default": "false",
1160
- "description": "Renders icon mode when true.",
1161
- "attribute": "isIcon",
1162
- "reflects": true
1163
- },
1164
- {
1165
- "kind": "field",
1166
- "name": "size",
1167
- "type": {
1168
- "text": "string"
1169
- },
1170
- "default": "\"\"",
1171
- "description": "Badge and icon size CSS length.",
1172
- "attribute": "size",
1173
- "reflects": true
1174
- },
1175
- {
1176
- "kind": "field",
1177
- "name": "shape",
1178
- "type": {
1179
- "text": "SkyBadgeShape"
1180
- },
1181
- "default": "\"custom\"",
1182
- "description": "Badge shape: `circle | pill | custom`.",
1183
- "attribute": "shape",
1184
- "reflects": true
1185
- },
1186
- {
1187
- "kind": "field",
1188
- "name": "max",
1189
- "type": {
1190
- "text": "number"
1191
- },
1192
- "default": "99",
1193
- "description": "Maximum numeric count before rendering overflow label.",
1194
- "attribute": "max"
1195
- },
1196
- {
1197
- "kind": "field",
1198
- "name": "hideWhenZero",
1199
- "type": {
1200
- "text": "boolean"
1201
- },
1202
- "default": "false",
1203
- "description": "Hides badge when value resolves to numeric zero.",
1204
- "attribute": "hideWhenZero"
1205
- },
1206
- {
1207
- "kind": "field",
1208
- "name": "show",
1209
- "type": {
1210
- "text": "boolean"
1211
- },
1212
- "default": "true",
1213
- "description": "Forces badge visibility independent of value.",
1214
- "attribute": "show",
1215
- "reflects": true
1216
- },
1217
- {
1218
- "kind": "field",
1219
- "name": "offsetX",
1220
- "type": {
1221
- "text": "string"
1222
- },
1223
- "default": "\"0px\"",
1224
- "description": "Horizontal offset CSS length.",
1225
- "attribute": "offsetX"
1226
- },
1227
- {
1228
- "kind": "field",
1229
- "name": "offsetY",
1230
- "type": {
1231
- "text": "string"
1232
- },
1233
- "default": "\"0px\"",
1234
- "description": "Vertical offset CSS length.",
1235
- "attribute": "offsetY"
1236
- },
1237
- {
1238
- "kind": "field",
1239
- "name": "ring",
1240
- "type": {
1241
- "text": "boolean"
1242
- },
1243
- "default": "false",
1244
- "description": "Enables visual ring around the badge.",
1245
- "attribute": "ring"
1246
- },
1247
- {
1248
- "kind": "field",
1249
- "name": "ringColor",
1250
- "type": {
1251
- "text": "string"
1252
- },
1253
- "default": "\"primary\"",
1254
- "description": "Ring color token or CSS color.",
1255
- "attribute": "ringColor"
1267
+ "privacy": "private",
1268
+ "default": "false"
1256
1269
  },
1257
1270
  {
1258
1271
  "kind": "field",
1259
- "name": "ringOffset",
1272
+ "name": "_styleVars",
1260
1273
  "type": {
1261
- "text": "string"
1274
+ "text": "Record<string, string>"
1262
1275
  },
1263
- "default": "\"1px\"",
1264
- "description": "Ring offset CSS length.",
1265
- "attribute": "ringOffset"
1276
+ "privacy": "private",
1277
+ "default": "{}",
1278
+ "description": "Inline CSS variable cache."
1266
1279
  },
1267
1280
  {
1268
- "kind": "field",
1269
- "name": "badgeLabel",
1270
- "type": {
1271
- "text": "string | null"
1281
+ "kind": "method",
1282
+ "name": "_slotHasMeaningfulContent",
1283
+ "privacy": "private",
1284
+ "return": {
1285
+ "type": {
1286
+ "text": "boolean"
1287
+ }
1272
1288
  },
1273
- "default": "null",
1274
- "description": "ARIA label override.",
1275
- "attribute": "badgeLabel"
1289
+ "parameters": [
1290
+ {
1291
+ "name": "slotEl",
1292
+ "type": {
1293
+ "text": "HTMLSlotElement"
1294
+ }
1295
+ }
1296
+ ]
1276
1297
  },
1277
1298
  {
1278
1299
  "kind": "field",
1279
- "name": "badgeAriaHidden",
1280
- "type": {
1281
- "text": "boolean"
1282
- },
1283
- "default": "false",
1284
- "description": "Hides badge from assistive technology when true.",
1285
- "attribute": "badgeAriaHidden"
1300
+ "name": "_onSlotChange",
1301
+ "privacy": "private"
1286
1302
  },
1287
1303
  {
1288
- "kind": "field",
1289
- "name": "interactive",
1290
- "type": {
1291
- "text": "boolean"
1304
+ "kind": "method",
1305
+ "name": "_toSquarePadding",
1306
+ "privacy": "private",
1307
+ "return": {
1308
+ "type": {
1309
+ "text": "string"
1310
+ }
1292
1311
  },
1293
- "default": "false",
1294
- "description": "Enables focus/activation and `badge-click` emission.",
1295
- "attribute": "interactive"
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)."
1296
1321
  },
1297
1322
  {
1298
- "kind": "field",
1299
- "name": "placement",
1300
- "type": {
1301
- "text": "SkyBadgePlacement"
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
+ }
1302
1330
  },
1303
- "default": "\"custom\"",
1304
- "description": "Anchor placement preset for badge positioning.",
1305
- "attribute": "placement",
1306
- "reflects": true
1331
+ "parameters": [
1332
+ {
1333
+ "name": "input",
1334
+ "type": {
1335
+ "text": "string"
1336
+ }
1337
+ }
1338
+ ]
1307
1339
  },
1308
1340
  {
1309
- "kind": "field",
1310
- "name": "_badgeEl",
1311
- "type": {
1312
- "text": "HTMLSpanElement"
1341
+ "kind": "method",
1342
+ "name": "_isThemeBorderShorthand",
1343
+ "privacy": "private",
1344
+ "return": {
1345
+ "type": {
1346
+ "text": "boolean"
1347
+ }
1313
1348
  },
1314
- "privacy": "private"
1315
- },
1316
- {
1317
- "kind": "field",
1318
- "name": "badgeRef",
1319
- "privacy": "public",
1320
- "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
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."
1321
1358
  },
1322
1359
  {
1323
- "kind": "field",
1324
- "name": "shadowRootOptions",
1325
- "type": {
1326
- "text": "ShadowRootInit"
1360
+ "kind": "method",
1361
+ "name": "_borderColorFromShorthand",
1362
+ "privacy": "private",
1363
+ "return": {
1364
+ "type": {
1365
+ "text": "string"
1366
+ }
1327
1367
  },
1328
- "static": true,
1329
- "default": "{ mode: \"open\", delegatesFocus: 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."
1330
1377
  },
1331
1378
  {
1332
1379
  "kind": "method",
1333
- "name": "showBadge",
1380
+ "name": "focusButton",
1334
1381
  "privacy": "public",
1335
1382
  "return": {
1336
1383
  "type": {
1337
1384
  "text": "void"
1338
1385
  }
1339
1386
  },
1340
- "description": "Forces badge visibility on."
1387
+ "description": "Focuses the internal native button."
1341
1388
  },
1342
1389
  {
1343
1390
  "kind": "method",
1344
- "name": "hideBadge",
1391
+ "name": "clickButton",
1345
1392
  "privacy": "public",
1346
1393
  "return": {
1347
1394
  "type": {
1348
1395
  "text": "void"
1349
1396
  }
1350
1397
  },
1351
- "description": "Forces badge visibility off."
1398
+ "description": "Triggers a click on the internal native button when enabled."
1352
1399
  },
1353
1400
  {
1354
1401
  "kind": "method",
1355
- "name": "setValue",
1356
- "privacy": "public",
1402
+ "name": "_createRipple",
1403
+ "privacy": "private",
1357
1404
  "return": {
1358
1405
  "type": {
1359
1406
  "text": "void"
@@ -1361,326 +1408,253 @@
1361
1408
  },
1362
1409
  "parameters": [
1363
1410
  {
1364
- "name": "value",
1411
+ "name": "event",
1365
1412
  "type": {
1366
- "text": "string"
1367
- },
1368
- "description": "Badge value or icon name."
1413
+ "text": "MouseEvent"
1414
+ }
1369
1415
  }
1370
- ],
1371
- "description": "Updates badge value for text/count or icon modes."
1372
- },
1373
- {
1374
- "kind": "field",
1375
- "name": "_onActivate",
1376
- "privacy": "private",
1377
- "description": "Emits `badge-click` for interactive activation."
1378
- },
1379
- {
1380
- "kind": "field",
1381
- "name": "_onKeydown",
1382
- "privacy": "private",
1383
- "description": "Handles keyboard activation with Enter and Space."
1416
+ ]
1384
1417
  },
1385
1418
  {
1386
1419
  "kind": "method",
1387
- "name": "_computeAriaLabel",
1388
- "privacy": "private",
1420
+ "name": "formDisabledCallback",
1389
1421
  "return": {
1390
1422
  "type": {
1391
- "text": "string | null"
1423
+ "text": "void"
1392
1424
  }
1393
1425
  },
1394
1426
  "parameters": [
1395
1427
  {
1396
- "name": "displayValue",
1428
+ "name": "disabled",
1397
1429
  "type": {
1398
- "text": "string | null"
1430
+ "text": "boolean"
1399
1431
  }
1400
1432
  }
1401
- ],
1402
- "description": "Computes accessible badge label from current render state."
1433
+ ]
1434
+ },
1435
+ {
1436
+ "kind": "field",
1437
+ "name": "formOwner",
1438
+ "type": {
1439
+ "text": "HTMLFormElement | null"
1440
+ },
1441
+ "readonly": true
1403
1442
  },
1404
1443
  {
1405
1444
  "kind": "method",
1406
- "name": "_computeAnchors",
1445
+ "name": "_handleClick",
1407
1446
  "privacy": "private",
1408
1447
  "return": {
1409
1448
  "type": {
1410
- "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
1449
+ "text": "void"
1411
1450
  }
1412
1451
  },
1413
1452
  "parameters": [
1414
1453
  {
1415
- "name": "placement",
1454
+ "name": "event",
1416
1455
  "type": {
1417
- "text": "SkyBadgePlacement"
1456
+ "text": "MouseEvent"
1418
1457
  }
1419
1458
  }
1420
- ],
1421
- "description": "Resolves anchor edges from placement preset."
1459
+ ]
1422
1460
  },
1423
1461
  {
1424
1462
  "kind": "method",
1425
- "name": "_resolveBadgeSurface",
1463
+ "name": "_iconOnlyName",
1426
1464
  "privacy": "private",
1427
1465
  "return": {
1428
1466
  "type": {
1429
- "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
1467
+ "text": "string"
1430
1468
  }
1431
- },
1432
- "description": "Maps semantic status tokens to soft badge surface colors."
1433
- }
1434
- ],
1435
- "events": [
1436
- {
1437
- "type": {
1438
- "text": "CustomEvent<SkyBadgeClickEventDetail>"
1439
- },
1440
- "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
1441
- "name": "badge-click"
1469
+ }
1442
1470
  }
1443
1471
  ],
1444
1472
  "attributes": [
1445
1473
  {
1446
- "name": "statusColor",
1447
- "type": {
1448
- "text": "string"
1449
- },
1450
- "default": "\"success\"",
1451
- "description": "Badge background token or CSS color.",
1452
- "fieldName": "statusColor"
1453
- },
1454
- {
1455
- "name": "textColor",
1474
+ "name": "variant",
1456
1475
  "type": {
1457
- "text": "string"
1476
+ "text": "SkyButtonVariant"
1458
1477
  },
1459
- "default": "\"default\"",
1460
- "description": "Text color token or CSS color.",
1461
- "fieldName": "textColor"
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"
1462
1481
  },
1463
1482
  {
1464
- "name": "iconColor",
1483
+ "name": "color",
1465
1484
  "type": {
1466
1485
  "text": "string"
1467
1486
  },
1468
- "default": "\"\"",
1469
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1470
- "fieldName": "iconColor"
1487
+ "default": "\"primary\"",
1488
+ "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1489
+ "fieldName": "color"
1471
1490
  },
1472
1491
  {
1473
- "name": "position",
1492
+ "name": "type",
1474
1493
  "type": {
1475
- "text": "SkyBadgePosition"
1494
+ "text": "SkyButtonType"
1476
1495
  },
1477
- "default": "\"default\"",
1478
- "description": "Layout mode: `default | floating | inline`.",
1479
- "fieldName": "position"
1496
+ "default": "\"button\"",
1497
+ "description": "Button type attribute. Default: `\"button\"`.",
1498
+ "fieldName": "type"
1480
1499
  },
1481
1500
  {
1482
- "name": "value",
1501
+ "name": "form",
1483
1502
  "type": {
1484
1503
  "text": "string"
1485
1504
  },
1486
1505
  "default": "\"\"",
1487
- "description": "Badge text/count or icon name in icon mode.",
1488
- "fieldName": "value"
1489
- },
1490
- {
1491
- "name": "isIcon",
1492
- "type": {
1493
- "text": "boolean"
1494
- },
1495
- "default": "false",
1496
- "description": "Renders icon mode when true.",
1497
- "fieldName": "isIcon"
1506
+ "description": "Associated form ID for custom submit handling.",
1507
+ "fieldName": "form"
1498
1508
  },
1499
1509
  {
1500
1510
  "name": "size",
1501
1511
  "type": {
1502
1512
  "text": "string"
1503
1513
  },
1504
- "default": "\"\"",
1505
- "description": "Badge and icon size CSS length.",
1514
+ "default": "\"md\"",
1515
+ "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1506
1516
  "fieldName": "size"
1507
1517
  },
1508
1518
  {
1509
- "name": "shape",
1510
- "type": {
1511
- "text": "SkyBadgeShape"
1512
- },
1513
- "default": "\"custom\"",
1514
- "description": "Badge shape: `circle | pill | custom`.",
1515
- "fieldName": "shape"
1516
- },
1517
- {
1518
- "name": "max",
1519
- "type": {
1520
- "text": "number"
1521
- },
1522
- "default": "99",
1523
- "description": "Maximum numeric count before rendering overflow label.",
1524
- "fieldName": "max"
1525
- },
1526
- {
1527
- "name": "hideWhenZero",
1528
- "type": {
1529
- "text": "boolean"
1530
- },
1531
- "default": "false",
1532
- "description": "Hides badge when value resolves to numeric zero.",
1533
- "fieldName": "hideWhenZero"
1534
- },
1535
- {
1536
- "name": "show",
1537
- "type": {
1538
- "text": "boolean"
1539
- },
1540
- "default": "true",
1541
- "description": "Forces badge visibility independent of value.",
1542
- "fieldName": "show"
1543
- },
1544
- {
1545
- "name": "offsetX",
1519
+ "name": "radius",
1546
1520
  "type": {
1547
1521
  "text": "string"
1548
1522
  },
1549
- "default": "\"0px\"",
1550
- "description": "Horizontal offset CSS length.",
1551
- "fieldName": "offsetX"
1523
+ "default": "\"md\"",
1524
+ "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
1525
+ "fieldName": "radius"
1552
1526
  },
1553
1527
  {
1554
- "name": "offsetY",
1528
+ "name": "label",
1555
1529
  "type": {
1556
1530
  "text": "string"
1557
1531
  },
1558
- "default": "\"0px\"",
1559
- "description": "Vertical offset CSS length.",
1560
- "fieldName": "offsetY"
1532
+ "default": "\"Button\"",
1533
+ "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
1534
+ "fieldName": "label"
1561
1535
  },
1562
1536
  {
1563
- "name": "ring",
1537
+ "name": "disabled",
1564
1538
  "type": {
1565
1539
  "text": "boolean"
1566
1540
  },
1567
1541
  "default": "false",
1568
- "description": "Enables visual ring around the badge.",
1569
- "fieldName": "ring"
1542
+ "description": "Whether the button is disabled. Default: `false`.",
1543
+ "fieldName": "disabled"
1570
1544
  },
1571
1545
  {
1572
- "name": "ringColor",
1546
+ "name": "loading",
1573
1547
  "type": {
1574
- "text": "string"
1548
+ "text": "boolean"
1575
1549
  },
1576
- "default": "\"primary\"",
1577
- "description": "Ring color token or CSS color.",
1578
- "fieldName": "ringColor"
1550
+ "default": "false",
1551
+ "description": "Shows a loading overlay when true. Default: `false`.",
1552
+ "fieldName": "loading"
1579
1553
  },
1580
1554
  {
1581
- "name": "ringOffset",
1555
+ "name": "iconL",
1582
1556
  "type": {
1583
1557
  "text": "string"
1584
1558
  },
1585
- "default": "\"1px\"",
1586
- "description": "Ring offset CSS length.",
1587
- "fieldName": "ringOffset"
1559
+ "default": "\"\"",
1560
+ "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
1561
+ "fieldName": "iconL"
1588
1562
  },
1589
1563
  {
1590
- "name": "badgeLabel",
1564
+ "name": "iconR",
1591
1565
  "type": {
1592
- "text": "string | null"
1566
+ "text": "string"
1593
1567
  },
1594
- "default": "null",
1595
- "description": "ARIA label override.",
1596
- "fieldName": "badgeLabel"
1568
+ "default": "\"\"",
1569
+ "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
1570
+ "fieldName": "iconR"
1597
1571
  },
1598
1572
  {
1599
- "name": "badgeAriaHidden",
1573
+ "name": "iconOnly",
1600
1574
  "type": {
1601
1575
  "text": "boolean"
1602
1576
  },
1603
1577
  "default": "false",
1604
- "description": "Hides badge from assistive technology when true.",
1605
- "fieldName": "badgeAriaHidden"
1578
+ "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
1579
+ "fieldName": "iconOnly"
1606
1580
  },
1607
1581
  {
1608
- "name": "interactive",
1582
+ "name": "colors",
1609
1583
  "type": {
1610
- "text": "boolean"
1584
+ "text": "string"
1611
1585
  },
1612
- "default": "false",
1613
- "description": "Enables focus/activation and `badge-click` emission.",
1614
- "fieldName": "interactive"
1586
+ "default": "\"\"",
1587
+ "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
1588
+ "fieldName": "colors"
1615
1589
  },
1616
1590
  {
1617
- "name": "placement",
1591
+ "name": "animation",
1618
1592
  "type": {
1619
- "text": "SkyBadgePlacement"
1593
+ "text": "SkyButtonAnimation"
1620
1594
  },
1621
- "default": "\"custom\"",
1622
- "description": "Anchor placement preset for badge positioning.",
1623
- "fieldName": "placement"
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-badge",
1604
+ "tagName": "sky-button",
1631
1605
  "customElement": true,
1632
- "summary": "Badge for status dots, counts, or icons anchored to slotted content."
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": "SkyBadge",
1612
+ "name": "SkyButton",
1639
1613
  "declaration": {
1640
- "name": "SkyBadge",
1641
- "module": "src/sky-badge/sky-badge.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-badge",
1620
+ "name": "sky-button",
1647
1621
  "declaration": {
1648
- "name": "SkyBadge",
1649
- "module": "src/sky-badge/sky-badge.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,467 +1738,486 @@
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",
1831
+ "type": {
1832
+ "text": "string"
1833
+ },
1834
+ "default": "\"1px\"",
1835
+ "description": "Ring offset CSS length.",
1836
+ "attribute": "ringOffset"
1837
+ },
1838
+ {
1839
+ "kind": "field",
1840
+ "name": "badgeLabel",
1841
+ "type": {
1842
+ "text": "string | null"
1843
+ },
1844
+ "default": "null",
1845
+ "description": "ARIA label override.",
1846
+ "attribute": "badgeLabel"
1847
+ },
1848
+ {
1849
+ "kind": "field",
1850
+ "name": "badgeAriaHidden",
1851
+ "type": {
1852
+ "text": "boolean"
1853
+ },
1854
+ "default": "false",
1855
+ "description": "Hides badge from assistive technology when true.",
1856
+ "attribute": "badgeAriaHidden"
1857
+ },
1858
+ {
1859
+ "kind": "field",
1860
+ "name": "interactive",
1861
+ "type": {
1862
+ "text": "boolean"
1863
+ },
1864
+ "default": "false",
1865
+ "description": "Enables focus/activation and `badge-click` emission.",
1866
+ "attribute": "interactive"
1867
+ },
1868
+ {
1869
+ "kind": "field",
1870
+ "name": "placement",
1850
1871
  "type": {
1851
- "text": "SkyButtonAnimation"
1872
+ "text": "SkyBadgePlacement"
1852
1873
  },
1853
- "default": "\"auto\"",
1854
- "description": "Transform animation style. Default: `\"auto\"`.",
1855
- "attribute": "animation",
1874
+ "default": "\"custom\"",
1875
+ "description": "Anchor placement preset for badge positioning.",
1876
+ "attribute": "placement",
1856
1877
  "reflects": true
1857
1878
  },
1858
1879
  {
1859
1880
  "kind": "field",
1860
- "name": "_hasMeaningfulSlot",
1881
+ "name": "_badgeEl",
1861
1882
  "type": {
1862
- "text": "boolean"
1883
+ "text": "HTMLSpanElement"
1863
1884
  },
1864
- "privacy": "private",
1865
- "default": "false"
1885
+ "privacy": "private"
1866
1886
  },
1867
1887
  {
1868
1888
  "kind": "field",
1869
- "name": "_styleVars",
1889
+ "name": "badgeRef",
1890
+ "privacy": "public",
1891
+ "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
1892
+ },
1893
+ {
1894
+ "kind": "field",
1895
+ "name": "shadowRootOptions",
1870
1896
  "type": {
1871
- "text": "Record<string, string>"
1897
+ "text": "ShadowRootInit"
1872
1898
  },
1873
- "privacy": "private",
1874
- "default": "{}",
1875
- "description": "Inline CSS variable cache."
1899
+ "static": true,
1900
+ "default": "{ mode: \"open\", delegatesFocus: true, }"
1876
1901
  },
1877
1902
  {
1878
1903
  "kind": "method",
1879
- "name": "_slotHasMeaningfulContent",
1880
- "privacy": "private",
1904
+ "name": "showBadge",
1905
+ "privacy": "public",
1881
1906
  "return": {
1882
1907
  "type": {
1883
- "text": "boolean"
1908
+ "text": "void"
1884
1909
  }
1885
1910
  },
1886
- "parameters": [
1887
- {
1888
- "name": "slotEl",
1889
- "type": {
1890
- "text": "HTMLSlotElement"
1891
- }
1892
- }
1893
- ]
1894
- },
1895
- {
1896
- "kind": "field",
1897
- "name": "_onSlotChange",
1898
- "privacy": "private"
1911
+ "description": "Forces badge visibility on."
1899
1912
  },
1900
1913
  {
1901
1914
  "kind": "method",
1902
- "name": "_toSquarePadding",
1903
- "privacy": "private",
1915
+ "name": "hideBadge",
1916
+ "privacy": "public",
1904
1917
  "return": {
1905
1918
  "type": {
1906
- "text": "string"
1919
+ "text": "void"
1907
1920
  }
1908
1921
  },
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)."
1922
+ "description": "Forces badge visibility off."
1918
1923
  },
1919
1924
  {
1920
1925
  "kind": "method",
1921
- "name": "_resolveSize",
1922
- "privacy": "private",
1926
+ "name": "setValue",
1927
+ "privacy": "public",
1923
1928
  "return": {
1924
1929
  "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 }"
1930
+ "text": "void"
1926
1931
  }
1927
1932
  },
1928
1933
  "parameters": [
1929
1934
  {
1930
- "name": "input",
1935
+ "name": "value",
1931
1936
  "type": {
1932
1937
  "text": "string"
1933
- }
1938
+ },
1939
+ "description": "Badge value or icon name."
1934
1940
  }
1935
- ]
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."
1936
1955
  },
1937
1956
  {
1938
1957
  "kind": "method",
1939
- "name": "_isThemeBorderShorthand",
1958
+ "name": "_computeAriaLabel",
1940
1959
  "privacy": "private",
1941
1960
  "return": {
1942
1961
  "type": {
1943
- "text": "boolean"
1962
+ "text": "string | null"
1944
1963
  }
1945
1964
  },
1946
1965
  "parameters": [
1947
1966
  {
1948
- "name": "border",
1967
+ "name": "displayValue",
1949
1968
  "type": {
1950
- "text": "string | undefined"
1969
+ "text": "string | null"
1951
1970
  }
1952
1971
  }
1953
1972
  ],
1954
- "description": "Theme tokens like `var(--sky-border-primary)` are full border shorthands, not colors."
1973
+ "description": "Computes accessible badge label from current render state."
1955
1974
  },
1956
1975
  {
1957
1976
  "kind": "method",
1958
- "name": "_borderColorFromShorthand",
1977
+ "name": "_computeAnchors",
1959
1978
  "privacy": "private",
1960
1979
  "return": {
1961
1980
  "type": {
1962
- "text": "string"
1981
+ "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
1963
1982
  }
1964
1983
  },
1965
1984
  "parameters": [
1966
1985
  {
1967
- "name": "border",
1986
+ "name": "placement",
1968
1987
  "type": {
1969
- "text": "string | undefined"
1988
+ "text": "SkyBadgePlacement"
1970
1989
  }
1971
1990
  }
1972
1991
  ],
1973
- "description": "Extracts the color token from a `Npx solid …` border shorthand."
1992
+ "description": "Resolves anchor edges from placement preset."
1974
1993
  },
1975
1994
  {
1976
1995
  "kind": "method",
1977
- "name": "focusButton",
1978
- "privacy": "public",
1996
+ "name": "_resolveBadgeSurface",
1997
+ "privacy": "private",
1979
1998
  "return": {
1980
1999
  "type": {
1981
- "text": "void"
2000
+ "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
1982
2001
  }
1983
2002
  },
1984
- "description": "Focuses the internal native button."
1985
- },
2003
+ "description": "Maps semantic status tokens to soft badge surface colors."
2004
+ }
2005
+ ],
2006
+ "events": [
1986
2007
  {
1987
- "kind": "method",
1988
- "name": "clickButton",
1989
- "privacy": "public",
1990
- "return": {
1991
- "type": {
1992
- "text": "void"
1993
- }
2008
+ "type": {
2009
+ "text": "CustomEvent<SkyBadgeClickEventDetail>"
1994
2010
  },
1995
- "description": "Triggers a click on the internal native button when enabled."
1996
- },
2011
+ "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
2012
+ "name": "badge-click"
2013
+ }
2014
+ ],
2015
+ "attributes": [
1997
2016
  {
1998
- "kind": "method",
1999
- "name": "_createRipple",
2000
- "privacy": "private",
2001
- "return": {
2002
- "type": {
2003
- "text": "void"
2004
- }
2017
+ "name": "statusColor",
2018
+ "type": {
2019
+ "text": "string"
2005
2020
  },
2006
- "parameters": [
2007
- {
2008
- "name": "event",
2009
- "type": {
2010
- "text": "MouseEvent"
2011
- }
2012
- }
2013
- ]
2021
+ "default": "\"success\"",
2022
+ "description": "Badge background token or CSS color.",
2023
+ "fieldName": "statusColor"
2014
2024
  },
2015
2025
  {
2016
- "kind": "method",
2017
- "name": "formDisabledCallback",
2018
- "return": {
2019
- "type": {
2020
- "text": "void"
2021
- }
2026
+ "name": "textColor",
2027
+ "type": {
2028
+ "text": "string"
2022
2029
  },
2023
- "parameters": [
2024
- {
2025
- "name": "disabled",
2026
- "type": {
2027
- "text": "boolean"
2028
- }
2029
- }
2030
- ]
2030
+ "default": "\"default\"",
2031
+ "description": "Text color token or CSS color.",
2032
+ "fieldName": "textColor"
2031
2033
  },
2032
2034
  {
2033
- "kind": "field",
2034
- "name": "formOwner",
2035
+ "name": "iconColor",
2035
2036
  "type": {
2036
- "text": "HTMLFormElement | null"
2037
+ "text": "string"
2037
2038
  },
2038
- "readonly": true
2039
+ "default": "\"\"",
2040
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
2041
+ "fieldName": "iconColor"
2039
2042
  },
2040
2043
  {
2041
- "kind": "method",
2042
- "name": "_handleClick",
2043
- "privacy": "private",
2044
- "return": {
2045
- "type": {
2046
- "text": "void"
2047
- }
2044
+ "name": "position",
2045
+ "type": {
2046
+ "text": "SkyBadgePosition"
2048
2047
  },
2049
- "parameters": [
2050
- {
2051
- "name": "event",
2052
- "type": {
2053
- "text": "MouseEvent"
2054
- }
2055
- }
2056
- ]
2048
+ "default": "\"default\"",
2049
+ "description": "Layout mode: `default | floating | inline`.",
2050
+ "fieldName": "position"
2057
2051
  },
2058
2052
  {
2059
- "kind": "method",
2060
- "name": "_iconOnlyName",
2061
- "privacy": "private",
2062
- "return": {
2063
- "type": {
2064
- "text": "string"
2065
- }
2066
- }
2067
- }
2068
- ],
2069
- "attributes": [
2053
+ "name": "value",
2054
+ "type": {
2055
+ "text": "string"
2056
+ },
2057
+ "default": "\"\"",
2058
+ "description": "Badge text/count or icon name in icon mode.",
2059
+ "fieldName": "value"
2060
+ },
2070
2061
  {
2071
- "name": "variant",
2062
+ "name": "isIcon",
2072
2063
  "type": {
2073
- "text": "SkyButtonVariant"
2064
+ "text": "boolean"
2074
2065
  },
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"
2066
+ "default": "false",
2067
+ "description": "Renders icon mode when true.",
2068
+ "fieldName": "isIcon"
2078
2069
  },
2079
2070
  {
2080
- "name": "color",
2071
+ "name": "size",
2081
2072
  "type": {
2082
2073
  "text": "string"
2083
2074
  },
2084
- "default": "\"primary\"",
2085
- "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
2086
- "fieldName": "color"
2075
+ "default": "\"\"",
2076
+ "description": "Badge and icon size CSS length.",
2077
+ "fieldName": "size"
2078
+ },
2079
+ {
2080
+ "name": "shape",
2081
+ "type": {
2082
+ "text": "SkyBadgeShape"
2083
+ },
2084
+ "default": "\"custom\"",
2085
+ "description": "Badge shape: `circle | pill | custom`.",
2086
+ "fieldName": "shape"
2087
2087
  },
2088
2088
  {
2089
- "name": "type",
2089
+ "name": "max",
2090
2090
  "type": {
2091
- "text": "SkyButtonType"
2091
+ "text": "number"
2092
2092
  },
2093
- "default": "\"button\"",
2094
- "description": "Button type attribute. Default: `\"button\"`.",
2095
- "fieldName": "type"
2093
+ "default": "99",
2094
+ "description": "Maximum numeric count before rendering overflow label.",
2095
+ "fieldName": "max"
2096
2096
  },
2097
2097
  {
2098
- "name": "form",
2098
+ "name": "hideWhenZero",
2099
2099
  "type": {
2100
- "text": "string"
2100
+ "text": "boolean"
2101
2101
  },
2102
- "default": "\"\"",
2103
- "description": "Associated form ID for custom submit handling.",
2104
- "fieldName": "form"
2102
+ "default": "false",
2103
+ "description": "Hides badge when value resolves to numeric zero.",
2104
+ "fieldName": "hideWhenZero"
2105
2105
  },
2106
2106
  {
2107
- "name": "size",
2107
+ "name": "show",
2108
2108
  "type": {
2109
- "text": "string"
2109
+ "text": "boolean"
2110
2110
  },
2111
- "default": "\"md\"",
2112
- "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
2113
- "fieldName": "size"
2111
+ "default": "true",
2112
+ "description": "Forces badge visibility independent of value.",
2113
+ "fieldName": "show"
2114
2114
  },
2115
2115
  {
2116
- "name": "radius",
2116
+ "name": "offsetX",
2117
2117
  "type": {
2118
2118
  "text": "string"
2119
2119
  },
2120
- "default": "\"md\"",
2121
- "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
2122
- "fieldName": "radius"
2120
+ "default": "\"0px\"",
2121
+ "description": "Horizontal offset CSS length.",
2122
+ "fieldName": "offsetX"
2123
2123
  },
2124
2124
  {
2125
- "name": "label",
2125
+ "name": "offsetY",
2126
2126
  "type": {
2127
2127
  "text": "string"
2128
2128
  },
2129
- "default": "\"Button\"",
2130
- "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
2131
- "fieldName": "label"
2129
+ "default": "\"0px\"",
2130
+ "description": "Vertical offset CSS length.",
2131
+ "fieldName": "offsetY"
2132
2132
  },
2133
2133
  {
2134
- "name": "disabled",
2134
+ "name": "ring",
2135
2135
  "type": {
2136
2136
  "text": "boolean"
2137
2137
  },
2138
2138
  "default": "false",
2139
- "description": "Whether the button is disabled. Default: `false`.",
2140
- "fieldName": "disabled"
2139
+ "description": "Enables visual ring around the badge.",
2140
+ "fieldName": "ring"
2141
2141
  },
2142
2142
  {
2143
- "name": "loading",
2143
+ "name": "ringColor",
2144
2144
  "type": {
2145
- "text": "boolean"
2145
+ "text": "string"
2146
2146
  },
2147
- "default": "false",
2148
- "description": "Shows a loading overlay when true. Default: `false`.",
2149
- "fieldName": "loading"
2147
+ "default": "\"primary\"",
2148
+ "description": "Ring color token or CSS color.",
2149
+ "fieldName": "ringColor"
2150
2150
  },
2151
2151
  {
2152
- "name": "iconL",
2152
+ "name": "ringOffset",
2153
2153
  "type": {
2154
2154
  "text": "string"
2155
2155
  },
2156
- "default": "\"\"",
2157
- "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
2158
- "fieldName": "iconL"
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
  ]
@@ -6769,618 +6769,679 @@
6769
6769
  },
6770
6770
  {
6771
6771
  "kind": "javascript-module",
6772
- "path": "src/sky-divider/sky-divider.ts",
6772
+ "path": "src/sky-flexbox/sky-flexbox.ts",
6773
6773
  "declarations": [
6774
6774
  {
6775
6775
  "kind": "class",
6776
6776
  "description": "",
6777
- "name": "SkyDivider",
6778
- "cssProperties": [
6777
+ "name": "SkyFlexbox",
6778
+ "cssParts": [
6779
6779
  {
6780
- "description": "CSS custom property for divider color.",
6781
- "name": "--divider-color"
6780
+ "description": "The flex container element.",
6781
+ "name": "container"
6782
+ }
6783
+ ],
6784
+ "slots": [
6785
+ {
6786
+ "description": "Default slot for flex items (`<sky-flexcol>` or plain elements with `span` attributes).",
6787
+ "name": ""
6788
+ }
6789
+ ],
6790
+ "members": [
6791
+ {
6792
+ "kind": "field",
6793
+ "name": "direction",
6794
+ "type": {
6795
+ "text": "SkyFlexboxDirection"
6796
+ },
6797
+ "default": "\"row\"",
6798
+ "description": "Flex direction.",
6799
+ "privacy": "public",
6800
+ "attribute": "direction"
6782
6801
  },
6783
6802
  {
6784
- "description": "CSS custom property for divider thickness.",
6785
- "name": "--divider-thickness"
6803
+ "kind": "field",
6804
+ "name": "wrap",
6805
+ "type": {
6806
+ "text": "SkyFlexboxWrap"
6807
+ },
6808
+ "default": "\"wrap\"",
6809
+ "description": "Flex wrap behavior.",
6810
+ "privacy": "public",
6811
+ "attribute": "wrap"
6786
6812
  },
6787
6813
  {
6788
- "description": "CSS custom property for divider margin.",
6789
- "name": "--divider-margin"
6814
+ "kind": "field",
6815
+ "name": "justify",
6816
+ "type": {
6817
+ "text": "SkyFlexboxJustify"
6818
+ },
6819
+ "default": "\"flex-start\"",
6820
+ "description": "Main-axis alignment.",
6821
+ "privacy": "public",
6822
+ "attribute": "justify"
6790
6823
  },
6791
6824
  {
6792
- "description": "CSS custom property for vertical divider height.",
6793
- "name": "--divider-height"
6794
- }
6795
- ],
6796
- "cssParts": [
6825
+ "kind": "field",
6826
+ "name": "align",
6827
+ "type": {
6828
+ "text": "SkyFlexboxAlign"
6829
+ },
6830
+ "default": "\"stretch\"",
6831
+ "description": "Cross-axis alignment.",
6832
+ "privacy": "public",
6833
+ "attribute": "align"
6834
+ },
6797
6835
  {
6798
- "description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
6799
- "name": "divider"
6800
- }
6801
- ],
6802
- "members": [
6836
+ "kind": "field",
6837
+ "name": "alignContent",
6838
+ "type": {
6839
+ "text": "SkyFlexboxAlignContent"
6840
+ },
6841
+ "default": "\"normal\"",
6842
+ "description": "Multi-line cross-axis distribution.",
6843
+ "privacy": "public",
6844
+ "attribute": "alignContent"
6845
+ },
6803
6846
  {
6804
6847
  "kind": "field",
6805
- "name": "color",
6848
+ "name": "gap",
6806
6849
  "type": {
6807
6850
  "text": "string"
6808
6851
  },
6809
- "default": "\"muted\"",
6810
- "description": "Divider color token or CSS color.",
6852
+ "default": "\"16px\"",
6853
+ "description": "Shared row/column gap value.",
6811
6854
  "privacy": "public",
6812
- "attribute": "color"
6855
+ "attribute": "gap"
6813
6856
  },
6814
6857
  {
6815
6858
  "kind": "field",
6816
- "name": "thickness",
6859
+ "name": "gapX",
6817
6860
  "type": {
6818
- "text": "string"
6861
+ "text": "string | undefined"
6819
6862
  },
6820
- "default": "\"1px\"",
6821
- "description": "Divider thickness (for example `1px` or `2px`).",
6863
+ "description": "Horizontal gap override.",
6822
6864
  "privacy": "public",
6823
- "attribute": "thickness"
6865
+ "attribute": "gapX"
6824
6866
  },
6825
6867
  {
6826
6868
  "kind": "field",
6827
- "name": "margin",
6869
+ "name": "gapY",
6828
6870
  "type": {
6829
- "text": "string"
6871
+ "text": "string | undefined"
6830
6872
  },
6831
- "default": "\"\"",
6832
- "description": "Outer margin around the divider.",
6873
+ "description": "Vertical gap override.",
6833
6874
  "privacy": "public",
6834
- "attribute": "margin"
6875
+ "attribute": "gapY"
6876
+ },
6877
+ {
6878
+ "kind": "field",
6879
+ "name": "col",
6880
+ "type": {
6881
+ "text": "number"
6882
+ },
6883
+ "default": "12",
6884
+ "description": "Total column count used for span calculations.",
6885
+ "privacy": "public",
6886
+ "attribute": "col"
6887
+ },
6888
+ {
6889
+ "kind": "field",
6890
+ "name": "_childMo",
6891
+ "type": {
6892
+ "text": "MutationObserver | undefined"
6893
+ },
6894
+ "privacy": "private"
6895
+ },
6896
+ {
6897
+ "kind": "method",
6898
+ "name": "syncVars",
6899
+ "privacy": "private",
6900
+ "description": "Syncs component properties to CSS custom properties."
6835
6901
  },
6836
6902
  {
6837
- "kind": "field",
6838
- "name": "direction",
6839
- "type": {
6840
- "text": "SkyDividerDirection"
6841
- },
6842
- "default": "\"horizontal\"",
6843
- "description": "Divider orientation.",
6903
+ "kind": "method",
6904
+ "name": "recalculateSpans",
6844
6905
  "privacy": "public",
6845
- "attribute": "direction"
6906
+ "description": "Forces recalculation of spans for all child elements.\r\nUseful when dynamically adding/removing items."
6846
6907
  },
6847
6908
  {
6848
6909
  "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"
6910
+ "name": "updateSpans",
6911
+ "privacy": "private",
6912
+ "description": "Reads span attributes off slotted children and maps them to CSS vars:\r\nspan, span-lg, span-md, span-sm, span-xs"
6857
6913
  },
6858
6914
  {
6859
- "kind": "field",
6860
- "name": "height",
6861
- "type": {
6862
- "text": "string"
6915
+ "kind": "method",
6916
+ "name": "readSpanRaw",
6917
+ "privacy": "private",
6918
+ "return": {
6919
+ "type": {
6920
+ "text": "string | null"
6921
+ }
6863
6922
  },
6864
- "default": "\"100%\"",
6865
- "description": "Height used for vertical orientation.",
6866
- "privacy": "public",
6867
- "attribute": "height"
6923
+ "parameters": [
6924
+ {
6925
+ "name": "el",
6926
+ "type": {
6927
+ "text": "HTMLElement"
6928
+ }
6929
+ },
6930
+ {
6931
+ "name": "attrName",
6932
+ "type": {
6933
+ "text": "string"
6934
+ }
6935
+ },
6936
+ {
6937
+ "name": "propName",
6938
+ "type": {
6939
+ "text": "string"
6940
+ }
6941
+ }
6942
+ ],
6943
+ "description": "Reads a span value from an HTML attribute or element property."
6868
6944
  },
6869
6945
  {
6870
6946
  "kind": "method",
6871
- "name": "getComputedColor",
6872
- "privacy": "public",
6947
+ "name": "applySpanVar",
6948
+ "privacy": "private",
6873
6949
  "return": {
6874
6950
  "type": {
6875
- "text": ""
6951
+ "text": "void"
6876
6952
  }
6877
6953
  },
6878
- "description": "Gets the current computed color of the divider."
6954
+ "parameters": [
6955
+ {
6956
+ "name": "el",
6957
+ "type": {
6958
+ "text": "HTMLElement"
6959
+ }
6960
+ },
6961
+ {
6962
+ "name": "cssVar",
6963
+ "type": {
6964
+ "text": "string"
6965
+ }
6966
+ },
6967
+ {
6968
+ "name": "raw",
6969
+ "type": {
6970
+ "text": "string | null"
6971
+ }
6972
+ }
6973
+ ],
6974
+ "description": "Sets or clears a span CSS variable on a slotted child."
6879
6975
  },
6880
6976
  {
6881
6977
  "kind": "method",
6882
- "name": "getComputedThickness",
6883
- "privacy": "public",
6978
+ "name": "clampSpan",
6979
+ "privacy": "private",
6884
6980
  "return": {
6885
6981
  "type": {
6886
6982
  "text": ""
6887
6983
  }
6888
6984
  },
6889
- "description": "Gets the current computed thickness of the divider."
6985
+ "parameters": [
6986
+ {
6987
+ "name": "raw",
6988
+ "type": {
6989
+ "text": "string | null"
6990
+ },
6991
+ "description": "Raw span value from attribute"
6992
+ }
6993
+ ],
6994
+ "description": "Clamps span value to valid range (1 to column count)."
6995
+ }
6996
+ ],
6997
+ "events": [
6998
+ {
6999
+ "type": {
7000
+ "text": "Event"
7001
+ },
7002
+ "description": "Fired when slotted children change.",
7003
+ "name": "slotchange"
6890
7004
  }
6891
7005
  ],
6892
7006
  "attributes": [
6893
7007
  {
6894
- "name": "color",
7008
+ "name": "direction",
6895
7009
  "type": {
6896
- "text": "string"
7010
+ "text": "SkyFlexboxDirection"
6897
7011
  },
6898
- "default": "\"muted\"",
6899
- "description": "Divider color token or CSS color.",
6900
- "fieldName": "color"
7012
+ "default": "\"row\"",
7013
+ "description": "Flex direction.",
7014
+ "fieldName": "direction"
6901
7015
  },
6902
7016
  {
6903
- "name": "thickness",
7017
+ "name": "wrap",
6904
7018
  "type": {
6905
- "text": "string"
7019
+ "text": "SkyFlexboxWrap"
6906
7020
  },
6907
- "default": "\"1px\"",
6908
- "description": "Divider thickness (for example `1px` or `2px`).",
6909
- "fieldName": "thickness"
7021
+ "default": "\"wrap\"",
7022
+ "description": "Flex wrap behavior.",
7023
+ "fieldName": "wrap"
6910
7024
  },
6911
7025
  {
6912
- "name": "margin",
7026
+ "name": "justify",
6913
7027
  "type": {
6914
- "text": "string"
7028
+ "text": "SkyFlexboxJustify"
6915
7029
  },
6916
- "default": "\"\"",
6917
- "description": "Outer margin around the divider.",
6918
- "fieldName": "margin"
7030
+ "default": "\"flex-start\"",
7031
+ "description": "Main-axis alignment.",
7032
+ "fieldName": "justify"
6919
7033
  },
6920
7034
  {
6921
- "name": "direction",
7035
+ "name": "align",
6922
7036
  "type": {
6923
- "text": "SkyDividerDirection"
7037
+ "text": "SkyFlexboxAlign"
6924
7038
  },
6925
- "default": "\"horizontal\"",
6926
- "description": "Divider orientation.",
6927
- "fieldName": "direction"
7039
+ "default": "\"stretch\"",
7040
+ "description": "Cross-axis alignment.",
7041
+ "fieldName": "align"
6928
7042
  },
6929
7043
  {
6930
- "name": "inset",
7044
+ "name": "alignContent",
6931
7045
  "type": {
6932
- "text": "boolean"
7046
+ "text": "SkyFlexboxAlignContent"
6933
7047
  },
6934
- "default": "false",
6935
- "description": "Enables indented divider layout.",
6936
- "fieldName": "inset"
7048
+ "default": "\"normal\"",
7049
+ "description": "Multi-line cross-axis distribution.",
7050
+ "fieldName": "alignContent"
6937
7051
  },
6938
7052
  {
6939
- "name": "height",
7053
+ "name": "gap",
6940
7054
  "type": {
6941
7055
  "text": "string"
6942
7056
  },
6943
- "default": "\"100%\"",
6944
- "description": "Height used for vertical orientation.",
6945
- "fieldName": "height"
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"
6946
7085
  }
6947
7086
  ],
6948
7087
  "superclass": {
6949
7088
  "name": "LitElement",
6950
7089
  "package": "lit"
6951
7090
  },
6952
- "tagName": "sky-divider",
7091
+ "tagName": "sky-flexbox",
6953
7092
  "customElement": true,
6954
- "summary": "Visual separator component for horizontal and vertical layout separation."
7093
+ "summary": "Flexbox container with grid-like span support for slotted children."
6955
7094
  }
6956
7095
  ],
6957
7096
  "exports": [
6958
7097
  {
6959
7098
  "kind": "js",
6960
- "name": "SkyDivider",
7099
+ "name": "SkyFlexbox",
6961
7100
  "declaration": {
6962
- "name": "SkyDivider",
6963
- "module": "src/sky-divider/sky-divider.ts"
7101
+ "name": "SkyFlexbox",
7102
+ "module": "src/sky-flexbox/sky-flexbox.ts"
6964
7103
  }
6965
7104
  },
6966
7105
  {
6967
7106
  "kind": "custom-element-definition",
6968
- "name": "sky-divider",
7107
+ "name": "sky-flexbox",
6969
7108
  "declaration": {
6970
- "name": "SkyDivider",
6971
- "module": "src/sky-divider/sky-divider.ts"
7109
+ "name": "SkyFlexbox",
7110
+ "module": "src/sky-flexbox/sky-flexbox.ts"
6972
7111
  }
6973
7112
  }
6974
7113
  ]
6975
7114
  },
6976
7115
  {
6977
7116
  "kind": "javascript-module",
6978
- "path": "src/sky-flexcol/sky-flexcol.ts",
7117
+ "path": "src/sky-divider/sky-divider.ts",
6979
7118
  "declarations": [
6980
7119
  {
6981
7120
  "kind": "class",
6982
7121
  "description": "",
6983
- "name": "SkyFlexcol",
6984
- "cssParts": [
6985
- {
6986
- "description": "The flex item wrapper.",
6987
- "name": "col"
6988
- }
6989
- ],
6990
- "slots": [
6991
- {
6992
- "description": "Default slot for column content.",
6993
- "name": ""
6994
- }
6995
- ],
6996
- "members": [
6997
- {
6998
- "kind": "field",
6999
- "name": "span",
7000
- "type": {
7001
- "text": "number"
7002
- },
7003
- "default": "1",
7004
- "description": "Base number of columns to span.",
7005
- "privacy": "public",
7006
- "attribute": "span"
7007
- },
7122
+ "name": "SkyDivider",
7123
+ "cssProperties": [
7008
7124
  {
7009
- "kind": "field",
7010
- "name": "spanLg",
7011
- "type": {
7012
- "text": "number | undefined"
7013
- },
7014
- "description": "Span at large breakpoints.",
7015
- "privacy": "public",
7016
- "attribute": "spanLg"
7125
+ "description": "CSS custom property for divider color.",
7126
+ "name": "--divider-color"
7017
7127
  },
7018
7128
  {
7019
- "kind": "field",
7020
- "name": "spanMd",
7021
- "type": {
7022
- "text": "number | undefined"
7023
- },
7024
- "description": "Span at medium breakpoints.",
7025
- "privacy": "public",
7026
- "attribute": "spanMd"
7129
+ "description": "CSS custom property for divider thickness.",
7130
+ "name": "--divider-thickness"
7027
7131
  },
7028
7132
  {
7029
- "kind": "field",
7030
- "name": "spanSm",
7031
- "type": {
7032
- "text": "number | undefined"
7033
- },
7034
- "description": "Span at small breakpoints.",
7035
- "privacy": "public",
7036
- "attribute": "spanSm"
7133
+ "description": "CSS custom property for divider margin.",
7134
+ "name": "--divider-margin"
7037
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": [
7038
7148
  {
7039
7149
  "kind": "field",
7040
- "name": "spanXs",
7150
+ "name": "color",
7041
7151
  "type": {
7042
- "text": "number | undefined"
7152
+ "text": "string"
7043
7153
  },
7044
- "description": "Span at extra-small breakpoints.",
7154
+ "default": "\"muted\"",
7155
+ "description": "Divider color token or CSS color.",
7045
7156
  "privacy": "public",
7046
- "attribute": "spanXs"
7157
+ "attribute": "color"
7047
7158
  },
7048
7159
  {
7049
7160
  "kind": "field",
7050
- "name": "grow",
7161
+ "name": "thickness",
7051
7162
  "type": {
7052
- "text": "number"
7163
+ "text": "string"
7053
7164
  },
7054
- "default": "0",
7055
- "description": "Flex grow factor.",
7165
+ "default": "\"1px\"",
7166
+ "description": "Divider thickness (for example `1px` or `2px`).",
7056
7167
  "privacy": "public",
7057
- "attribute": "grow"
7168
+ "attribute": "thickness"
7058
7169
  },
7059
7170
  {
7060
7171
  "kind": "field",
7061
- "name": "shrink",
7172
+ "name": "margin",
7062
7173
  "type": {
7063
- "text": "number"
7174
+ "text": "string"
7064
7175
  },
7065
- "default": "0",
7066
- "description": "Flex shrink factor.",
7176
+ "default": "\"\"",
7177
+ "description": "Outer margin around the divider.",
7067
7178
  "privacy": "public",
7068
- "attribute": "shrink"
7179
+ "attribute": "margin"
7069
7180
  },
7070
7181
  {
7071
7182
  "kind": "field",
7072
- "name": "basis",
7183
+ "name": "direction",
7073
7184
  "type": {
7074
- "text": "string | null"
7185
+ "text": "SkyDividerDirection"
7075
7186
  },
7076
- "default": "null",
7077
- "description": "Flex basis override.",
7187
+ "default": "\"horizontal\"",
7188
+ "description": "Divider orientation.",
7078
7189
  "privacy": "public",
7079
- "attribute": "basis"
7190
+ "attribute": "direction"
7080
7191
  },
7081
7192
  {
7082
7193
  "kind": "field",
7083
- "name": "order",
7194
+ "name": "inset",
7084
7195
  "type": {
7085
- "text": "number | undefined"
7196
+ "text": "boolean"
7086
7197
  },
7087
- "description": "Flex order override.",
7198
+ "default": "false",
7199
+ "description": "Enables indented divider layout.",
7088
7200
  "privacy": "public",
7089
- "attribute": "order"
7201
+ "attribute": "inset"
7090
7202
  },
7091
7203
  {
7092
7204
  "kind": "field",
7093
- "name": "alignSelf",
7205
+ "name": "height",
7094
7206
  "type": {
7095
- "text": "SkyFlexcolAlignSelf | undefined"
7207
+ "text": "string"
7096
7208
  },
7097
- "description": "Cross-axis alignment override.",
7098
- "privacy": "public",
7099
- "attribute": "alignSelf"
7100
- },
7101
- {
7102
- "kind": "method",
7103
- "name": "syncVars",
7104
- "privacy": "private",
7105
- "description": "Syncs component properties to CSS custom properties."
7106
- },
7107
- {
7108
- "kind": "method",
7109
- "name": "refreshStyles",
7209
+ "default": "\"100%\"",
7210
+ "description": "Height used for vertical orientation.",
7110
7211
  "privacy": "public",
7111
- "description": "Forces resynchronization of CSS custom properties.\r\nUseful when properties are changed programmatically."
7212
+ "attribute": "height"
7112
7213
  },
7113
7214
  {
7114
7215
  "kind": "method",
7115
- "name": "getSpan",
7216
+ "name": "getComputedColor",
7116
7217
  "privacy": "public",
7117
7218
  "return": {
7118
7219
  "type": {
7119
7220
  "text": ""
7120
7221
  }
7121
7222
  },
7122
- "description": "Gets the current span value."
7223
+ "description": "Gets the current computed color of the divider."
7123
7224
  },
7124
7225
  {
7125
7226
  "kind": "method",
7126
- "name": "setSpan",
7227
+ "name": "getComputedThickness",
7127
7228
  "privacy": "public",
7128
7229
  "return": {
7129
7230
  "type": {
7130
- "text": "void"
7231
+ "text": ""
7131
7232
  }
7132
7233
  },
7133
- "parameters": [
7134
- {
7135
- "name": "value",
7136
- "type": {
7137
- "text": "number"
7138
- },
7139
- "description": "New span value"
7140
- }
7141
- ],
7142
- "description": "Sets the span value and updates styles."
7234
+ "description": "Gets the current computed thickness of the divider."
7143
7235
  }
7144
7236
  ],
7145
7237
  "attributes": [
7146
7238
  {
7147
- "name": "span",
7148
- "type": {
7149
- "text": "number"
7150
- },
7151
- "default": "1",
7152
- "description": "Base number of columns to span.",
7153
- "fieldName": "span"
7154
- },
7155
- {
7156
- "name": "spanLg",
7157
- "type": {
7158
- "text": "number | undefined"
7159
- },
7160
- "description": "Span at large breakpoints.",
7161
- "fieldName": "spanLg"
7162
- },
7163
- {
7164
- "name": "spanMd",
7165
- "type": {
7166
- "text": "number | undefined"
7167
- },
7168
- "description": "Span at medium breakpoints.",
7169
- "fieldName": "spanMd"
7170
- },
7171
- {
7172
- "name": "spanSm",
7173
- "type": {
7174
- "text": "number | undefined"
7175
- },
7176
- "description": "Span at small breakpoints.",
7177
- "fieldName": "spanSm"
7178
- },
7179
- {
7180
- "name": "spanXs",
7239
+ "name": "color",
7181
7240
  "type": {
7182
- "text": "number | undefined"
7241
+ "text": "string"
7183
7242
  },
7184
- "description": "Span at extra-small breakpoints.",
7185
- "fieldName": "spanXs"
7243
+ "default": "\"muted\"",
7244
+ "description": "Divider color token or CSS color.",
7245
+ "fieldName": "color"
7186
7246
  },
7187
7247
  {
7188
- "name": "grow",
7248
+ "name": "thickness",
7189
7249
  "type": {
7190
- "text": "number"
7250
+ "text": "string"
7191
7251
  },
7192
- "default": "0",
7193
- "description": "Flex grow factor.",
7194
- "fieldName": "grow"
7252
+ "default": "\"1px\"",
7253
+ "description": "Divider thickness (for example `1px` or `2px`).",
7254
+ "fieldName": "thickness"
7195
7255
  },
7196
7256
  {
7197
- "name": "shrink",
7257
+ "name": "margin",
7198
7258
  "type": {
7199
- "text": "number"
7259
+ "text": "string"
7200
7260
  },
7201
- "default": "0",
7202
- "description": "Flex shrink factor.",
7203
- "fieldName": "shrink"
7261
+ "default": "\"\"",
7262
+ "description": "Outer margin around the divider.",
7263
+ "fieldName": "margin"
7204
7264
  },
7205
7265
  {
7206
- "name": "basis",
7266
+ "name": "direction",
7207
7267
  "type": {
7208
- "text": "string | null"
7268
+ "text": "SkyDividerDirection"
7209
7269
  },
7210
- "default": "null",
7211
- "description": "Flex basis override.",
7212
- "fieldName": "basis"
7270
+ "default": "\"horizontal\"",
7271
+ "description": "Divider orientation.",
7272
+ "fieldName": "direction"
7213
7273
  },
7214
7274
  {
7215
- "name": "order",
7275
+ "name": "inset",
7216
7276
  "type": {
7217
- "text": "number | undefined"
7277
+ "text": "boolean"
7218
7278
  },
7219
- "description": "Flex order override.",
7220
- "fieldName": "order"
7279
+ "default": "false",
7280
+ "description": "Enables indented divider layout.",
7281
+ "fieldName": "inset"
7221
7282
  },
7222
7283
  {
7223
- "name": "alignSelf",
7284
+ "name": "height",
7224
7285
  "type": {
7225
- "text": "SkyFlexcolAlignSelf | undefined"
7286
+ "text": "string"
7226
7287
  },
7227
- "description": "Cross-axis alignment override.",
7228
- "fieldName": "alignSelf"
7288
+ "default": "\"100%\"",
7289
+ "description": "Height used for vertical orientation.",
7290
+ "fieldName": "height"
7229
7291
  }
7230
7292
  ],
7231
7293
  "superclass": {
7232
7294
  "name": "LitElement",
7233
7295
  "package": "lit"
7234
7296
  },
7235
- "tagName": "sky-flexcol",
7297
+ "tagName": "sky-divider",
7236
7298
  "customElement": true,
7237
- "summary": "Flex column item for `sky-flexbox` layouts with responsive span controls."
7299
+ "summary": "Visual separator component for horizontal and vertical layout separation."
7238
7300
  }
7239
7301
  ],
7240
7302
  "exports": [
7241
7303
  {
7242
7304
  "kind": "js",
7243
- "name": "SkyFlexcol",
7305
+ "name": "SkyDivider",
7244
7306
  "declaration": {
7245
- "name": "SkyFlexcol",
7246
- "module": "src/sky-flexcol/sky-flexcol.ts"
7307
+ "name": "SkyDivider",
7308
+ "module": "src/sky-divider/sky-divider.ts"
7247
7309
  }
7248
7310
  },
7249
7311
  {
7250
7312
  "kind": "custom-element-definition",
7251
- "name": "sky-flexcol",
7313
+ "name": "sky-divider",
7252
7314
  "declaration": {
7253
- "name": "SkyFlexcol",
7254
- "module": "src/sky-flexcol/sky-flexcol.ts"
7315
+ "name": "SkyDivider",
7316
+ "module": "src/sky-divider/sky-divider.ts"
7255
7317
  }
7256
7318
  }
7257
7319
  ]
7258
7320
  },
7259
7321
  {
7260
7322
  "kind": "javascript-module",
7261
- "path": "src/sky-flexbox/sky-flexbox.ts",
7323
+ "path": "src/sky-flexcol/sky-flexcol.ts",
7262
7324
  "declarations": [
7263
7325
  {
7264
7326
  "kind": "class",
7265
7327
  "description": "",
7266
- "name": "SkyFlexbox",
7328
+ "name": "SkyFlexcol",
7267
7329
  "cssParts": [
7268
7330
  {
7269
- "description": "The flex container element.",
7270
- "name": "container"
7331
+ "description": "The flex item wrapper.",
7332
+ "name": "col"
7271
7333
  }
7272
7334
  ],
7273
7335
  "slots": [
7274
7336
  {
7275
- "description": "Default slot for flex items (`<sky-flexcol>` or plain elements with `span` attributes).",
7337
+ "description": "Default slot for column content.",
7276
7338
  "name": ""
7277
7339
  }
7278
7340
  ],
7279
7341
  "members": [
7280
7342
  {
7281
7343
  "kind": "field",
7282
- "name": "direction",
7344
+ "name": "span",
7283
7345
  "type": {
7284
- "text": "SkyFlexboxDirection"
7346
+ "text": "number"
7285
7347
  },
7286
- "default": "\"row\"",
7287
- "description": "Flex direction.",
7348
+ "default": "1",
7349
+ "description": "Base number of columns to span.",
7288
7350
  "privacy": "public",
7289
- "attribute": "direction"
7351
+ "attribute": "span"
7290
7352
  },
7291
7353
  {
7292
7354
  "kind": "field",
7293
- "name": "wrap",
7355
+ "name": "spanLg",
7294
7356
  "type": {
7295
- "text": "SkyFlexboxWrap"
7357
+ "text": "number | undefined"
7296
7358
  },
7297
- "default": "\"wrap\"",
7298
- "description": "Flex wrap behavior.",
7359
+ "description": "Span at large breakpoints.",
7299
7360
  "privacy": "public",
7300
- "attribute": "wrap"
7361
+ "attribute": "spanLg"
7301
7362
  },
7302
7363
  {
7303
7364
  "kind": "field",
7304
- "name": "justify",
7365
+ "name": "spanMd",
7305
7366
  "type": {
7306
- "text": "SkyFlexboxJustify"
7367
+ "text": "number | undefined"
7307
7368
  },
7308
- "default": "\"flex-start\"",
7309
- "description": "Main-axis alignment.",
7369
+ "description": "Span at medium breakpoints.",
7310
7370
  "privacy": "public",
7311
- "attribute": "justify"
7371
+ "attribute": "spanMd"
7312
7372
  },
7313
7373
  {
7314
7374
  "kind": "field",
7315
- "name": "align",
7375
+ "name": "spanSm",
7316
7376
  "type": {
7317
- "text": "SkyFlexboxAlign"
7377
+ "text": "number | undefined"
7318
7378
  },
7319
- "default": "\"stretch\"",
7320
- "description": "Cross-axis alignment.",
7379
+ "description": "Span at small breakpoints.",
7321
7380
  "privacy": "public",
7322
- "attribute": "align"
7381
+ "attribute": "spanSm"
7323
7382
  },
7324
7383
  {
7325
7384
  "kind": "field",
7326
- "name": "alignContent",
7385
+ "name": "spanXs",
7327
7386
  "type": {
7328
- "text": "SkyFlexboxAlignContent"
7387
+ "text": "number | undefined"
7329
7388
  },
7330
- "default": "\"normal\"",
7331
- "description": "Multi-line cross-axis distribution.",
7389
+ "description": "Span at extra-small breakpoints.",
7332
7390
  "privacy": "public",
7333
- "attribute": "alignContent"
7391
+ "attribute": "spanXs"
7334
7392
  },
7335
7393
  {
7336
7394
  "kind": "field",
7337
- "name": "gap",
7395
+ "name": "grow",
7338
7396
  "type": {
7339
- "text": "string"
7397
+ "text": "number"
7340
7398
  },
7341
- "default": "\"16px\"",
7342
- "description": "Shared row/column gap value.",
7399
+ "default": "0",
7400
+ "description": "Flex grow factor.",
7343
7401
  "privacy": "public",
7344
- "attribute": "gap"
7402
+ "attribute": "grow"
7345
7403
  },
7346
7404
  {
7347
7405
  "kind": "field",
7348
- "name": "gapX",
7406
+ "name": "shrink",
7349
7407
  "type": {
7350
- "text": "string | undefined"
7408
+ "text": "number"
7351
7409
  },
7352
- "description": "Horizontal gap override.",
7410
+ "default": "0",
7411
+ "description": "Flex shrink factor.",
7353
7412
  "privacy": "public",
7354
- "attribute": "gapX"
7413
+ "attribute": "shrink"
7355
7414
  },
7356
7415
  {
7357
7416
  "kind": "field",
7358
- "name": "gapY",
7417
+ "name": "basis",
7359
7418
  "type": {
7360
- "text": "string | undefined"
7419
+ "text": "string | null"
7361
7420
  },
7362
- "description": "Vertical gap override.",
7421
+ "default": "null",
7422
+ "description": "Flex basis override.",
7363
7423
  "privacy": "public",
7364
- "attribute": "gapY"
7424
+ "attribute": "basis"
7365
7425
  },
7366
7426
  {
7367
7427
  "kind": "field",
7368
- "name": "col",
7428
+ "name": "order",
7369
7429
  "type": {
7370
- "text": "number"
7430
+ "text": "number | undefined"
7371
7431
  },
7372
- "default": "12",
7373
- "description": "Total column count used for span calculations.",
7432
+ "description": "Flex order override.",
7374
7433
  "privacy": "public",
7375
- "attribute": "col"
7434
+ "attribute": "order"
7376
7435
  },
7377
7436
  {
7378
7437
  "kind": "field",
7379
- "name": "_childMo",
7438
+ "name": "alignSelf",
7380
7439
  "type": {
7381
- "text": "MutationObserver | undefined"
7440
+ "text": "SkyFlexcolAlignSelf | undefined"
7382
7441
  },
7383
- "privacy": "private"
7442
+ "description": "Cross-axis alignment override.",
7443
+ "privacy": "public",
7444
+ "attribute": "alignSelf"
7384
7445
  },
7385
7446
  {
7386
7447
  "kind": "method",
@@ -7390,51 +7451,25 @@
7390
7451
  },
7391
7452
  {
7392
7453
  "kind": "method",
7393
- "name": "recalculateSpans",
7454
+ "name": "refreshStyles",
7394
7455
  "privacy": "public",
7395
- "description": "Forces recalculation of spans for all child elements.\r\nUseful when dynamically adding/removing items."
7396
- },
7397
- {
7398
- "kind": "field",
7399
- "name": "updateSpans",
7400
- "privacy": "private",
7401
- "description": "Reads span attributes off slotted children and maps them to CSS vars:\r\nspan, span-lg, span-md, span-sm, span-xs"
7456
+ "description": "Forces resynchronization of CSS custom properties.\r\nUseful when properties are changed programmatically."
7402
7457
  },
7403
7458
  {
7404
7459
  "kind": "method",
7405
- "name": "readSpanRaw",
7406
- "privacy": "private",
7460
+ "name": "getSpan",
7461
+ "privacy": "public",
7407
7462
  "return": {
7408
7463
  "type": {
7409
- "text": "string | null"
7464
+ "text": ""
7410
7465
  }
7411
7466
  },
7412
- "parameters": [
7413
- {
7414
- "name": "el",
7415
- "type": {
7416
- "text": "HTMLElement"
7417
- }
7418
- },
7419
- {
7420
- "name": "attrName",
7421
- "type": {
7422
- "text": "string"
7423
- }
7424
- },
7425
- {
7426
- "name": "propName",
7427
- "type": {
7428
- "text": "string"
7429
- }
7430
- }
7431
- ],
7432
- "description": "Reads a span value from an HTML attribute or element property."
7467
+ "description": "Gets the current span value."
7433
7468
  },
7434
7469
  {
7435
7470
  "kind": "method",
7436
- "name": "applySpanVar",
7437
- "privacy": "private",
7471
+ "name": "setSpan",
7472
+ "privacy": "public",
7438
7473
  "return": {
7439
7474
  "type": {
7440
7475
  "text": "void"
@@ -7442,161 +7477,126 @@
7442
7477
  },
7443
7478
  "parameters": [
7444
7479
  {
7445
- "name": "el",
7446
- "type": {
7447
- "text": "HTMLElement"
7448
- }
7449
- },
7450
- {
7451
- "name": "cssVar",
7452
- "type": {
7453
- "text": "string"
7454
- }
7455
- },
7456
- {
7457
- "name": "raw",
7458
- "type": {
7459
- "text": "string | null"
7460
- }
7461
- }
7462
- ],
7463
- "description": "Sets or clears a span CSS variable on a slotted child."
7464
- },
7465
- {
7466
- "kind": "method",
7467
- "name": "clampSpan",
7468
- "privacy": "private",
7469
- "return": {
7470
- "type": {
7471
- "text": ""
7472
- }
7473
- },
7474
- "parameters": [
7475
- {
7476
- "name": "raw",
7480
+ "name": "value",
7477
7481
  "type": {
7478
- "text": "string | null"
7482
+ "text": "number"
7479
7483
  },
7480
- "description": "Raw span value from attribute"
7484
+ "description": "New span value"
7481
7485
  }
7482
7486
  ],
7483
- "description": "Clamps span value to valid range (1 to column count)."
7487
+ "description": "Sets the span value and updates styles."
7484
7488
  }
7485
7489
  ],
7486
- "events": [
7490
+ "attributes": [
7487
7491
  {
7492
+ "name": "span",
7488
7493
  "type": {
7489
- "text": "Event"
7494
+ "text": "number"
7490
7495
  },
7491
- "description": "Fired when slotted children change.",
7492
- "name": "slotchange"
7493
- }
7494
- ],
7495
- "attributes": [
7496
+ "default": "1",
7497
+ "description": "Base number of columns to span.",
7498
+ "fieldName": "span"
7499
+ },
7496
7500
  {
7497
- "name": "direction",
7501
+ "name": "spanLg",
7498
7502
  "type": {
7499
- "text": "SkyFlexboxDirection"
7503
+ "text": "number | undefined"
7500
7504
  },
7501
- "default": "\"row\"",
7502
- "description": "Flex direction.",
7503
- "fieldName": "direction"
7505
+ "description": "Span at large breakpoints.",
7506
+ "fieldName": "spanLg"
7504
7507
  },
7505
7508
  {
7506
- "name": "wrap",
7509
+ "name": "spanMd",
7507
7510
  "type": {
7508
- "text": "SkyFlexboxWrap"
7511
+ "text": "number | undefined"
7509
7512
  },
7510
- "default": "\"wrap\"",
7511
- "description": "Flex wrap behavior.",
7512
- "fieldName": "wrap"
7513
+ "description": "Span at medium breakpoints.",
7514
+ "fieldName": "spanMd"
7513
7515
  },
7514
7516
  {
7515
- "name": "justify",
7517
+ "name": "spanSm",
7516
7518
  "type": {
7517
- "text": "SkyFlexboxJustify"
7519
+ "text": "number | undefined"
7518
7520
  },
7519
- "default": "\"flex-start\"",
7520
- "description": "Main-axis alignment.",
7521
- "fieldName": "justify"
7521
+ "description": "Span at small breakpoints.",
7522
+ "fieldName": "spanSm"
7522
7523
  },
7523
7524
  {
7524
- "name": "align",
7525
+ "name": "spanXs",
7525
7526
  "type": {
7526
- "text": "SkyFlexboxAlign"
7527
+ "text": "number | undefined"
7527
7528
  },
7528
- "default": "\"stretch\"",
7529
- "description": "Cross-axis alignment.",
7530
- "fieldName": "align"
7529
+ "description": "Span at extra-small breakpoints.",
7530
+ "fieldName": "spanXs"
7531
7531
  },
7532
7532
  {
7533
- "name": "alignContent",
7533
+ "name": "grow",
7534
7534
  "type": {
7535
- "text": "SkyFlexboxAlignContent"
7535
+ "text": "number"
7536
7536
  },
7537
- "default": "\"normal\"",
7538
- "description": "Multi-line cross-axis distribution.",
7539
- "fieldName": "alignContent"
7537
+ "default": "0",
7538
+ "description": "Flex grow factor.",
7539
+ "fieldName": "grow"
7540
7540
  },
7541
7541
  {
7542
- "name": "gap",
7542
+ "name": "shrink",
7543
7543
  "type": {
7544
- "text": "string"
7544
+ "text": "number"
7545
7545
  },
7546
- "default": "\"16px\"",
7547
- "description": "Shared row/column gap value.",
7548
- "fieldName": "gap"
7546
+ "default": "0",
7547
+ "description": "Flex shrink factor.",
7548
+ "fieldName": "shrink"
7549
7549
  },
7550
7550
  {
7551
- "name": "gapX",
7551
+ "name": "basis",
7552
7552
  "type": {
7553
- "text": "string | undefined"
7553
+ "text": "string | null"
7554
7554
  },
7555
- "description": "Horizontal gap override.",
7556
- "fieldName": "gapX"
7555
+ "default": "null",
7556
+ "description": "Flex basis override.",
7557
+ "fieldName": "basis"
7557
7558
  },
7558
7559
  {
7559
- "name": "gapY",
7560
+ "name": "order",
7560
7561
  "type": {
7561
- "text": "string | undefined"
7562
+ "text": "number | undefined"
7562
7563
  },
7563
- "description": "Vertical gap override.",
7564
- "fieldName": "gapY"
7564
+ "description": "Flex order override.",
7565
+ "fieldName": "order"
7565
7566
  },
7566
7567
  {
7567
- "name": "col",
7568
+ "name": "alignSelf",
7568
7569
  "type": {
7569
- "text": "number"
7570
+ "text": "SkyFlexcolAlignSelf | undefined"
7570
7571
  },
7571
- "default": "12",
7572
- "description": "Total column count used for span calculations.",
7573
- "fieldName": "col"
7572
+ "description": "Cross-axis alignment override.",
7573
+ "fieldName": "alignSelf"
7574
7574
  }
7575
7575
  ],
7576
7576
  "superclass": {
7577
7577
  "name": "LitElement",
7578
7578
  "package": "lit"
7579
7579
  },
7580
- "tagName": "sky-flexbox",
7580
+ "tagName": "sky-flexcol",
7581
7581
  "customElement": true,
7582
- "summary": "Flexbox container with grid-like span support for slotted children."
7582
+ "summary": "Flex column item for `sky-flexbox` layouts with responsive span controls."
7583
7583
  }
7584
7584
  ],
7585
7585
  "exports": [
7586
7586
  {
7587
7587
  "kind": "js",
7588
- "name": "SkyFlexbox",
7588
+ "name": "SkyFlexcol",
7589
7589
  "declaration": {
7590
- "name": "SkyFlexbox",
7591
- "module": "src/sky-flexbox/sky-flexbox.ts"
7590
+ "name": "SkyFlexcol",
7591
+ "module": "src/sky-flexcol/sky-flexcol.ts"
7592
7592
  }
7593
7593
  },
7594
7594
  {
7595
7595
  "kind": "custom-element-definition",
7596
- "name": "sky-flexbox",
7596
+ "name": "sky-flexcol",
7597
7597
  "declaration": {
7598
- "name": "SkyFlexbox",
7599
- "module": "src/sky-flexbox/sky-flexbox.ts"
7598
+ "name": "SkyFlexcol",
7599
+ "module": "src/sky-flexcol/sky-flexcol.ts"
7600
7600
  }
7601
7601
  }
7602
7602
  ]