@sky.ui/core 0.0.31 → 0.0.33

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 (6) hide show
  1. package/dist/custom-elements.json +1058 -1058
  2. package/dist/helper/index.js +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +5 -2
  5. package/plugins/rollup-plugin.js +5 -19
  6. package/plugins/webpack-plugin.js +3 -3
package/dist/custom-elements.json CHANGED
@@ -453,34 +453,34 @@
453
453
  },
454
454
  {
455
455
  "kind": "javascript-module",
456
- "path": "src/sky-button/sky-button.ts",
456
+ "path": "src/sky-badge/sky-badge.ts",
457
457
  "declarations": [
458
458
  {
459
459
  "kind": "class",
460
460
  "description": "",
461
- "name": "SkyButton",
461
+ "name": "SkyBadge",
462
462
  "cssParts": [
463
463
  {
464
- "description": "The native `<button>` element.",
465
- "name": "button"
466
- },
467
- {
468
- "description": "The optional left/right icons.",
469
- "name": "icon"
464
+ "description": "Wrapper around the slotted content and the badge.",
465
+ "name": "container"
470
466
  },
471
467
  {
472
- "description": "Overlay displayed when loading.",
473
- "name": "loading-overlay"
468
+ "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
469
+ "name": "badge"
474
470
  },
475
471
  {
476
- "description": "Spinner displayed when loading.",
477
- "name": "spinner"
472
+ "description": "The icon element when `isIcon` is true.",
473
+ "name": "icon"
478
474
  }
479
475
  ],
480
476
  "slots": [
481
477
  {
482
- "description": "Default slot for the button label (replaces `label` property if used).",
478
+ "description": "The content the badge attaches to.",
483
479
  "name": ""
480
+ },
481
+ {
482
+ "description": "Optional slot to override the badge content entirely.",
483
+ "name": "badge"
484
484
  }
485
485
  ],
486
486
  "members": [
@@ -495,61 +495,68 @@
495
495
  },
496
496
  {
497
497
  "kind": "field",
498
- "name": "formAssociated",
498
+ "name": "statusColor",
499
499
  "type": {
500
- "text": "boolean"
500
+ "text": "string"
501
501
  },
502
- "static": true,
503
- "default": "true"
502
+ "default": "\"success\"",
503
+ "description": "Badge background token or CSS color.",
504
+ "attribute": "statusColor",
505
+ "reflects": true
504
506
  },
505
507
  {
506
508
  "kind": "field",
507
- "name": "internals",
509
+ "name": "textColor",
508
510
  "type": {
509
- "text": "ElementInternals"
511
+ "text": "string"
510
512
  },
511
- "privacy": "private"
513
+ "default": "\"default\"",
514
+ "description": "Text color token or CSS color.",
515
+ "attribute": "textColor",
516
+ "reflects": true
512
517
  },
513
518
  {
514
519
  "kind": "field",
515
- "name": "variant",
520
+ "name": "iconColor",
516
521
  "type": {
517
- "text": "SkyButtonVariant"
522
+ "text": "string"
518
523
  },
519
- "default": "\"solid\"",
520
- "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
521
- "attribute": "variant",
524
+ "default": "\"\"",
525
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
526
+ "attribute": "iconColor",
522
527
  "reflects": true
523
528
  },
524
529
  {
525
530
  "kind": "field",
526
- "name": "color",
531
+ "name": "position",
527
532
  "type": {
528
- "text": "string"
533
+ "text": "SkyBadgePosition"
529
534
  },
530
- "default": "\"primary\"",
531
- "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
532
- "attribute": "color"
535
+ "default": "\"default\"",
536
+ "description": "Layout mode: `default | floating | inline`.",
537
+ "attribute": "position",
538
+ "reflects": true
533
539
  },
534
540
  {
535
541
  "kind": "field",
536
- "name": "type",
542
+ "name": "value",
537
543
  "type": {
538
- "text": "SkyButtonType"
544
+ "text": "string"
539
545
  },
540
- "default": "\"button\"",
541
- "description": "Button type attribute. Default: `\"button\"`.",
542
- "attribute": "type"
546
+ "default": "\"\"",
547
+ "description": "Badge text/count or icon name in icon mode.",
548
+ "attribute": "value"
543
549
  },
544
550
  {
545
551
  "kind": "field",
546
- "name": "form",
552
+ "name": "isIcon",
547
553
  "type": {
548
- "text": "string"
554
+ "text": "boolean"
549
555
  },
550
- "default": "\"\"",
551
- "description": "Associated form ID for custom submit handling.",
552
- "attribute": "form"
556
+ "default": "false",
557
+ "description": "Renders icon mode when true.",
558
+ "attribute": "isIcon",
559
+ "reflects": true
553
560
  },
554
561
  {
555
562
  "kind": "field",
@@ -557,467 +564,486 @@
557
564
  "type": {
558
565
  "text": "string"
559
566
  },
560
- "default": "\"md\"",
561
- "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
562
- "attribute": "size"
567
+ "default": "\"\"",
568
+ "description": "Badge and icon size CSS length.",
569
+ "attribute": "size",
570
+ "reflects": true
563
571
  },
564
572
  {
565
573
  "kind": "field",
566
- "name": "radius",
574
+ "name": "shape",
567
575
  "type": {
568
- "text": "string"
576
+ "text": "SkyBadgeShape"
569
577
  },
570
- "default": "\"md\"",
571
- "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
572
- "attribute": "radius"
578
+ "default": "\"custom\"",
579
+ "description": "Badge shape: `circle | pill | custom`.",
580
+ "attribute": "shape",
581
+ "reflects": true
573
582
  },
574
583
  {
575
584
  "kind": "field",
576
- "name": "label",
585
+ "name": "max",
577
586
  "type": {
578
- "text": "string"
587
+ "text": "number"
579
588
  },
580
- "default": "\"Button\"",
581
- "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
582
- "attribute": "label"
589
+ "default": "99",
590
+ "description": "Maximum numeric count before rendering overflow label.",
591
+ "attribute": "max"
583
592
  },
584
593
  {
585
594
  "kind": "field",
586
- "name": "disabled",
595
+ "name": "hideWhenZero",
587
596
  "type": {
588
597
  "text": "boolean"
589
598
  },
590
599
  "default": "false",
591
- "description": "Whether the button is disabled. Default: `false`.",
592
- "attribute": "disabled",
593
- "reflects": true
600
+ "description": "Hides badge when value resolves to numeric zero.",
601
+ "attribute": "hideWhenZero"
594
602
  },
595
603
  {
596
604
  "kind": "field",
597
- "name": "loading",
605
+ "name": "show",
598
606
  "type": {
599
607
  "text": "boolean"
600
608
  },
601
- "default": "false",
602
- "description": "Shows a loading overlay when true. Default: `false`.",
603
- "attribute": "loading",
609
+ "default": "true",
610
+ "description": "Forces badge visibility independent of value.",
611
+ "attribute": "show",
604
612
  "reflects": true
605
613
  },
606
614
  {
607
615
  "kind": "field",
608
- "name": "iconL",
616
+ "name": "offsetX",
609
617
  "type": {
610
618
  "text": "string"
611
619
  },
612
- "default": "\"\"",
613
- "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
614
- "attribute": "iconL"
620
+ "default": "\"0px\"",
621
+ "description": "Horizontal offset CSS length.",
622
+ "attribute": "offsetX"
615
623
  },
616
624
  {
617
625
  "kind": "field",
618
- "name": "iconR",
626
+ "name": "offsetY",
619
627
  "type": {
620
628
  "text": "string"
621
629
  },
622
- "default": "\"\"",
623
- "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
624
- "attribute": "iconR"
630
+ "default": "\"0px\"",
631
+ "description": "Vertical offset CSS length.",
632
+ "attribute": "offsetY"
625
633
  },
626
634
  {
627
635
  "kind": "field",
628
- "name": "iconOnly",
636
+ "name": "ring",
629
637
  "type": {
630
638
  "text": "boolean"
631
639
  },
632
640
  "default": "false",
633
- "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
634
- "attribute": "iconOnly",
635
- "reflects": true
641
+ "description": "Enables visual ring around the badge.",
642
+ "attribute": "ring"
636
643
  },
637
644
  {
638
645
  "kind": "field",
639
- "name": "colors",
646
+ "name": "ringColor",
640
647
  "type": {
641
648
  "text": "string"
642
649
  },
643
- "default": "\"\"",
644
- "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
645
- "attribute": "colors"
650
+ "default": "\"primary\"",
651
+ "description": "Ring color token or CSS color.",
652
+ "attribute": "ringColor"
646
653
  },
647
654
  {
648
655
  "kind": "field",
649
- "name": "animation",
656
+ "name": "ringOffset",
650
657
  "type": {
651
- "text": "SkyButtonAnimation"
658
+ "text": "string"
652
659
  },
653
- "default": "\"auto\"",
654
- "description": "Transform animation style. Default: `\"auto\"`.",
655
- "attribute": "animation",
656
- "reflects": true
660
+ "default": "\"1px\"",
661
+ "description": "Ring offset CSS length.",
662
+ "attribute": "ringOffset"
657
663
  },
658
664
  {
659
665
  "kind": "field",
660
- "name": "_hasMeaningfulSlot",
666
+ "name": "badgeLabel",
667
+ "type": {
668
+ "text": "string | null"
669
+ },
670
+ "default": "null",
671
+ "description": "ARIA label override.",
672
+ "attribute": "badgeLabel"
673
+ },
674
+ {
675
+ "kind": "field",
676
+ "name": "badgeAriaHidden",
661
677
  "type": {
662
678
  "text": "boolean"
663
679
  },
664
- "privacy": "private",
665
- "default": "false"
680
+ "default": "false",
681
+ "description": "Hides badge from assistive technology when true.",
682
+ "attribute": "badgeAriaHidden"
666
683
  },
667
684
  {
668
685
  "kind": "field",
669
- "name": "_styleVars",
686
+ "name": "interactive",
670
687
  "type": {
671
- "text": "Record<string, string>"
688
+ "text": "boolean"
672
689
  },
673
- "privacy": "private",
674
- "default": "{}",
675
- "description": "Inline CSS variable cache."
690
+ "default": "false",
691
+ "description": "Enables focus/activation and `badge-click` emission.",
692
+ "attribute": "interactive"
676
693
  },
677
694
  {
678
- "kind": "method",
679
- "name": "_slotHasMeaningfulContent",
680
- "privacy": "private",
681
- "return": {
682
- "type": {
683
- "text": "boolean"
684
- }
695
+ "kind": "field",
696
+ "name": "placement",
697
+ "type": {
698
+ "text": "SkyBadgePlacement"
685
699
  },
686
- "parameters": [
687
- {
688
- "name": "slotEl",
689
- "type": {
690
- "text": "HTMLSlotElement"
691
- }
692
- }
693
- ]
700
+ "default": "\"custom\"",
701
+ "description": "Anchor placement preset for badge positioning.",
702
+ "attribute": "placement",
703
+ "reflects": true
694
704
  },
695
705
  {
696
706
  "kind": "field",
697
- "name": "_onSlotChange",
707
+ "name": "_badgeEl",
708
+ "type": {
709
+ "text": "HTMLSpanElement"
710
+ },
698
711
  "privacy": "private"
699
712
  },
713
+ {
714
+ "kind": "field",
715
+ "name": "badgeRef",
716
+ "privacy": "public",
717
+ "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
718
+ },
719
+ {
720
+ "kind": "field",
721
+ "name": "shadowRootOptions",
722
+ "type": {
723
+ "text": "ShadowRootInit"
724
+ },
725
+ "static": true,
726
+ "default": "{ mode: \"open\", delegatesFocus: true, }"
727
+ },
700
728
  {
701
729
  "kind": "method",
702
- "name": "_toSquarePadding",
703
- "privacy": "private",
730
+ "name": "showBadge",
731
+ "privacy": "public",
704
732
  "return": {
705
733
  "type": {
706
- "text": "string"
734
+ "text": "void"
707
735
  }
708
736
  },
709
- "parameters": [
710
- {
711
- "name": "padding",
712
- "type": {
713
- "text": "string"
714
- }
715
- }
716
- ],
717
- "description": "Uses vertical padding for equal sides (icon-only square control)."
737
+ "description": "Forces badge visibility on."
718
738
  },
719
739
  {
720
740
  "kind": "method",
721
- "name": "_resolveSize",
722
- "privacy": "private",
741
+ "name": "hideBadge",
742
+ "privacy": "public",
723
743
  "return": {
724
744
  "type": {
725
- "text": "{\r\n padding: string;\r\n fontSize: string;\r\n gap: string;\r\n icon: string;\r\n spinner: string;\r\n }"
745
+ "text": "void"
726
746
  }
727
747
  },
728
- "parameters": [
729
- {
730
- "name": "input",
731
- "type": {
732
- "text": "string"
733
- }
734
- }
735
- ]
748
+ "description": "Forces badge visibility off."
736
749
  },
737
750
  {
738
751
  "kind": "method",
739
- "name": "_isThemeBorderShorthand",
740
- "privacy": "private",
752
+ "name": "setValue",
753
+ "privacy": "public",
741
754
  "return": {
742
755
  "type": {
743
- "text": "boolean"
756
+ "text": "void"
744
757
  }
745
758
  },
746
759
  "parameters": [
747
760
  {
748
- "name": "border",
761
+ "name": "value",
749
762
  "type": {
750
- "text": "string | undefined"
751
- }
763
+ "text": "string"
764
+ },
765
+ "description": "Badge value or icon name."
752
766
  }
753
767
  ],
754
- "description": "Theme tokens like `var(--sky-border-primary)` are full border shorthands, not colors."
768
+ "description": "Updates badge value for text/count or icon modes."
755
769
  },
756
770
  {
757
- "kind": "method",
758
- "name": "_borderColorFromShorthand",
771
+ "kind": "field",
772
+ "name": "_onActivate",
759
773
  "privacy": "private",
760
- "return": {
761
- "type": {
762
- "text": "string"
763
- }
764
- },
765
- "parameters": [
766
- {
767
- "name": "border",
768
- "type": {
769
- "text": "string | undefined"
770
- }
771
- }
772
- ],
773
- "description": "Extracts the color token from a `Npx solid …` border shorthand."
774
- },
775
- {
776
- "kind": "method",
777
- "name": "focusButton",
778
- "privacy": "public",
779
- "return": {
780
- "type": {
781
- "text": "void"
782
- }
783
- },
784
- "description": "Focuses the internal native button."
774
+ "description": "Emits `badge-click` for interactive activation."
785
775
  },
786
776
  {
787
- "kind": "method",
788
- "name": "clickButton",
789
- "privacy": "public",
790
- "return": {
791
- "type": {
792
- "text": "void"
793
- }
794
- },
795
- "description": "Triggers a click on the internal native button when enabled."
777
+ "kind": "field",
778
+ "name": "_onKeydown",
779
+ "privacy": "private",
780
+ "description": "Handles keyboard activation with Enter and Space."
796
781
  },
797
782
  {
798
783
  "kind": "method",
799
- "name": "_createRipple",
784
+ "name": "_computeAriaLabel",
800
785
  "privacy": "private",
801
786
  "return": {
802
787
  "type": {
803
- "text": "void"
788
+ "text": "string | null"
804
789
  }
805
790
  },
806
791
  "parameters": [
807
792
  {
808
- "name": "event",
793
+ "name": "displayValue",
809
794
  "type": {
810
- "text": "MouseEvent"
795
+ "text": "string | null"
811
796
  }
812
797
  }
813
- ]
798
+ ],
799
+ "description": "Computes accessible badge label from current render state."
814
800
  },
815
801
  {
816
802
  "kind": "method",
817
- "name": "formDisabledCallback",
803
+ "name": "_computeAnchors",
804
+ "privacy": "private",
818
805
  "return": {
819
806
  "type": {
820
- "text": "void"
807
+ "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
821
808
  }
822
809
  },
823
810
  "parameters": [
824
811
  {
825
- "name": "disabled",
812
+ "name": "placement",
826
813
  "type": {
827
- "text": "boolean"
814
+ "text": "SkyBadgePlacement"
828
815
  }
829
816
  }
830
- ]
831
- },
832
- {
833
- "kind": "field",
834
- "name": "formOwner",
835
- "type": {
836
- "text": "HTMLFormElement | null"
837
- },
838
- "readonly": true
817
+ ],
818
+ "description": "Resolves anchor edges from placement preset."
839
819
  },
840
820
  {
841
821
  "kind": "method",
842
- "name": "_handleClick",
822
+ "name": "_resolveBadgeSurface",
843
823
  "privacy": "private",
844
824
  "return": {
845
825
  "type": {
846
- "text": "void"
826
+ "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
847
827
  }
848
828
  },
849
- "parameters": [
850
- {
851
- "name": "event",
852
- "type": {
853
- "text": "MouseEvent"
854
- }
855
- }
856
- ]
857
- },
829
+ "description": "Maps semantic status tokens to soft badge surface colors."
830
+ }
831
+ ],
832
+ "events": [
858
833
  {
859
- "kind": "method",
860
- "name": "_iconOnlyName",
861
- "privacy": "private",
862
- "return": {
863
- "type": {
864
- "text": "string"
865
- }
866
- }
834
+ "type": {
835
+ "text": "CustomEvent<SkyBadgeClickEventDetail>"
836
+ },
837
+ "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
838
+ "name": "badge-click"
867
839
  }
868
840
  ],
869
841
  "attributes": [
870
842
  {
871
- "name": "variant",
843
+ "name": "statusColor",
872
844
  "type": {
873
- "text": "SkyButtonVariant"
845
+ "text": "string"
874
846
  },
875
- "default": "\"solid\"",
876
- "description": "Visual variant of the button. Use `\"link\"` for text-only control with underline on hover. Default: `\"solid\"`.",
877
- "fieldName": "variant"
847
+ "default": "\"success\"",
848
+ "description": "Badge background token or CSS color.",
849
+ "fieldName": "statusColor"
878
850
  },
879
851
  {
880
- "name": "color",
852
+ "name": "textColor",
881
853
  "type": {
882
854
  "text": "string"
883
855
  },
884
- "default": "\"primary\"",
885
- "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
886
- "fieldName": "color"
856
+ "default": "\"default\"",
857
+ "description": "Text color token or CSS color.",
858
+ "fieldName": "textColor"
887
859
  },
888
860
  {
889
- "name": "type",
861
+ "name": "iconColor",
890
862
  "type": {
891
- "text": "SkyButtonType"
863
+ "text": "string"
892
864
  },
893
- "default": "\"button\"",
894
- "description": "Button type attribute. Default: `\"button\"`.",
895
- "fieldName": "type"
865
+ "default": "\"\"",
866
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
867
+ "fieldName": "iconColor"
896
868
  },
897
869
  {
898
- "name": "form",
870
+ "name": "position",
871
+ "type": {
872
+ "text": "SkyBadgePosition"
873
+ },
874
+ "default": "\"default\"",
875
+ "description": "Layout mode: `default | floating | inline`.",
876
+ "fieldName": "position"
877
+ },
878
+ {
879
+ "name": "value",
899
880
  "type": {
900
881
  "text": "string"
901
882
  },
902
883
  "default": "\"\"",
903
- "description": "Associated form ID for custom submit handling.",
904
- "fieldName": "form"
884
+ "description": "Badge text/count or icon name in icon mode.",
885
+ "fieldName": "value"
886
+ },
887
+ {
888
+ "name": "isIcon",
889
+ "type": {
890
+ "text": "boolean"
891
+ },
892
+ "default": "false",
893
+ "description": "Renders icon mode when true.",
894
+ "fieldName": "isIcon"
905
895
  },
906
896
  {
907
897
  "name": "size",
908
898
  "type": {
909
899
  "text": "string"
910
900
  },
911
- "default": "\"md\"",
912
- "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
901
+ "default": "\"\"",
902
+ "description": "Badge and icon size CSS length.",
913
903
  "fieldName": "size"
914
904
  },
915
905
  {
916
- "name": "radius",
906
+ "name": "shape",
917
907
  "type": {
918
- "text": "string"
908
+ "text": "SkyBadgeShape"
919
909
  },
920
- "default": "\"md\"",
921
- "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
922
- "fieldName": "radius"
910
+ "default": "\"custom\"",
911
+ "description": "Badge shape: `circle | pill | custom`.",
912
+ "fieldName": "shape"
923
913
  },
924
914
  {
925
- "name": "label",
915
+ "name": "max",
926
916
  "type": {
927
- "text": "string"
917
+ "text": "number"
928
918
  },
929
- "default": "\"Button\"",
930
- "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
931
- "fieldName": "label"
919
+ "default": "99",
920
+ "description": "Maximum numeric count before rendering overflow label.",
921
+ "fieldName": "max"
932
922
  },
933
923
  {
934
- "name": "disabled",
924
+ "name": "hideWhenZero",
935
925
  "type": {
936
926
  "text": "boolean"
937
927
  },
938
928
  "default": "false",
939
- "description": "Whether the button is disabled. Default: `false`.",
940
- "fieldName": "disabled"
929
+ "description": "Hides badge when value resolves to numeric zero.",
930
+ "fieldName": "hideWhenZero"
941
931
  },
942
932
  {
943
- "name": "loading",
933
+ "name": "show",
944
934
  "type": {
945
935
  "text": "boolean"
946
936
  },
947
- "default": "false",
948
- "description": "Shows a loading overlay when true. Default: `false`.",
949
- "fieldName": "loading"
937
+ "default": "true",
938
+ "description": "Forces badge visibility independent of value.",
939
+ "fieldName": "show"
950
940
  },
951
941
  {
952
- "name": "iconL",
942
+ "name": "offsetX",
953
943
  "type": {
954
944
  "text": "string"
955
945
  },
956
- "default": "\"\"",
957
- "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
958
- "fieldName": "iconL"
946
+ "default": "\"0px\"",
947
+ "description": "Horizontal offset CSS length.",
948
+ "fieldName": "offsetX"
959
949
  },
960
950
  {
961
- "name": "iconR",
951
+ "name": "offsetY",
962
952
  "type": {
963
953
  "text": "string"
964
954
  },
965
- "default": "\"\"",
966
- "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
967
- "fieldName": "iconR"
955
+ "default": "\"0px\"",
956
+ "description": "Vertical offset CSS length.",
957
+ "fieldName": "offsetY"
968
958
  },
969
959
  {
970
- "name": "iconOnly",
960
+ "name": "ring",
971
961
  "type": {
972
962
  "text": "boolean"
973
963
  },
974
964
  "default": "false",
975
- "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
976
- "fieldName": "iconOnly"
965
+ "description": "Enables visual ring around the badge.",
966
+ "fieldName": "ring"
977
967
  },
978
968
  {
979
- "name": "colors",
969
+ "name": "ringColor",
980
970
  "type": {
981
971
  "text": "string"
982
972
  },
983
- "default": "\"\"",
984
- "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
985
- "fieldName": "colors"
973
+ "default": "\"primary\"",
974
+ "description": "Ring color token or CSS color.",
975
+ "fieldName": "ringColor"
986
976
  },
987
977
  {
988
- "name": "animation",
978
+ "name": "ringOffset",
989
979
  "type": {
990
- "text": "SkyButtonAnimation"
980
+ "text": "string"
991
981
  },
992
- "default": "\"auto\"",
993
- "description": "Transform animation style. Default: `\"auto\"`.",
994
- "fieldName": "animation"
982
+ "default": "\"1px\"",
983
+ "description": "Ring offset CSS length.",
984
+ "fieldName": "ringOffset"
985
+ },
986
+ {
987
+ "name": "badgeLabel",
988
+ "type": {
989
+ "text": "string | null"
990
+ },
991
+ "default": "null",
992
+ "description": "ARIA label override.",
993
+ "fieldName": "badgeLabel"
994
+ },
995
+ {
996
+ "name": "badgeAriaHidden",
997
+ "type": {
998
+ "text": "boolean"
999
+ },
1000
+ "default": "false",
1001
+ "description": "Hides badge from assistive technology when true.",
1002
+ "fieldName": "badgeAriaHidden"
1003
+ },
1004
+ {
1005
+ "name": "interactive",
1006
+ "type": {
1007
+ "text": "boolean"
1008
+ },
1009
+ "default": "false",
1010
+ "description": "Enables focus/activation and `badge-click` emission.",
1011
+ "fieldName": "interactive"
1012
+ },
1013
+ {
1014
+ "name": "placement",
1015
+ "type": {
1016
+ "text": "SkyBadgePlacement"
1017
+ },
1018
+ "default": "\"custom\"",
1019
+ "description": "Anchor placement preset for badge positioning.",
1020
+ "fieldName": "placement"
995
1021
  }
996
1022
  ],
997
1023
  "superclass": {
998
1024
  "name": "LitElement",
999
1025
  "package": "lit"
1000
1026
  },
1001
- "tagName": "sky-button",
1027
+ "tagName": "sky-badge",
1002
1028
  "customElement": true,
1003
- "summary": "Styled button supporting variants, icons, loading state, ripple feedback, and form-associated behavior."
1029
+ "summary": "Badge for status dots, counts, or icons anchored to slotted content."
1004
1030
  }
1005
1031
  ],
1006
1032
  "exports": [
1007
1033
  {
1008
1034
  "kind": "js",
1009
- "name": "SkyButton",
1035
+ "name": "SkyBadge",
1010
1036
  "declaration": {
1011
- "name": "SkyButton",
1012
- "module": "src/sky-button/sky-button.ts"
1037
+ "name": "SkyBadge",
1038
+ "module": "src/sky-badge/sky-badge.ts"
1013
1039
  }
1014
1040
  },
1015
1041
  {
1016
1042
  "kind": "custom-element-definition",
1017
- "name": "sky-button",
1043
+ "name": "sky-badge",
1018
1044
  "declaration": {
1019
- "name": "SkyButton",
1020
- "module": "src/sky-button/sky-button.ts"
1045
+ "name": "SkyBadge",
1046
+ "module": "src/sky-badge/sky-badge.ts"
1021
1047
  }
1022
1048
  }
1023
1049
  ]
@@ -1395,34 +1421,38 @@
1395
1421
  },
1396
1422
  {
1397
1423
  "kind": "javascript-module",
1398
- "path": "src/sky-badge/sky-badge.ts",
1424
+ "path": "src/sky-appbar/sky-appbar.ts",
1399
1425
  "declarations": [
1400
1426
  {
1401
1427
  "kind": "class",
1402
1428
  "description": "",
1403
- "name": "SkyBadge",
1429
+ "name": "SkyAppbar",
1404
1430
  "cssParts": [
1405
1431
  {
1406
- "description": "Wrapper around the slotted content and the badge.",
1407
- "name": "container"
1432
+ "description": "Wrapper that contains the leading slot, title, and actions.",
1433
+ "name": "content"
1408
1434
  },
1409
1435
  {
1410
- "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
1411
- "name": "badge"
1436
+ "description": "Container for the leading slot (e.g. menu button).",
1437
+ "name": "leading"
1412
1438
  },
1413
1439
  {
1414
- "description": "The icon element when `isIcon` is true.",
1415
- "name": "icon"
1440
+ "description": "The title area (contains .title-text with the title string).",
1441
+ "name": "title"
1442
+ },
1443
+ {
1444
+ "description": "The trailing actions container.",
1445
+ "name": "actions"
1416
1446
  }
1417
1447
  ],
1418
1448
  "slots": [
1419
1449
  {
1420
- "description": "The content the badge attaches to.",
1421
- "name": ""
1450
+ "description": "Leading area (e.g., menu/back button). Defaults to a hamburger icon.",
1451
+ "name": "button"
1422
1452
  },
1423
1453
  {
1424
- "description": "Optional slot to override the badge content entirely.",
1425
- "name": "badge"
1454
+ "description": "Trailing actions (icons/buttons). This is the default slot.",
1455
+ "name": ""
1426
1456
  }
1427
1457
  ],
1428
1458
  "members": [
@@ -1437,262 +1467,537 @@
1437
1467
  },
1438
1468
  {
1439
1469
  "kind": "field",
1440
- "name": "statusColor",
1470
+ "name": "title",
1441
1471
  "type": {
1442
1472
  "text": "string"
1443
1473
  },
1444
- "default": "\"success\"",
1445
- "description": "Badge background token or CSS color.",
1446
- "attribute": "statusColor",
1447
- "reflects": true
1474
+ "default": "\"App Bar\"",
1475
+ "description": "Title text displayed in the app bar.",
1476
+ "attribute": "title"
1448
1477
  },
1449
1478
  {
1450
1479
  "kind": "field",
1451
- "name": "textColor",
1480
+ "name": "color",
1452
1481
  "type": {
1453
1482
  "text": "string"
1454
1483
  },
1455
1484
  "default": "\"default\"",
1456
- "description": "Text color token or CSS color.",
1457
- "attribute": "textColor",
1458
- "reflects": true
1485
+ "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
1486
+ "attribute": "color"
1459
1487
  },
1460
1488
  {
1461
1489
  "kind": "field",
1462
- "name": "iconColor",
1490
+ "name": "url",
1463
1491
  "type": {
1464
1492
  "text": "string"
1465
1493
  },
1466
1494
  "default": "\"\"",
1467
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1468
- "attribute": "iconColor",
1469
- "reflects": true
1495
+ "description": "Background image URL.",
1496
+ "attribute": "url"
1470
1497
  },
1471
1498
  {
1472
1499
  "kind": "field",
1473
- "name": "position",
1500
+ "name": "banner",
1474
1501
  "type": {
1475
- "text": "SkyBadgePosition"
1502
+ "text": "boolean"
1476
1503
  },
1477
- "default": "\"default\"",
1478
- "description": "Layout mode: `default | floating | inline`.",
1479
- "attribute": "position",
1480
- "reflects": true
1504
+ "default": "true",
1505
+ "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
1506
+ "attribute": "banner"
1481
1507
  },
1482
1508
  {
1483
1509
  "kind": "field",
1484
- "name": "value",
1510
+ "name": "dense",
1485
1511
  "type": {
1486
- "text": "string"
1512
+ "text": "boolean"
1487
1513
  },
1488
- "default": "\"\"",
1489
- "description": "Badge text/count or icon name in icon mode.",
1490
- "attribute": "value"
1514
+ "default": "false",
1515
+ "description": "Enables compact vertical spacing.",
1516
+ "attribute": "dense"
1491
1517
  },
1492
1518
  {
1493
1519
  "kind": "field",
1494
- "name": "isIcon",
1520
+ "name": "elevated",
1495
1521
  "type": {
1496
1522
  "text": "boolean"
1497
1523
  },
1498
1524
  "default": "false",
1499
- "description": "Renders icon mode when true.",
1500
- "attribute": "isIcon",
1501
- "reflects": true
1525
+ "description": "Applies elevated shadow styling.",
1526
+ "attribute": "elevated"
1502
1527
  },
1503
1528
  {
1504
1529
  "kind": "field",
1505
- "name": "size",
1530
+ "name": "leadingLabel",
1506
1531
  "type": {
1507
1532
  "text": "string"
1508
1533
  },
1509
- "default": "\"\"",
1510
- "description": "Badge and icon size CSS length.",
1511
- "attribute": "size",
1512
- "reflects": true
1534
+ "default": "\"Open menu\"",
1535
+ "description": "Accessible label for default leading button fallback.",
1536
+ "attribute": "leadingLabel"
1513
1537
  },
1514
1538
  {
1515
- "kind": "field",
1516
- "name": "shape",
1517
- "type": {
1518
- "text": "SkyBadgeShape"
1539
+ "kind": "method",
1540
+ "name": "_applyColorSurface",
1541
+ "privacy": "private",
1542
+ "return": {
1543
+ "type": {
1544
+ "text": "void"
1545
+ }
1519
1546
  },
1520
- "default": "\"custom\"",
1521
- "description": "Badge shape: `circle | pill | custom`.",
1522
- "attribute": "shape",
1523
- "reflects": true
1547
+ "description": "Applies glass vs solid surface tokens from `color`."
1524
1548
  },
1525
1549
  {
1526
- "kind": "field",
1527
- "name": "max",
1528
- "type": {
1529
- "text": "number"
1550
+ "kind": "method",
1551
+ "name": "_applyBackgroundImage",
1552
+ "privacy": "private",
1553
+ "return": {
1554
+ "type": {
1555
+ "text": "void"
1556
+ }
1530
1557
  },
1531
- "default": "99",
1532
- "description": "Maximum numeric count before rendering overflow label.",
1533
- "attribute": "max"
1534
- },
1558
+ "description": "Sets background image CSS variable from `url`."
1559
+ }
1560
+ ],
1561
+ "attributes": [
1535
1562
  {
1536
- "kind": "field",
1537
- "name": "hideWhenZero",
1563
+ "name": "title",
1538
1564
  "type": {
1539
- "text": "boolean"
1565
+ "text": "string"
1540
1566
  },
1541
- "default": "false",
1542
- "description": "Hides badge when value resolves to numeric zero.",
1543
- "attribute": "hideWhenZero"
1567
+ "default": "\"App Bar\"",
1568
+ "description": "Title text displayed in the app bar.",
1569
+ "fieldName": "title"
1544
1570
  },
1545
1571
  {
1546
- "kind": "field",
1547
- "name": "show",
1572
+ "name": "color",
1548
1573
  "type": {
1549
- "text": "boolean"
1574
+ "text": "string"
1550
1575
  },
1551
- "default": "true",
1552
- "description": "Forces badge visibility independent of value.",
1553
- "attribute": "show",
1554
- "reflects": true
1576
+ "default": "\"default\"",
1577
+ "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
1578
+ "fieldName": "color"
1555
1579
  },
1556
1580
  {
1557
- "kind": "field",
1558
- "name": "offsetX",
1581
+ "name": "url",
1559
1582
  "type": {
1560
1583
  "text": "string"
1561
1584
  },
1562
- "default": "\"0px\"",
1563
- "description": "Horizontal offset CSS length.",
1564
- "attribute": "offsetX"
1585
+ "default": "\"\"",
1586
+ "description": "Background image URL.",
1587
+ "fieldName": "url"
1565
1588
  },
1566
1589
  {
1567
- "kind": "field",
1568
- "name": "offsetY",
1590
+ "name": "banner",
1569
1591
  "type": {
1570
- "text": "string"
1592
+ "text": "boolean"
1571
1593
  },
1572
- "default": "\"0px\"",
1573
- "description": "Vertical offset CSS length.",
1574
- "attribute": "offsetY"
1594
+ "default": "true",
1595
+ "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
1596
+ "fieldName": "banner"
1575
1597
  },
1576
1598
  {
1577
- "kind": "field",
1578
- "name": "ring",
1599
+ "name": "dense",
1579
1600
  "type": {
1580
1601
  "text": "boolean"
1581
1602
  },
1582
1603
  "default": "false",
1583
- "description": "Enables visual ring around the badge.",
1584
- "attribute": "ring"
1604
+ "description": "Enables compact vertical spacing.",
1605
+ "fieldName": "dense"
1585
1606
  },
1586
1607
  {
1587
- "kind": "field",
1588
- "name": "ringColor",
1608
+ "name": "elevated",
1589
1609
  "type": {
1590
- "text": "string"
1610
+ "text": "boolean"
1591
1611
  },
1592
- "default": "\"primary\"",
1593
- "description": "Ring color token or CSS color.",
1594
- "attribute": "ringColor"
1612
+ "default": "false",
1613
+ "description": "Applies elevated shadow styling.",
1614
+ "fieldName": "elevated"
1595
1615
  },
1596
1616
  {
1597
- "kind": "field",
1598
- "name": "ringOffset",
1617
+ "name": "leadingLabel",
1599
1618
  "type": {
1600
1619
  "text": "string"
1601
1620
  },
1602
- "default": "\"1px\"",
1603
- "description": "Ring offset CSS length.",
1604
- "attribute": "ringOffset"
1605
- },
1606
- {
1607
- "kind": "field",
1608
- "name": "badgeLabel",
1621
+ "default": "\"Open menu\"",
1622
+ "description": "Accessible label for default leading button fallback.",
1623
+ "fieldName": "leadingLabel"
1624
+ }
1625
+ ],
1626
+ "superclass": {
1627
+ "name": "LitElement",
1628
+ "package": "lit"
1629
+ },
1630
+ "tagName": "sky-appbar",
1631
+ "customElement": true,
1632
+ "summary": "Application top bar with title, optional leading control, trailing actions, and optional color/image background."
1633
+ }
1634
+ ],
1635
+ "exports": [
1636
+ {
1637
+ "kind": "js",
1638
+ "name": "SkyAppbar",
1639
+ "declaration": {
1640
+ "name": "SkyAppbar",
1641
+ "module": "src/sky-appbar/sky-appbar.ts"
1642
+ }
1643
+ },
1644
+ {
1645
+ "kind": "custom-element-definition",
1646
+ "name": "sky-appbar",
1647
+ "declaration": {
1648
+ "name": "SkyAppbar",
1649
+ "module": "src/sky-appbar/sky-appbar.ts"
1650
+ }
1651
+ }
1652
+ ]
1653
+ },
1654
+ {
1655
+ "kind": "javascript-module",
1656
+ "path": "src/sky-button/sky-button.ts",
1657
+ "declarations": [
1658
+ {
1659
+ "kind": "class",
1660
+ "description": "",
1661
+ "name": "SkyButton",
1662
+ "cssParts": [
1663
+ {
1664
+ "description": "The native `<button>` element.",
1665
+ "name": "button"
1666
+ },
1667
+ {
1668
+ "description": "The optional left/right icons.",
1669
+ "name": "icon"
1670
+ },
1671
+ {
1672
+ "description": "Overlay displayed when loading.",
1673
+ "name": "loading-overlay"
1674
+ },
1675
+ {
1676
+ "description": "Spinner displayed when loading.",
1677
+ "name": "spinner"
1678
+ }
1679
+ ],
1680
+ "slots": [
1681
+ {
1682
+ "description": "Default slot for the button label (replaces `label` property if used).",
1683
+ "name": ""
1684
+ }
1685
+ ],
1686
+ "members": [
1687
+ {
1688
+ "kind": "field",
1689
+ "name": "dependencies",
1609
1690
  "type": {
1610
- "text": "string | null"
1691
+ "text": "Record<string, CustomElementConstructor>"
1611
1692
  },
1612
- "default": "null",
1613
- "description": "ARIA label override.",
1614
- "attribute": "badgeLabel"
1693
+ "static": true,
1694
+ "default": "{ \"sky-icon\": SkyIcon, }"
1615
1695
  },
1616
1696
  {
1617
1697
  "kind": "field",
1618
- "name": "badgeAriaHidden",
1698
+ "name": "formAssociated",
1699
+ "type": {
1700
+ "text": "boolean"
1701
+ },
1702
+ "static": true,
1703
+ "default": "true"
1704
+ },
1705
+ {
1706
+ "kind": "field",
1707
+ "name": "internals",
1708
+ "type": {
1709
+ "text": "ElementInternals"
1710
+ },
1711
+ "privacy": "private"
1712
+ },
1713
+ {
1714
+ "kind": "field",
1715
+ "name": "variant",
1716
+ "type": {
1717
+ "text": "SkyButtonVariant"
1718
+ },
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",
1722
+ "reflects": true
1723
+ },
1724
+ {
1725
+ "kind": "field",
1726
+ "name": "color",
1727
+ "type": {
1728
+ "text": "string"
1729
+ },
1730
+ "default": "\"primary\"",
1731
+ "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1732
+ "attribute": "color"
1733
+ },
1734
+ {
1735
+ "kind": "field",
1736
+ "name": "type",
1737
+ "type": {
1738
+ "text": "SkyButtonType"
1739
+ },
1740
+ "default": "\"button\"",
1741
+ "description": "Button type attribute. Default: `\"button\"`.",
1742
+ "attribute": "type"
1743
+ },
1744
+ {
1745
+ "kind": "field",
1746
+ "name": "form",
1747
+ "type": {
1748
+ "text": "string"
1749
+ },
1750
+ "default": "\"\"",
1751
+ "description": "Associated form ID for custom submit handling.",
1752
+ "attribute": "form"
1753
+ },
1754
+ {
1755
+ "kind": "field",
1756
+ "name": "size",
1757
+ "type": {
1758
+ "text": "string"
1759
+ },
1760
+ "default": "\"md\"",
1761
+ "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1762
+ "attribute": "size"
1763
+ },
1764
+ {
1765
+ "kind": "field",
1766
+ "name": "radius",
1767
+ "type": {
1768
+ "text": "string"
1769
+ },
1770
+ "default": "\"md\"",
1771
+ "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
1772
+ "attribute": "radius"
1773
+ },
1774
+ {
1775
+ "kind": "field",
1776
+ "name": "label",
1777
+ "type": {
1778
+ "text": "string"
1779
+ },
1780
+ "default": "\"Button\"",
1781
+ "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
1782
+ "attribute": "label"
1783
+ },
1784
+ {
1785
+ "kind": "field",
1786
+ "name": "disabled",
1619
1787
  "type": {
1620
1788
  "text": "boolean"
1621
1789
  },
1622
1790
  "default": "false",
1623
- "description": "Hides badge from assistive technology when true.",
1624
- "attribute": "badgeAriaHidden"
1791
+ "description": "Whether the button is disabled. Default: `false`.",
1792
+ "attribute": "disabled",
1793
+ "reflects": true
1625
1794
  },
1626
1795
  {
1627
1796
  "kind": "field",
1628
- "name": "interactive",
1797
+ "name": "loading",
1629
1798
  "type": {
1630
1799
  "text": "boolean"
1631
1800
  },
1632
1801
  "default": "false",
1633
- "description": "Enables focus/activation and `badge-click` emission.",
1634
- "attribute": "interactive"
1802
+ "description": "Shows a loading overlay when true. Default: `false`.",
1803
+ "attribute": "loading",
1804
+ "reflects": true
1635
1805
  },
1636
1806
  {
1637
1807
  "kind": "field",
1638
- "name": "placement",
1808
+ "name": "iconL",
1639
1809
  "type": {
1640
- "text": "SkyBadgePlacement"
1810
+ "text": "string"
1641
1811
  },
1642
- "default": "\"custom\"",
1643
- "description": "Anchor placement preset for badge positioning.",
1644
- "attribute": "placement",
1812
+ "default": "\"\"",
1813
+ "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
1814
+ "attribute": "iconL"
1815
+ },
1816
+ {
1817
+ "kind": "field",
1818
+ "name": "iconR",
1819
+ "type": {
1820
+ "text": "string"
1821
+ },
1822
+ "default": "\"\"",
1823
+ "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
1824
+ "attribute": "iconR"
1825
+ },
1826
+ {
1827
+ "kind": "field",
1828
+ "name": "iconOnly",
1829
+ "type": {
1830
+ "text": "boolean"
1831
+ },
1832
+ "default": "false",
1833
+ "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
1834
+ "attribute": "iconOnly",
1645
1835
  "reflects": true
1646
1836
  },
1647
1837
  {
1648
1838
  "kind": "field",
1649
- "name": "_badgeEl",
1839
+ "name": "colors",
1650
1840
  "type": {
1651
- "text": "HTMLSpanElement"
1841
+ "text": "string"
1652
1842
  },
1653
- "privacy": "private"
1843
+ "default": "\"\"",
1844
+ "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
1845
+ "attribute": "colors"
1654
1846
  },
1655
1847
  {
1656
1848
  "kind": "field",
1657
- "name": "badgeRef",
1658
- "privacy": "public",
1659
- "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
1849
+ "name": "animation",
1850
+ "type": {
1851
+ "text": "SkyButtonAnimation"
1852
+ },
1853
+ "default": "\"auto\"",
1854
+ "description": "Transform animation style. Default: `\"auto\"`.",
1855
+ "attribute": "animation",
1856
+ "reflects": true
1660
1857
  },
1661
1858
  {
1662
1859
  "kind": "field",
1663
- "name": "shadowRootOptions",
1860
+ "name": "_hasMeaningfulSlot",
1664
1861
  "type": {
1665
- "text": "ShadowRootInit"
1862
+ "text": "boolean"
1863
+ },
1864
+ "privacy": "private",
1865
+ "default": "false"
1866
+ },
1867
+ {
1868
+ "kind": "field",
1869
+ "name": "_styleVars",
1870
+ "type": {
1871
+ "text": "Record<string, string>"
1872
+ },
1873
+ "privacy": "private",
1874
+ "default": "{}",
1875
+ "description": "Inline CSS variable cache."
1876
+ },
1877
+ {
1878
+ "kind": "method",
1879
+ "name": "_slotHasMeaningfulContent",
1880
+ "privacy": "private",
1881
+ "return": {
1882
+ "type": {
1883
+ "text": "boolean"
1884
+ }
1885
+ },
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"
1899
+ },
1900
+ {
1901
+ "kind": "method",
1902
+ "name": "_toSquarePadding",
1903
+ "privacy": "private",
1904
+ "return": {
1905
+ "type": {
1906
+ "text": "string"
1907
+ }
1908
+ },
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)."
1918
+ },
1919
+ {
1920
+ "kind": "method",
1921
+ "name": "_resolveSize",
1922
+ "privacy": "private",
1923
+ "return": {
1924
+ "type": {
1925
+ "text": "{\r\n padding: string;\r\n fontSize: string;\r\n gap: string;\r\n icon: string;\r\n spinner: string;\r\n }"
1926
+ }
1927
+ },
1928
+ "parameters": [
1929
+ {
1930
+ "name": "input",
1931
+ "type": {
1932
+ "text": "string"
1933
+ }
1934
+ }
1935
+ ]
1936
+ },
1937
+ {
1938
+ "kind": "method",
1939
+ "name": "_isThemeBorderShorthand",
1940
+ "privacy": "private",
1941
+ "return": {
1942
+ "type": {
1943
+ "text": "boolean"
1944
+ }
1945
+ },
1946
+ "parameters": [
1947
+ {
1948
+ "name": "border",
1949
+ "type": {
1950
+ "text": "string | undefined"
1951
+ }
1952
+ }
1953
+ ],
1954
+ "description": "Theme tokens like `var(--sky-border-primary)` are full border shorthands, not colors."
1955
+ },
1956
+ {
1957
+ "kind": "method",
1958
+ "name": "_borderColorFromShorthand",
1959
+ "privacy": "private",
1960
+ "return": {
1961
+ "type": {
1962
+ "text": "string"
1963
+ }
1666
1964
  },
1667
- "static": true,
1668
- "default": "{ mode: \"open\", delegatesFocus: true, }"
1965
+ "parameters": [
1966
+ {
1967
+ "name": "border",
1968
+ "type": {
1969
+ "text": "string | undefined"
1970
+ }
1971
+ }
1972
+ ],
1973
+ "description": "Extracts the color token from a `Npx solid …` border shorthand."
1669
1974
  },
1670
1975
  {
1671
1976
  "kind": "method",
1672
- "name": "showBadge",
1977
+ "name": "focusButton",
1673
1978
  "privacy": "public",
1674
1979
  "return": {
1675
1980
  "type": {
1676
1981
  "text": "void"
1677
1982
  }
1678
1983
  },
1679
- "description": "Forces badge visibility on."
1984
+ "description": "Focuses the internal native button."
1680
1985
  },
1681
1986
  {
1682
1987
  "kind": "method",
1683
- "name": "hideBadge",
1988
+ "name": "clickButton",
1684
1989
  "privacy": "public",
1685
1990
  "return": {
1686
1991
  "type": {
1687
1992
  "text": "void"
1688
1993
  }
1689
1994
  },
1690
- "description": "Forces badge visibility off."
1995
+ "description": "Triggers a click on the internal native button when enabled."
1691
1996
  },
1692
1997
  {
1693
1998
  "kind": "method",
1694
- "name": "setValue",
1695
- "privacy": "public",
1999
+ "name": "_createRipple",
2000
+ "privacy": "private",
1696
2001
  "return": {
1697
2002
  "type": {
1698
2003
  "text": "void"
@@ -1700,292 +2005,219 @@
1700
2005
  },
1701
2006
  "parameters": [
1702
2007
  {
1703
- "name": "value",
2008
+ "name": "event",
1704
2009
  "type": {
1705
- "text": "string"
1706
- },
1707
- "description": "Badge value or icon name."
2010
+ "text": "MouseEvent"
2011
+ }
1708
2012
  }
1709
- ],
1710
- "description": "Updates badge value for text/count or icon modes."
1711
- },
1712
- {
1713
- "kind": "field",
1714
- "name": "_onActivate",
1715
- "privacy": "private",
1716
- "description": "Emits `badge-click` for interactive activation."
1717
- },
1718
- {
1719
- "kind": "field",
1720
- "name": "_onKeydown",
1721
- "privacy": "private",
1722
- "description": "Handles keyboard activation with Enter and Space."
2013
+ ]
1723
2014
  },
1724
2015
  {
1725
2016
  "kind": "method",
1726
- "name": "_computeAriaLabel",
1727
- "privacy": "private",
2017
+ "name": "formDisabledCallback",
1728
2018
  "return": {
1729
2019
  "type": {
1730
- "text": "string | null"
2020
+ "text": "void"
1731
2021
  }
1732
2022
  },
1733
2023
  "parameters": [
1734
2024
  {
1735
- "name": "displayValue",
2025
+ "name": "disabled",
1736
2026
  "type": {
1737
- "text": "string | null"
2027
+ "text": "boolean"
1738
2028
  }
1739
2029
  }
1740
- ],
1741
- "description": "Computes accessible badge label from current render state."
2030
+ ]
2031
+ },
2032
+ {
2033
+ "kind": "field",
2034
+ "name": "formOwner",
2035
+ "type": {
2036
+ "text": "HTMLFormElement | null"
2037
+ },
2038
+ "readonly": true
1742
2039
  },
1743
2040
  {
1744
2041
  "kind": "method",
1745
- "name": "_computeAnchors",
2042
+ "name": "_handleClick",
1746
2043
  "privacy": "private",
1747
2044
  "return": {
1748
2045
  "type": {
1749
- "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
2046
+ "text": "void"
1750
2047
  }
1751
2048
  },
1752
2049
  "parameters": [
1753
2050
  {
1754
- "name": "placement",
2051
+ "name": "event",
1755
2052
  "type": {
1756
- "text": "SkyBadgePlacement"
2053
+ "text": "MouseEvent"
1757
2054
  }
1758
2055
  }
1759
- ],
1760
- "description": "Resolves anchor edges from placement preset."
2056
+ ]
1761
2057
  },
1762
2058
  {
1763
2059
  "kind": "method",
1764
- "name": "_resolveBadgeSurface",
2060
+ "name": "_iconOnlyName",
1765
2061
  "privacy": "private",
1766
2062
  "return": {
1767
2063
  "type": {
1768
- "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
2064
+ "text": "string"
1769
2065
  }
1770
- },
1771
- "description": "Maps semantic status tokens to soft badge surface colors."
1772
- }
1773
- ],
1774
- "events": [
1775
- {
1776
- "type": {
1777
- "text": "CustomEvent<SkyBadgeClickEventDetail>"
1778
- },
1779
- "description": "Emitted when badge activation occurs via click, Enter, or Space while `interactive` is true.",
1780
- "name": "badge-click"
2066
+ }
1781
2067
  }
1782
2068
  ],
1783
2069
  "attributes": [
1784
2070
  {
1785
- "name": "statusColor",
1786
- "type": {
1787
- "text": "string"
1788
- },
1789
- "default": "\"success\"",
1790
- "description": "Badge background token or CSS color.",
1791
- "fieldName": "statusColor"
1792
- },
1793
- {
1794
- "name": "textColor",
2071
+ "name": "variant",
1795
2072
  "type": {
1796
- "text": "string"
2073
+ "text": "SkyButtonVariant"
1797
2074
  },
1798
- "default": "\"default\"",
1799
- "description": "Text color token or CSS color.",
1800
- "fieldName": "textColor"
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"
1801
2078
  },
1802
2079
  {
1803
- "name": "iconColor",
2080
+ "name": "color",
1804
2081
  "type": {
1805
2082
  "text": "string"
1806
2083
  },
1807
- "default": "\"\"",
1808
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1809
- "fieldName": "iconColor"
2084
+ "default": "\"primary\"",
2085
+ "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
2086
+ "fieldName": "color"
1810
2087
  },
1811
2088
  {
1812
- "name": "position",
2089
+ "name": "type",
1813
2090
  "type": {
1814
- "text": "SkyBadgePosition"
2091
+ "text": "SkyButtonType"
1815
2092
  },
1816
- "default": "\"default\"",
1817
- "description": "Layout mode: `default | floating | inline`.",
1818
- "fieldName": "position"
2093
+ "default": "\"button\"",
2094
+ "description": "Button type attribute. Default: `\"button\"`.",
2095
+ "fieldName": "type"
1819
2096
  },
1820
2097
  {
1821
- "name": "value",
2098
+ "name": "form",
1822
2099
  "type": {
1823
2100
  "text": "string"
1824
2101
  },
1825
2102
  "default": "\"\"",
1826
- "description": "Badge text/count or icon name in icon mode.",
1827
- "fieldName": "value"
1828
- },
1829
- {
1830
- "name": "isIcon",
1831
- "type": {
1832
- "text": "boolean"
1833
- },
1834
- "default": "false",
1835
- "description": "Renders icon mode when true.",
1836
- "fieldName": "isIcon"
2103
+ "description": "Associated form ID for custom submit handling.",
2104
+ "fieldName": "form"
1837
2105
  },
1838
2106
  {
1839
2107
  "name": "size",
1840
2108
  "type": {
1841
2109
  "text": "string"
1842
2110
  },
1843
- "default": "\"\"",
1844
- "description": "Badge and icon size CSS length.",
2111
+ "default": "\"md\"",
2112
+ "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1845
2113
  "fieldName": "size"
1846
2114
  },
1847
2115
  {
1848
- "name": "shape",
2116
+ "name": "radius",
1849
2117
  "type": {
1850
- "text": "SkyBadgeShape"
2118
+ "text": "string"
1851
2119
  },
1852
- "default": "\"custom\"",
1853
- "description": "Badge shape: `circle | pill | custom`.",
1854
- "fieldName": "shape"
2120
+ "default": "\"md\"",
2121
+ "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
2122
+ "fieldName": "radius"
1855
2123
  },
1856
2124
  {
1857
- "name": "max",
2125
+ "name": "label",
1858
2126
  "type": {
1859
- "text": "number"
2127
+ "text": "string"
1860
2128
  },
1861
- "default": "99",
1862
- "description": "Maximum numeric count before rendering overflow label.",
1863
- "fieldName": "max"
2129
+ "default": "\"Button\"",
2130
+ "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
2131
+ "fieldName": "label"
1864
2132
  },
1865
2133
  {
1866
- "name": "hideWhenZero",
2134
+ "name": "disabled",
1867
2135
  "type": {
1868
2136
  "text": "boolean"
1869
2137
  },
1870
2138
  "default": "false",
1871
- "description": "Hides badge when value resolves to numeric zero.",
1872
- "fieldName": "hideWhenZero"
1873
- },
1874
- {
1875
- "name": "show",
1876
- "type": {
1877
- "text": "boolean"
1878
- },
1879
- "default": "true",
1880
- "description": "Forces badge visibility independent of value.",
1881
- "fieldName": "show"
1882
- },
1883
- {
1884
- "name": "offsetX",
1885
- "type": {
1886
- "text": "string"
1887
- },
1888
- "default": "\"0px\"",
1889
- "description": "Horizontal offset CSS length.",
1890
- "fieldName": "offsetX"
1891
- },
1892
- {
1893
- "name": "offsetY",
1894
- "type": {
1895
- "text": "string"
1896
- },
1897
- "default": "\"0px\"",
1898
- "description": "Vertical offset CSS length.",
1899
- "fieldName": "offsetY"
2139
+ "description": "Whether the button is disabled. Default: `false`.",
2140
+ "fieldName": "disabled"
1900
2141
  },
1901
2142
  {
1902
- "name": "ring",
2143
+ "name": "loading",
1903
2144
  "type": {
1904
2145
  "text": "boolean"
1905
2146
  },
1906
2147
  "default": "false",
1907
- "description": "Enables visual ring around the badge.",
1908
- "fieldName": "ring"
2148
+ "description": "Shows a loading overlay when true. Default: `false`.",
2149
+ "fieldName": "loading"
1909
2150
  },
1910
2151
  {
1911
- "name": "ringColor",
2152
+ "name": "iconL",
1912
2153
  "type": {
1913
2154
  "text": "string"
1914
2155
  },
1915
- "default": "\"primary\"",
1916
- "description": "Ring color token or CSS color.",
1917
- "fieldName": "ringColor"
2156
+ "default": "\"\"",
2157
+ "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
2158
+ "fieldName": "iconL"
1918
2159
  },
1919
2160
  {
1920
- "name": "ringOffset",
2161
+ "name": "iconR",
1921
2162
  "type": {
1922
2163
  "text": "string"
1923
2164
  },
1924
- "default": "\"1px\"",
1925
- "description": "Ring offset CSS length.",
1926
- "fieldName": "ringOffset"
1927
- },
1928
- {
1929
- "name": "badgeLabel",
1930
- "type": {
1931
- "text": "string | null"
1932
- },
1933
- "default": "null",
1934
- "description": "ARIA label override.",
1935
- "fieldName": "badgeLabel"
2165
+ "default": "\"\"",
2166
+ "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
2167
+ "fieldName": "iconR"
1936
2168
  },
1937
2169
  {
1938
- "name": "badgeAriaHidden",
2170
+ "name": "iconOnly",
1939
2171
  "type": {
1940
2172
  "text": "boolean"
1941
2173
  },
1942
2174
  "default": "false",
1943
- "description": "Hides badge from assistive technology when true.",
1944
- "fieldName": "badgeAriaHidden"
2175
+ "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
2176
+ "fieldName": "iconOnly"
1945
2177
  },
1946
2178
  {
1947
- "name": "interactive",
2179
+ "name": "colors",
1948
2180
  "type": {
1949
- "text": "boolean"
2181
+ "text": "string"
1950
2182
  },
1951
- "default": "false",
1952
- "description": "Enables focus/activation and `badge-click` emission.",
1953
- "fieldName": "interactive"
2183
+ "default": "\"\"",
2184
+ "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
2185
+ "fieldName": "colors"
1954
2186
  },
1955
2187
  {
1956
- "name": "placement",
2188
+ "name": "animation",
1957
2189
  "type": {
1958
- "text": "SkyBadgePlacement"
2190
+ "text": "SkyButtonAnimation"
1959
2191
  },
1960
- "default": "\"custom\"",
1961
- "description": "Anchor placement preset for badge positioning.",
1962
- "fieldName": "placement"
2192
+ "default": "\"auto\"",
2193
+ "description": "Transform animation style. Default: `\"auto\"`.",
2194
+ "fieldName": "animation"
1963
2195
  }
1964
2196
  ],
1965
2197
  "superclass": {
1966
2198
  "name": "LitElement",
1967
2199
  "package": "lit"
1968
2200
  },
1969
- "tagName": "sky-badge",
2201
+ "tagName": "sky-button",
1970
2202
  "customElement": true,
1971
- "summary": "Badge for status dots, counts, or icons anchored to slotted content."
2203
+ "summary": "Styled button supporting variants, icons, loading state, ripple feedback, and form-associated behavior."
1972
2204
  }
1973
2205
  ],
1974
2206
  "exports": [
1975
2207
  {
1976
2208
  "kind": "js",
1977
- "name": "SkyBadge",
2209
+ "name": "SkyButton",
1978
2210
  "declaration": {
1979
- "name": "SkyBadge",
1980
- "module": "src/sky-badge/sky-badge.ts"
2211
+ "name": "SkyButton",
2212
+ "module": "src/sky-button/sky-button.ts"
1981
2213
  }
1982
2214
  },
1983
2215
  {
1984
2216
  "kind": "custom-element-definition",
1985
- "name": "sky-badge",
2217
+ "name": "sky-button",
1986
2218
  "declaration": {
1987
- "name": "SkyBadge",
1988
- "module": "src/sky-badge/sky-badge.ts"
2219
+ "name": "SkyButton",
2220
+ "module": "src/sky-button/sky-button.ts"
1989
2221
  }
1990
2222
  }
1991
2223
  ]
@@ -3449,298 +3681,66 @@
3449
3681
  "text": "string"
3450
3682
  },
3451
3683
  "default": "\"\"",
3452
- "description": "The color for the suffix text. Default: `\"\"`.",
3453
- "fieldName": "suffixColor"
3454
- },
3455
- {
3456
- "name": "validationActive",
3457
- "type": {
3458
- "text": "boolean"
3459
- },
3460
- "default": "false",
3461
- "fieldName": "validationActive"
3462
- },
3463
- {
3464
- "name": "invalid",
3465
- "type": {
3466
- "text": "boolean"
3467
- },
3468
- "default": "false",
3469
- "fieldName": "invalid"
3470
- },
3471
- {
3472
- "name": "checked",
3473
- "type": {
3474
- "text": "boolean"
3475
- },
3476
- "description": "Whether the checkbox is checked. Default: `false`.",
3477
- "fieldName": "checked"
3478
- },
3479
- {
3480
- "name": "indeterminate",
3481
- "type": {
3482
- "text": "boolean"
3483
- },
3484
- "description": "Whether the checkbox is in the indeterminate state. Default: `false`.",
3485
- "fieldName": "indeterminate"
3486
- }
3487
- ],
3488
- "superclass": {
3489
- "name": "FormControlBase",
3490
- "module": "/src/helper/internals/form-control-base"
3491
- },
3492
- "tagName": "sky-checkbox",
3493
- "customElement": true,
3494
- "summary": "Form-associated checkbox with validation, indeterminate state, and customizable label/prefix/suffix rendering."
3495
- }
3496
- ],
3497
- "exports": [
3498
- {
3499
- "kind": "js",
3500
- "name": "SkyCheckbox",
3501
- "declaration": {
3502
- "name": "SkyCheckbox",
3503
- "module": "src/sky-checkbox/sky-checkbox.ts"
3504
- }
3505
- },
3506
- {
3507
- "kind": "custom-element-definition",
3508
- "name": "sky-checkbox",
3509
- "declaration": {
3510
- "name": "SkyCheckbox",
3511
- "module": "src/sky-checkbox/sky-checkbox.ts"
3512
- }
3513
- }
3514
- ]
3515
- },
3516
- {
3517
- "kind": "javascript-module",
3518
- "path": "src/sky-appbar/sky-appbar.ts",
3519
- "declarations": [
3520
- {
3521
- "kind": "class",
3522
- "description": "",
3523
- "name": "SkyAppbar",
3524
- "cssParts": [
3525
- {
3526
- "description": "Wrapper that contains the leading slot, title, and actions.",
3527
- "name": "content"
3528
- },
3529
- {
3530
- "description": "Container for the leading slot (e.g. menu button).",
3531
- "name": "leading"
3532
- },
3533
- {
3534
- "description": "The title area (contains .title-text with the title string).",
3535
- "name": "title"
3536
- },
3537
- {
3538
- "description": "The trailing actions container.",
3539
- "name": "actions"
3540
- }
3541
- ],
3542
- "slots": [
3543
- {
3544
- "description": "Leading area (e.g., menu/back button). Defaults to a hamburger icon.",
3545
- "name": "button"
3546
- },
3547
- {
3548
- "description": "Trailing actions (icons/buttons). This is the default slot.",
3549
- "name": ""
3550
- }
3551
- ],
3552
- "members": [
3553
- {
3554
- "kind": "field",
3555
- "name": "dependencies",
3556
- "type": {
3557
- "text": "Record<string, CustomElementConstructor>"
3558
- },
3559
- "static": true,
3560
- "default": "{ \"sky-icon\": SkyIcon, }"
3561
- },
3562
- {
3563
- "kind": "field",
3564
- "name": "title",
3565
- "type": {
3566
- "text": "string"
3567
- },
3568
- "default": "\"App Bar\"",
3569
- "description": "Title text displayed in the app bar.",
3570
- "attribute": "title"
3571
- },
3572
- {
3573
- "kind": "field",
3574
- "name": "color",
3575
- "type": {
3576
- "text": "string"
3577
- },
3578
- "default": "\"default\"",
3579
- "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
3580
- "attribute": "color"
3581
- },
3582
- {
3583
- "kind": "field",
3584
- "name": "url",
3585
- "type": {
3586
- "text": "string"
3587
- },
3588
- "default": "\"\"",
3589
- "description": "Background image URL.",
3590
- "attribute": "url"
3591
- },
3592
- {
3593
- "kind": "field",
3594
- "name": "banner",
3595
- "type": {
3596
- "text": "boolean"
3597
- },
3598
- "default": "true",
3599
- "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
3600
- "attribute": "banner"
3601
- },
3602
- {
3603
- "kind": "field",
3604
- "name": "dense",
3605
- "type": {
3606
- "text": "boolean"
3607
- },
3608
- "default": "false",
3609
- "description": "Enables compact vertical spacing.",
3610
- "attribute": "dense"
3611
- },
3612
- {
3613
- "kind": "field",
3614
- "name": "elevated",
3615
- "type": {
3616
- "text": "boolean"
3617
- },
3618
- "default": "false",
3619
- "description": "Applies elevated shadow styling.",
3620
- "attribute": "elevated"
3621
- },
3622
- {
3623
- "kind": "field",
3624
- "name": "leadingLabel",
3625
- "type": {
3626
- "text": "string"
3627
- },
3628
- "default": "\"Open menu\"",
3629
- "description": "Accessible label for default leading button fallback.",
3630
- "attribute": "leadingLabel"
3631
- },
3632
- {
3633
- "kind": "method",
3634
- "name": "_applyColorSurface",
3635
- "privacy": "private",
3636
- "return": {
3637
- "type": {
3638
- "text": "void"
3639
- }
3640
- },
3641
- "description": "Applies glass vs solid surface tokens from `color`."
3642
- },
3643
- {
3644
- "kind": "method",
3645
- "name": "_applyBackgroundImage",
3646
- "privacy": "private",
3647
- "return": {
3648
- "type": {
3649
- "text": "void"
3650
- }
3651
- },
3652
- "description": "Sets background image CSS variable from `url`."
3653
- }
3654
- ],
3655
- "attributes": [
3656
- {
3657
- "name": "title",
3658
- "type": {
3659
- "text": "string"
3660
- },
3661
- "default": "\"App Bar\"",
3662
- "description": "Title text displayed in the app bar.",
3663
- "fieldName": "title"
3664
- },
3665
- {
3666
- "name": "color",
3667
- "type": {
3668
- "text": "string"
3669
- },
3670
- "default": "\"default\"",
3671
- "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
3672
- "fieldName": "color"
3673
- },
3674
- {
3675
- "name": "url",
3676
- "type": {
3677
- "text": "string"
3678
- },
3679
- "default": "\"\"",
3680
- "description": "Background image URL.",
3681
- "fieldName": "url"
3684
+ "description": "The color for the suffix text. Default: `\"\"`.",
3685
+ "fieldName": "suffixColor"
3682
3686
  },
3683
3687
  {
3684
- "name": "banner",
3688
+ "name": "validationActive",
3685
3689
  "type": {
3686
3690
  "text": "boolean"
3687
3691
  },
3688
- "default": "true",
3689
- "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
3690
- "fieldName": "banner"
3692
+ "default": "false",
3693
+ "fieldName": "validationActive"
3691
3694
  },
3692
3695
  {
3693
- "name": "dense",
3696
+ "name": "invalid",
3694
3697
  "type": {
3695
3698
  "text": "boolean"
3696
3699
  },
3697
3700
  "default": "false",
3698
- "description": "Enables compact vertical spacing.",
3699
- "fieldName": "dense"
3701
+ "fieldName": "invalid"
3700
3702
  },
3701
3703
  {
3702
- "name": "elevated",
3704
+ "name": "checked",
3703
3705
  "type": {
3704
3706
  "text": "boolean"
3705
3707
  },
3706
- "default": "false",
3707
- "description": "Applies elevated shadow styling.",
3708
- "fieldName": "elevated"
3708
+ "description": "Whether the checkbox is checked. Default: `false`.",
3709
+ "fieldName": "checked"
3709
3710
  },
3710
3711
  {
3711
- "name": "leadingLabel",
3712
+ "name": "indeterminate",
3712
3713
  "type": {
3713
- "text": "string"
3714
+ "text": "boolean"
3714
3715
  },
3715
- "default": "\"Open menu\"",
3716
- "description": "Accessible label for default leading button fallback.",
3717
- "fieldName": "leadingLabel"
3716
+ "description": "Whether the checkbox is in the indeterminate state. Default: `false`.",
3717
+ "fieldName": "indeterminate"
3718
3718
  }
3719
3719
  ],
3720
3720
  "superclass": {
3721
- "name": "LitElement",
3722
- "package": "lit"
3721
+ "name": "FormControlBase",
3722
+ "module": "/src/helper/internals/form-control-base"
3723
3723
  },
3724
- "tagName": "sky-appbar",
3724
+ "tagName": "sky-checkbox",
3725
3725
  "customElement": true,
3726
- "summary": "Application top bar with title, optional leading control, trailing actions, and optional color/image background."
3726
+ "summary": "Form-associated checkbox with validation, indeterminate state, and customizable label/prefix/suffix rendering."
3727
3727
  }
3728
3728
  ],
3729
3729
  "exports": [
3730
3730
  {
3731
3731
  "kind": "js",
3732
- "name": "SkyAppbar",
3732
+ "name": "SkyCheckbox",
3733
3733
  "declaration": {
3734
- "name": "SkyAppbar",
3735
- "module": "src/sky-appbar/sky-appbar.ts"
3734
+ "name": "SkyCheckbox",
3735
+ "module": "src/sky-checkbox/sky-checkbox.ts"
3736
3736
  }
3737
3737
  },
3738
3738
  {
3739
3739
  "kind": "custom-element-definition",
3740
- "name": "sky-appbar",
3740
+ "name": "sky-checkbox",
3741
3741
  "declaration": {
3742
- "name": "SkyAppbar",
3743
- "module": "src/sky-appbar/sky-appbar.ts"
3742
+ "name": "SkyCheckbox",
3743
+ "module": "src/sky-checkbox/sky-checkbox.ts"
3744
3744
  }
3745
3745
  }
3746
3746
  ]
@@ -6055,62 +6055,268 @@
6055
6055
  "type": {
6056
6056
  "text": "boolean"
6057
6057
  },
6058
- "default": "false",
6059
- "description": "Opens dropdown above when true.",
6060
- "fieldName": "openAbove"
6058
+ "default": "false",
6059
+ "description": "Opens dropdown above when true.",
6060
+ "fieldName": "openAbove"
6061
+ },
6062
+ {
6063
+ "name": "validationActive",
6064
+ "type": {
6065
+ "text": "boolean"
6066
+ },
6067
+ "default": "false",
6068
+ "description": "Enables validation UI state.",
6069
+ "fieldName": "validationActive"
6070
+ },
6071
+ {
6072
+ "name": "invalid",
6073
+ "type": {
6074
+ "text": "boolean"
6075
+ },
6076
+ "default": "false",
6077
+ "description": "Reflects invalid state.",
6078
+ "fieldName": "invalid"
6079
+ },
6080
+ {
6081
+ "name": "variant",
6082
+ "type": {
6083
+ "text": "string"
6084
+ },
6085
+ "default": "\"default\"",
6086
+ "description": "Visual variant style.",
6087
+ "fieldName": "variant"
6088
+ }
6089
+ ],
6090
+ "superclass": {
6091
+ "name": "FormControlBase",
6092
+ "module": "/src/helper/internals/form-control-base"
6093
+ },
6094
+ "tagName": "sky-combobox",
6095
+ "customElement": true,
6096
+ "summary": "Interactive combobox with single/multi select, search, chips, validation, and popover-based option selection."
6097
+ }
6098
+ ],
6099
+ "exports": [
6100
+ {
6101
+ "kind": "js",
6102
+ "name": "SkyCombobox",
6103
+ "declaration": {
6104
+ "name": "SkyCombobox",
6105
+ "module": "src/sky-combobox/sky-combobox.ts"
6106
+ }
6107
+ },
6108
+ {
6109
+ "kind": "custom-element-definition",
6110
+ "name": "sky-combobox",
6111
+ "declaration": {
6112
+ "name": "SkyCombobox",
6113
+ "module": "src/sky-combobox/sky-combobox.ts"
6114
+ }
6115
+ }
6116
+ ]
6117
+ },
6118
+ {
6119
+ "kind": "javascript-module",
6120
+ "path": "src/sky-divider/sky-divider.ts",
6121
+ "declarations": [
6122
+ {
6123
+ "kind": "class",
6124
+ "description": "",
6125
+ "name": "SkyDivider",
6126
+ "cssProperties": [
6127
+ {
6128
+ "description": "CSS custom property for divider color.",
6129
+ "name": "--divider-color"
6130
+ },
6131
+ {
6132
+ "description": "CSS custom property for divider thickness.",
6133
+ "name": "--divider-thickness"
6134
+ },
6135
+ {
6136
+ "description": "CSS custom property for divider margin.",
6137
+ "name": "--divider-margin"
6138
+ },
6139
+ {
6140
+ "description": "CSS custom property for vertical divider height.",
6141
+ "name": "--divider-height"
6142
+ }
6143
+ ],
6144
+ "cssParts": [
6145
+ {
6146
+ "description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
6147
+ "name": "divider"
6148
+ }
6149
+ ],
6150
+ "members": [
6151
+ {
6152
+ "kind": "field",
6153
+ "name": "color",
6154
+ "type": {
6155
+ "text": "string"
6156
+ },
6157
+ "default": "\"muted\"",
6158
+ "description": "Divider color token or CSS color.",
6159
+ "privacy": "public",
6160
+ "attribute": "color"
6161
+ },
6162
+ {
6163
+ "kind": "field",
6164
+ "name": "thickness",
6165
+ "type": {
6166
+ "text": "string"
6167
+ },
6168
+ "default": "\"1px\"",
6169
+ "description": "Divider thickness (for example `1px` or `2px`).",
6170
+ "privacy": "public",
6171
+ "attribute": "thickness"
6172
+ },
6173
+ {
6174
+ "kind": "field",
6175
+ "name": "margin",
6176
+ "type": {
6177
+ "text": "string"
6178
+ },
6179
+ "default": "\"\"",
6180
+ "description": "Outer margin around the divider.",
6181
+ "privacy": "public",
6182
+ "attribute": "margin"
6183
+ },
6184
+ {
6185
+ "kind": "field",
6186
+ "name": "direction",
6187
+ "type": {
6188
+ "text": "SkyDividerDirection"
6189
+ },
6190
+ "default": "\"horizontal\"",
6191
+ "description": "Divider orientation.",
6192
+ "privacy": "public",
6193
+ "attribute": "direction"
6194
+ },
6195
+ {
6196
+ "kind": "field",
6197
+ "name": "inset",
6198
+ "type": {
6199
+ "text": "boolean"
6200
+ },
6201
+ "default": "false",
6202
+ "description": "Enables indented divider layout.",
6203
+ "privacy": "public",
6204
+ "attribute": "inset"
6205
+ },
6206
+ {
6207
+ "kind": "field",
6208
+ "name": "height",
6209
+ "type": {
6210
+ "text": "string"
6211
+ },
6212
+ "default": "\"100%\"",
6213
+ "description": "Height used for vertical orientation.",
6214
+ "privacy": "public",
6215
+ "attribute": "height"
6216
+ },
6217
+ {
6218
+ "kind": "method",
6219
+ "name": "getComputedColor",
6220
+ "privacy": "public",
6221
+ "return": {
6222
+ "type": {
6223
+ "text": ""
6224
+ }
6225
+ },
6226
+ "description": "Gets the current computed color of the divider."
6227
+ },
6228
+ {
6229
+ "kind": "method",
6230
+ "name": "getComputedThickness",
6231
+ "privacy": "public",
6232
+ "return": {
6233
+ "type": {
6234
+ "text": ""
6235
+ }
6236
+ },
6237
+ "description": "Gets the current computed thickness of the divider."
6238
+ }
6239
+ ],
6240
+ "attributes": [
6241
+ {
6242
+ "name": "color",
6243
+ "type": {
6244
+ "text": "string"
6245
+ },
6246
+ "default": "\"muted\"",
6247
+ "description": "Divider color token or CSS color.",
6248
+ "fieldName": "color"
6249
+ },
6250
+ {
6251
+ "name": "thickness",
6252
+ "type": {
6253
+ "text": "string"
6254
+ },
6255
+ "default": "\"1px\"",
6256
+ "description": "Divider thickness (for example `1px` or `2px`).",
6257
+ "fieldName": "thickness"
6258
+ },
6259
+ {
6260
+ "name": "margin",
6261
+ "type": {
6262
+ "text": "string"
6263
+ },
6264
+ "default": "\"\"",
6265
+ "description": "Outer margin around the divider.",
6266
+ "fieldName": "margin"
6061
6267
  },
6062
6268
  {
6063
- "name": "validationActive",
6269
+ "name": "direction",
6064
6270
  "type": {
6065
- "text": "boolean"
6271
+ "text": "SkyDividerDirection"
6066
6272
  },
6067
- "default": "false",
6068
- "description": "Enables validation UI state.",
6069
- "fieldName": "validationActive"
6273
+ "default": "\"horizontal\"",
6274
+ "description": "Divider orientation.",
6275
+ "fieldName": "direction"
6070
6276
  },
6071
6277
  {
6072
- "name": "invalid",
6278
+ "name": "inset",
6073
6279
  "type": {
6074
6280
  "text": "boolean"
6075
6281
  },
6076
6282
  "default": "false",
6077
- "description": "Reflects invalid state.",
6078
- "fieldName": "invalid"
6283
+ "description": "Enables indented divider layout.",
6284
+ "fieldName": "inset"
6079
6285
  },
6080
6286
  {
6081
- "name": "variant",
6287
+ "name": "height",
6082
6288
  "type": {
6083
6289
  "text": "string"
6084
6290
  },
6085
- "default": "\"default\"",
6086
- "description": "Visual variant style.",
6087
- "fieldName": "variant"
6291
+ "default": "\"100%\"",
6292
+ "description": "Height used for vertical orientation.",
6293
+ "fieldName": "height"
6088
6294
  }
6089
6295
  ],
6090
6296
  "superclass": {
6091
- "name": "FormControlBase",
6092
- "module": "/src/helper/internals/form-control-base"
6297
+ "name": "LitElement",
6298
+ "package": "lit"
6093
6299
  },
6094
- "tagName": "sky-combobox",
6300
+ "tagName": "sky-divider",
6095
6301
  "customElement": true,
6096
- "summary": "Interactive combobox with single/multi select, search, chips, validation, and popover-based option selection."
6302
+ "summary": "Visual separator component for horizontal and vertical layout separation."
6097
6303
  }
6098
6304
  ],
6099
6305
  "exports": [
6100
6306
  {
6101
6307
  "kind": "js",
6102
- "name": "SkyCombobox",
6308
+ "name": "SkyDivider",
6103
6309
  "declaration": {
6104
- "name": "SkyCombobox",
6105
- "module": "src/sky-combobox/sky-combobox.ts"
6310
+ "name": "SkyDivider",
6311
+ "module": "src/sky-divider/sky-divider.ts"
6106
6312
  }
6107
6313
  },
6108
6314
  {
6109
6315
  "kind": "custom-element-definition",
6110
- "name": "sky-combobox",
6316
+ "name": "sky-divider",
6111
6317
  "declaration": {
6112
- "name": "SkyCombobox",
6113
- "module": "src/sky-combobox/sky-combobox.ts"
6318
+ "name": "SkyDivider",
6319
+ "module": "src/sky-divider/sky-divider.ts"
6114
6320
  }
6115
6321
  }
6116
6322
  ]
@@ -6767,212 +6973,6 @@
6767
6973
  }
6768
6974
  ]
6769
6975
  },
6770
- {
6771
- "kind": "javascript-module",
6772
- "path": "src/sky-divider/sky-divider.ts",
6773
- "declarations": [
6774
- {
6775
- "kind": "class",
6776
- "description": "",
6777
- "name": "SkyDivider",
6778
- "cssProperties": [
6779
- {
6780
- "description": "CSS custom property for divider color.",
6781
- "name": "--divider-color"
6782
- },
6783
- {
6784
- "description": "CSS custom property for divider thickness.",
6785
- "name": "--divider-thickness"
6786
- },
6787
- {
6788
- "description": "CSS custom property for divider margin.",
6789
- "name": "--divider-margin"
6790
- },
6791
- {
6792
- "description": "CSS custom property for vertical divider height.",
6793
- "name": "--divider-height"
6794
- }
6795
- ],
6796
- "cssParts": [
6797
- {
6798
- "description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
6799
- "name": "divider"
6800
- }
6801
- ],
6802
- "members": [
6803
- {
6804
- "kind": "field",
6805
- "name": "color",
6806
- "type": {
6807
- "text": "string"
6808
- },
6809
- "default": "\"muted\"",
6810
- "description": "Divider color token or CSS color.",
6811
- "privacy": "public",
6812
- "attribute": "color"
6813
- },
6814
- {
6815
- "kind": "field",
6816
- "name": "thickness",
6817
- "type": {
6818
- "text": "string"
6819
- },
6820
- "default": "\"1px\"",
6821
- "description": "Divider thickness (for example `1px` or `2px`).",
6822
- "privacy": "public",
6823
- "attribute": "thickness"
6824
- },
6825
- {
6826
- "kind": "field",
6827
- "name": "margin",
6828
- "type": {
6829
- "text": "string"
6830
- },
6831
- "default": "\"\"",
6832
- "description": "Outer margin around the divider.",
6833
- "privacy": "public",
6834
- "attribute": "margin"
6835
- },
6836
- {
6837
- "kind": "field",
6838
- "name": "direction",
6839
- "type": {
6840
- "text": "SkyDividerDirection"
6841
- },
6842
- "default": "\"horizontal\"",
6843
- "description": "Divider orientation.",
6844
- "privacy": "public",
6845
- "attribute": "direction"
6846
- },
6847
- {
6848
- "kind": "field",
6849
- "name": "inset",
6850
- "type": {
6851
- "text": "boolean"
6852
- },
6853
- "default": "false",
6854
- "description": "Enables indented divider layout.",
6855
- "privacy": "public",
6856
- "attribute": "inset"
6857
- },
6858
- {
6859
- "kind": "field",
6860
- "name": "height",
6861
- "type": {
6862
- "text": "string"
6863
- },
6864
- "default": "\"100%\"",
6865
- "description": "Height used for vertical orientation.",
6866
- "privacy": "public",
6867
- "attribute": "height"
6868
- },
6869
- {
6870
- "kind": "method",
6871
- "name": "getComputedColor",
6872
- "privacy": "public",
6873
- "return": {
6874
- "type": {
6875
- "text": ""
6876
- }
6877
- },
6878
- "description": "Gets the current computed color of the divider."
6879
- },
6880
- {
6881
- "kind": "method",
6882
- "name": "getComputedThickness",
6883
- "privacy": "public",
6884
- "return": {
6885
- "type": {
6886
- "text": ""
6887
- }
6888
- },
6889
- "description": "Gets the current computed thickness of the divider."
6890
- }
6891
- ],
6892
- "attributes": [
6893
- {
6894
- "name": "color",
6895
- "type": {
6896
- "text": "string"
6897
- },
6898
- "default": "\"muted\"",
6899
- "description": "Divider color token or CSS color.",
6900
- "fieldName": "color"
6901
- },
6902
- {
6903
- "name": "thickness",
6904
- "type": {
6905
- "text": "string"
6906
- },
6907
- "default": "\"1px\"",
6908
- "description": "Divider thickness (for example `1px` or `2px`).",
6909
- "fieldName": "thickness"
6910
- },
6911
- {
6912
- "name": "margin",
6913
- "type": {
6914
- "text": "string"
6915
- },
6916
- "default": "\"\"",
6917
- "description": "Outer margin around the divider.",
6918
- "fieldName": "margin"
6919
- },
6920
- {
6921
- "name": "direction",
6922
- "type": {
6923
- "text": "SkyDividerDirection"
6924
- },
6925
- "default": "\"horizontal\"",
6926
- "description": "Divider orientation.",
6927
- "fieldName": "direction"
6928
- },
6929
- {
6930
- "name": "inset",
6931
- "type": {
6932
- "text": "boolean"
6933
- },
6934
- "default": "false",
6935
- "description": "Enables indented divider layout.",
6936
- "fieldName": "inset"
6937
- },
6938
- {
6939
- "name": "height",
6940
- "type": {
6941
- "text": "string"
6942
- },
6943
- "default": "\"100%\"",
6944
- "description": "Height used for vertical orientation.",
6945
- "fieldName": "height"
6946
- }
6947
- ],
6948
- "superclass": {
6949
- "name": "LitElement",
6950
- "package": "lit"
6951
- },
6952
- "tagName": "sky-divider",
6953
- "customElement": true,
6954
- "summary": "Visual separator component for horizontal and vertical layout separation."
6955
- }
6956
- ],
6957
- "exports": [
6958
- {
6959
- "kind": "js",
6960
- "name": "SkyDivider",
6961
- "declaration": {
6962
- "name": "SkyDivider",
6963
- "module": "src/sky-divider/sky-divider.ts"
6964
- }
6965
- },
6966
- {
6967
- "kind": "custom-element-definition",
6968
- "name": "sky-divider",
6969
- "declaration": {
6970
- "name": "SkyDivider",
6971
- "module": "src/sky-divider/sky-divider.ts"
6972
- }
6973
- }
6974
- ]
6975
- },
6976
6976
  {
6977
6977
  "kind": "javascript-module",
6978
6978
  "path": "src/sky-flexbox/sky-flexbox.ts",