@sky.ui/core 0.0.31 → 0.0.32

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 +1762 -1762
  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,33 +453,37 @@
453
453
  },
454
454
  {
455
455
  "kind": "javascript-module",
456
- "path": "src/sky-button/sky-button.ts",
456
+ "path": "src/sky-appbar/sky-appbar.ts",
457
457
  "declarations": [
458
458
  {
459
459
  "kind": "class",
460
460
  "description": "",
461
- "name": "SkyButton",
461
+ "name": "SkyAppbar",
462
462
  "cssParts": [
463
463
  {
464
- "description": "The native `<button>` element.",
465
- "name": "button"
464
+ "description": "Wrapper that contains the leading slot, title, and actions.",
465
+ "name": "content"
466
466
  },
467
467
  {
468
- "description": "The optional left/right icons.",
469
- "name": "icon"
468
+ "description": "Container for the leading slot (e.g. menu button).",
469
+ "name": "leading"
470
470
  },
471
471
  {
472
- "description": "Overlay displayed when loading.",
473
- "name": "loading-overlay"
472
+ "description": "The title area (contains .title-text with the title string).",
473
+ "name": "title"
474
474
  },
475
475
  {
476
- "description": "Spinner displayed when loading.",
477
- "name": "spinner"
476
+ "description": "The trailing actions container.",
477
+ "name": "actions"
478
478
  }
479
479
  ],
480
480
  "slots": [
481
481
  {
482
- "description": "Default slot for the button label (replaces `label` property if used).",
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.",
483
487
  "name": ""
484
488
  }
485
489
  ],
@@ -495,326 +499,369 @@
495
499
  },
496
500
  {
497
501
  "kind": "field",
498
- "name": "formAssociated",
502
+ "name": "title",
499
503
  "type": {
500
- "text": "boolean"
504
+ "text": "string"
501
505
  },
502
- "static": true,
503
- "default": "true"
506
+ "default": "\"App Bar\"",
507
+ "description": "Title text displayed in the app bar.",
508
+ "attribute": "title"
504
509
  },
505
510
  {
506
511
  "kind": "field",
507
- "name": "internals",
512
+ "name": "color",
508
513
  "type": {
509
- "text": "ElementInternals"
514
+ "text": "string"
510
515
  },
511
- "privacy": "private"
516
+ "default": "\"default\"",
517
+ "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
518
+ "attribute": "color"
512
519
  },
513
520
  {
514
521
  "kind": "field",
515
- "name": "variant",
522
+ "name": "url",
516
523
  "type": {
517
- "text": "SkyButtonVariant"
524
+ "text": "string"
518
525
  },
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",
522
- "reflects": true
526
+ "default": "\"\"",
527
+ "description": "Background image URL.",
528
+ "attribute": "url"
523
529
  },
524
530
  {
525
531
  "kind": "field",
526
- "name": "color",
532
+ "name": "banner",
527
533
  "type": {
528
- "text": "string"
534
+ "text": "boolean"
529
535
  },
530
- "default": "\"primary\"",
531
- "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
532
- "attribute": "color"
536
+ "default": "true",
537
+ "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
538
+ "attribute": "banner"
533
539
  },
534
540
  {
535
541
  "kind": "field",
536
- "name": "type",
542
+ "name": "dense",
537
543
  "type": {
538
- "text": "SkyButtonType"
544
+ "text": "boolean"
539
545
  },
540
- "default": "\"button\"",
541
- "description": "Button type attribute. Default: `\"button\"`.",
542
- "attribute": "type"
546
+ "default": "false",
547
+ "description": "Enables compact vertical spacing.",
548
+ "attribute": "dense"
543
549
  },
544
550
  {
545
551
  "kind": "field",
546
- "name": "form",
552
+ "name": "elevated",
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": "Applies elevated shadow styling.",
558
+ "attribute": "elevated"
553
559
  },
554
560
  {
555
561
  "kind": "field",
556
- "name": "size",
562
+ "name": "leadingLabel",
557
563
  "type": {
558
564
  "text": "string"
559
565
  },
560
- "default": "\"md\"",
561
- "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
562
- "attribute": "size"
566
+ "default": "\"Open menu\"",
567
+ "description": "Accessible label for default leading button fallback.",
568
+ "attribute": "leadingLabel"
563
569
  },
564
570
  {
565
- "kind": "field",
566
- "name": "radius",
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",
567
596
  "type": {
568
597
  "text": "string"
569
598
  },
570
- "default": "\"md\"",
571
- "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
572
- "attribute": "radius"
599
+ "default": "\"App Bar\"",
600
+ "description": "Title text displayed in the app bar.",
601
+ "fieldName": "title"
573
602
  },
574
603
  {
575
- "kind": "field",
576
- "name": "label",
604
+ "name": "color",
577
605
  "type": {
578
606
  "text": "string"
579
607
  },
580
- "default": "\"Button\"",
581
- "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
582
- "attribute": "label"
608
+ "default": "\"default\"",
609
+ "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
610
+ "fieldName": "color"
583
611
  },
584
612
  {
585
- "kind": "field",
586
- "name": "disabled",
613
+ "name": "url",
614
+ "type": {
615
+ "text": "string"
616
+ },
617
+ "default": "\"\"",
618
+ "description": "Background image URL.",
619
+ "fieldName": "url"
620
+ },
621
+ {
622
+ "name": "banner",
587
623
  "type": {
588
624
  "text": "boolean"
589
625
  },
590
- "default": "false",
591
- "description": "Whether the button is disabled. Default: `false`.",
592
- "attribute": "disabled",
593
- "reflects": true
626
+ "default": "true",
627
+ "description": "Uses `role=\"banner\"` when true, otherwise `role=\"group\"`.",
628
+ "fieldName": "banner"
594
629
  },
595
630
  {
596
- "kind": "field",
597
- "name": "loading",
631
+ "name": "dense",
598
632
  "type": {
599
633
  "text": "boolean"
600
634
  },
601
635
  "default": "false",
602
- "description": "Shows a loading overlay when true. Default: `false`.",
603
- "attribute": "loading",
604
- "reflects": true
636
+ "description": "Enables compact vertical spacing.",
637
+ "fieldName": "dense"
605
638
  },
606
639
  {
607
- "kind": "field",
608
- "name": "iconL",
640
+ "name": "elevated",
609
641
  "type": {
610
- "text": "string"
642
+ "text": "boolean"
611
643
  },
612
- "default": "\"\"",
613
- "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
614
- "attribute": "iconL"
644
+ "default": "false",
645
+ "description": "Applies elevated shadow styling.",
646
+ "fieldName": "elevated"
615
647
  },
616
648
  {
617
- "kind": "field",
618
- "name": "iconR",
649
+ "name": "leadingLabel",
619
650
  "type": {
620
651
  "text": "string"
621
652
  },
622
- "default": "\"\"",
623
- "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
624
- "attribute": "iconR"
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
+ },
686
+ {
687
+ "kind": "javascript-module",
688
+ "path": "src/sky-avatar/sky-avatar.ts",
689
+ "declarations": [
690
+ {
691
+ "kind": "class",
692
+ "description": "",
693
+ "name": "SkyAvatar",
694
+ "cssParts": [
695
+ {
696
+ "description": "The avatar container element.",
697
+ "name": "avatar"
698
+ },
699
+ {
700
+ "description": "The loading overlay container (shown when `loading` is true).",
701
+ "name": "loading-overlay"
625
702
  },
703
+ {
704
+ "description": "The spinner element shown when loading.",
705
+ "name": "spinner"
706
+ }
707
+ ],
708
+ "slots": [
709
+ {
710
+ "description": "Fallback content (e.g., initials or an icon) rendered when `image` is empty.",
711
+ "name": ""
712
+ }
713
+ ],
714
+ "members": [
626
715
  {
627
716
  "kind": "field",
628
- "name": "iconOnly",
717
+ "name": "size",
629
718
  "type": {
630
- "text": "boolean"
719
+ "text": "string"
631
720
  },
632
- "default": "false",
633
- "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
634
- "attribute": "iconOnly",
635
- "reflects": true
721
+ "default": "\"50px\"",
722
+ "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
723
+ "attribute": "size"
636
724
  },
637
725
  {
638
726
  "kind": "field",
639
- "name": "colors",
727
+ "name": "image",
640
728
  "type": {
641
729
  "text": "string"
642
730
  },
643
731
  "default": "\"\"",
644
- "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
645
- "attribute": "colors"
732
+ "description": "Image URL; fallback slot is shown on load error.",
733
+ "attribute": "image"
646
734
  },
647
735
  {
648
736
  "kind": "field",
649
- "name": "animation",
737
+ "name": "fit",
650
738
  "type": {
651
- "text": "SkyButtonAnimation"
739
+ "text": "SkyAvatarFit"
652
740
  },
653
- "default": "\"auto\"",
654
- "description": "Transform animation style. Default: `\"auto\"`.",
655
- "attribute": "animation",
741
+ "default": "\"cover\"",
742
+ "description": "Image fill mode: `cover` (default) or `contain`.",
743
+ "attribute": "fit",
656
744
  "reflects": true
657
745
  },
658
746
  {
659
747
  "kind": "field",
660
- "name": "_hasMeaningfulSlot",
748
+ "name": "radius",
661
749
  "type": {
662
- "text": "boolean"
750
+ "text": "string"
663
751
  },
664
- "privacy": "private",
665
- "default": "false"
752
+ "default": "\"md\"",
753
+ "description": "Border radius token or CSS value.",
754
+ "attribute": "radius"
666
755
  },
667
756
  {
668
757
  "kind": "field",
669
- "name": "_styleVars",
758
+ "name": "alt",
670
759
  "type": {
671
- "text": "Record<string, string>"
760
+ "text": "string"
672
761
  },
673
- "privacy": "private",
674
- "default": "{}",
675
- "description": "Inline CSS variable cache."
762
+ "default": "\"\"",
763
+ "description": "Accessible name when image content conveys meaning.",
764
+ "attribute": "alt"
676
765
  },
677
766
  {
678
- "kind": "method",
679
- "name": "_slotHasMeaningfulContent",
680
- "privacy": "private",
681
- "return": {
682
- "type": {
683
- "text": "boolean"
684
- }
767
+ "kind": "field",
768
+ "name": "color",
769
+ "type": {
770
+ "text": "string"
685
771
  },
686
- "parameters": [
687
- {
688
- "name": "slotEl",
689
- "type": {
690
- "text": "HTMLSlotElement"
691
- }
692
- }
693
- ]
772
+ "default": "\"dark\"",
773
+ "description": "Token or CSS color applied to fallback slot content.",
774
+ "attribute": "color"
694
775
  },
695
776
  {
696
777
  "kind": "field",
697
- "name": "_onSlotChange",
698
- "privacy": "private"
778
+ "name": "outline",
779
+ "type": {
780
+ "text": "string"
781
+ },
782
+ "default": "\"\"",
783
+ "description": "CSS `outline` value.",
784
+ "attribute": "outline"
699
785
  },
700
786
  {
701
- "kind": "method",
702
- "name": "_toSquarePadding",
703
- "privacy": "private",
704
- "return": {
705
- "type": {
706
- "text": "string"
707
- }
787
+ "kind": "field",
788
+ "name": "outlineOffset",
789
+ "type": {
790
+ "text": "string"
708
791
  },
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)."
792
+ "default": "\"2px\"",
793
+ "description": "CSS `outline-offset` value.",
794
+ "attribute": "outlineOffset"
718
795
  },
719
796
  {
720
- "kind": "method",
721
- "name": "_resolveSize",
722
- "privacy": "private",
723
- "return": {
724
- "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 }"
726
- }
797
+ "kind": "field",
798
+ "name": "loading",
799
+ "type": {
800
+ "text": "boolean"
727
801
  },
728
- "parameters": [
729
- {
730
- "name": "input",
731
- "type": {
732
- "text": "string"
733
- }
734
- }
735
- ]
802
+ "default": "false",
803
+ "description": "Shows loading overlay when true.",
804
+ "attribute": "loading",
805
+ "reflects": true
736
806
  },
737
807
  {
738
- "kind": "method",
739
- "name": "_isThemeBorderShorthand",
740
- "privacy": "private",
741
- "return": {
742
- "type": {
743
- "text": "boolean"
744
- }
808
+ "kind": "field",
809
+ "name": "disabled",
810
+ "type": {
811
+ "text": "boolean"
745
812
  },
746
- "parameters": [
747
- {
748
- "name": "border",
749
- "type": {
750
- "text": "string | undefined"
751
- }
752
- }
753
- ],
754
- "description": "Theme tokens like `var(--sky-border-primary)` are full border shorthands, not colors."
813
+ "default": "false",
814
+ "description": "Dims and disables pointer interactions.",
815
+ "attribute": "disabled",
816
+ "reflects": true
755
817
  },
756
818
  {
757
- "kind": "method",
758
- "name": "_borderColorFromShorthand",
759
- "privacy": "private",
760
- "return": {
761
- "type": {
762
- "text": "string"
763
- }
819
+ "kind": "field",
820
+ "name": "interactive",
821
+ "type": {
822
+ "text": "boolean"
764
823
  },
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."
824
+ "default": "false",
825
+ "description": "Enables interactive behavior with keyboard/click activation.",
826
+ "attribute": "interactive"
774
827
  },
775
828
  {
776
- "kind": "method",
777
- "name": "focusButton",
778
- "privacy": "public",
779
- "return": {
780
- "type": {
781
- "text": "void"
782
- }
829
+ "kind": "field",
830
+ "name": "shadow",
831
+ "type": {
832
+ "text": "boolean"
783
833
  },
784
- "description": "Focuses the internal native button."
834
+ "default": "false",
835
+ "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
836
+ "attribute": "shadow",
837
+ "reflects": true
785
838
  },
786
839
  {
787
- "kind": "method",
788
- "name": "clickButton",
789
- "privacy": "public",
790
- "return": {
791
- "type": {
792
- "text": "void"
793
- }
840
+ "kind": "field",
841
+ "name": "_imageError",
842
+ "type": {
843
+ "text": "boolean"
794
844
  },
795
- "description": "Triggers a click on the internal native button when enabled."
845
+ "privacy": "private",
846
+ "default": "false",
847
+ "description": "True when image failed to load; show slot instead."
796
848
  },
797
849
  {
798
- "kind": "method",
799
- "name": "_createRipple",
850
+ "kind": "field",
851
+ "name": "_onImageLoad",
800
852
  "privacy": "private",
801
- "return": {
802
- "type": {
803
- "text": "void"
804
- }
805
- },
806
- "parameters": [
807
- {
808
- "name": "event",
809
- "type": {
810
- "text": "MouseEvent"
811
- }
812
- }
813
- ]
853
+ "description": "Marks image load success and keeps image rendering active."
854
+ },
855
+ {
856
+ "kind": "field",
857
+ "name": "_onImageError",
858
+ "privacy": "private",
859
+ "description": "Marks image load failure and enables fallback slot rendering."
814
860
  },
815
861
  {
816
862
  "kind": "method",
817
- "name": "formDisabledCallback",
863
+ "name": "_handleInteractiveClick",
864
+ "privacy": "private",
818
865
  "return": {
819
866
  "type": {
820
867
  "text": "void"
@@ -822,24 +869,17 @@
822
869
  },
823
870
  "parameters": [
824
871
  {
825
- "name": "disabled",
872
+ "name": "e",
826
873
  "type": {
827
- "text": "boolean"
874
+ "text": "Event"
828
875
  }
829
876
  }
830
- ]
831
- },
832
- {
833
- "kind": "field",
834
- "name": "formOwner",
835
- "type": {
836
- "text": "HTMLFormElement | null"
837
- },
838
- "readonly": true
877
+ ],
878
+ "description": "Re-dispatches click in interactive mode for host-level consumers."
839
879
  },
840
880
  {
841
881
  "kind": "method",
842
- "name": "_handleClick",
882
+ "name": "_handleInteractiveKeydown",
843
883
  "privacy": "private",
844
884
  "return": {
845
885
  "type": {
@@ -848,87 +888,115 @@
848
888
  },
849
889
  "parameters": [
850
890
  {
851
- "name": "event",
891
+ "name": "e",
852
892
  "type": {
853
- "text": "MouseEvent"
893
+ "text": "KeyboardEvent"
854
894
  }
855
895
  }
856
- ]
896
+ ],
897
+ "description": "Handles keyboard activation in interactive mode."
857
898
  },
858
899
  {
859
900
  "kind": "method",
860
- "name": "_iconOnlyName",
901
+ "name": "adjustSpinnerSize",
861
902
  "privacy": "private",
862
903
  "return": {
863
904
  "type": {
864
- "text": "string"
905
+ "text": "void"
865
906
  }
907
+ },
908
+ "description": "Derives spinner dimensions from current avatar size."
909
+ }
910
+ ],
911
+ "events": [
912
+ {
913
+ "name": "click",
914
+ "type": {
915
+ "text": "Event"
866
916
  }
867
917
  }
868
918
  ],
869
919
  "attributes": [
870
920
  {
871
- "name": "variant",
921
+ "name": "size",
872
922
  "type": {
873
- "text": "SkyButtonVariant"
923
+ "text": "string"
874
924
  },
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"
925
+ "default": "\"50px\"",
926
+ "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
927
+ "fieldName": "size"
878
928
  },
879
929
  {
880
- "name": "color",
930
+ "name": "image",
881
931
  "type": {
882
932
  "text": "string"
883
933
  },
884
- "default": "\"primary\"",
885
- "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
886
- "fieldName": "color"
934
+ "default": "\"\"",
935
+ "description": "Image URL; fallback slot is shown on load error.",
936
+ "fieldName": "image"
887
937
  },
888
938
  {
889
- "name": "type",
939
+ "name": "fit",
890
940
  "type": {
891
- "text": "SkyButtonType"
941
+ "text": "SkyAvatarFit"
892
942
  },
893
- "default": "\"button\"",
894
- "description": "Button type attribute. Default: `\"button\"`.",
895
- "fieldName": "type"
943
+ "default": "\"cover\"",
944
+ "description": "Image fill mode: `cover` (default) or `contain`.",
945
+ "fieldName": "fit"
896
946
  },
897
947
  {
898
- "name": "form",
948
+ "name": "radius",
949
+ "type": {
950
+ "text": "string"
951
+ },
952
+ "default": "\"md\"",
953
+ "description": "Border radius token or CSS value.",
954
+ "fieldName": "radius"
955
+ },
956
+ {
957
+ "name": "alt",
899
958
  "type": {
900
959
  "text": "string"
901
960
  },
902
961
  "default": "\"\"",
903
- "description": "Associated form ID for custom submit handling.",
904
- "fieldName": "form"
962
+ "description": "Accessible name when image content conveys meaning.",
963
+ "fieldName": "alt"
905
964
  },
906
965
  {
907
- "name": "size",
966
+ "name": "color",
908
967
  "type": {
909
968
  "text": "string"
910
969
  },
911
- "default": "\"md\"",
912
- "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
913
- "fieldName": "size"
970
+ "default": "\"dark\"",
971
+ "description": "Token or CSS color applied to fallback slot content.",
972
+ "fieldName": "color"
914
973
  },
915
974
  {
916
- "name": "radius",
975
+ "name": "outline",
917
976
  "type": {
918
977
  "text": "string"
919
978
  },
920
- "default": "\"md\"",
921
- "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
922
- "fieldName": "radius"
979
+ "default": "\"\"",
980
+ "description": "CSS `outline` value.",
981
+ "fieldName": "outline"
923
982
  },
924
983
  {
925
- "name": "label",
984
+ "name": "outlineOffset",
926
985
  "type": {
927
986
  "text": "string"
928
987
  },
929
- "default": "\"Button\"",
930
- "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
931
- "fieldName": "label"
988
+ "default": "\"2px\"",
989
+ "description": "CSS `outline-offset` value.",
990
+ "fieldName": "outlineOffset"
991
+ },
992
+ {
993
+ "name": "loading",
994
+ "type": {
995
+ "text": "boolean"
996
+ },
997
+ "default": "false",
998
+ "description": "Shows loading overlay when true.",
999
+ "fieldName": "loading"
932
1000
  },
933
1001
  {
934
1002
  "name": "disabled",
@@ -936,223 +1004,285 @@
936
1004
  "text": "boolean"
937
1005
  },
938
1006
  "default": "false",
939
- "description": "Whether the button is disabled. Default: `false`.",
1007
+ "description": "Dims and disables pointer interactions.",
940
1008
  "fieldName": "disabled"
941
1009
  },
942
1010
  {
943
- "name": "loading",
1011
+ "name": "interactive",
944
1012
  "type": {
945
1013
  "text": "boolean"
946
1014
  },
947
1015
  "default": "false",
948
- "description": "Shows a loading overlay when true. Default: `false`.",
949
- "fieldName": "loading"
1016
+ "description": "Enables interactive behavior with keyboard/click activation.",
1017
+ "fieldName": "interactive"
950
1018
  },
951
1019
  {
952
- "name": "iconL",
1020
+ "name": "shadow",
1021
+ "type": {
1022
+ "text": "boolean"
1023
+ },
1024
+ "default": "false",
1025
+ "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
1026
+ "fieldName": "shadow"
1027
+ }
1028
+ ],
1029
+ "superclass": {
1030
+ "name": "LitElement",
1031
+ "package": "lit"
1032
+ },
1033
+ "tagName": "sky-avatar",
1034
+ "customElement": true,
1035
+ "summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
1036
+ }
1037
+ ],
1038
+ "exports": [
1039
+ {
1040
+ "kind": "js",
1041
+ "name": "SkyAvatar",
1042
+ "declaration": {
1043
+ "name": "SkyAvatar",
1044
+ "module": "src/sky-avatar/sky-avatar.ts"
1045
+ }
1046
+ },
1047
+ {
1048
+ "kind": "custom-element-definition",
1049
+ "name": "sky-avatar",
1050
+ "declaration": {
1051
+ "name": "SkyAvatar",
1052
+ "module": "src/sky-avatar/sky-avatar.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": ""
1083
+ },
1084
+ {
1085
+ "description": "Optional slot to override the badge content entirely.",
1086
+ "name": "badge"
1087
+ }
1088
+ ],
1089
+ "members": [
1090
+ {
1091
+ "kind": "field",
1092
+ "name": "dependencies",
1093
+ "type": {
1094
+ "text": "Record<string, CustomElementConstructor>"
1095
+ },
1096
+ "static": true,
1097
+ "default": "{ \"sky-icon\": SkyIcon, }"
1098
+ },
1099
+ {
1100
+ "kind": "field",
1101
+ "name": "statusColor",
1102
+ "type": {
1103
+ "text": "string"
1104
+ },
1105
+ "default": "\"success\"",
1106
+ "description": "Badge background token or CSS color.",
1107
+ "attribute": "statusColor",
1108
+ "reflects": true
1109
+ },
1110
+ {
1111
+ "kind": "field",
1112
+ "name": "textColor",
1113
+ "type": {
1114
+ "text": "string"
1115
+ },
1116
+ "default": "\"default\"",
1117
+ "description": "Text color token or CSS color.",
1118
+ "attribute": "textColor",
1119
+ "reflects": true
1120
+ },
1121
+ {
1122
+ "kind": "field",
1123
+ "name": "iconColor",
953
1124
  "type": {
954
1125
  "text": "string"
955
1126
  },
956
1127
  "default": "\"\"",
957
- "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
958
- "fieldName": "iconL"
1128
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1129
+ "attribute": "iconColor",
1130
+ "reflects": true
1131
+ },
1132
+ {
1133
+ "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
959
1142
  },
960
1143
  {
961
- "name": "iconR",
1144
+ "kind": "field",
1145
+ "name": "value",
962
1146
  "type": {
963
1147
  "text": "string"
964
1148
  },
965
1149
  "default": "\"\"",
966
- "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
967
- "fieldName": "iconR"
1150
+ "description": "Badge text/count or icon name in icon mode.",
1151
+ "attribute": "value"
968
1152
  },
969
1153
  {
970
- "name": "iconOnly",
1154
+ "kind": "field",
1155
+ "name": "isIcon",
971
1156
  "type": {
972
1157
  "text": "boolean"
973
1158
  },
974
1159
  "default": "false",
975
- "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
976
- "fieldName": "iconOnly"
1160
+ "description": "Renders icon mode when true.",
1161
+ "attribute": "isIcon",
1162
+ "reflects": true
977
1163
  },
978
1164
  {
979
- "name": "colors",
1165
+ "kind": "field",
1166
+ "name": "size",
980
1167
  "type": {
981
1168
  "text": "string"
982
1169
  },
983
1170
  "default": "\"\"",
984
- "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
985
- "fieldName": "colors"
1171
+ "description": "Badge and icon size CSS length.",
1172
+ "attribute": "size",
1173
+ "reflects": true
986
1174
  },
987
1175
  {
988
- "name": "animation",
1176
+ "kind": "field",
1177
+ "name": "shape",
989
1178
  "type": {
990
- "text": "SkyButtonAnimation"
1179
+ "text": "SkyBadgeShape"
991
1180
  },
992
- "default": "\"auto\"",
993
- "description": "Transform animation style. Default: `\"auto\"`.",
994
- "fieldName": "animation"
995
- }
996
- ],
997
- "superclass": {
998
- "name": "LitElement",
999
- "package": "lit"
1000
- },
1001
- "tagName": "sky-button",
1002
- "customElement": true,
1003
- "summary": "Styled button supporting variants, icons, loading state, ripple feedback, and form-associated behavior."
1004
- }
1005
- ],
1006
- "exports": [
1007
- {
1008
- "kind": "js",
1009
- "name": "SkyButton",
1010
- "declaration": {
1011
- "name": "SkyButton",
1012
- "module": "src/sky-button/sky-button.ts"
1013
- }
1014
- },
1015
- {
1016
- "kind": "custom-element-definition",
1017
- "name": "sky-button",
1018
- "declaration": {
1019
- "name": "SkyButton",
1020
- "module": "src/sky-button/sky-button.ts"
1021
- }
1022
- }
1023
- ]
1024
- },
1025
- {
1026
- "kind": "javascript-module",
1027
- "path": "src/sky-avatar/sky-avatar.ts",
1028
- "declarations": [
1029
- {
1030
- "kind": "class",
1031
- "description": "",
1032
- "name": "SkyAvatar",
1033
- "cssParts": [
1034
- {
1035
- "description": "The avatar container element.",
1036
- "name": "avatar"
1037
- },
1038
- {
1039
- "description": "The loading overlay container (shown when `loading` is true).",
1040
- "name": "loading-overlay"
1181
+ "default": "\"custom\"",
1182
+ "description": "Badge shape: `circle | pill | custom`.",
1183
+ "attribute": "shape",
1184
+ "reflects": true
1041
1185
  },
1042
- {
1043
- "description": "The spinner element shown when loading.",
1044
- "name": "spinner"
1045
- }
1046
- ],
1047
- "slots": [
1048
- {
1049
- "description": "Fallback content (e.g., initials or an icon) rendered when `image` is empty.",
1050
- "name": ""
1051
- }
1052
- ],
1053
- "members": [
1054
1186
  {
1055
1187
  "kind": "field",
1056
- "name": "size",
1188
+ "name": "max",
1057
1189
  "type": {
1058
- "text": "string"
1190
+ "text": "number"
1059
1191
  },
1060
- "default": "\"50px\"",
1061
- "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
1062
- "attribute": "size"
1192
+ "default": "99",
1193
+ "description": "Maximum numeric count before rendering overflow label.",
1194
+ "attribute": "max"
1063
1195
  },
1064
1196
  {
1065
1197
  "kind": "field",
1066
- "name": "image",
1198
+ "name": "hideWhenZero",
1067
1199
  "type": {
1068
- "text": "string"
1200
+ "text": "boolean"
1069
1201
  },
1070
- "default": "\"\"",
1071
- "description": "Image URL; fallback slot is shown on load error.",
1072
- "attribute": "image"
1202
+ "default": "false",
1203
+ "description": "Hides badge when value resolves to numeric zero.",
1204
+ "attribute": "hideWhenZero"
1073
1205
  },
1074
1206
  {
1075
1207
  "kind": "field",
1076
- "name": "fit",
1208
+ "name": "show",
1077
1209
  "type": {
1078
- "text": "SkyAvatarFit"
1210
+ "text": "boolean"
1079
1211
  },
1080
- "default": "\"cover\"",
1081
- "description": "Image fill mode: `cover` (default) or `contain`.",
1082
- "attribute": "fit",
1212
+ "default": "true",
1213
+ "description": "Forces badge visibility independent of value.",
1214
+ "attribute": "show",
1083
1215
  "reflects": true
1084
1216
  },
1085
1217
  {
1086
1218
  "kind": "field",
1087
- "name": "radius",
1219
+ "name": "offsetX",
1088
1220
  "type": {
1089
1221
  "text": "string"
1090
1222
  },
1091
- "default": "\"md\"",
1092
- "description": "Border radius token or CSS value.",
1093
- "attribute": "radius"
1223
+ "default": "\"0px\"",
1224
+ "description": "Horizontal offset CSS length.",
1225
+ "attribute": "offsetX"
1094
1226
  },
1095
1227
  {
1096
1228
  "kind": "field",
1097
- "name": "alt",
1229
+ "name": "offsetY",
1098
1230
  "type": {
1099
1231
  "text": "string"
1100
1232
  },
1101
- "default": "\"\"",
1102
- "description": "Accessible name when image content conveys meaning.",
1103
- "attribute": "alt"
1233
+ "default": "\"0px\"",
1234
+ "description": "Vertical offset CSS length.",
1235
+ "attribute": "offsetY"
1104
1236
  },
1105
1237
  {
1106
1238
  "kind": "field",
1107
- "name": "color",
1239
+ "name": "ring",
1108
1240
  "type": {
1109
- "text": "string"
1241
+ "text": "boolean"
1110
1242
  },
1111
- "default": "\"dark\"",
1112
- "description": "Token or CSS color applied to fallback slot content.",
1113
- "attribute": "color"
1243
+ "default": "false",
1244
+ "description": "Enables visual ring around the badge.",
1245
+ "attribute": "ring"
1114
1246
  },
1115
1247
  {
1116
1248
  "kind": "field",
1117
- "name": "outline",
1249
+ "name": "ringColor",
1118
1250
  "type": {
1119
1251
  "text": "string"
1120
1252
  },
1121
- "default": "\"\"",
1122
- "description": "CSS `outline` value.",
1123
- "attribute": "outline"
1253
+ "default": "\"primary\"",
1254
+ "description": "Ring color token or CSS color.",
1255
+ "attribute": "ringColor"
1124
1256
  },
1125
1257
  {
1126
1258
  "kind": "field",
1127
- "name": "outlineOffset",
1259
+ "name": "ringOffset",
1128
1260
  "type": {
1129
1261
  "text": "string"
1130
1262
  },
1131
- "default": "\"2px\"",
1132
- "description": "CSS `outline-offset` value.",
1133
- "attribute": "outlineOffset"
1263
+ "default": "\"1px\"",
1264
+ "description": "Ring offset CSS length.",
1265
+ "attribute": "ringOffset"
1134
1266
  },
1135
1267
  {
1136
1268
  "kind": "field",
1137
- "name": "loading",
1269
+ "name": "badgeLabel",
1138
1270
  "type": {
1139
- "text": "boolean"
1271
+ "text": "string | null"
1140
1272
  },
1141
- "default": "false",
1142
- "description": "Shows loading overlay when true.",
1143
- "attribute": "loading",
1144
- "reflects": true
1273
+ "default": "null",
1274
+ "description": "ARIA label override.",
1275
+ "attribute": "badgeLabel"
1145
1276
  },
1146
1277
  {
1147
1278
  "kind": "field",
1148
- "name": "disabled",
1279
+ "name": "badgeAriaHidden",
1149
1280
  "type": {
1150
1281
  "text": "boolean"
1151
1282
  },
1152
1283
  "default": "false",
1153
- "description": "Dims and disables pointer interactions.",
1154
- "attribute": "disabled",
1155
- "reflects": true
1284
+ "description": "Hides badge from assistive technology when true.",
1285
+ "attribute": "badgeAriaHidden"
1156
1286
  },
1157
1287
  {
1158
1288
  "kind": "field",
@@ -1161,190 +1291,318 @@
1161
1291
  "text": "boolean"
1162
1292
  },
1163
1293
  "default": "false",
1164
- "description": "Enables interactive behavior with keyboard/click activation.",
1294
+ "description": "Enables focus/activation and `badge-click` emission.",
1165
1295
  "attribute": "interactive"
1166
1296
  },
1167
1297
  {
1168
1298
  "kind": "field",
1169
- "name": "shadow",
1299
+ "name": "placement",
1170
1300
  "type": {
1171
- "text": "boolean"
1301
+ "text": "SkyBadgePlacement"
1172
1302
  },
1173
- "default": "false",
1174
- "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
1175
- "attribute": "shadow",
1303
+ "default": "\"custom\"",
1304
+ "description": "Anchor placement preset for badge positioning.",
1305
+ "attribute": "placement",
1176
1306
  "reflects": true
1177
1307
  },
1178
1308
  {
1179
1309
  "kind": "field",
1180
- "name": "_imageError",
1310
+ "name": "_badgeEl",
1181
1311
  "type": {
1182
- "text": "boolean"
1312
+ "text": "HTMLSpanElement"
1183
1313
  },
1184
- "privacy": "private",
1185
- "default": "false",
1186
- "description": "True when image failed to load; show slot instead."
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)."
1321
+ },
1322
+ {
1323
+ "kind": "field",
1324
+ "name": "shadowRootOptions",
1325
+ "type": {
1326
+ "text": "ShadowRootInit"
1327
+ },
1328
+ "static": true,
1329
+ "default": "{ mode: \"open\", delegatesFocus: true, }"
1330
+ },
1331
+ {
1332
+ "kind": "method",
1333
+ "name": "showBadge",
1334
+ "privacy": "public",
1335
+ "return": {
1336
+ "type": {
1337
+ "text": "void"
1338
+ }
1339
+ },
1340
+ "description": "Forces badge visibility on."
1341
+ },
1342
+ {
1343
+ "kind": "method",
1344
+ "name": "hideBadge",
1345
+ "privacy": "public",
1346
+ "return": {
1347
+ "type": {
1348
+ "text": "void"
1349
+ }
1350
+ },
1351
+ "description": "Forces badge visibility off."
1352
+ },
1353
+ {
1354
+ "kind": "method",
1355
+ "name": "setValue",
1356
+ "privacy": "public",
1357
+ "return": {
1358
+ "type": {
1359
+ "text": "void"
1360
+ }
1361
+ },
1362
+ "parameters": [
1363
+ {
1364
+ "name": "value",
1365
+ "type": {
1366
+ "text": "string"
1367
+ },
1368
+ "description": "Badge value or icon name."
1369
+ }
1370
+ ],
1371
+ "description": "Updates badge value for text/count or icon modes."
1187
1372
  },
1188
1373
  {
1189
1374
  "kind": "field",
1190
- "name": "_onImageLoad",
1375
+ "name": "_onActivate",
1191
1376
  "privacy": "private",
1192
- "description": "Marks image load success and keeps image rendering active."
1377
+ "description": "Emits `badge-click` for interactive activation."
1193
1378
  },
1194
1379
  {
1195
1380
  "kind": "field",
1196
- "name": "_onImageError",
1381
+ "name": "_onKeydown",
1197
1382
  "privacy": "private",
1198
- "description": "Marks image load failure and enables fallback slot rendering."
1383
+ "description": "Handles keyboard activation with Enter and Space."
1199
1384
  },
1200
1385
  {
1201
1386
  "kind": "method",
1202
- "name": "_handleInteractiveClick",
1387
+ "name": "_computeAriaLabel",
1203
1388
  "privacy": "private",
1204
1389
  "return": {
1205
1390
  "type": {
1206
- "text": "void"
1391
+ "text": "string | null"
1207
1392
  }
1208
1393
  },
1209
1394
  "parameters": [
1210
1395
  {
1211
- "name": "e",
1396
+ "name": "displayValue",
1212
1397
  "type": {
1213
- "text": "Event"
1398
+ "text": "string | null"
1214
1399
  }
1215
1400
  }
1216
1401
  ],
1217
- "description": "Re-dispatches click in interactive mode for host-level consumers."
1402
+ "description": "Computes accessible badge label from current render state."
1218
1403
  },
1219
1404
  {
1220
1405
  "kind": "method",
1221
- "name": "_handleInteractiveKeydown",
1406
+ "name": "_computeAnchors",
1222
1407
  "privacy": "private",
1223
1408
  "return": {
1224
1409
  "type": {
1225
- "text": "void"
1410
+ "text": "{\r\n top: string;\r\n right: string;\r\n bottom: string;\r\n left: string;\r\n }"
1226
1411
  }
1227
1412
  },
1228
1413
  "parameters": [
1229
1414
  {
1230
- "name": "e",
1415
+ "name": "placement",
1231
1416
  "type": {
1232
- "text": "KeyboardEvent"
1417
+ "text": "SkyBadgePlacement"
1233
1418
  }
1234
1419
  }
1235
1420
  ],
1236
- "description": "Handles keyboard activation in interactive mode."
1421
+ "description": "Resolves anchor edges from placement preset."
1237
1422
  },
1238
1423
  {
1239
1424
  "kind": "method",
1240
- "name": "adjustSpinnerSize",
1425
+ "name": "_resolveBadgeSurface",
1241
1426
  "privacy": "private",
1242
1427
  "return": {
1243
1428
  "type": {
1244
- "text": "void"
1429
+ "text": "{\r\n bg: string;\r\n color: string;\r\n border: string;\r\n }"
1245
1430
  }
1246
1431
  },
1247
- "description": "Derives spinner dimensions from current avatar size."
1432
+ "description": "Maps semantic status tokens to soft badge surface colors."
1248
1433
  }
1249
1434
  ],
1250
1435
  "events": [
1251
1436
  {
1252
- "name": "click",
1253
1437
  "type": {
1254
- "text": "Event"
1255
- }
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"
1256
1442
  }
1257
1443
  ],
1258
1444
  "attributes": [
1259
1445
  {
1260
- "name": "size",
1446
+ "name": "statusColor",
1261
1447
  "type": {
1262
1448
  "text": "string"
1263
1449
  },
1264
- "default": "\"50px\"",
1265
- "description": "Avatar size: preset `sm` | `md` | `lg` or CSS length (for example `50px`).",
1266
- "fieldName": "size"
1450
+ "default": "\"success\"",
1451
+ "description": "Badge background token or CSS color.",
1452
+ "fieldName": "statusColor"
1267
1453
  },
1268
1454
  {
1269
- "name": "image",
1455
+ "name": "textColor",
1456
+ "type": {
1457
+ "text": "string"
1458
+ },
1459
+ "default": "\"default\"",
1460
+ "description": "Text color token or CSS color.",
1461
+ "fieldName": "textColor"
1462
+ },
1463
+ {
1464
+ "name": "iconColor",
1270
1465
  "type": {
1271
1466
  "text": "string"
1272
1467
  },
1273
1468
  "default": "\"\"",
1274
- "description": "Image URL; fallback slot is shown on load error.",
1275
- "fieldName": "image"
1469
+ "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1470
+ "fieldName": "iconColor"
1276
1471
  },
1277
1472
  {
1278
- "name": "fit",
1473
+ "name": "position",
1279
1474
  "type": {
1280
- "text": "SkyAvatarFit"
1475
+ "text": "SkyBadgePosition"
1281
1476
  },
1282
- "default": "\"cover\"",
1283
- "description": "Image fill mode: `cover` (default) or `contain`.",
1284
- "fieldName": "fit"
1477
+ "default": "\"default\"",
1478
+ "description": "Layout mode: `default | floating | inline`.",
1479
+ "fieldName": "position"
1285
1480
  },
1286
1481
  {
1287
- "name": "radius",
1482
+ "name": "value",
1288
1483
  "type": {
1289
1484
  "text": "string"
1290
1485
  },
1291
- "default": "\"md\"",
1292
- "description": "Border radius token or CSS value.",
1293
- "fieldName": "radius"
1486
+ "default": "\"\"",
1487
+ "description": "Badge text/count or icon name in icon mode.",
1488
+ "fieldName": "value"
1294
1489
  },
1295
1490
  {
1296
- "name": "alt",
1491
+ "name": "isIcon",
1492
+ "type": {
1493
+ "text": "boolean"
1494
+ },
1495
+ "default": "false",
1496
+ "description": "Renders icon mode when true.",
1497
+ "fieldName": "isIcon"
1498
+ },
1499
+ {
1500
+ "name": "size",
1297
1501
  "type": {
1298
1502
  "text": "string"
1299
1503
  },
1300
1504
  "default": "\"\"",
1301
- "description": "Accessible name when image content conveys meaning.",
1302
- "fieldName": "alt"
1505
+ "description": "Badge and icon size CSS length.",
1506
+ "fieldName": "size"
1303
1507
  },
1304
1508
  {
1305
- "name": "color",
1509
+ "name": "shape",
1306
1510
  "type": {
1307
- "text": "string"
1511
+ "text": "SkyBadgeShape"
1308
1512
  },
1309
- "default": "\"dark\"",
1310
- "description": "Token or CSS color applied to fallback slot content.",
1311
- "fieldName": "color"
1513
+ "default": "\"custom\"",
1514
+ "description": "Badge shape: `circle | pill | custom`.",
1515
+ "fieldName": "shape"
1312
1516
  },
1313
1517
  {
1314
- "name": "outline",
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",
1315
1546
  "type": {
1316
1547
  "text": "string"
1317
1548
  },
1318
- "default": "\"\"",
1319
- "description": "CSS `outline` value.",
1320
- "fieldName": "outline"
1549
+ "default": "\"0px\"",
1550
+ "description": "Horizontal offset CSS length.",
1551
+ "fieldName": "offsetX"
1321
1552
  },
1322
1553
  {
1323
- "name": "outlineOffset",
1554
+ "name": "offsetY",
1324
1555
  "type": {
1325
1556
  "text": "string"
1326
1557
  },
1327
- "default": "\"2px\"",
1328
- "description": "CSS `outline-offset` value.",
1329
- "fieldName": "outlineOffset"
1558
+ "default": "\"0px\"",
1559
+ "description": "Vertical offset CSS length.",
1560
+ "fieldName": "offsetY"
1330
1561
  },
1331
1562
  {
1332
- "name": "loading",
1563
+ "name": "ring",
1333
1564
  "type": {
1334
1565
  "text": "boolean"
1335
1566
  },
1336
1567
  "default": "false",
1337
- "description": "Shows loading overlay when true.",
1338
- "fieldName": "loading"
1568
+ "description": "Enables visual ring around the badge.",
1569
+ "fieldName": "ring"
1339
1570
  },
1340
1571
  {
1341
- "name": "disabled",
1572
+ "name": "ringColor",
1573
+ "type": {
1574
+ "text": "string"
1575
+ },
1576
+ "default": "\"primary\"",
1577
+ "description": "Ring color token or CSS color.",
1578
+ "fieldName": "ringColor"
1579
+ },
1580
+ {
1581
+ "name": "ringOffset",
1582
+ "type": {
1583
+ "text": "string"
1584
+ },
1585
+ "default": "\"1px\"",
1586
+ "description": "Ring offset CSS length.",
1587
+ "fieldName": "ringOffset"
1588
+ },
1589
+ {
1590
+ "name": "badgeLabel",
1591
+ "type": {
1592
+ "text": "string | null"
1593
+ },
1594
+ "default": "null",
1595
+ "description": "ARIA label override.",
1596
+ "fieldName": "badgeLabel"
1597
+ },
1598
+ {
1599
+ "name": "badgeAriaHidden",
1342
1600
  "type": {
1343
1601
  "text": "boolean"
1344
1602
  },
1345
1603
  "default": "false",
1346
- "description": "Dims and disables pointer interactions.",
1347
- "fieldName": "disabled"
1604
+ "description": "Hides badge from assistive technology when true.",
1605
+ "fieldName": "badgeAriaHidden"
1348
1606
  },
1349
1607
  {
1350
1608
  "name": "interactive",
@@ -1352,77 +1610,77 @@
1352
1610
  "text": "boolean"
1353
1611
  },
1354
1612
  "default": "false",
1355
- "description": "Enables interactive behavior with keyboard/click activation.",
1613
+ "description": "Enables focus/activation and `badge-click` emission.",
1356
1614
  "fieldName": "interactive"
1357
1615
  },
1358
1616
  {
1359
- "name": "shadow",
1617
+ "name": "placement",
1360
1618
  "type": {
1361
- "text": "boolean"
1619
+ "text": "SkyBadgePlacement"
1362
1620
  },
1363
- "default": "false",
1364
- "description": "When true, applies solid surface, border ring, and elevation; no backdrop blur.",
1365
- "fieldName": "shadow"
1621
+ "default": "\"custom\"",
1622
+ "description": "Anchor placement preset for badge positioning.",
1623
+ "fieldName": "placement"
1366
1624
  }
1367
1625
  ],
1368
1626
  "superclass": {
1369
1627
  "name": "LitElement",
1370
1628
  "package": "lit"
1371
1629
  },
1372
- "tagName": "sky-avatar",
1630
+ "tagName": "sky-badge",
1373
1631
  "customElement": true,
1374
- "summary": "Avatar that renders image content or fallback slot content with configurable size, radius, outline, and loading state."
1632
+ "summary": "Badge for status dots, counts, or icons anchored to slotted content."
1375
1633
  }
1376
1634
  ],
1377
1635
  "exports": [
1378
1636
  {
1379
1637
  "kind": "js",
1380
- "name": "SkyAvatar",
1638
+ "name": "SkyBadge",
1381
1639
  "declaration": {
1382
- "name": "SkyAvatar",
1383
- "module": "src/sky-avatar/sky-avatar.ts"
1640
+ "name": "SkyBadge",
1641
+ "module": "src/sky-badge/sky-badge.ts"
1384
1642
  }
1385
1643
  },
1386
1644
  {
1387
1645
  "kind": "custom-element-definition",
1388
- "name": "sky-avatar",
1646
+ "name": "sky-badge",
1389
1647
  "declaration": {
1390
- "name": "SkyAvatar",
1391
- "module": "src/sky-avatar/sky-avatar.ts"
1648
+ "name": "SkyBadge",
1649
+ "module": "src/sky-badge/sky-badge.ts"
1392
1650
  }
1393
1651
  }
1394
1652
  ]
1395
1653
  },
1396
1654
  {
1397
1655
  "kind": "javascript-module",
1398
- "path": "src/sky-badge/sky-badge.ts",
1656
+ "path": "src/sky-button/sky-button.ts",
1399
1657
  "declarations": [
1400
1658
  {
1401
1659
  "kind": "class",
1402
1660
  "description": "",
1403
- "name": "SkyBadge",
1661
+ "name": "SkyButton",
1404
1662
  "cssParts": [
1405
1663
  {
1406
- "description": "Wrapper around the slotted content and the badge.",
1407
- "name": "container"
1664
+ "description": "The native `<button>` element.",
1665
+ "name": "button"
1408
1666
  },
1409
1667
  {
1410
- "description": "The badge element. Use `badgeRef` for positioning (e.g. tooltip anchor).",
1411
- "name": "badge"
1668
+ "description": "The optional left/right icons.",
1669
+ "name": "icon"
1412
1670
  },
1413
1671
  {
1414
- "description": "The icon element when `isIcon` is true.",
1415
- "name": "icon"
1672
+ "description": "Overlay displayed when loading.",
1673
+ "name": "loading-overlay"
1674
+ },
1675
+ {
1676
+ "description": "Spinner displayed when loading.",
1677
+ "name": "spinner"
1416
1678
  }
1417
1679
  ],
1418
1680
  "slots": [
1419
1681
  {
1420
- "description": "The content the badge attaches to.",
1682
+ "description": "Default slot for the button label (replaces `label` property if used).",
1421
1683
  "name": ""
1422
- },
1423
- {
1424
- "description": "Optional slot to override the badge content entirely.",
1425
- "name": "badge"
1426
1684
  }
1427
1685
  ],
1428
1686
  "members": [
@@ -1437,68 +1695,61 @@
1437
1695
  },
1438
1696
  {
1439
1697
  "kind": "field",
1440
- "name": "statusColor",
1698
+ "name": "formAssociated",
1699
+ "type": {
1700
+ "text": "boolean"
1701
+ },
1702
+ "static": true,
1703
+ "default": "true"
1704
+ },
1705
+ {
1706
+ "kind": "field",
1707
+ "name": "internals",
1441
1708
  "type": {
1442
- "text": "string"
1709
+ "text": "ElementInternals"
1443
1710
  },
1444
- "default": "\"success\"",
1445
- "description": "Badge background token or CSS color.",
1446
- "attribute": "statusColor",
1447
- "reflects": true
1711
+ "privacy": "private"
1448
1712
  },
1449
1713
  {
1450
1714
  "kind": "field",
1451
- "name": "textColor",
1715
+ "name": "variant",
1452
1716
  "type": {
1453
- "text": "string"
1717
+ "text": "SkyButtonVariant"
1454
1718
  },
1455
- "default": "\"default\"",
1456
- "description": "Text color token or CSS color.",
1457
- "attribute": "textColor",
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",
1458
1722
  "reflects": true
1459
1723
  },
1460
1724
  {
1461
1725
  "kind": "field",
1462
- "name": "iconColor",
1726
+ "name": "color",
1463
1727
  "type": {
1464
1728
  "text": "string"
1465
1729
  },
1466
- "default": "\"\"",
1467
- "description": "Icon color token or CSS color; falls back to `textColor` when empty.",
1468
- "attribute": "iconColor",
1469
- "reflects": true
1730
+ "default": "\"primary\"",
1731
+ "description": "Base color token or custom CSS color. Default: `\"primary\"`.",
1732
+ "attribute": "color"
1470
1733
  },
1471
1734
  {
1472
1735
  "kind": "field",
1473
- "name": "position",
1736
+ "name": "type",
1474
1737
  "type": {
1475
- "text": "SkyBadgePosition"
1738
+ "text": "SkyButtonType"
1476
1739
  },
1477
- "default": "\"default\"",
1478
- "description": "Layout mode: `default | floating | inline`.",
1479
- "attribute": "position",
1480
- "reflects": true
1740
+ "default": "\"button\"",
1741
+ "description": "Button type attribute. Default: `\"button\"`.",
1742
+ "attribute": "type"
1481
1743
  },
1482
1744
  {
1483
1745
  "kind": "field",
1484
- "name": "value",
1746
+ "name": "form",
1485
1747
  "type": {
1486
1748
  "text": "string"
1487
1749
  },
1488
1750
  "default": "\"\"",
1489
- "description": "Badge text/count or icon name in icon mode.",
1490
- "attribute": "value"
1491
- },
1492
- {
1493
- "kind": "field",
1494
- "name": "isIcon",
1495
- "type": {
1496
- "text": "boolean"
1497
- },
1498
- "default": "false",
1499
- "description": "Renders icon mode when true.",
1500
- "attribute": "isIcon",
1501
- "reflects": true
1751
+ "description": "Associated form ID for custom submit handling.",
1752
+ "attribute": "form"
1502
1753
  },
1503
1754
  {
1504
1755
  "kind": "field",
@@ -1506,193 +1757,247 @@
1506
1757
  "type": {
1507
1758
  "text": "string"
1508
1759
  },
1509
- "default": "\"\"",
1510
- "description": "Badge and icon size CSS length.",
1511
- "attribute": "size",
1512
- "reflects": true
1760
+ "default": "\"md\"",
1761
+ "description": "Preset size token (`xs…xl`) or CSS size (e.g., `\"15px\"`, `\"1rem\"`). Default: `\"md\"`.",
1762
+ "attribute": "size"
1513
1763
  },
1514
1764
  {
1515
1765
  "kind": "field",
1516
- "name": "shape",
1766
+ "name": "radius",
1517
1767
  "type": {
1518
- "text": "SkyBadgeShape"
1768
+ "text": "string"
1519
1769
  },
1520
- "default": "\"custom\"",
1521
- "description": "Badge shape: `circle | pill | custom`.",
1522
- "attribute": "shape",
1523
- "reflects": true
1770
+ "default": "\"md\"",
1771
+ "description": "Preset radius token (`none…full`) or CSS radius (e.g., `\"12px\"`). Default: `\"md\"`.",
1772
+ "attribute": "radius"
1524
1773
  },
1525
1774
  {
1526
1775
  "kind": "field",
1527
- "name": "max",
1776
+ "name": "label",
1528
1777
  "type": {
1529
- "text": "number"
1778
+ "text": "string"
1530
1779
  },
1531
- "default": "99",
1532
- "description": "Maximum numeric count before rendering overflow label.",
1533
- "attribute": "max"
1780
+ "default": "\"Button\"",
1781
+ "description": "Text label for the button. Ignored if default slot is used. Default: `\"Button\"`.",
1782
+ "attribute": "label"
1534
1783
  },
1535
1784
  {
1536
1785
  "kind": "field",
1537
- "name": "hideWhenZero",
1786
+ "name": "disabled",
1538
1787
  "type": {
1539
1788
  "text": "boolean"
1540
1789
  },
1541
1790
  "default": "false",
1542
- "description": "Hides badge when value resolves to numeric zero.",
1543
- "attribute": "hideWhenZero"
1791
+ "description": "Whether the button is disabled. Default: `false`.",
1792
+ "attribute": "disabled",
1793
+ "reflects": true
1544
1794
  },
1545
1795
  {
1546
1796
  "kind": "field",
1547
- "name": "show",
1797
+ "name": "loading",
1548
1798
  "type": {
1549
1799
  "text": "boolean"
1550
1800
  },
1551
- "default": "true",
1552
- "description": "Forces badge visibility independent of value.",
1553
- "attribute": "show",
1801
+ "default": "false",
1802
+ "description": "Shows a loading overlay when true. Default: `false`.",
1803
+ "attribute": "loading",
1554
1804
  "reflects": true
1555
1805
  },
1556
1806
  {
1557
1807
  "kind": "field",
1558
- "name": "offsetX",
1808
+ "name": "iconL",
1559
1809
  "type": {
1560
1810
  "text": "string"
1561
1811
  },
1562
- "default": "\"0px\"",
1563
- "description": "Horizontal offset CSS length.",
1564
- "attribute": "offsetX"
1812
+ "default": "\"\"",
1813
+ "description": "Optional left-side icon (Iconify name). Default: `\"\"`.",
1814
+ "attribute": "iconL"
1565
1815
  },
1566
1816
  {
1567
1817
  "kind": "field",
1568
- "name": "offsetY",
1818
+ "name": "iconR",
1569
1819
  "type": {
1570
1820
  "text": "string"
1571
1821
  },
1572
- "default": "\"0px\"",
1573
- "description": "Vertical offset CSS length.",
1574
- "attribute": "offsetY"
1822
+ "default": "\"\"",
1823
+ "description": "Optional right-side icon (Iconify name). Default: `\"\"`.",
1824
+ "attribute": "iconR"
1575
1825
  },
1576
1826
  {
1577
1827
  "kind": "field",
1578
- "name": "ring",
1828
+ "name": "iconOnly",
1579
1829
  "type": {
1580
1830
  "text": "boolean"
1581
1831
  },
1582
1832
  "default": "false",
1583
- "description": "Enables visual ring around the badge.",
1584
- "attribute": "ring"
1833
+ "description": "Square padding for icon-only buttons; hides label text. Default: `false`.",
1834
+ "attribute": "iconOnly",
1835
+ "reflects": true
1585
1836
  },
1586
1837
  {
1587
1838
  "kind": "field",
1588
- "name": "ringColor",
1839
+ "name": "colors",
1589
1840
  "type": {
1590
1841
  "text": "string"
1591
1842
  },
1592
- "default": "\"primary\"",
1593
- "description": "Ring color token or CSS color.",
1594
- "attribute": "ringColor"
1843
+ "default": "\"\"",
1844
+ "description": "Comma-separated color stops for gradient variant. Default: `\"\"`.",
1845
+ "attribute": "colors"
1595
1846
  },
1596
1847
  {
1597
1848
  "kind": "field",
1598
- "name": "ringOffset",
1849
+ "name": "animation",
1599
1850
  "type": {
1600
- "text": "string"
1851
+ "text": "SkyButtonAnimation"
1601
1852
  },
1602
- "default": "\"1px\"",
1603
- "description": "Ring offset CSS length.",
1604
- "attribute": "ringOffset"
1853
+ "default": "\"auto\"",
1854
+ "description": "Transform animation style. Default: `\"auto\"`.",
1855
+ "attribute": "animation",
1856
+ "reflects": true
1605
1857
  },
1606
1858
  {
1607
1859
  "kind": "field",
1608
- "name": "badgeLabel",
1860
+ "name": "_hasMeaningfulSlot",
1609
1861
  "type": {
1610
- "text": "string | null"
1862
+ "text": "boolean"
1611
1863
  },
1612
- "default": "null",
1613
- "description": "ARIA label override.",
1614
- "attribute": "badgeLabel"
1864
+ "privacy": "private",
1865
+ "default": "false"
1615
1866
  },
1616
1867
  {
1617
1868
  "kind": "field",
1618
- "name": "badgeAriaHidden",
1869
+ "name": "_styleVars",
1619
1870
  "type": {
1620
- "text": "boolean"
1871
+ "text": "Record<string, string>"
1621
1872
  },
1622
- "default": "false",
1623
- "description": "Hides badge from assistive technology when true.",
1624
- "attribute": "badgeAriaHidden"
1873
+ "privacy": "private",
1874
+ "default": "{}",
1875
+ "description": "Inline CSS variable cache."
1625
1876
  },
1626
1877
  {
1627
- "kind": "field",
1628
- "name": "interactive",
1629
- "type": {
1630
- "text": "boolean"
1878
+ "kind": "method",
1879
+ "name": "_slotHasMeaningfulContent",
1880
+ "privacy": "private",
1881
+ "return": {
1882
+ "type": {
1883
+ "text": "boolean"
1884
+ }
1631
1885
  },
1632
- "default": "false",
1633
- "description": "Enables focus/activation and `badge-click` emission.",
1634
- "attribute": "interactive"
1886
+ "parameters": [
1887
+ {
1888
+ "name": "slotEl",
1889
+ "type": {
1890
+ "text": "HTMLSlotElement"
1891
+ }
1892
+ }
1893
+ ]
1635
1894
  },
1636
1895
  {
1637
1896
  "kind": "field",
1638
- "name": "placement",
1639
- "type": {
1640
- "text": "SkyBadgePlacement"
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
+ }
1641
1908
  },
1642
- "default": "\"custom\"",
1643
- "description": "Anchor placement preset for badge positioning.",
1644
- "attribute": "placement",
1645
- "reflects": true
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)."
1646
1918
  },
1647
1919
  {
1648
- "kind": "field",
1649
- "name": "_badgeEl",
1650
- "type": {
1651
- "text": "HTMLSpanElement"
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
+ }
1652
1927
  },
1653
- "privacy": "private"
1928
+ "parameters": [
1929
+ {
1930
+ "name": "input",
1931
+ "type": {
1932
+ "text": "string"
1933
+ }
1934
+ }
1935
+ ]
1654
1936
  },
1655
1937
  {
1656
- "kind": "field",
1657
- "name": "badgeRef",
1658
- "privacy": "public",
1659
- "description": "Ref for the badge element (e.g. for tooltip anchor or positioning)."
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."
1660
1955
  },
1661
1956
  {
1662
- "kind": "field",
1663
- "name": "shadowRootOptions",
1664
- "type": {
1665
- "text": "ShadowRootInit"
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
  ]
@@ -3416,331 +3648,99 @@
3416
3648
  "description": "Whether to display validation error messages. Default: `false`.",
3417
3649
  "fieldName": "showErrors"
3418
3650
  },
3419
- {
3420
- "name": "prefix",
3421
- "type": {
3422
- "text": "string"
3423
- },
3424
- "default": "\"\"",
3425
- "description": "Optional prefix text or content before the label. Default: `\"\"`.",
3426
- "fieldName": "prefix"
3427
- },
3428
- {
3429
- "name": "suffix",
3430
- "type": {
3431
- "text": "string"
3432
- },
3433
- "default": "\"\"",
3434
- "description": "Optional suffix text or content after the label. Default: `\"\"`.",
3435
- "fieldName": "suffix"
3436
- },
3437
- {
3438
- "name": "prefixColor",
3439
- "type": {
3440
- "text": "string"
3441
- },
3442
- "default": "\"\"",
3443
- "description": "The color for the prefix text. Default: `\"\"`.",
3444
- "fieldName": "prefixColor"
3445
- },
3446
- {
3447
- "name": "suffixColor",
3448
- "type": {
3449
- "text": "string"
3450
- },
3451
- "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
+ "name": "prefix",
3653
+ "type": {
3654
+ "text": "string"
3651
3655
  },
3652
- "description": "Sets background image CSS variable from `url`."
3653
- }
3654
- ],
3655
- "attributes": [
3656
+ "default": "\"\"",
3657
+ "description": "Optional prefix text or content before the label. Default: `\"\"`.",
3658
+ "fieldName": "prefix"
3659
+ },
3656
3660
  {
3657
- "name": "title",
3661
+ "name": "suffix",
3658
3662
  "type": {
3659
3663
  "text": "string"
3660
3664
  },
3661
- "default": "\"App Bar\"",
3662
- "description": "Title text displayed in the app bar.",
3663
- "fieldName": "title"
3665
+ "default": "\"\"",
3666
+ "description": "Optional suffix text or content after the label. Default: `\"\"`.",
3667
+ "fieldName": "suffix"
3664
3668
  },
3665
3669
  {
3666
- "name": "color",
3670
+ "name": "prefixColor",
3667
3671
  "type": {
3668
3672
  "text": "string"
3669
3673
  },
3670
- "default": "\"default\"",
3671
- "description": "Semantic token or CSS color for bar background; foreground color is derived for contrast.",
3672
- "fieldName": "color"
3674
+ "default": "\"\"",
3675
+ "description": "The color for the prefix text. Default: `\"\"`.",
3676
+ "fieldName": "prefixColor"
3673
3677
  },
3674
3678
  {
3675
- "name": "url",
3679
+ "name": "suffixColor",
3676
3680
  "type": {
3677
3681
  "text": "string"
3678
3682
  },
3679
3683
  "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
  ]
@@ -6649,799 +6649,455 @@
6649
6649
  "fieldName": "closable"
6650
6650
  },
6651
6651
  {
6652
- "name": "message",
6653
- "type": {
6654
- "text": "string"
6655
- },
6656
- "default": "\"\"",
6657
- "description": "Optional message displayed above body content.",
6658
- "fieldName": "message"
6659
- },
6660
- {
6661
- "name": "overlay",
6662
- "type": {
6663
- "text": "boolean"
6664
- },
6665
- "default": "false",
6666
- "description": "Applies dim/blur backdrop effect.",
6667
- "fieldName": "overlay"
6668
- },
6669
- {
6670
- "name": "width",
6671
- "type": {
6672
- "text": "string"
6673
- },
6674
- "default": "\"auto\"",
6675
- "description": "Max width of the dialog surface.",
6676
- "fieldName": "width"
6677
- },
6678
- {
6679
- "name": "separator",
6680
- "type": {
6681
- "text": "boolean"
6682
- },
6683
- "default": "false",
6684
- "description": "Shows separators around header/footer regions.",
6685
- "fieldName": "separator"
6686
- },
6687
- {
6688
- "name": "persistent",
6689
- "type": {
6690
- "text": "boolean"
6691
- },
6692
- "default": "false",
6693
- "description": "Prevents outside/Escape close and highlights surface instead.",
6694
- "fieldName": "persistent"
6695
- },
6696
- {
6697
- "name": "closeOnEsc",
6698
- "type": {
6699
- "text": "boolean"
6700
- },
6701
- "default": "false",
6702
- "description": "Enables close intent on Escape key.",
6703
- "fieldName": "closeOnEsc"
6704
- },
6705
- {
6706
- "name": "headerPadding",
6707
- "type": {
6708
- "text": "SkyDialogPadding"
6709
- },
6710
- "default": "\"sm\"",
6711
- "description": "Header padding token.",
6712
- "fieldName": "headerPadding"
6713
- },
6714
- {
6715
- "name": "bodyPadding",
6716
- "type": {
6717
- "text": "SkyDialogPadding"
6718
- },
6719
- "default": "\"sm\"",
6720
- "description": "Body padding token.",
6721
- "fieldName": "bodyPadding"
6722
- },
6723
- {
6724
- "name": "footerPadding",
6725
- "type": {
6726
- "text": "SkyDialogPadding"
6727
- },
6728
- "default": "\"sm\"",
6729
- "description": "Footer padding token.",
6730
- "fieldName": "footerPadding"
6731
- },
6732
- {
6733
- "name": "highlightOnOutsideClick",
6734
- "type": {
6735
- "text": "boolean"
6736
- },
6737
- "default": "true",
6738
- "description": "Enables highlight animation on rejected outside click.",
6739
- "fieldName": "highlightOnOutsideClick"
6740
- }
6741
- ],
6742
- "superclass": {
6743
- "name": "LitElement",
6744
- "package": "lit"
6745
- },
6746
- "tagName": "sky-dialog",
6747
- "customElement": true,
6748
- "summary": "Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling."
6749
- }
6750
- ],
6751
- "exports": [
6752
- {
6753
- "kind": "js",
6754
- "name": "SkyDialog",
6755
- "declaration": {
6756
- "name": "SkyDialog",
6757
- "module": "src/sky-dialog/sky-dialog.ts"
6758
- }
6759
- },
6760
- {
6761
- "kind": "custom-element-definition",
6762
- "name": "sky-dialog",
6763
- "declaration": {
6764
- "name": "SkyDialog",
6765
- "module": "src/sky-dialog/sky-dialog.ts"
6766
- }
6767
- }
6768
- ]
6769
- },
6770
- {
6771
- "kind": "javascript-module",
6772
- "path": "src/sky-divider/sky-divider.ts",
6773
- "declarations": [
6774
- {
6775
- "kind": "class",
6776
- "description": "",
6777
- "name": "SkyDivider",
6778
- "cssProperties": [
6779
- {
6780
- "description": "CSS custom property for divider color.",
6781
- "name": "--divider-color"
6782
- },
6783
- {
6784
- "description": "CSS custom property for divider thickness.",
6785
- "name": "--divider-thickness"
6786
- },
6787
- {
6788
- "description": "CSS custom property for divider margin.",
6789
- "name": "--divider-margin"
6790
- },
6791
- {
6792
- "description": "CSS custom property for vertical divider height.",
6793
- "name": "--divider-height"
6794
- }
6795
- ],
6796
- "cssParts": [
6797
- {
6798
- "description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
6799
- "name": "divider"
6800
- }
6801
- ],
6802
- "members": [
6803
- {
6804
- "kind": "field",
6805
- "name": "color",
6806
- "type": {
6807
- "text": "string"
6808
- },
6809
- "default": "\"muted\"",
6810
- "description": "Divider color token or CSS color.",
6811
- "privacy": "public",
6812
- "attribute": "color"
6813
- },
6814
- {
6815
- "kind": "field",
6816
- "name": "thickness",
6817
- "type": {
6818
- "text": "string"
6819
- },
6820
- "default": "\"1px\"",
6821
- "description": "Divider thickness (for example `1px` or `2px`).",
6822
- "privacy": "public",
6823
- "attribute": "thickness"
6824
- },
6825
- {
6826
- "kind": "field",
6827
- "name": "margin",
6652
+ "name": "message",
6828
6653
  "type": {
6829
6654
  "text": "string"
6830
6655
  },
6831
6656
  "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"
6657
+ "description": "Optional message displayed above body content.",
6658
+ "fieldName": "message"
6846
6659
  },
6847
6660
  {
6848
- "kind": "field",
6849
- "name": "inset",
6661
+ "name": "overlay",
6850
6662
  "type": {
6851
6663
  "text": "boolean"
6852
6664
  },
6853
6665
  "default": "false",
6854
- "description": "Enables indented divider layout.",
6855
- "privacy": "public",
6856
- "attribute": "inset"
6666
+ "description": "Applies dim/blur backdrop effect.",
6667
+ "fieldName": "overlay"
6857
6668
  },
6858
6669
  {
6859
- "kind": "field",
6860
- "name": "height",
6670
+ "name": "width",
6861
6671
  "type": {
6862
6672
  "text": "string"
6863
6673
  },
6864
- "default": "\"100%\"",
6865
- "description": "Height used for vertical orientation.",
6866
- "privacy": "public",
6867
- "attribute": "height"
6674
+ "default": "\"auto\"",
6675
+ "description": "Max width of the dialog surface.",
6676
+ "fieldName": "width"
6868
6677
  },
6869
6678
  {
6870
- "kind": "method",
6871
- "name": "getComputedColor",
6872
- "privacy": "public",
6873
- "return": {
6874
- "type": {
6875
- "text": ""
6876
- }
6679
+ "name": "separator",
6680
+ "type": {
6681
+ "text": "boolean"
6877
6682
  },
6878
- "description": "Gets the current computed color of the divider."
6683
+ "default": "false",
6684
+ "description": "Shows separators around header/footer regions.",
6685
+ "fieldName": "separator"
6879
6686
  },
6880
6687
  {
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",
6688
+ "name": "persistent",
6895
6689
  "type": {
6896
- "text": "string"
6690
+ "text": "boolean"
6897
6691
  },
6898
- "default": "\"muted\"",
6899
- "description": "Divider color token or CSS color.",
6900
- "fieldName": "color"
6692
+ "default": "false",
6693
+ "description": "Prevents outside/Escape close and highlights surface instead.",
6694
+ "fieldName": "persistent"
6901
6695
  },
6902
6696
  {
6903
- "name": "thickness",
6697
+ "name": "closeOnEsc",
6904
6698
  "type": {
6905
- "text": "string"
6699
+ "text": "boolean"
6906
6700
  },
6907
- "default": "\"1px\"",
6908
- "description": "Divider thickness (for example `1px` or `2px`).",
6909
- "fieldName": "thickness"
6701
+ "default": "false",
6702
+ "description": "Enables close intent on Escape key.",
6703
+ "fieldName": "closeOnEsc"
6910
6704
  },
6911
6705
  {
6912
- "name": "margin",
6706
+ "name": "headerPadding",
6913
6707
  "type": {
6914
- "text": "string"
6708
+ "text": "SkyDialogPadding"
6915
6709
  },
6916
- "default": "\"\"",
6917
- "description": "Outer margin around the divider.",
6918
- "fieldName": "margin"
6710
+ "default": "\"sm\"",
6711
+ "description": "Header padding token.",
6712
+ "fieldName": "headerPadding"
6919
6713
  },
6920
6714
  {
6921
- "name": "direction",
6715
+ "name": "bodyPadding",
6922
6716
  "type": {
6923
- "text": "SkyDividerDirection"
6717
+ "text": "SkyDialogPadding"
6924
6718
  },
6925
- "default": "\"horizontal\"",
6926
- "description": "Divider orientation.",
6927
- "fieldName": "direction"
6719
+ "default": "\"sm\"",
6720
+ "description": "Body padding token.",
6721
+ "fieldName": "bodyPadding"
6928
6722
  },
6929
6723
  {
6930
- "name": "inset",
6724
+ "name": "footerPadding",
6931
6725
  "type": {
6932
- "text": "boolean"
6726
+ "text": "SkyDialogPadding"
6933
6727
  },
6934
- "default": "false",
6935
- "description": "Enables indented divider layout.",
6936
- "fieldName": "inset"
6728
+ "default": "\"sm\"",
6729
+ "description": "Footer padding token.",
6730
+ "fieldName": "footerPadding"
6937
6731
  },
6938
6732
  {
6939
- "name": "height",
6733
+ "name": "highlightOnOutsideClick",
6940
6734
  "type": {
6941
- "text": "string"
6735
+ "text": "boolean"
6942
6736
  },
6943
- "default": "\"100%\"",
6944
- "description": "Height used for vertical orientation.",
6945
- "fieldName": "height"
6737
+ "default": "true",
6738
+ "description": "Enables highlight animation on rejected outside click.",
6739
+ "fieldName": "highlightOnOutsideClick"
6946
6740
  }
6947
6741
  ],
6948
6742
  "superclass": {
6949
6743
  "name": "LitElement",
6950
6744
  "package": "lit"
6951
6745
  },
6952
- "tagName": "sky-divider",
6746
+ "tagName": "sky-dialog",
6953
6747
  "customElement": true,
6954
- "summary": "Visual separator component for horizontal and vertical layout separation."
6748
+ "summary": "Accessible modal dialog built on native `<dialog>` with controlled open state, slots, and keyboard/backdrop handling."
6955
6749
  }
6956
6750
  ],
6957
6751
  "exports": [
6958
6752
  {
6959
6753
  "kind": "js",
6960
- "name": "SkyDivider",
6754
+ "name": "SkyDialog",
6961
6755
  "declaration": {
6962
- "name": "SkyDivider",
6963
- "module": "src/sky-divider/sky-divider.ts"
6756
+ "name": "SkyDialog",
6757
+ "module": "src/sky-dialog/sky-dialog.ts"
6964
6758
  }
6965
6759
  },
6966
6760
  {
6967
6761
  "kind": "custom-element-definition",
6968
- "name": "sky-divider",
6762
+ "name": "sky-dialog",
6969
6763
  "declaration": {
6970
- "name": "SkyDivider",
6971
- "module": "src/sky-divider/sky-divider.ts"
6764
+ "name": "SkyDialog",
6765
+ "module": "src/sky-dialog/sky-dialog.ts"
6972
6766
  }
6973
6767
  }
6974
6768
  ]
6975
6769
  },
6976
6770
  {
6977
6771
  "kind": "javascript-module",
6978
- "path": "src/sky-flexbox/sky-flexbox.ts",
6772
+ "path": "src/sky-divider/sky-divider.ts",
6979
6773
  "declarations": [
6980
6774
  {
6981
6775
  "kind": "class",
6982
6776
  "description": "",
6983
- "name": "SkyFlexbox",
6984
- "cssParts": [
6985
- {
6986
- "description": "The flex container element.",
6987
- "name": "container"
6988
- }
6989
- ],
6990
- "slots": [
6991
- {
6992
- "description": "Default slot for flex items (`<sky-flexcol>` or plain elements with `span` attributes).",
6993
- "name": ""
6994
- }
6995
- ],
6996
- "members": [
6777
+ "name": "SkyDivider",
6778
+ "cssProperties": [
6997
6779
  {
6998
- "kind": "field",
6999
- "name": "direction",
7000
- "type": {
7001
- "text": "SkyFlexboxDirection"
7002
- },
7003
- "default": "\"row\"",
7004
- "description": "Flex direction.",
7005
- "privacy": "public",
7006
- "attribute": "direction"
6780
+ "description": "CSS custom property for divider color.",
6781
+ "name": "--divider-color"
7007
6782
  },
7008
6783
  {
7009
- "kind": "field",
7010
- "name": "wrap",
7011
- "type": {
7012
- "text": "SkyFlexboxWrap"
7013
- },
7014
- "default": "\"wrap\"",
7015
- "description": "Flex wrap behavior.",
7016
- "privacy": "public",
7017
- "attribute": "wrap"
6784
+ "description": "CSS custom property for divider thickness.",
6785
+ "name": "--divider-thickness"
7018
6786
  },
7019
6787
  {
7020
- "kind": "field",
7021
- "name": "justify",
7022
- "type": {
7023
- "text": "SkyFlexboxJustify"
7024
- },
7025
- "default": "\"flex-start\"",
7026
- "description": "Main-axis alignment.",
7027
- "privacy": "public",
7028
- "attribute": "justify"
6788
+ "description": "CSS custom property for divider margin.",
6789
+ "name": "--divider-margin"
7029
6790
  },
7030
6791
  {
7031
- "kind": "field",
7032
- "name": "align",
7033
- "type": {
7034
- "text": "SkyFlexboxAlign"
7035
- },
7036
- "default": "\"stretch\"",
7037
- "description": "Cross-axis alignment.",
7038
- "privacy": "public",
7039
- "attribute": "align"
7040
- },
6792
+ "description": "CSS custom property for vertical divider height.",
6793
+ "name": "--divider-height"
6794
+ }
6795
+ ],
6796
+ "cssParts": [
7041
6797
  {
7042
- "kind": "field",
7043
- "name": "alignContent",
7044
- "type": {
7045
- "text": "SkyFlexboxAlignContent"
7046
- },
7047
- "default": "\"normal\"",
7048
- "description": "Multi-line cross-axis distribution.",
7049
- "privacy": "public",
7050
- "attribute": "alignContent"
7051
- },
6798
+ "description": "The divider line element (either `<hr>` or `<div>` depending on direction).",
6799
+ "name": "divider"
6800
+ }
6801
+ ],
6802
+ "members": [
7052
6803
  {
7053
6804
  "kind": "field",
7054
- "name": "gap",
6805
+ "name": "color",
7055
6806
  "type": {
7056
6807
  "text": "string"
7057
6808
  },
7058
- "default": "\"16px\"",
7059
- "description": "Shared row/column gap value.",
7060
- "privacy": "public",
7061
- "attribute": "gap"
7062
- },
7063
- {
7064
- "kind": "field",
7065
- "name": "gapX",
7066
- "type": {
7067
- "text": "string | undefined"
7068
- },
7069
- "description": "Horizontal gap override.",
6809
+ "default": "\"muted\"",
6810
+ "description": "Divider color token or CSS color.",
7070
6811
  "privacy": "public",
7071
- "attribute": "gapX"
6812
+ "attribute": "color"
7072
6813
  },
7073
6814
  {
7074
6815
  "kind": "field",
7075
- "name": "gapY",
6816
+ "name": "thickness",
7076
6817
  "type": {
7077
- "text": "string | undefined"
6818
+ "text": "string"
7078
6819
  },
7079
- "description": "Vertical gap override.",
6820
+ "default": "\"1px\"",
6821
+ "description": "Divider thickness (for example `1px` or `2px`).",
7080
6822
  "privacy": "public",
7081
- "attribute": "gapY"
6823
+ "attribute": "thickness"
7082
6824
  },
7083
6825
  {
7084
6826
  "kind": "field",
7085
- "name": "col",
6827
+ "name": "margin",
7086
6828
  "type": {
7087
- "text": "number"
6829
+ "text": "string"
7088
6830
  },
7089
- "default": "12",
7090
- "description": "Total column count used for span calculations.",
6831
+ "default": "\"\"",
6832
+ "description": "Outer margin around the divider.",
7091
6833
  "privacy": "public",
7092
- "attribute": "col"
6834
+ "attribute": "margin"
7093
6835
  },
7094
6836
  {
7095
6837
  "kind": "field",
7096
- "name": "_childMo",
6838
+ "name": "direction",
7097
6839
  "type": {
7098
- "text": "MutationObserver | undefined"
6840
+ "text": "SkyDividerDirection"
7099
6841
  },
7100
- "privacy": "private"
7101
- },
7102
- {
7103
- "kind": "method",
7104
- "name": "syncVars",
7105
- "privacy": "private",
7106
- "description": "Syncs component properties to CSS custom properties."
7107
- },
7108
- {
7109
- "kind": "method",
7110
- "name": "recalculateSpans",
6842
+ "default": "\"horizontal\"",
6843
+ "description": "Divider orientation.",
7111
6844
  "privacy": "public",
7112
- "description": "Forces recalculation of spans for all child elements.\r\nUseful when dynamically adding/removing items."
6845
+ "attribute": "direction"
7113
6846
  },
7114
6847
  {
7115
6848
  "kind": "field",
7116
- "name": "updateSpans",
7117
- "privacy": "private",
7118
- "description": "Reads span attributes off slotted children and maps them to CSS vars:\r\nspan, span-lg, span-md, span-sm, span-xs"
6849
+ "name": "inset",
6850
+ "type": {
6851
+ "text": "boolean"
6852
+ },
6853
+ "default": "false",
6854
+ "description": "Enables indented divider layout.",
6855
+ "privacy": "public",
6856
+ "attribute": "inset"
7119
6857
  },
7120
6858
  {
7121
- "kind": "method",
7122
- "name": "readSpanRaw",
7123
- "privacy": "private",
7124
- "return": {
7125
- "type": {
7126
- "text": "string | null"
7127
- }
6859
+ "kind": "field",
6860
+ "name": "height",
6861
+ "type": {
6862
+ "text": "string"
7128
6863
  },
7129
- "parameters": [
7130
- {
7131
- "name": "el",
7132
- "type": {
7133
- "text": "HTMLElement"
7134
- }
7135
- },
7136
- {
7137
- "name": "attrName",
7138
- "type": {
7139
- "text": "string"
7140
- }
7141
- },
7142
- {
7143
- "name": "propName",
7144
- "type": {
7145
- "text": "string"
7146
- }
7147
- }
7148
- ],
7149
- "description": "Reads a span value from an HTML attribute or element property."
6864
+ "default": "\"100%\"",
6865
+ "description": "Height used for vertical orientation.",
6866
+ "privacy": "public",
6867
+ "attribute": "height"
7150
6868
  },
7151
6869
  {
7152
6870
  "kind": "method",
7153
- "name": "applySpanVar",
7154
- "privacy": "private",
6871
+ "name": "getComputedColor",
6872
+ "privacy": "public",
7155
6873
  "return": {
7156
6874
  "type": {
7157
- "text": "void"
6875
+ "text": ""
7158
6876
  }
7159
6877
  },
7160
- "parameters": [
7161
- {
7162
- "name": "el",
7163
- "type": {
7164
- "text": "HTMLElement"
7165
- }
7166
- },
7167
- {
7168
- "name": "cssVar",
7169
- "type": {
7170
- "text": "string"
7171
- }
7172
- },
7173
- {
7174
- "name": "raw",
7175
- "type": {
7176
- "text": "string | null"
7177
- }
7178
- }
7179
- ],
7180
- "description": "Sets or clears a span CSS variable on a slotted child."
6878
+ "description": "Gets the current computed color of the divider."
7181
6879
  },
7182
6880
  {
7183
6881
  "kind": "method",
7184
- "name": "clampSpan",
7185
- "privacy": "private",
6882
+ "name": "getComputedThickness",
6883
+ "privacy": "public",
7186
6884
  "return": {
7187
6885
  "type": {
7188
6886
  "text": ""
7189
6887
  }
7190
6888
  },
7191
- "parameters": [
7192
- {
7193
- "name": "raw",
7194
- "type": {
7195
- "text": "string | null"
7196
- },
7197
- "description": "Raw span value from attribute"
7198
- }
7199
- ],
7200
- "description": "Clamps span value to valid range (1 to column count)."
7201
- }
7202
- ],
7203
- "events": [
7204
- {
7205
- "type": {
7206
- "text": "Event"
7207
- },
7208
- "description": "Fired when slotted children change.",
7209
- "name": "slotchange"
6889
+ "description": "Gets the current computed thickness of the divider."
7210
6890
  }
7211
6891
  ],
7212
6892
  "attributes": [
7213
6893
  {
7214
- "name": "direction",
7215
- "type": {
7216
- "text": "SkyFlexboxDirection"
7217
- },
7218
- "default": "\"row\"",
7219
- "description": "Flex direction.",
7220
- "fieldName": "direction"
7221
- },
7222
- {
7223
- "name": "wrap",
7224
- "type": {
7225
- "text": "SkyFlexboxWrap"
7226
- },
7227
- "default": "\"wrap\"",
7228
- "description": "Flex wrap behavior.",
7229
- "fieldName": "wrap"
7230
- },
7231
- {
7232
- "name": "justify",
7233
- "type": {
7234
- "text": "SkyFlexboxJustify"
7235
- },
7236
- "default": "\"flex-start\"",
7237
- "description": "Main-axis alignment.",
7238
- "fieldName": "justify"
7239
- },
7240
- {
7241
- "name": "align",
6894
+ "name": "color",
7242
6895
  "type": {
7243
- "text": "SkyFlexboxAlign"
6896
+ "text": "string"
7244
6897
  },
7245
- "default": "\"stretch\"",
7246
- "description": "Cross-axis alignment.",
7247
- "fieldName": "align"
6898
+ "default": "\"muted\"",
6899
+ "description": "Divider color token or CSS color.",
6900
+ "fieldName": "color"
7248
6901
  },
7249
6902
  {
7250
- "name": "alignContent",
6903
+ "name": "thickness",
7251
6904
  "type": {
7252
- "text": "SkyFlexboxAlignContent"
6905
+ "text": "string"
7253
6906
  },
7254
- "default": "\"normal\"",
7255
- "description": "Multi-line cross-axis distribution.",
7256
- "fieldName": "alignContent"
6907
+ "default": "\"1px\"",
6908
+ "description": "Divider thickness (for example `1px` or `2px`).",
6909
+ "fieldName": "thickness"
7257
6910
  },
7258
6911
  {
7259
- "name": "gap",
6912
+ "name": "margin",
7260
6913
  "type": {
7261
6914
  "text": "string"
7262
6915
  },
7263
- "default": "\"16px\"",
7264
- "description": "Shared row/column gap value.",
7265
- "fieldName": "gap"
6916
+ "default": "\"\"",
6917
+ "description": "Outer margin around the divider.",
6918
+ "fieldName": "margin"
7266
6919
  },
7267
6920
  {
7268
- "name": "gapX",
6921
+ "name": "direction",
7269
6922
  "type": {
7270
- "text": "string | undefined"
6923
+ "text": "SkyDividerDirection"
7271
6924
  },
7272
- "description": "Horizontal gap override.",
7273
- "fieldName": "gapX"
6925
+ "default": "\"horizontal\"",
6926
+ "description": "Divider orientation.",
6927
+ "fieldName": "direction"
7274
6928
  },
7275
6929
  {
7276
- "name": "gapY",
6930
+ "name": "inset",
7277
6931
  "type": {
7278
- "text": "string | undefined"
6932
+ "text": "boolean"
7279
6933
  },
7280
- "description": "Vertical gap override.",
7281
- "fieldName": "gapY"
6934
+ "default": "false",
6935
+ "description": "Enables indented divider layout.",
6936
+ "fieldName": "inset"
7282
6937
  },
7283
6938
  {
7284
- "name": "col",
6939
+ "name": "height",
7285
6940
  "type": {
7286
- "text": "number"
6941
+ "text": "string"
7287
6942
  },
7288
- "default": "12",
7289
- "description": "Total column count used for span calculations.",
7290
- "fieldName": "col"
6943
+ "default": "\"100%\"",
6944
+ "description": "Height used for vertical orientation.",
6945
+ "fieldName": "height"
7291
6946
  }
7292
6947
  ],
7293
6948
  "superclass": {
7294
6949
  "name": "LitElement",
7295
6950
  "package": "lit"
7296
6951
  },
7297
- "tagName": "sky-flexbox",
6952
+ "tagName": "sky-divider",
7298
6953
  "customElement": true,
7299
- "summary": "Flexbox container with grid-like span support for slotted children."
6954
+ "summary": "Visual separator component for horizontal and vertical layout separation."
7300
6955
  }
7301
6956
  ],
7302
6957
  "exports": [
7303
6958
  {
7304
6959
  "kind": "js",
7305
- "name": "SkyFlexbox",
6960
+ "name": "SkyDivider",
7306
6961
  "declaration": {
7307
- "name": "SkyFlexbox",
7308
- "module": "src/sky-flexbox/sky-flexbox.ts"
6962
+ "name": "SkyDivider",
6963
+ "module": "src/sky-divider/sky-divider.ts"
7309
6964
  }
7310
6965
  },
7311
6966
  {
7312
6967
  "kind": "custom-element-definition",
7313
- "name": "sky-flexbox",
6968
+ "name": "sky-divider",
7314
6969
  "declaration": {
7315
- "name": "SkyFlexbox",
7316
- "module": "src/sky-flexbox/sky-flexbox.ts"
6970
+ "name": "SkyDivider",
6971
+ "module": "src/sky-divider/sky-divider.ts"
7317
6972
  }
7318
6973
  }
7319
6974
  ]
7320
6975
  },
7321
6976
  {
7322
6977
  "kind": "javascript-module",
7323
- "path": "src/sky-flexcol/sky-flexcol.ts",
6978
+ "path": "src/sky-flexbox/sky-flexbox.ts",
7324
6979
  "declarations": [
7325
6980
  {
7326
6981
  "kind": "class",
7327
6982
  "description": "",
7328
- "name": "SkyFlexcol",
6983
+ "name": "SkyFlexbox",
7329
6984
  "cssParts": [
7330
6985
  {
7331
- "description": "The flex item wrapper.",
7332
- "name": "col"
6986
+ "description": "The flex container element.",
6987
+ "name": "container"
7333
6988
  }
7334
6989
  ],
7335
6990
  "slots": [
7336
6991
  {
7337
- "description": "Default slot for column content.",
6992
+ "description": "Default slot for flex items (`<sky-flexcol>` or plain elements with `span` attributes).",
7338
6993
  "name": ""
7339
6994
  }
7340
6995
  ],
7341
6996
  "members": [
7342
6997
  {
7343
6998
  "kind": "field",
7344
- "name": "span",
6999
+ "name": "direction",
7345
7000
  "type": {
7346
- "text": "number"
7001
+ "text": "SkyFlexboxDirection"
7347
7002
  },
7348
- "default": "1",
7349
- "description": "Base number of columns to span.",
7003
+ "default": "\"row\"",
7004
+ "description": "Flex direction.",
7350
7005
  "privacy": "public",
7351
- "attribute": "span"
7006
+ "attribute": "direction"
7352
7007
  },
7353
7008
  {
7354
7009
  "kind": "field",
7355
- "name": "spanLg",
7010
+ "name": "wrap",
7356
7011
  "type": {
7357
- "text": "number | undefined"
7012
+ "text": "SkyFlexboxWrap"
7358
7013
  },
7359
- "description": "Span at large breakpoints.",
7014
+ "default": "\"wrap\"",
7015
+ "description": "Flex wrap behavior.",
7360
7016
  "privacy": "public",
7361
- "attribute": "spanLg"
7017
+ "attribute": "wrap"
7362
7018
  },
7363
7019
  {
7364
7020
  "kind": "field",
7365
- "name": "spanMd",
7021
+ "name": "justify",
7366
7022
  "type": {
7367
- "text": "number | undefined"
7023
+ "text": "SkyFlexboxJustify"
7368
7024
  },
7369
- "description": "Span at medium breakpoints.",
7025
+ "default": "\"flex-start\"",
7026
+ "description": "Main-axis alignment.",
7370
7027
  "privacy": "public",
7371
- "attribute": "spanMd"
7028
+ "attribute": "justify"
7372
7029
  },
7373
7030
  {
7374
7031
  "kind": "field",
7375
- "name": "spanSm",
7032
+ "name": "align",
7376
7033
  "type": {
7377
- "text": "number | undefined"
7034
+ "text": "SkyFlexboxAlign"
7378
7035
  },
7379
- "description": "Span at small breakpoints.",
7036
+ "default": "\"stretch\"",
7037
+ "description": "Cross-axis alignment.",
7380
7038
  "privacy": "public",
7381
- "attribute": "spanSm"
7039
+ "attribute": "align"
7382
7040
  },
7383
7041
  {
7384
7042
  "kind": "field",
7385
- "name": "spanXs",
7043
+ "name": "alignContent",
7386
7044
  "type": {
7387
- "text": "number | undefined"
7045
+ "text": "SkyFlexboxAlignContent"
7388
7046
  },
7389
- "description": "Span at extra-small breakpoints.",
7047
+ "default": "\"normal\"",
7048
+ "description": "Multi-line cross-axis distribution.",
7390
7049
  "privacy": "public",
7391
- "attribute": "spanXs"
7050
+ "attribute": "alignContent"
7392
7051
  },
7393
7052
  {
7394
7053
  "kind": "field",
7395
- "name": "grow",
7054
+ "name": "gap",
7396
7055
  "type": {
7397
- "text": "number"
7056
+ "text": "string"
7398
7057
  },
7399
- "default": "0",
7400
- "description": "Flex grow factor.",
7058
+ "default": "\"16px\"",
7059
+ "description": "Shared row/column gap value.",
7401
7060
  "privacy": "public",
7402
- "attribute": "grow"
7061
+ "attribute": "gap"
7403
7062
  },
7404
7063
  {
7405
7064
  "kind": "field",
7406
- "name": "shrink",
7065
+ "name": "gapX",
7407
7066
  "type": {
7408
- "text": "number"
7067
+ "text": "string | undefined"
7409
7068
  },
7410
- "default": "0",
7411
- "description": "Flex shrink factor.",
7069
+ "description": "Horizontal gap override.",
7412
7070
  "privacy": "public",
7413
- "attribute": "shrink"
7071
+ "attribute": "gapX"
7414
7072
  },
7415
7073
  {
7416
7074
  "kind": "field",
7417
- "name": "basis",
7075
+ "name": "gapY",
7418
7076
  "type": {
7419
- "text": "string | null"
7077
+ "text": "string | undefined"
7420
7078
  },
7421
- "default": "null",
7422
- "description": "Flex basis override.",
7079
+ "description": "Vertical gap override.",
7423
7080
  "privacy": "public",
7424
- "attribute": "basis"
7081
+ "attribute": "gapY"
7425
7082
  },
7426
7083
  {
7427
7084
  "kind": "field",
7428
- "name": "order",
7085
+ "name": "col",
7429
7086
  "type": {
7430
- "text": "number | undefined"
7087
+ "text": "number"
7431
7088
  },
7432
- "description": "Flex order override.",
7089
+ "default": "12",
7090
+ "description": "Total column count used for span calculations.",
7433
7091
  "privacy": "public",
7434
- "attribute": "order"
7092
+ "attribute": "col"
7435
7093
  },
7436
7094
  {
7437
7095
  "kind": "field",
7438
- "name": "alignSelf",
7096
+ "name": "_childMo",
7439
7097
  "type": {
7440
- "text": "SkyFlexcolAlignSelf | undefined"
7098
+ "text": "MutationObserver | undefined"
7441
7099
  },
7442
- "description": "Cross-axis alignment override.",
7443
- "privacy": "public",
7444
- "attribute": "alignSelf"
7100
+ "privacy": "private"
7445
7101
  },
7446
7102
  {
7447
7103
  "kind": "method",
@@ -7451,25 +7107,51 @@
7451
7107
  },
7452
7108
  {
7453
7109
  "kind": "method",
7454
- "name": "refreshStyles",
7110
+ "name": "recalculateSpans",
7455
7111
  "privacy": "public",
7456
- "description": "Forces resynchronization of CSS custom properties.\r\nUseful when properties are changed programmatically."
7112
+ "description": "Forces recalculation of spans for all child elements.\r\nUseful when dynamically adding/removing items."
7113
+ },
7114
+ {
7115
+ "kind": "field",
7116
+ "name": "updateSpans",
7117
+ "privacy": "private",
7118
+ "description": "Reads span attributes off slotted children and maps them to CSS vars:\r\nspan, span-lg, span-md, span-sm, span-xs"
7457
7119
  },
7458
7120
  {
7459
7121
  "kind": "method",
7460
- "name": "getSpan",
7461
- "privacy": "public",
7122
+ "name": "readSpanRaw",
7123
+ "privacy": "private",
7462
7124
  "return": {
7463
7125
  "type": {
7464
- "text": ""
7126
+ "text": "string | null"
7465
7127
  }
7466
7128
  },
7467
- "description": "Gets the current span value."
7129
+ "parameters": [
7130
+ {
7131
+ "name": "el",
7132
+ "type": {
7133
+ "text": "HTMLElement"
7134
+ }
7135
+ },
7136
+ {
7137
+ "name": "attrName",
7138
+ "type": {
7139
+ "text": "string"
7140
+ }
7141
+ },
7142
+ {
7143
+ "name": "propName",
7144
+ "type": {
7145
+ "text": "string"
7146
+ }
7147
+ }
7148
+ ],
7149
+ "description": "Reads a span value from an HTML attribute or element property."
7468
7150
  },
7469
7151
  {
7470
7152
  "kind": "method",
7471
- "name": "setSpan",
7472
- "privacy": "public",
7153
+ "name": "applySpanVar",
7154
+ "privacy": "private",
7473
7155
  "return": {
7474
7156
  "type": {
7475
7157
  "text": "void"
@@ -7477,126 +7159,161 @@
7477
7159
  },
7478
7160
  "parameters": [
7479
7161
  {
7480
- "name": "value",
7162
+ "name": "el",
7481
7163
  "type": {
7482
- "text": "number"
7164
+ "text": "HTMLElement"
7165
+ }
7166
+ },
7167
+ {
7168
+ "name": "cssVar",
7169
+ "type": {
7170
+ "text": "string"
7171
+ }
7172
+ },
7173
+ {
7174
+ "name": "raw",
7175
+ "type": {
7176
+ "text": "string | null"
7177
+ }
7178
+ }
7179
+ ],
7180
+ "description": "Sets or clears a span CSS variable on a slotted child."
7181
+ },
7182
+ {
7183
+ "kind": "method",
7184
+ "name": "clampSpan",
7185
+ "privacy": "private",
7186
+ "return": {
7187
+ "type": {
7188
+ "text": ""
7189
+ }
7190
+ },
7191
+ "parameters": [
7192
+ {
7193
+ "name": "raw",
7194
+ "type": {
7195
+ "text": "string | null"
7483
7196
  },
7484
- "description": "New span value"
7197
+ "description": "Raw span value from attribute"
7485
7198
  }
7486
7199
  ],
7487
- "description": "Sets the span value and updates styles."
7200
+ "description": "Clamps span value to valid range (1 to column count)."
7488
7201
  }
7489
7202
  ],
7490
- "attributes": [
7203
+ "events": [
7491
7204
  {
7492
- "name": "span",
7493
7205
  "type": {
7494
- "text": "number"
7206
+ "text": "Event"
7495
7207
  },
7496
- "default": "1",
7497
- "description": "Base number of columns to span.",
7498
- "fieldName": "span"
7499
- },
7208
+ "description": "Fired when slotted children change.",
7209
+ "name": "slotchange"
7210
+ }
7211
+ ],
7212
+ "attributes": [
7500
7213
  {
7501
- "name": "spanLg",
7214
+ "name": "direction",
7502
7215
  "type": {
7503
- "text": "number | undefined"
7216
+ "text": "SkyFlexboxDirection"
7504
7217
  },
7505
- "description": "Span at large breakpoints.",
7506
- "fieldName": "spanLg"
7218
+ "default": "\"row\"",
7219
+ "description": "Flex direction.",
7220
+ "fieldName": "direction"
7507
7221
  },
7508
7222
  {
7509
- "name": "spanMd",
7223
+ "name": "wrap",
7510
7224
  "type": {
7511
- "text": "number | undefined"
7225
+ "text": "SkyFlexboxWrap"
7512
7226
  },
7513
- "description": "Span at medium breakpoints.",
7514
- "fieldName": "spanMd"
7227
+ "default": "\"wrap\"",
7228
+ "description": "Flex wrap behavior.",
7229
+ "fieldName": "wrap"
7515
7230
  },
7516
7231
  {
7517
- "name": "spanSm",
7232
+ "name": "justify",
7518
7233
  "type": {
7519
- "text": "number | undefined"
7234
+ "text": "SkyFlexboxJustify"
7520
7235
  },
7521
- "description": "Span at small breakpoints.",
7522
- "fieldName": "spanSm"
7236
+ "default": "\"flex-start\"",
7237
+ "description": "Main-axis alignment.",
7238
+ "fieldName": "justify"
7523
7239
  },
7524
7240
  {
7525
- "name": "spanXs",
7241
+ "name": "align",
7526
7242
  "type": {
7527
- "text": "number | undefined"
7243
+ "text": "SkyFlexboxAlign"
7528
7244
  },
7529
- "description": "Span at extra-small breakpoints.",
7530
- "fieldName": "spanXs"
7245
+ "default": "\"stretch\"",
7246
+ "description": "Cross-axis alignment.",
7247
+ "fieldName": "align"
7531
7248
  },
7532
7249
  {
7533
- "name": "grow",
7250
+ "name": "alignContent",
7534
7251
  "type": {
7535
- "text": "number"
7252
+ "text": "SkyFlexboxAlignContent"
7536
7253
  },
7537
- "default": "0",
7538
- "description": "Flex grow factor.",
7539
- "fieldName": "grow"
7254
+ "default": "\"normal\"",
7255
+ "description": "Multi-line cross-axis distribution.",
7256
+ "fieldName": "alignContent"
7540
7257
  },
7541
7258
  {
7542
- "name": "shrink",
7259
+ "name": "gap",
7543
7260
  "type": {
7544
- "text": "number"
7261
+ "text": "string"
7545
7262
  },
7546
- "default": "0",
7547
- "description": "Flex shrink factor.",
7548
- "fieldName": "shrink"
7263
+ "default": "\"16px\"",
7264
+ "description": "Shared row/column gap value.",
7265
+ "fieldName": "gap"
7549
7266
  },
7550
7267
  {
7551
- "name": "basis",
7268
+ "name": "gapX",
7552
7269
  "type": {
7553
- "text": "string | null"
7270
+ "text": "string | undefined"
7554
7271
  },
7555
- "default": "null",
7556
- "description": "Flex basis override.",
7557
- "fieldName": "basis"
7272
+ "description": "Horizontal gap override.",
7273
+ "fieldName": "gapX"
7558
7274
  },
7559
7275
  {
7560
- "name": "order",
7276
+ "name": "gapY",
7561
7277
  "type": {
7562
- "text": "number | undefined"
7278
+ "text": "string | undefined"
7563
7279
  },
7564
- "description": "Flex order override.",
7565
- "fieldName": "order"
7280
+ "description": "Vertical gap override.",
7281
+ "fieldName": "gapY"
7566
7282
  },
7567
7283
  {
7568
- "name": "alignSelf",
7284
+ "name": "col",
7569
7285
  "type": {
7570
- "text": "SkyFlexcolAlignSelf | undefined"
7286
+ "text": "number"
7571
7287
  },
7572
- "description": "Cross-axis alignment override.",
7573
- "fieldName": "alignSelf"
7288
+ "default": "12",
7289
+ "description": "Total column count used for span calculations.",
7290
+ "fieldName": "col"
7574
7291
  }
7575
7292
  ],
7576
7293
  "superclass": {
7577
7294
  "name": "LitElement",
7578
7295
  "package": "lit"
7579
7296
  },
7580
- "tagName": "sky-flexcol",
7297
+ "tagName": "sky-flexbox",
7581
7298
  "customElement": true,
7582
- "summary": "Flex column item for `sky-flexbox` layouts with responsive span controls."
7299
+ "summary": "Flexbox container with grid-like span support for slotted children."
7583
7300
  }
7584
7301
  ],
7585
7302
  "exports": [
7586
7303
  {
7587
7304
  "kind": "js",
7588
- "name": "SkyFlexcol",
7305
+ "name": "SkyFlexbox",
7589
7306
  "declaration": {
7590
- "name": "SkyFlexcol",
7591
- "module": "src/sky-flexcol/sky-flexcol.ts"
7307
+ "name": "SkyFlexbox",
7308
+ "module": "src/sky-flexbox/sky-flexbox.ts"
7592
7309
  }
7593
7310
  },
7594
7311
  {
7595
7312
  "kind": "custom-element-definition",
7596
- "name": "sky-flexcol",
7313
+ "name": "sky-flexbox",
7597
7314
  "declaration": {
7598
- "name": "SkyFlexcol",
7599
- "module": "src/sky-flexcol/sky-flexcol.ts"
7315
+ "name": "SkyFlexbox",
7316
+ "module": "src/sky-flexbox/sky-flexbox.ts"
7600
7317
  }
7601
7318
  }
7602
7319
  ]
@@ -8128,142 +7845,425 @@
8128
7845
  "fieldName": "liveValidation"
8129
7846
  },
8130
7847
  {
8131
- "name": "showErrors",
7848
+ "name": "showErrors",
7849
+ "type": {
7850
+ "text": "boolean"
7851
+ },
7852
+ "default": "true",
7853
+ "description": "Shows validation errors in child controls when available.",
7854
+ "fieldName": "showErrors"
7855
+ },
7856
+ {
7857
+ "name": "errorBox",
7858
+ "type": {
7859
+ "text": "boolean"
7860
+ },
7861
+ "default": "false",
7862
+ "description": "Shows consolidated validation messages above the form.",
7863
+ "fieldName": "errorBox"
7864
+ },
7865
+ {
7866
+ "name": "errorBoxMessage",
7867
+ "type": {
7868
+ "text": "string"
7869
+ },
7870
+ "default": "\"Fix These Issues Before Submitting\"",
7871
+ "description": "Header message shown in the consolidated error box.",
7872
+ "fieldName": "errorBoxMessage"
7873
+ },
7874
+ {
7875
+ "name": "mode",
7876
+ "type": {
7877
+ "text": "SkyFormMode"
7878
+ },
7879
+ "default": "\"client\"",
7880
+ "description": "Submission mode (`client` or `server`).",
7881
+ "fieldName": "mode"
7882
+ },
7883
+ {
7884
+ "name": "method",
7885
+ "type": {
7886
+ "text": "SkyFormMethod | undefined"
7887
+ },
7888
+ "description": "Native form method in server mode.",
7889
+ "fieldName": "method"
7890
+ },
7891
+ {
7892
+ "name": "action",
7893
+ "type": {
7894
+ "text": "string | undefined"
7895
+ },
7896
+ "description": "Native form action in server mode.",
7897
+ "fieldName": "action"
7898
+ },
7899
+ {
7900
+ "name": "target",
7901
+ "type": {
7902
+ "text": "string | undefined"
7903
+ },
7904
+ "description": "Native form target in server mode.",
7905
+ "fieldName": "target"
7906
+ },
7907
+ {
7908
+ "name": "enctype",
7909
+ "type": {
7910
+ "text": "SkyFormEnctype | undefined"
7911
+ },
7912
+ "description": "Native form encoding type.",
7913
+ "fieldName": "enctype"
7914
+ },
7915
+ {
7916
+ "name": "autocomplete",
7917
+ "type": {
7918
+ "text": "SkyFormAutocomplete | undefined"
7919
+ },
7920
+ "description": "Native form autocomplete behavior.",
7921
+ "fieldName": "autocomplete"
7922
+ },
7923
+ {
7924
+ "name": "noValidate",
7925
+ "type": {
7926
+ "text": "boolean"
7927
+ },
7928
+ "default": "false",
7929
+ "description": "Disables native HTML constraint UI.",
7930
+ "fieldName": "noValidate"
7931
+ },
7932
+ {
7933
+ "name": "enterSubmit",
7934
+ "type": {
7935
+ "text": "boolean"
7936
+ },
7937
+ "default": "false",
7938
+ "description": "Submits on Enter for non-textarea controls.",
7939
+ "fieldName": "enterSubmit"
7940
+ },
7941
+ {
7942
+ "name": "resetOnSubmit",
7943
+ "type": {
7944
+ "text": "boolean"
7945
+ },
7946
+ "default": "false",
7947
+ "description": "Resets form after successful submit.",
7948
+ "fieldName": "resetOnSubmit"
7949
+ },
7950
+ {
7951
+ "name": "csrfToken",
7952
+ "type": {
7953
+ "text": "string | null"
7954
+ },
7955
+ "default": "null",
7956
+ "description": "Optional CSRF token value for app-level submit handling.",
7957
+ "fieldName": "csrfToken"
7958
+ }
7959
+ ],
7960
+ "superclass": {
7961
+ "name": "LitElement",
7962
+ "package": "lit"
7963
+ },
7964
+ "tagName": "sky-form",
7965
+ "customElement": true,
7966
+ "summary": "Form wrapper with unified validation, error aggregation, and client/server submit flows."
7967
+ }
7968
+ ],
7969
+ "exports": [
7970
+ {
7971
+ "kind": "js",
7972
+ "name": "SkyForm",
7973
+ "declaration": {
7974
+ "name": "SkyForm",
7975
+ "module": "src/sky-form/sky-form.ts"
7976
+ }
7977
+ },
7978
+ {
7979
+ "kind": "custom-element-definition",
7980
+ "name": "sky-form",
7981
+ "declaration": {
7982
+ "name": "SkyForm",
7983
+ "module": "src/sky-form/sky-form.ts"
7984
+ }
7985
+ }
7986
+ ]
7987
+ },
7988
+ {
7989
+ "kind": "javascript-module",
7990
+ "path": "src/sky-flexcol/sky-flexcol.ts",
7991
+ "declarations": [
7992
+ {
7993
+ "kind": "class",
7994
+ "description": "",
7995
+ "name": "SkyFlexcol",
7996
+ "cssParts": [
7997
+ {
7998
+ "description": "The flex item wrapper.",
7999
+ "name": "col"
8000
+ }
8001
+ ],
8002
+ "slots": [
8003
+ {
8004
+ "description": "Default slot for column content.",
8005
+ "name": ""
8006
+ }
8007
+ ],
8008
+ "members": [
8009
+ {
8010
+ "kind": "field",
8011
+ "name": "span",
8012
+ "type": {
8013
+ "text": "number"
8014
+ },
8015
+ "default": "1",
8016
+ "description": "Base number of columns to span.",
8017
+ "privacy": "public",
8018
+ "attribute": "span"
8019
+ },
8020
+ {
8021
+ "kind": "field",
8022
+ "name": "spanLg",
8023
+ "type": {
8024
+ "text": "number | undefined"
8025
+ },
8026
+ "description": "Span at large breakpoints.",
8027
+ "privacy": "public",
8028
+ "attribute": "spanLg"
8029
+ },
8030
+ {
8031
+ "kind": "field",
8032
+ "name": "spanMd",
8033
+ "type": {
8034
+ "text": "number | undefined"
8035
+ },
8036
+ "description": "Span at medium breakpoints.",
8037
+ "privacy": "public",
8038
+ "attribute": "spanMd"
8039
+ },
8040
+ {
8041
+ "kind": "field",
8042
+ "name": "spanSm",
8043
+ "type": {
8044
+ "text": "number | undefined"
8045
+ },
8046
+ "description": "Span at small breakpoints.",
8047
+ "privacy": "public",
8048
+ "attribute": "spanSm"
8049
+ },
8050
+ {
8051
+ "kind": "field",
8052
+ "name": "spanXs",
8053
+ "type": {
8054
+ "text": "number | undefined"
8055
+ },
8056
+ "description": "Span at extra-small breakpoints.",
8057
+ "privacy": "public",
8058
+ "attribute": "spanXs"
8059
+ },
8060
+ {
8061
+ "kind": "field",
8062
+ "name": "grow",
8063
+ "type": {
8064
+ "text": "number"
8065
+ },
8066
+ "default": "0",
8067
+ "description": "Flex grow factor.",
8068
+ "privacy": "public",
8069
+ "attribute": "grow"
8070
+ },
8071
+ {
8072
+ "kind": "field",
8073
+ "name": "shrink",
8074
+ "type": {
8075
+ "text": "number"
8076
+ },
8077
+ "default": "0",
8078
+ "description": "Flex shrink factor.",
8079
+ "privacy": "public",
8080
+ "attribute": "shrink"
8081
+ },
8082
+ {
8083
+ "kind": "field",
8084
+ "name": "basis",
8085
+ "type": {
8086
+ "text": "string | null"
8087
+ },
8088
+ "default": "null",
8089
+ "description": "Flex basis override.",
8090
+ "privacy": "public",
8091
+ "attribute": "basis"
8092
+ },
8093
+ {
8094
+ "kind": "field",
8095
+ "name": "order",
8096
+ "type": {
8097
+ "text": "number | undefined"
8098
+ },
8099
+ "description": "Flex order override.",
8100
+ "privacy": "public",
8101
+ "attribute": "order"
8102
+ },
8103
+ {
8104
+ "kind": "field",
8105
+ "name": "alignSelf",
8132
8106
  "type": {
8133
- "text": "boolean"
8107
+ "text": "SkyFlexcolAlignSelf | undefined"
8134
8108
  },
8135
- "default": "true",
8136
- "description": "Shows validation errors in child controls when available.",
8137
- "fieldName": "showErrors"
8109
+ "description": "Cross-axis alignment override.",
8110
+ "privacy": "public",
8111
+ "attribute": "alignSelf"
8138
8112
  },
8139
8113
  {
8140
- "name": "errorBox",
8141
- "type": {
8142
- "text": "boolean"
8143
- },
8144
- "default": "false",
8145
- "description": "Shows consolidated validation messages above the form.",
8146
- "fieldName": "errorBox"
8114
+ "kind": "method",
8115
+ "name": "syncVars",
8116
+ "privacy": "private",
8117
+ "description": "Syncs component properties to CSS custom properties."
8147
8118
  },
8148
8119
  {
8149
- "name": "errorBoxMessage",
8150
- "type": {
8151
- "text": "string"
8120
+ "kind": "method",
8121
+ "name": "refreshStyles",
8122
+ "privacy": "public",
8123
+ "description": "Forces resynchronization of CSS custom properties.\r\nUseful when properties are changed programmatically."
8124
+ },
8125
+ {
8126
+ "kind": "method",
8127
+ "name": "getSpan",
8128
+ "privacy": "public",
8129
+ "return": {
8130
+ "type": {
8131
+ "text": ""
8132
+ }
8152
8133
  },
8153
- "default": "\"Fix These Issues Before Submitting\"",
8154
- "description": "Header message shown in the consolidated error box.",
8155
- "fieldName": "errorBoxMessage"
8134
+ "description": "Gets the current span value."
8156
8135
  },
8157
8136
  {
8158
- "name": "mode",
8137
+ "kind": "method",
8138
+ "name": "setSpan",
8139
+ "privacy": "public",
8140
+ "return": {
8141
+ "type": {
8142
+ "text": "void"
8143
+ }
8144
+ },
8145
+ "parameters": [
8146
+ {
8147
+ "name": "value",
8148
+ "type": {
8149
+ "text": "number"
8150
+ },
8151
+ "description": "New span value"
8152
+ }
8153
+ ],
8154
+ "description": "Sets the span value and updates styles."
8155
+ }
8156
+ ],
8157
+ "attributes": [
8158
+ {
8159
+ "name": "span",
8159
8160
  "type": {
8160
- "text": "SkyFormMode"
8161
+ "text": "number"
8161
8162
  },
8162
- "default": "\"client\"",
8163
- "description": "Submission mode (`client` or `server`).",
8164
- "fieldName": "mode"
8163
+ "default": "1",
8164
+ "description": "Base number of columns to span.",
8165
+ "fieldName": "span"
8165
8166
  },
8166
8167
  {
8167
- "name": "method",
8168
+ "name": "spanLg",
8168
8169
  "type": {
8169
- "text": "SkyFormMethod | undefined"
8170
+ "text": "number | undefined"
8170
8171
  },
8171
- "description": "Native form method in server mode.",
8172
- "fieldName": "method"
8172
+ "description": "Span at large breakpoints.",
8173
+ "fieldName": "spanLg"
8173
8174
  },
8174
8175
  {
8175
- "name": "action",
8176
+ "name": "spanMd",
8176
8177
  "type": {
8177
- "text": "string | undefined"
8178
+ "text": "number | undefined"
8178
8179
  },
8179
- "description": "Native form action in server mode.",
8180
- "fieldName": "action"
8180
+ "description": "Span at medium breakpoints.",
8181
+ "fieldName": "spanMd"
8181
8182
  },
8182
8183
  {
8183
- "name": "target",
8184
+ "name": "spanSm",
8184
8185
  "type": {
8185
- "text": "string | undefined"
8186
+ "text": "number | undefined"
8186
8187
  },
8187
- "description": "Native form target in server mode.",
8188
- "fieldName": "target"
8188
+ "description": "Span at small breakpoints.",
8189
+ "fieldName": "spanSm"
8189
8190
  },
8190
8191
  {
8191
- "name": "enctype",
8192
+ "name": "spanXs",
8192
8193
  "type": {
8193
- "text": "SkyFormEnctype | undefined"
8194
+ "text": "number | undefined"
8194
8195
  },
8195
- "description": "Native form encoding type.",
8196
- "fieldName": "enctype"
8196
+ "description": "Span at extra-small breakpoints.",
8197
+ "fieldName": "spanXs"
8197
8198
  },
8198
8199
  {
8199
- "name": "autocomplete",
8200
+ "name": "grow",
8200
8201
  "type": {
8201
- "text": "SkyFormAutocomplete | undefined"
8202
+ "text": "number"
8202
8203
  },
8203
- "description": "Native form autocomplete behavior.",
8204
- "fieldName": "autocomplete"
8204
+ "default": "0",
8205
+ "description": "Flex grow factor.",
8206
+ "fieldName": "grow"
8205
8207
  },
8206
8208
  {
8207
- "name": "noValidate",
8209
+ "name": "shrink",
8208
8210
  "type": {
8209
- "text": "boolean"
8211
+ "text": "number"
8210
8212
  },
8211
- "default": "false",
8212
- "description": "Disables native HTML constraint UI.",
8213
- "fieldName": "noValidate"
8213
+ "default": "0",
8214
+ "description": "Flex shrink factor.",
8215
+ "fieldName": "shrink"
8214
8216
  },
8215
8217
  {
8216
- "name": "enterSubmit",
8218
+ "name": "basis",
8217
8219
  "type": {
8218
- "text": "boolean"
8220
+ "text": "string | null"
8219
8221
  },
8220
- "default": "false",
8221
- "description": "Submits on Enter for non-textarea controls.",
8222
- "fieldName": "enterSubmit"
8222
+ "default": "null",
8223
+ "description": "Flex basis override.",
8224
+ "fieldName": "basis"
8223
8225
  },
8224
8226
  {
8225
- "name": "resetOnSubmit",
8227
+ "name": "order",
8226
8228
  "type": {
8227
- "text": "boolean"
8229
+ "text": "number | undefined"
8228
8230
  },
8229
- "default": "false",
8230
- "description": "Resets form after successful submit.",
8231
- "fieldName": "resetOnSubmit"
8231
+ "description": "Flex order override.",
8232
+ "fieldName": "order"
8232
8233
  },
8233
8234
  {
8234
- "name": "csrfToken",
8235
+ "name": "alignSelf",
8235
8236
  "type": {
8236
- "text": "string | null"
8237
+ "text": "SkyFlexcolAlignSelf | undefined"
8237
8238
  },
8238
- "default": "null",
8239
- "description": "Optional CSRF token value for app-level submit handling.",
8240
- "fieldName": "csrfToken"
8239
+ "description": "Cross-axis alignment override.",
8240
+ "fieldName": "alignSelf"
8241
8241
  }
8242
8242
  ],
8243
8243
  "superclass": {
8244
8244
  "name": "LitElement",
8245
8245
  "package": "lit"
8246
8246
  },
8247
- "tagName": "sky-form",
8247
+ "tagName": "sky-flexcol",
8248
8248
  "customElement": true,
8249
- "summary": "Form wrapper with unified validation, error aggregation, and client/server submit flows."
8249
+ "summary": "Flex column item for `sky-flexbox` layouts with responsive span controls."
8250
8250
  }
8251
8251
  ],
8252
8252
  "exports": [
8253
8253
  {
8254
8254
  "kind": "js",
8255
- "name": "SkyForm",
8255
+ "name": "SkyFlexcol",
8256
8256
  "declaration": {
8257
- "name": "SkyForm",
8258
- "module": "src/sky-form/sky-form.ts"
8257
+ "name": "SkyFlexcol",
8258
+ "module": "src/sky-flexcol/sky-flexcol.ts"
8259
8259
  }
8260
8260
  },
8261
8261
  {
8262
8262
  "kind": "custom-element-definition",
8263
- "name": "sky-form",
8263
+ "name": "sky-flexcol",
8264
8264
  "declaration": {
8265
- "name": "SkyForm",
8266
- "module": "src/sky-form/sky-form.ts"
8265
+ "name": "SkyFlexcol",
8266
+ "module": "src/sky-flexcol/sky-flexcol.ts"
8267
8267
  }
8268
8268
  }
8269
8269
  ]
@@ -12122,49 +12122,6 @@
12122
12122
  }
12123
12123
  ]
12124
12124
  },
12125
- {
12126
- "kind": "javascript-module",
12127
- "path": "src/sky-row/sky-row.ts",
12128
- "declarations": [
12129
- {
12130
- "kind": "class",
12131
- "description": "",
12132
- "name": "SkyRow",
12133
- "slots": [
12134
- {
12135
- "description": "Default slot for child content.",
12136
- "name": ""
12137
- }
12138
- ],
12139
- "members": [],
12140
- "superclass": {
12141
- "name": "LitElement",
12142
- "package": "lit"
12143
- },
12144
- "tagName": "sky-row",
12145
- "customElement": true,
12146
- "summary": "Lightweight semantic row wrapper for use inside `sky-grid`."
12147
- }
12148
- ],
12149
- "exports": [
12150
- {
12151
- "kind": "js",
12152
- "name": "SkyRow",
12153
- "declaration": {
12154
- "name": "SkyRow",
12155
- "module": "src/sky-row/sky-row.ts"
12156
- }
12157
- },
12158
- {
12159
- "kind": "custom-element-definition",
12160
- "name": "sky-row",
12161
- "declaration": {
12162
- "name": "SkyRow",
12163
- "module": "src/sky-row/sky-row.ts"
12164
- }
12165
- }
12166
- ]
12167
- },
12168
12125
  {
12169
12126
  "kind": "javascript-module",
12170
12127
  "path": "src/sky-sheet/sky-sheet.ts",
@@ -12347,6 +12304,49 @@
12347
12304
  }
12348
12305
  ]
12349
12306
  },
12307
+ {
12308
+ "kind": "javascript-module",
12309
+ "path": "src/sky-row/sky-row.ts",
12310
+ "declarations": [
12311
+ {
12312
+ "kind": "class",
12313
+ "description": "",
12314
+ "name": "SkyRow",
12315
+ "slots": [
12316
+ {
12317
+ "description": "Default slot for child content.",
12318
+ "name": ""
12319
+ }
12320
+ ],
12321
+ "members": [],
12322
+ "superclass": {
12323
+ "name": "LitElement",
12324
+ "package": "lit"
12325
+ },
12326
+ "tagName": "sky-row",
12327
+ "customElement": true,
12328
+ "summary": "Lightweight semantic row wrapper for use inside `sky-grid`."
12329
+ }
12330
+ ],
12331
+ "exports": [
12332
+ {
12333
+ "kind": "js",
12334
+ "name": "SkyRow",
12335
+ "declaration": {
12336
+ "name": "SkyRow",
12337
+ "module": "src/sky-row/sky-row.ts"
12338
+ }
12339
+ },
12340
+ {
12341
+ "kind": "custom-element-definition",
12342
+ "name": "sky-row",
12343
+ "declaration": {
12344
+ "name": "SkyRow",
12345
+ "module": "src/sky-row/sky-row.ts"
12346
+ }
12347
+ }
12348
+ ]
12349
+ },
12350
12350
  {
12351
12351
  "kind": "javascript-module",
12352
12352
  "path": "src/sky-simple-table/sky-simple-table.ts",