tuix-webcomponents 0.0.26 → 0.0.28

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 (7) hide show
  1. package/README.md +27 -12
  2. package/custom-elements.json +964 -964
  3. package/dist/assets/tuix-styles.css +9 -3
  4. package/dist/src/tuix-toast/enums/tuix-toast.enums.js +4 -4
  5. package/dist/src/utils/darkColors.d.ts +8 -4
  6. package/dist/src/utils/darkColors.js +7 -3
  7. package/package.json +2 -3
package/custom-elements.json CHANGED
@@ -427,270 +427,95 @@
427
427
  },
428
428
  {
429
429
  "kind": "javascript-module",
430
- "path": "src/tuix-button/TuixBaseButton.ts",
431
- "declarations": [
432
- {
433
- "kind": "class",
434
- "description": "",
435
- "name": "TuixBaseButton",
436
- "members": [
437
- {
438
- "kind": "field",
439
- "name": "variant",
440
- "attribute": "variant",
441
- "reflects": true
442
- },
443
- {
444
- "kind": "field",
445
- "name": "disabled",
446
- "type": {
447
- "text": "boolean"
448
- },
449
- "default": "false",
450
- "attribute": "disabled",
451
- "reflects": true
452
- },
453
- {
454
- "kind": "field",
455
- "name": "dark",
456
- "type": {
457
- "text": "boolean"
458
- },
459
- "default": "false",
460
- "attribute": "dark",
461
- "reflects": true
462
- },
463
- {
464
- "kind": "field",
465
- "name": "iconColor",
466
- "type": {
467
- "text": "string"
468
- },
469
- "privacy": "protected",
470
- "default": "''"
471
- },
472
- {
473
- "kind": "method",
474
- "name": "_getTextColor",
475
- "privacy": "protected"
476
- },
477
- {
478
- "kind": "method",
479
- "name": "_updateIconColor",
480
- "privacy": "protected",
481
- "return": {
482
- "type": {
483
- "text": "void"
484
- }
485
- }
486
- },
487
- {
488
- "kind": "method",
489
- "name": "_handleClick",
490
- "privacy": "protected"
491
- },
492
- {
493
- "kind": "method",
494
- "name": "_iconTemplate",
495
- "privacy": "protected",
496
- "return": {
497
- "type": {
498
- "text": "TemplateResult"
499
- }
500
- },
501
- "parameters": [
502
- {
503
- "name": "iconName",
504
- "type": {
505
- "text": "IconName"
506
- }
507
- },
508
- {
509
- "name": "iconSize",
510
- "type": {
511
- "text": "IconSizeVariant"
512
- }
513
- }
514
- ]
515
- },
516
- {
517
- "kind": "method",
518
- "name": "_buttonContent",
519
- "privacy": "protected",
520
- "return": {
521
- "type": {
522
- "text": "TemplateResult"
523
- }
524
- }
525
- }
526
- ],
527
- "events": [
528
- {
529
- "name": "customClick",
530
- "type": {
531
- "text": "CustomEvent"
532
- }
533
- }
534
- ],
535
- "attributes": [
536
- {
537
- "name": "variant",
538
- "fieldName": "variant"
539
- },
540
- {
541
- "name": "disabled",
542
- "type": {
543
- "text": "boolean"
544
- },
545
- "default": "false",
546
- "fieldName": "disabled"
547
- },
548
- {
549
- "name": "dark",
550
- "type": {
551
- "text": "boolean"
552
- },
553
- "default": "false",
554
- "fieldName": "dark"
555
- }
556
- ],
557
- "superclass": {
558
- "name": "LitElement",
559
- "package": "lit"
560
- },
561
- "customElement": true
562
- }
563
- ],
564
- "exports": [
565
- {
566
- "kind": "js",
567
- "name": "TuixBaseButton",
568
- "declaration": {
569
- "name": "TuixBaseButton",
570
- "module": "src/tuix-button/TuixBaseButton.ts"
571
- }
572
- }
573
- ]
574
- },
575
- {
576
- "kind": "javascript-module",
577
- "path": "src/tuix-button/TuixButton.styles.ts",
430
+ "path": "src/tuix-dropdown/TuixDropdown.styles.ts",
578
431
  "declarations": [
579
432
  {
580
433
  "kind": "variable",
581
- "name": "hostButtonStyles",
582
- "default": "css`\n :host {\n --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};\n --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};\n --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};\n --t-button-text-color: ${unsafeCSS(Palette.WHITE)};\n --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};\n --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};\n --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};\n --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};\n }\n :host([dark]) {\n --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};\n --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};\n --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};\n --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};\n --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};\n --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};\n --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};\n --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n }\n`"
434
+ "name": "dropdownHostStyles",
435
+ "default": "css`\n ${hostStyles}\n :host {\n --t-field-color-option: ${unsafeCSS(Palette.WHITE)};\n --t-field-color-main: ${unsafeCSS(Palette.MAIN)};\n }\n\n :host .t-input-dropdown {\n --t-field-font-weight: 300;\n --t-field-font-size: 1rem;\n --t-field-padding-x: 1rem;\n --t-field-title-left-position: 1rem;\n }\n\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n :host .t-input-dropdown {\n --t-field-font-size: 0.938rem;\n --t-field-line-height: 1.125rem;\n }\n }\n\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n :host .t-input-dropdown {\n --t-field-font-size: 0.813rem;\n --t-field-line-height: 1rem;\n }\n }\n\n :host([dark]) {\n --t-field-color-option: ${unsafeCSS(DarkPalette.ELEVATION_2)};\n }\n`"
583
436
  },
584
437
  {
585
438
  "kind": "variable",
586
- "name": "buttonSizeStyles",
587
- "default": "css`\n ${unsafeCSS(`\n ${slottedClassName(TextSize.Button)} {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n ${slottedClassName(TextSize.Button)} {\n font-size: 0.938rem;\n font-weight: 400;\n line-height: 1.125rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n ${slottedClassName(TextSize.Button)} {\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1rem;\n }\n }\n`)}\n`"
439
+ "name": "dropdownMainContainerStyles",
440
+ "default": "css`\n .t-dropdown-full-container {\n position: relative;\n font-family: 'Rubik', sans-serif;\n }\n .t-dropdown-container .t-input-dropdown {\n --t-field-input-cursor: pointer;\n }\n`"
588
441
  },
589
442
  {
590
443
  "kind": "variable",
591
- "name": "buttonColorStyles",
592
- "default": "css`\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {\n background-color: var(--t-button-primary-color);\n outline: none;\n color: var(--t-button-text-color);\n }\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {\n background-color: var(--t-button-hover-primary-color);\n cursor: pointer;\n }\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {\n background-color: var(--t-button-hover-primary-color);\n outline: 2px solid var(--t-button-accent-color);\n }\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {\n background-color: var(--t-button-active-primary-color);\n outline: none;\n }\n\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {\n background-color: var(--t-button-secondary-color);\n outline: 1px solid var(--t-button-hover-primary-color);\n color: var(--t-button-text-secondary-color);\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {\n background-color: var(--t-button-hover-secondary-color);\n outline: 1px solid var(--t-button-primary-color);\n color: var(--t-button-primary-color);\n cursor: pointer;\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {\n background-color: var(--t-button-hover-secondary-color);\n outline: 2px solid var(--t-button-accent-color);\n color: var(--t-button-primary-color);\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {\n background-color: var(--t-button-active-secondary-color);\n outline: 1px solid var(--t-button-primary-color);\n color: var(--t-button-primary-color);\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {\n outline: 1px solid var(--t-button-text-muted-color);\n }\n\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {\n background-color: var(--t-button-disabled-bg-color);\n color: var(--t-button-text-muted-color);\n cursor: not-allowed;\n }\n`"
444
+ "name": "dropdownOptionStyles",
445
+ "default": "css`\n .t-options-container {\n width: 100%;\n position: absolute;\n top: calc(100% + 2px);\n left: 0;\n border: none;\n border-radius: 0 0 5px 5px;\n background-color: var(--t-field-color-option);\n visibility: collapse;\n overflow-y: auto;\n max-height: 250px;\n color: var(--t-field-color-text);\n box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};\n z-index: 9999;\n }\n .t-options-container::-webkit-scrollbar {\n width: 0.75rem;\n }\n .t-options-container::-webkit-scrollbar-track {\n background-color: transparent;\n }\n .t-options-container::-webkit-scrollbar-thumb {\n background-color: ${unsafeCSS(Palette.PRIMARY_100)};\n border-radius: 0.25rem;\n border: 0.188rem solid transparent;\n background-clip: content-box;\n }\n .t-options-container.show {\n visibility: visible;\n }\n .t-options-container.show.t-with-description {\n top: calc(100% + 2px - 1.5rem);\n }\n @media only screen and (max-height: 500px) {\n .t-options-container {\n max-height: 50vh;\n }\n }\n .t-dropdown-option {\n padding: var(--t-field-padding-y) 1rem;\n cursor: pointer;\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 300;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n .t-dropdown-option.t-option-hover {\n background-color: var(--t-field-color-form);\n }\n .t-dropdown-option.t-option-selected {\n color: var(--t-field-color-main);\n }\n .t-dropdown-option.t-option-filtered {\n display: none;\n }\n .t-dropdown-option:focus {\n outline: none;\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n .t-dropdown-option {\n font-size: 0.938rem;\n line-height: 1.125rem;\n --t-field-padding-y: 1.063rem;\n --t-field-padding-top: 1.5rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-dropdown-option {\n font-size: 0.813rem;\n line-height: 1rem;\n --t-field-padding-y: 1rem;\n --t-field-padding-top: 1.375rem;\n }\n }\n`"
593
446
  }
594
447
  ],
595
448
  "exports": [
596
449
  {
597
450
  "kind": "js",
598
- "name": "hostButtonStyles",
451
+ "name": "dropdownHostStyles",
599
452
  "declaration": {
600
- "name": "hostButtonStyles",
601
- "module": "src/tuix-button/TuixButton.styles.ts"
453
+ "name": "dropdownHostStyles",
454
+ "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
602
455
  }
603
456
  },
604
457
  {
605
458
  "kind": "js",
606
- "name": "buttonSizeStyles",
459
+ "name": "dropdownMainContainerStyles",
607
460
  "declaration": {
608
- "name": "buttonSizeStyles",
609
- "module": "src/tuix-button/TuixButton.styles.ts"
461
+ "name": "dropdownMainContainerStyles",
462
+ "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
610
463
  }
611
464
  },
612
465
  {
613
466
  "kind": "js",
614
- "name": "buttonColorStyles",
467
+ "name": "dropdownOptionStyles",
615
468
  "declaration": {
616
- "name": "buttonColorStyles",
617
- "module": "src/tuix-button/TuixButton.styles.ts"
469
+ "name": "dropdownOptionStyles",
470
+ "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
618
471
  }
619
472
  }
620
473
  ]
621
474
  },
622
475
  {
623
476
  "kind": "javascript-module",
624
- "path": "src/tuix-button/TuixButton.ts",
477
+ "path": "src/tuix-dropdown/TuixDropdown.ts",
625
478
  "declarations": [
626
479
  {
627
480
  "kind": "class",
628
481
  "description": "",
629
- "name": "TuixButton",
482
+ "name": "TuixDropdown",
630
483
  "members": [
631
484
  {
632
485
  "kind": "field",
633
- "name": "full",
486
+ "name": "value",
634
487
  "type": {
635
- "text": "boolean"
488
+ "text": "TuixDropdownOption | undefined"
636
489
  },
637
- "default": "false",
638
- "attribute": "full",
639
- "reflects": true
490
+ "default": "undefined",
491
+ "attribute": "value"
640
492
  },
641
493
  {
642
494
  "kind": "field",
643
- "name": "iconRight",
495
+ "name": "options",
644
496
  "type": {
645
- "text": "IconName | undefined"
497
+ "text": "TuixDropdownOption[]"
646
498
  },
647
- "attribute": "iconRight"
499
+ "default": "[]",
500
+ "attribute": "options"
648
501
  },
649
502
  {
650
503
  "kind": "field",
651
- "name": "iconLeft",
504
+ "name": "placeholder",
652
505
  "type": {
653
- "text": "IconName | undefined"
654
- },
655
- "attribute": "iconLeft"
656
- },
657
- {
658
- "kind": "method",
659
- "name": "_updateIconColor",
660
- "privacy": "protected",
661
- "return": {
662
- "type": {
663
- "text": "void"
664
- }
665
- },
666
- "inheritedFrom": {
667
- "name": "TuixBaseButton",
668
- "module": "src/tuix-button/TuixBaseButton.ts"
669
- }
670
- },
671
- {
672
- "kind": "method",
673
- "name": "_buttonContent",
674
- "privacy": "protected",
675
- "return": {
676
- "type": {
677
- "text": "TemplateResult"
678
- }
506
+ "text": "string"
679
507
  },
680
- "inheritedFrom": {
681
- "name": "TuixBaseButton",
682
- "module": "src/tuix-button/TuixBaseButton.ts"
683
- }
508
+ "default": "''",
509
+ "attribute": "placeholder"
684
510
  },
685
511
  {
686
512
  "kind": "field",
687
- "name": "variant",
688
- "attribute": "variant",
689
- "reflects": true,
690
- "inheritedFrom": {
691
- "name": "TuixBaseButton",
692
- "module": "src/tuix-button/TuixBaseButton.ts"
693
- }
513
+ "name": "title",
514
+ "type": {
515
+ "text": "string"
516
+ },
517
+ "default": "''",
518
+ "attribute": "title"
694
519
  },
695
520
  {
696
521
  "kind": "field",
@@ -700,11 +525,7 @@
700
525
  },
701
526
  "default": "false",
702
527
  "attribute": "disabled",
703
- "reflects": true,
704
- "inheritedFrom": {
705
- "name": "TuixBaseButton",
706
- "module": "src/tuix-button/TuixBaseButton.ts"
707
- }
528
+ "reflects": true
708
529
  },
709
530
  {
710
531
  "kind": "field",
@@ -714,324 +535,372 @@
714
535
  },
715
536
  "default": "false",
716
537
  "attribute": "dark",
717
- "reflects": true,
718
- "inheritedFrom": {
719
- "name": "TuixBaseButton",
720
- "module": "src/tuix-button/TuixBaseButton.ts"
721
- }
538
+ "reflects": true
722
539
  },
723
540
  {
724
541
  "kind": "field",
725
- "name": "iconColor",
542
+ "name": "description",
726
543
  "type": {
727
- "text": "string"
544
+ "text": "string | undefined"
728
545
  },
729
- "privacy": "protected",
730
- "default": "''",
731
- "inheritedFrom": {
732
- "name": "TuixBaseButton",
733
- "module": "src/tuix-button/TuixBaseButton.ts"
734
- }
546
+ "attribute": "description"
735
547
  },
736
548
  {
737
- "kind": "method",
738
- "name": "_getTextColor",
739
- "privacy": "protected",
740
- "inheritedFrom": {
741
- "name": "TuixBaseButton",
742
- "module": "src/tuix-button/TuixBaseButton.ts"
743
- }
549
+ "kind": "field",
550
+ "name": "descriptionType",
551
+ "attribute": "descriptionType"
744
552
  },
745
553
  {
746
- "kind": "method",
747
- "name": "_handleClick",
748
- "privacy": "protected",
749
- "inheritedFrom": {
750
- "name": "TuixBaseButton",
751
- "module": "src/tuix-button/TuixBaseButton.ts"
752
- }
554
+ "kind": "field",
555
+ "name": "type",
556
+ "attribute": "type"
753
557
  },
754
558
  {
755
- "kind": "method",
756
- "name": "_iconTemplate",
757
- "privacy": "protected",
758
- "return": {
759
- "type": {
760
- "text": "TemplateResult"
761
- }
559
+ "kind": "field",
560
+ "name": "_value",
561
+ "type": {
562
+ "text": "string"
762
563
  },
763
- "parameters": [
764
- {
765
- "name": "iconName",
766
- "type": {
767
- "text": "IconName"
768
- }
769
- },
770
- {
771
- "name": "iconSize",
772
- "type": {
773
- "text": "IconSizeVariant"
774
- }
775
- }
776
- ],
777
- "inheritedFrom": {
778
- "name": "TuixBaseButton",
779
- "module": "src/tuix-button/TuixBaseButton.ts"
780
- }
781
- }
782
- ],
783
- "attributes": [
564
+ "privacy": "private",
565
+ "default": "''"
566
+ },
784
567
  {
785
- "name": "full",
568
+ "kind": "field",
569
+ "name": "_isOptionsVisible",
786
570
  "type": {
787
571
  "text": "boolean"
788
572
  },
789
- "default": "false",
790
- "fieldName": "full"
573
+ "privacy": "private",
574
+ "default": "false"
791
575
  },
792
576
  {
793
- "name": "iconRight",
577
+ "kind": "field",
578
+ "name": "_searchingOption",
794
579
  "type": {
795
- "text": "IconName | undefined"
580
+ "text": "boolean"
796
581
  },
797
- "fieldName": "iconRight"
582
+ "privacy": "private",
583
+ "default": "false"
798
584
  },
799
585
  {
800
- "name": "iconLeft",
586
+ "kind": "field",
587
+ "name": "_extendedOptions",
801
588
  "type": {
802
- "text": "IconName | undefined"
589
+ "text": "TuixDropdownExtendedOption[]"
803
590
  },
804
- "fieldName": "iconLeft"
805
- },
806
- {
807
- "name": "variant",
808
- "fieldName": "variant",
809
- "inheritedFrom": {
810
- "name": "TuixBaseButton",
811
- "module": "src/tuix-button/TuixBaseButton.ts"
812
- }
591
+ "default": "[]"
813
592
  },
814
593
  {
815
- "name": "disabled",
594
+ "kind": "field",
595
+ "name": "_optionsContainer",
816
596
  "type": {
817
- "text": "boolean"
597
+ "text": "HTMLElement | undefined"
818
598
  },
819
- "default": "false",
820
- "fieldName": "disabled",
821
- "inheritedFrom": {
822
- "name": "TuixBaseButton",
823
- "module": "src/tuix-button/TuixBaseButton.ts"
824
- }
599
+ "privacy": "private"
825
600
  },
826
601
  {
827
- "name": "dark",
602
+ "kind": "field",
603
+ "name": "_inputDropdown",
828
604
  "type": {
829
- "text": "boolean"
605
+ "text": "HTMLElement | undefined"
830
606
  },
831
- "default": "false",
832
- "fieldName": "dark",
833
- "inheritedFrom": {
834
- "name": "TuixBaseButton",
835
- "module": "src/tuix-button/TuixBaseButton.ts"
836
- }
837
- }
838
- ],
839
- "superclass": {
840
- "name": "TuixBaseButton",
841
- "module": "/src/tuix-button/TuixBaseButton"
842
- },
843
- "tagName": "tuix-button",
844
- "customElement": true,
845
- "events": [
607
+ "privacy": "private"
608
+ },
846
609
  {
847
- "name": "customClick",
610
+ "kind": "field",
611
+ "name": "_previousSelectedOption",
848
612
  "type": {
849
- "text": "CustomEvent"
613
+ "text": "HTMLElement | null"
850
614
  },
851
- "inheritedFrom": {
852
- "name": "TuixBaseButton",
853
- "module": "src/tuix-button/TuixBaseButton.ts"
854
- }
855
- }
856
- ]
857
- }
858
- ],
859
- "exports": [
860
- {
861
- "kind": "js",
862
- "name": "TuixButton",
863
- "declaration": {
864
- "name": "TuixButton",
865
- "module": "src/tuix-button/TuixButton.ts"
866
- }
867
- },
868
- {
869
- "kind": "custom-element-definition",
870
- "name": "tuix-button",
871
- "declaration": {
872
- "name": "TuixButton",
873
- "module": "src/tuix-button/TuixButton.ts"
874
- }
875
- }
876
- ]
877
- },
878
- {
879
- "kind": "javascript-module",
880
- "path": "src/tuix-checkbox/TuixCheckbox.styles.ts",
881
- "declarations": [
882
- {
883
- "kind": "variable",
884
- "name": "hostStyles",
885
- "default": "css`\n :host {\n --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};\n --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};\n --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n --t-text-color-error: ${unsafeCSS(Palette.ERROR)};\n --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};\n --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-text-color-label: ${unsafeCSS(Palette.BLACK)};\n --t-label-right-default-justify: flex-start;\n --t-label-left-default-justify: space-between;\n }\n :host([dark]) {\n --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};\n --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};\n --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};\n --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};\n }\n`"
886
- },
887
- {
888
- "kind": "variable",
889
- "name": "checkboxContainerStyles",
890
- "default": "css`\n .t-checkbox-full-container {\n display: flex;\n justify-content: var(--t-label-right-default-justify, flex-start);\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n :host([disabled]) .t-checkbox-full-container {\n cursor: not-allowed;\n }\n .t-checkbox-container {\n --t-checkbox-size-box: 1.5rem;\n --t-checkbox-shadow-width: 2px;\n --t-checkbox-border-radius: 0.25rem;\n display: block;\n position: relative;\n height: var(--t-checkbox-size-box);\n width: var(--t-checkbox-size-box);\n min-width: var(--t-checkbox-size-box);\n }\n .t-checkbox-container .t-checkbox {\n position: absolute;\n opacity: 0;\n height: 0;\n width: 0;\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-checkbox-container {\n --t-checkbox-size-box: 1rem;\n --t-checkbox-shadow-width: 1px;\n --t-checkbox-border-radius: 0.125rem;\n margin-top: 1px;\n }\n }\n`"
891
- },
892
- {
893
- "kind": "variable",
894
- "name": "checkboxCheckmarkStyles",
895
- "default": "css`\n .t-checkbox-container .t-checkbox-checkmark {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n height: var(--t-checkbox-size-box);\n width: var(--t-checkbox-size-box);\n border-radius: var(--t-checkbox-border-radius);\n background-color: var(--t-bg-color-primary);\n border: 1px solid var(--t-stroke-color-grey);\n box-sizing: border-box;\n }\n .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n margin: auto;\n display: none;\n width: calc(var(--t-checkbox-size-box) - 0.5rem);\n height: calc(var(--t-checkbox-size-box) - 0.5rem);\n }\n .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n background-color: var(--t-main-color-tuix);\n border: none;\n }\n .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n box-shadow: 0 0 0px var(--t-checkbox-shadow-width)\n var(--t-stroke-color-focus);\n border: 1px solid var(--t-main-color-tuix);\n }\n .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n display: block;\n }\n .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n border: 1px solid var(--t-main-color-tuix);\n }\n .t-checkbox-full-container.t-with-error\n .t-checkbox-container\n .t-checkbox-checkmark {\n border: 1px solid var(--t-text-color-error);\n }\n .t-checkbox-full-container.t-with-error\n .t-checkbox-container\n .t-checkbox:checked\n ~ .t-checkbox-checkmark {\n background-color: var(--t-text-color-error);\n border: none;\n }\n\n .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n background-color: var(--t-bg-color-disabled);\n border: none;\n box-shadow: none;\n }\n`"
896
- },
897
- {
898
- "kind": "variable",
899
- "name": "checkboxLabelStyles",
900
- "default": "css`\n .t-checkbox-label {\n display: block;\n color: var(--t-text-color-label);\n margin-left: 0.625rem;\n }\n .t-checkbox-full-container.t-with-label-left {\n flex-direction: row-reverse;\n justify-content: var(--t-label-left-default-justify, space-between);\n }\n .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n margin-right: 0.625rem;\n margin-left: 0;\n }\n`"
901
- }
902
- ],
903
- "exports": [
904
- {
905
- "kind": "js",
906
- "name": "hostStyles",
907
- "declaration": {
908
- "name": "hostStyles",
909
- "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
910
- }
911
- },
912
- {
913
- "kind": "js",
914
- "name": "checkboxContainerStyles",
915
- "declaration": {
916
- "name": "checkboxContainerStyles",
917
- "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
918
- }
919
- },
920
- {
921
- "kind": "js",
922
- "name": "checkboxCheckmarkStyles",
923
- "declaration": {
924
- "name": "checkboxCheckmarkStyles",
925
- "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
926
- }
927
- },
928
- {
929
- "kind": "js",
930
- "name": "checkboxLabelStyles",
931
- "declaration": {
932
- "name": "checkboxLabelStyles",
933
- "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
934
- }
935
- }
936
- ]
937
- },
938
- {
939
- "kind": "javascript-module",
940
- "path": "src/tuix-checkbox/TuixCheckbox.ts",
941
- "declarations": [
942
- {
943
- "kind": "class",
944
- "description": "",
945
- "name": "TuixCheckbox",
946
- "members": [
615
+ "privacy": "private",
616
+ "default": "null"
617
+ },
947
618
  {
948
619
  "kind": "field",
949
- "name": "checked",
620
+ "name": "_previousFocusedOption",
950
621
  "type": {
951
- "text": "boolean"
622
+ "text": "HTMLElement | null"
952
623
  },
953
- "default": "false",
954
- "attribute": "checked"
624
+ "privacy": "private",
625
+ "default": "null"
626
+ },
627
+ {
628
+ "kind": "method",
629
+ "name": "_onEnterPress",
630
+ "privacy": "private",
631
+ "parameters": [
632
+ {
633
+ "name": "event",
634
+ "type": {
635
+ "text": "KeyboardEvent"
636
+ }
637
+ }
638
+ ]
639
+ },
640
+ {
641
+ "kind": "method",
642
+ "name": "_onKeyDownOption",
643
+ "privacy": "private",
644
+ "parameters": [
645
+ {
646
+ "name": "event",
647
+ "type": {
648
+ "text": "KeyboardEvent"
649
+ }
650
+ }
651
+ ]
652
+ },
653
+ {
654
+ "kind": "method",
655
+ "name": "_onKeyPressOption",
656
+ "privacy": "private",
657
+ "parameters": [
658
+ {
659
+ "name": "event",
660
+ "type": {
661
+ "text": "KeyboardEvent"
662
+ }
663
+ }
664
+ ]
665
+ },
666
+ {
667
+ "kind": "method",
668
+ "name": "_onMouseOverOption",
669
+ "privacy": "private",
670
+ "parameters": [
671
+ {
672
+ "name": "event",
673
+ "type": {
674
+ "text": "MouseEvent"
675
+ }
676
+ }
677
+ ]
678
+ },
679
+ {
680
+ "kind": "method",
681
+ "name": "_onClickOption",
682
+ "privacy": "private",
683
+ "parameters": [
684
+ {
685
+ "name": "event",
686
+ "type": {
687
+ "text": "MouseEvent | KeyboardEvent"
688
+ }
689
+ }
690
+ ]
691
+ },
692
+ {
693
+ "kind": "method",
694
+ "name": "_onInputSingle",
695
+ "privacy": "protected",
696
+ "parameters": [
697
+ {
698
+ "name": "e",
699
+ "type": {
700
+ "text": "CustomEvent"
701
+ }
702
+ }
703
+ ]
704
+ },
705
+ {
706
+ "kind": "method",
707
+ "name": "_handleSelectEvent",
708
+ "privacy": "protected",
709
+ "parameters": [
710
+ {
711
+ "name": "event",
712
+ "type": {
713
+ "text": "MouseEvent | KeyboardEvent"
714
+ }
715
+ }
716
+ ]
717
+ },
718
+ {
719
+ "kind": "method",
720
+ "name": "_handleBlur",
721
+ "privacy": "private"
722
+ },
723
+ {
724
+ "kind": "method",
725
+ "name": "_getOptionName",
726
+ "privacy": "private",
727
+ "return": {
728
+ "type": {
729
+ "text": "string"
730
+ }
731
+ },
732
+ "parameters": [
733
+ {
734
+ "name": "option",
735
+ "type": {
736
+ "text": "TuixDropdownOption"
737
+ }
738
+ }
739
+ ]
740
+ },
741
+ {
742
+ "kind": "method",
743
+ "name": "_getOptionValue",
744
+ "privacy": "private",
745
+ "return": {
746
+ "type": {
747
+ "text": "TuixDropdownPlainOption"
748
+ }
749
+ },
750
+ "parameters": [
751
+ {
752
+ "name": "option",
753
+ "type": {
754
+ "text": "TuixDropdownOption"
755
+ }
756
+ }
757
+ ]
758
+ },
759
+ {
760
+ "kind": "method",
761
+ "name": "_findIndex",
762
+ "privacy": "private",
763
+ "return": {
764
+ "type": {
765
+ "text": "number"
766
+ }
767
+ },
768
+ "parameters": [
769
+ {
770
+ "name": "option",
771
+ "type": {
772
+ "text": "TuixDropdownOption"
773
+ }
774
+ }
775
+ ]
955
776
  },
956
777
  {
957
- "kind": "field",
958
- "name": "disabled",
959
- "type": {
960
- "text": "boolean"
961
- },
962
- "default": "false",
963
- "attribute": "disabled",
964
- "reflects": true
778
+ "kind": "method",
779
+ "name": "_handleInputBase",
780
+ "privacy": "private",
781
+ "parameters": [
782
+ {
783
+ "name": "e",
784
+ "type": {
785
+ "text": "CustomEvent"
786
+ }
787
+ },
788
+ {
789
+ "name": "eventName",
790
+ "type": {
791
+ "text": "string"
792
+ }
793
+ }
794
+ ]
965
795
  },
966
796
  {
967
- "kind": "field",
968
- "name": "dark",
969
- "type": {
970
- "text": "boolean"
971
- },
972
- "default": "false",
973
- "attribute": "dark",
974
- "reflects": true
797
+ "kind": "method",
798
+ "name": "_extendOptionsList",
799
+ "privacy": "private",
800
+ "parameters": [
801
+ {
802
+ "name": "value",
803
+ "default": "''"
804
+ }
805
+ ]
975
806
  },
976
807
  {
977
- "kind": "field",
978
- "name": "error",
979
- "type": {
980
- "text": "boolean"
981
- },
982
- "default": "false",
983
- "attribute": "error",
984
- "reflects": true
808
+ "kind": "method",
809
+ "name": "_handleArrowDown",
810
+ "privacy": "private"
985
811
  },
986
812
  {
987
- "kind": "field",
988
- "name": "label",
989
- "type": {
990
- "text": "string"
991
- },
992
- "default": "''",
993
- "attribute": "label"
813
+ "kind": "method",
814
+ "name": "_handleArrowUp",
815
+ "privacy": "private"
994
816
  },
995
817
  {
996
818
  "kind": "field",
997
- "name": "labelSide",
998
- "type": {
999
- "text": "CheckboxLabelSide"
1000
- },
1001
- "attribute": "labelSide"
819
+ "name": "_handleClickOutside",
820
+ "privacy": "private"
1002
821
  },
1003
822
  {
1004
823
  "kind": "method",
1005
- "name": "_onCheckboxChange",
824
+ "name": "_focusTargetOption",
1006
825
  "privacy": "private",
1007
826
  "parameters": [
1008
827
  {
1009
- "name": "event",
828
+ "name": "targetOption",
1010
829
  "type": {
1011
- "text": "InputEvent"
830
+ "text": "HTMLElement"
1012
831
  }
832
+ },
833
+ {
834
+ "name": "extrict",
835
+ "default": "true"
1013
836
  }
1014
837
  ]
1015
838
  },
1016
839
  {
1017
840
  "kind": "method",
1018
- "name": "_getIconMode",
841
+ "name": "_toggleOptions",
1019
842
  "privacy": "private"
1020
843
  },
1021
844
  {
1022
845
  "kind": "method",
1023
- "name": "_getFullContainerClasses",
846
+ "name": "_focusOptionsContainer",
847
+ "privacy": "private"
848
+ },
849
+ {
850
+ "kind": "method",
851
+ "name": "_unselectPreviousOption",
852
+ "privacy": "private"
853
+ },
854
+ {
855
+ "kind": "method",
856
+ "name": "_hasCompleteDescription",
857
+ "privacy": "private",
858
+ "return": {
859
+ "type": {
860
+ "text": "boolean"
861
+ }
862
+ }
863
+ },
864
+ {
865
+ "kind": "method",
866
+ "name": "_getOptionsContainerClasses",
1024
867
  "privacy": "private",
1025
868
  "return": {
1026
869
  "type": {
1027
870
  "text": "ClassInfo"
1028
871
  }
1029
872
  }
873
+ },
874
+ {
875
+ "kind": "method",
876
+ "name": "_triggerUpdateByExternalValueChange",
877
+ "privacy": "private"
878
+ },
879
+ {
880
+ "kind": "method",
881
+ "name": "_resetPreviousSelection",
882
+ "privacy": "private"
883
+ },
884
+ {
885
+ "kind": "method",
886
+ "name": "_getOptionsTemplate",
887
+ "privacy": "private",
888
+ "return": {
889
+ "type": {
890
+ "text": "TemplateResult[]"
891
+ }
892
+ }
1030
893
  }
1031
894
  ],
1032
895
  "events": [
1033
896
  {
1034
- "name": "change",
897
+ "name": "select",
898
+ "type": {
899
+ "text": "CustomEvent"
900
+ }
901
+ },
902
+ {
903
+ "name": "eventName",
1035
904
  "type": {
1036
905
  "text": "CustomEvent"
1037
906
  }
@@ -1039,12 +908,39 @@
1039
908
  ],
1040
909
  "attributes": [
1041
910
  {
1042
- "name": "checked",
911
+ "name": "value",
1043
912
  "type": {
1044
- "text": "boolean"
913
+ "text": "TuixDropdownOption | undefined"
1045
914
  },
1046
- "default": "false",
1047
- "fieldName": "checked"
915
+ "default": "undefined",
916
+ "resolveInitializer": {
917
+ "module": "src/tuix-dropdown/TuixDropdown.ts"
918
+ },
919
+ "fieldName": "value"
920
+ },
921
+ {
922
+ "name": "options",
923
+ "type": {
924
+ "text": "TuixDropdownOption[]"
925
+ },
926
+ "default": "[]",
927
+ "fieldName": "options"
928
+ },
929
+ {
930
+ "name": "placeholder",
931
+ "type": {
932
+ "text": "string"
933
+ },
934
+ "default": "''",
935
+ "fieldName": "placeholder"
936
+ },
937
+ {
938
+ "name": "title",
939
+ "type": {
940
+ "text": "string"
941
+ },
942
+ "default": "''",
943
+ "fieldName": "title"
1048
944
  },
1049
945
  {
1050
946
  "name": "disabled",
@@ -1063,147 +959,125 @@
1063
959
  "fieldName": "dark"
1064
960
  },
1065
961
  {
1066
- "name": "error",
962
+ "name": "description",
1067
963
  "type": {
1068
- "text": "boolean"
964
+ "text": "string | undefined"
1069
965
  },
1070
- "default": "false",
1071
- "fieldName": "error"
966
+ "fieldName": "description"
1072
967
  },
1073
968
  {
1074
- "name": "label",
1075
- "type": {
1076
- "text": "string"
1077
- },
1078
- "default": "''",
1079
- "fieldName": "label"
969
+ "name": "descriptionType",
970
+ "fieldName": "descriptionType"
1080
971
  },
1081
972
  {
1082
- "name": "labelSide",
1083
- "type": {
1084
- "text": "CheckboxLabelSide"
1085
- },
1086
- "fieldName": "labelSide"
973
+ "name": "type",
974
+ "fieldName": "type"
1087
975
  }
1088
976
  ],
1089
977
  "superclass": {
1090
978
  "name": "LitElement",
1091
979
  "package": "lit"
1092
980
  },
1093
- "tagName": "tuix-checkbox",
981
+ "tagName": "tuix-dropdown",
1094
982
  "customElement": true
1095
983
  }
1096
984
  ],
1097
985
  "exports": [
1098
986
  {
1099
987
  "kind": "js",
1100
- "name": "TuixCheckbox",
988
+ "name": "TuixDropdown",
1101
989
  "declaration": {
1102
- "name": "TuixCheckbox",
1103
- "module": "src/tuix-checkbox/TuixCheckbox.ts"
990
+ "name": "TuixDropdown",
991
+ "module": "src/tuix-dropdown/TuixDropdown.ts"
1104
992
  }
1105
993
  },
1106
994
  {
1107
995
  "kind": "custom-element-definition",
1108
- "name": "tuix-checkbox",
996
+ "name": "tuix-dropdown",
1109
997
  "declaration": {
1110
- "name": "TuixCheckbox",
1111
- "module": "src/tuix-checkbox/TuixCheckbox.ts"
998
+ "name": "TuixDropdown",
999
+ "module": "src/tuix-dropdown/TuixDropdown.ts"
1112
1000
  }
1113
1001
  }
1114
1002
  ]
1115
1003
  },
1116
1004
  {
1117
1005
  "kind": "javascript-module",
1118
- "path": "src/tuix-dropdown/TuixDropdown.styles.ts",
1006
+ "path": "src/tuix-checkbox/TuixCheckbox.styles.ts",
1119
1007
  "declarations": [
1120
1008
  {
1121
1009
  "kind": "variable",
1122
- "name": "dropdownHostStyles",
1123
- "default": "css`\n ${hostStyles}\n :host {\n --t-field-color-option: ${unsafeCSS(Palette.WHITE)};\n --t-field-color-main: ${unsafeCSS(Palette.MAIN)};\n }\n\n :host .t-input-dropdown {\n --t-field-font-weight: 300;\n --t-field-font-size: 1rem;\n --t-field-padding-x: 1rem;\n --t-field-title-left-position: 1rem;\n }\n\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n :host .t-input-dropdown {\n --t-field-font-size: 0.938rem;\n --t-field-line-height: 1.125rem;\n }\n }\n\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n :host .t-input-dropdown {\n --t-field-font-size: 0.813rem;\n --t-field-line-height: 1rem;\n }\n }\n\n :host([dark]) {\n --t-field-color-option: ${unsafeCSS(DarkPalette.ELEVATION_2)};\n }\n`"
1010
+ "name": "hostStyles",
1011
+ "default": "css`\n :host {\n --t-main-color-tuix: ${unsafeCSS(Palette.MAIN)};\n --t-bg-color-primary: ${unsafeCSS(Palette.WHITE)};\n --t-bg-color-disabled: ${unsafeCSS(Palette.PRIMARY_100)};\n --t-text-color-error: ${unsafeCSS(Palette.ERROR)};\n --t-stroke-color-focus: ${unsafeCSS(Palette.SECONDARY)};\n --t-stroke-color-grey: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-text-color-label: ${unsafeCSS(Palette.BLACK)};\n --t-label-right-default-justify: flex-start;\n --t-label-left-default-justify: space-between;\n }\n :host([dark]) {\n --t-main-color-tuix: ${unsafeCSS(DarkPalette.MAIN)};\n --t-bg-color-primary: ${unsafeCSS(DarkPalette.BLACK)};\n --t-bg-color-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n --t-text-color-error: ${unsafeCSS(DarkPalette.ERROR)};\n --t-stroke-color-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n --t-stroke-color-grey: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n --t-text-color-label: ${unsafeCSS(DarkPalette.WHITE)};\n }\n`"
1124
1012
  },
1125
1013
  {
1126
1014
  "kind": "variable",
1127
- "name": "dropdownMainContainerStyles",
1128
- "default": "css`\n .t-dropdown-full-container {\n position: relative;\n font-family: 'Rubik', sans-serif;\n }\n .t-dropdown-container .t-input-dropdown {\n --t-field-input-cursor: pointer;\n }\n`"
1015
+ "name": "checkboxContainerStyles",
1016
+ "default": "css`\n .t-checkbox-full-container {\n display: flex;\n justify-content: var(--t-label-right-default-justify, flex-start);\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n :host([disabled]) .t-checkbox-full-container {\n cursor: not-allowed;\n }\n .t-checkbox-container {\n --t-checkbox-size-box: 1.5rem;\n --t-checkbox-shadow-width: 2px;\n --t-checkbox-border-radius: 0.25rem;\n display: block;\n position: relative;\n height: var(--t-checkbox-size-box);\n width: var(--t-checkbox-size-box);\n min-width: var(--t-checkbox-size-box);\n }\n .t-checkbox-container .t-checkbox {\n position: absolute;\n opacity: 0;\n height: 0;\n width: 0;\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-checkbox-container {\n --t-checkbox-size-box: 1rem;\n --t-checkbox-shadow-width: 1px;\n --t-checkbox-border-radius: 0.125rem;\n margin-top: 1px;\n }\n }\n`"
1129
1017
  },
1130
1018
  {
1131
1019
  "kind": "variable",
1132
- "name": "dropdownOptionStyles",
1133
- "default": "css`\n .t-options-container {\n width: 100%;\n position: absolute;\n top: calc(100% + 2px);\n left: 0;\n border: none;\n border-radius: 0 0 5px 5px;\n background-color: var(--t-field-color-option);\n visibility: collapse;\n overflow-y: auto;\n max-height: 250px;\n color: var(--t-field-color-text);\n box-shadow: 0px 2px 8px 0px ${unsafeCSS(Palette.SHADOW)};\n z-index: 9999;\n }\n .t-options-container::-webkit-scrollbar {\n width: 0.75rem;\n }\n .t-options-container::-webkit-scrollbar-track {\n background-color: transparent;\n }\n .t-options-container::-webkit-scrollbar-thumb {\n background-color: ${unsafeCSS(Palette.PRIMARY_100)};\n border-radius: 0.25rem;\n border: 0.188rem solid transparent;\n background-clip: content-box;\n }\n .t-options-container.show {\n visibility: visible;\n }\n .t-options-container.show.t-with-description {\n top: calc(100% + 2px - 1.5rem);\n }\n @media only screen and (max-height: 500px) {\n .t-options-container {\n max-height: 50vh;\n }\n }\n .t-dropdown-option {\n padding: var(--t-field-padding-y) 1rem;\n cursor: pointer;\n font-size: 1rem;\n line-height: 1.25rem;\n font-weight: 300;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n .t-dropdown-option.t-option-hover {\n background-color: var(--t-field-color-form);\n }\n .t-dropdown-option.t-option-selected {\n color: var(--t-field-color-main);\n }\n .t-dropdown-option.t-option-filtered {\n display: none;\n }\n .t-dropdown-option:focus {\n outline: none;\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n .t-dropdown-option {\n font-size: 0.938rem;\n line-height: 1.125rem;\n --t-field-padding-y: 1.063rem;\n --t-field-padding-top: 1.5rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n .t-dropdown-option {\n font-size: 0.813rem;\n line-height: 1rem;\n --t-field-padding-y: 1rem;\n --t-field-padding-top: 1.375rem;\n }\n }\n`"
1020
+ "name": "checkboxCheckmarkStyles",
1021
+ "default": "css`\n .t-checkbox-container .t-checkbox-checkmark {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n height: var(--t-checkbox-size-box);\n width: var(--t-checkbox-size-box);\n border-radius: var(--t-checkbox-border-radius);\n background-color: var(--t-bg-color-primary);\n border: 1px solid var(--t-stroke-color-grey);\n box-sizing: border-box;\n }\n .t-checkbox-container .t-checkbox-checkmark tuix-icon {\n margin: auto;\n display: none;\n width: calc(var(--t-checkbox-size-box) - 0.5rem);\n height: calc(var(--t-checkbox-size-box) - 0.5rem);\n }\n .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark {\n background-color: var(--t-main-color-tuix);\n border: none;\n }\n .t-checkbox-container .t-checkbox:focus ~ .t-checkbox-checkmark {\n box-shadow: 0 0 0px var(--t-checkbox-shadow-width)\n var(--t-stroke-color-focus);\n border: 1px solid var(--t-main-color-tuix);\n }\n .t-checkbox-container .t-checkbox:checked ~ .t-checkbox-checkmark tuix-icon {\n display: block;\n }\n .t-checkbox-full-container:hover .t-checkbox-container .t-checkbox-checkmark {\n border: 1px solid var(--t-main-color-tuix);\n }\n .t-checkbox-full-container.t-with-error\n .t-checkbox-container\n .t-checkbox-checkmark {\n border: 1px solid var(--t-text-color-error);\n }\n .t-checkbox-full-container.t-with-error\n .t-checkbox-container\n .t-checkbox:checked\n ~ .t-checkbox-checkmark {\n background-color: var(--t-text-color-error);\n border: none;\n }\n\n .t-checkbox-container .t-checkbox:disabled ~ .t-checkbox-checkmark {\n background-color: var(--t-bg-color-disabled);\n border: none;\n box-shadow: none;\n }\n`"
1022
+ },
1023
+ {
1024
+ "kind": "variable",
1025
+ "name": "checkboxLabelStyles",
1026
+ "default": "css`\n .t-checkbox-label {\n display: block;\n color: var(--t-text-color-label);\n margin-left: 0.625rem;\n }\n .t-checkbox-full-container.t-with-label-left {\n flex-direction: row-reverse;\n justify-content: var(--t-label-left-default-justify, space-between);\n }\n .t-checkbox-full-container.t-with-label-left .t-checkbox-label {\n margin-right: 0.625rem;\n margin-left: 0;\n }\n`"
1134
1027
  }
1135
1028
  ],
1136
1029
  "exports": [
1137
1030
  {
1138
1031
  "kind": "js",
1139
- "name": "dropdownHostStyles",
1032
+ "name": "hostStyles",
1140
1033
  "declaration": {
1141
- "name": "dropdownHostStyles",
1142
- "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
1034
+ "name": "hostStyles",
1035
+ "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
1143
1036
  }
1144
1037
  },
1145
1038
  {
1146
1039
  "kind": "js",
1147
- "name": "dropdownMainContainerStyles",
1040
+ "name": "checkboxContainerStyles",
1148
1041
  "declaration": {
1149
- "name": "dropdownMainContainerStyles",
1150
- "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
1042
+ "name": "checkboxContainerStyles",
1043
+ "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
1151
1044
  }
1152
1045
  },
1153
1046
  {
1154
1047
  "kind": "js",
1155
- "name": "dropdownOptionStyles",
1048
+ "name": "checkboxCheckmarkStyles",
1156
1049
  "declaration": {
1157
- "name": "dropdownOptionStyles",
1158
- "module": "src/tuix-dropdown/TuixDropdown.styles.ts"
1050
+ "name": "checkboxCheckmarkStyles",
1051
+ "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
1052
+ }
1053
+ },
1054
+ {
1055
+ "kind": "js",
1056
+ "name": "checkboxLabelStyles",
1057
+ "declaration": {
1058
+ "name": "checkboxLabelStyles",
1059
+ "module": "src/tuix-checkbox/TuixCheckbox.styles.ts"
1159
1060
  }
1160
1061
  }
1161
1062
  ]
1162
1063
  },
1163
1064
  {
1164
1065
  "kind": "javascript-module",
1165
- "path": "src/tuix-dropdown/TuixDropdown.ts",
1066
+ "path": "src/tuix-checkbox/TuixCheckbox.ts",
1166
1067
  "declarations": [
1167
1068
  {
1168
1069
  "kind": "class",
1169
1070
  "description": "",
1170
- "name": "TuixDropdown",
1071
+ "name": "TuixCheckbox",
1171
1072
  "members": [
1172
1073
  {
1173
1074
  "kind": "field",
1174
- "name": "value",
1175
- "type": {
1176
- "text": "TuixDropdownOption | undefined"
1177
- },
1178
- "default": "undefined",
1179
- "attribute": "value"
1180
- },
1181
- {
1182
- "kind": "field",
1183
- "name": "options",
1184
- "type": {
1185
- "text": "TuixDropdownOption[]"
1186
- },
1187
- "default": "[]",
1188
- "attribute": "options"
1189
- },
1190
- {
1191
- "kind": "field",
1192
- "name": "placeholder",
1193
- "type": {
1194
- "text": "string"
1195
- },
1196
- "default": "''",
1197
- "attribute": "placeholder"
1198
- },
1199
- {
1200
- "kind": "field",
1201
- "name": "title",
1075
+ "name": "checked",
1202
1076
  "type": {
1203
- "text": "string"
1077
+ "text": "boolean"
1204
1078
  },
1205
- "default": "''",
1206
- "attribute": "title"
1079
+ "default": "false",
1080
+ "attribute": "checked"
1207
1081
  },
1208
1082
  {
1209
1083
  "kind": "field",
@@ -1227,408 +1101,529 @@
1227
1101
  },
1228
1102
  {
1229
1103
  "kind": "field",
1230
- "name": "description",
1104
+ "name": "error",
1231
1105
  "type": {
1232
- "text": "string | undefined"
1106
+ "text": "boolean"
1233
1107
  },
1234
- "attribute": "description"
1235
- },
1236
- {
1237
- "kind": "field",
1238
- "name": "descriptionType",
1239
- "attribute": "descriptionType"
1240
- },
1241
- {
1242
- "kind": "field",
1243
- "name": "type",
1244
- "attribute": "type"
1108
+ "default": "false",
1109
+ "attribute": "error",
1110
+ "reflects": true
1245
1111
  },
1246
1112
  {
1247
1113
  "kind": "field",
1248
- "name": "_value",
1114
+ "name": "label",
1249
1115
  "type": {
1250
1116
  "text": "string"
1251
1117
  },
1252
- "privacy": "private",
1253
- "default": "''"
1118
+ "default": "''",
1119
+ "attribute": "label"
1254
1120
  },
1255
1121
  {
1256
1122
  "kind": "field",
1257
- "name": "_isOptionsVisible",
1123
+ "name": "labelSide",
1258
1124
  "type": {
1259
- "text": "boolean"
1125
+ "text": "CheckboxLabelSide"
1260
1126
  },
1127
+ "attribute": "labelSide"
1128
+ },
1129
+ {
1130
+ "kind": "method",
1131
+ "name": "_onCheckboxChange",
1261
1132
  "privacy": "private",
1262
- "default": "false"
1133
+ "parameters": [
1134
+ {
1135
+ "name": "event",
1136
+ "type": {
1137
+ "text": "InputEvent"
1138
+ }
1139
+ }
1140
+ ]
1263
1141
  },
1264
1142
  {
1265
- "kind": "field",
1266
- "name": "_searchingOption",
1143
+ "kind": "method",
1144
+ "name": "_getIconMode",
1145
+ "privacy": "private"
1146
+ },
1147
+ {
1148
+ "kind": "method",
1149
+ "name": "_getFullContainerClasses",
1150
+ "privacy": "private",
1151
+ "return": {
1152
+ "type": {
1153
+ "text": "ClassInfo"
1154
+ }
1155
+ }
1156
+ }
1157
+ ],
1158
+ "events": [
1159
+ {
1160
+ "name": "change",
1161
+ "type": {
1162
+ "text": "CustomEvent"
1163
+ }
1164
+ }
1165
+ ],
1166
+ "attributes": [
1167
+ {
1168
+ "name": "checked",
1267
1169
  "type": {
1268
1170
  "text": "boolean"
1269
1171
  },
1270
- "privacy": "private",
1271
- "default": "false"
1172
+ "default": "false",
1173
+ "fieldName": "checked"
1272
1174
  },
1273
1175
  {
1274
- "kind": "field",
1275
- "name": "_extendedOptions",
1176
+ "name": "disabled",
1276
1177
  "type": {
1277
- "text": "TuixDropdownExtendedOption[]"
1178
+ "text": "boolean"
1278
1179
  },
1279
- "default": "[]"
1180
+ "default": "false",
1181
+ "fieldName": "disabled"
1280
1182
  },
1281
1183
  {
1282
- "kind": "field",
1283
- "name": "_optionsContainer",
1184
+ "name": "dark",
1284
1185
  "type": {
1285
- "text": "HTMLElement | undefined"
1186
+ "text": "boolean"
1286
1187
  },
1287
- "privacy": "private"
1188
+ "default": "false",
1189
+ "fieldName": "dark"
1288
1190
  },
1289
1191
  {
1290
- "kind": "field",
1291
- "name": "_inputDropdown",
1192
+ "name": "error",
1292
1193
  "type": {
1293
- "text": "HTMLElement | undefined"
1194
+ "text": "boolean"
1294
1195
  },
1295
- "privacy": "private"
1196
+ "default": "false",
1197
+ "fieldName": "error"
1296
1198
  },
1297
1199
  {
1298
- "kind": "field",
1299
- "name": "_previousSelectedOption",
1200
+ "name": "label",
1300
1201
  "type": {
1301
- "text": "HTMLElement | null"
1202
+ "text": "string"
1302
1203
  },
1303
- "privacy": "private",
1304
- "default": "null"
1204
+ "default": "''",
1205
+ "fieldName": "label"
1305
1206
  },
1306
1207
  {
1307
- "kind": "field",
1308
- "name": "_previousFocusedOption",
1208
+ "name": "labelSide",
1309
1209
  "type": {
1310
- "text": "HTMLElement | null"
1210
+ "text": "CheckboxLabelSide"
1311
1211
  },
1312
- "privacy": "private",
1313
- "default": "null"
1314
- },
1315
- {
1316
- "kind": "method",
1317
- "name": "_onEnterPress",
1318
- "privacy": "private",
1319
- "parameters": [
1320
- {
1321
- "name": "event",
1322
- "type": {
1323
- "text": "KeyboardEvent"
1324
- }
1325
- }
1326
- ]
1327
- },
1328
- {
1329
- "kind": "method",
1330
- "name": "_onKeyDownOption",
1331
- "privacy": "private",
1332
- "parameters": [
1333
- {
1334
- "name": "event",
1335
- "type": {
1336
- "text": "KeyboardEvent"
1337
- }
1338
- }
1339
- ]
1340
- },
1341
- {
1342
- "kind": "method",
1343
- "name": "_onKeyPressOption",
1344
- "privacy": "private",
1345
- "parameters": [
1346
- {
1347
- "name": "event",
1348
- "type": {
1349
- "text": "KeyboardEvent"
1350
- }
1351
- }
1352
- ]
1353
- },
1354
- {
1355
- "kind": "method",
1356
- "name": "_onMouseOverOption",
1357
- "privacy": "private",
1358
- "parameters": [
1359
- {
1360
- "name": "event",
1361
- "type": {
1362
- "text": "MouseEvent"
1363
- }
1364
- }
1365
- ]
1366
- },
1212
+ "fieldName": "labelSide"
1213
+ }
1214
+ ],
1215
+ "superclass": {
1216
+ "name": "LitElement",
1217
+ "package": "lit"
1218
+ },
1219
+ "tagName": "tuix-checkbox",
1220
+ "customElement": true
1221
+ }
1222
+ ],
1223
+ "exports": [
1224
+ {
1225
+ "kind": "js",
1226
+ "name": "TuixCheckbox",
1227
+ "declaration": {
1228
+ "name": "TuixCheckbox",
1229
+ "module": "src/tuix-checkbox/TuixCheckbox.ts"
1230
+ }
1231
+ },
1232
+ {
1233
+ "kind": "custom-element-definition",
1234
+ "name": "tuix-checkbox",
1235
+ "declaration": {
1236
+ "name": "TuixCheckbox",
1237
+ "module": "src/tuix-checkbox/TuixCheckbox.ts"
1238
+ }
1239
+ }
1240
+ ]
1241
+ },
1242
+ {
1243
+ "kind": "javascript-module",
1244
+ "path": "src/tuix-button/TuixBaseButton.ts",
1245
+ "declarations": [
1246
+ {
1247
+ "kind": "class",
1248
+ "description": "",
1249
+ "name": "TuixBaseButton",
1250
+ "members": [
1367
1251
  {
1368
- "kind": "method",
1369
- "name": "_onClickOption",
1370
- "privacy": "private",
1371
- "parameters": [
1372
- {
1373
- "name": "event",
1374
- "type": {
1375
- "text": "MouseEvent | KeyboardEvent"
1376
- }
1377
- }
1378
- ]
1252
+ "kind": "field",
1253
+ "name": "variant",
1254
+ "attribute": "variant",
1255
+ "reflects": true
1379
1256
  },
1380
1257
  {
1381
- "kind": "method",
1382
- "name": "_onInputSingle",
1383
- "privacy": "protected",
1384
- "parameters": [
1385
- {
1386
- "name": "e",
1387
- "type": {
1388
- "text": "CustomEvent"
1389
- }
1390
- }
1391
- ]
1258
+ "kind": "field",
1259
+ "name": "disabled",
1260
+ "type": {
1261
+ "text": "boolean"
1262
+ },
1263
+ "default": "false",
1264
+ "attribute": "disabled",
1265
+ "reflects": true
1392
1266
  },
1393
1267
  {
1394
- "kind": "method",
1395
- "name": "_handleSelectEvent",
1268
+ "kind": "field",
1269
+ "name": "dark",
1270
+ "type": {
1271
+ "text": "boolean"
1272
+ },
1273
+ "default": "false",
1274
+ "attribute": "dark",
1275
+ "reflects": true
1276
+ },
1277
+ {
1278
+ "kind": "field",
1279
+ "name": "iconColor",
1280
+ "type": {
1281
+ "text": "string"
1282
+ },
1396
1283
  "privacy": "protected",
1397
- "parameters": [
1398
- {
1399
- "name": "event",
1400
- "type": {
1401
- "text": "MouseEvent | KeyboardEvent"
1402
- }
1403
- }
1404
- ]
1284
+ "default": "''"
1405
1285
  },
1406
1286
  {
1407
1287
  "kind": "method",
1408
- "name": "_handleBlur",
1409
- "privacy": "private"
1288
+ "name": "_getTextColor",
1289
+ "privacy": "protected"
1410
1290
  },
1411
1291
  {
1412
1292
  "kind": "method",
1413
- "name": "_getOptionName",
1414
- "privacy": "private",
1293
+ "name": "_updateIconColor",
1294
+ "privacy": "protected",
1415
1295
  "return": {
1416
1296
  "type": {
1417
- "text": "string"
1418
- }
1419
- },
1420
- "parameters": [
1421
- {
1422
- "name": "option",
1423
- "type": {
1424
- "text": "TuixDropdownOption"
1425
- }
1297
+ "text": "void"
1426
1298
  }
1427
- ]
1299
+ }
1428
1300
  },
1429
1301
  {
1430
1302
  "kind": "method",
1431
- "name": "_getOptionValue",
1432
- "privacy": "private",
1433
- "return": {
1434
- "type": {
1435
- "text": "TuixDropdownPlainOption"
1436
- }
1437
- },
1438
- "parameters": [
1439
- {
1440
- "name": "option",
1441
- "type": {
1442
- "text": "TuixDropdownOption"
1443
- }
1444
- }
1445
- ]
1303
+ "name": "_handleClick",
1304
+ "privacy": "protected"
1446
1305
  },
1447
1306
  {
1448
1307
  "kind": "method",
1449
- "name": "_findIndex",
1450
- "privacy": "private",
1308
+ "name": "_iconTemplate",
1309
+ "privacy": "protected",
1451
1310
  "return": {
1452
1311
  "type": {
1453
- "text": "number"
1312
+ "text": "TemplateResult"
1454
1313
  }
1455
1314
  },
1456
1315
  "parameters": [
1457
1316
  {
1458
- "name": "option",
1459
- "type": {
1460
- "text": "TuixDropdownOption"
1461
- }
1462
- }
1463
- ]
1464
- },
1465
- {
1466
- "kind": "method",
1467
- "name": "_handleInputBase",
1468
- "privacy": "private",
1469
- "parameters": [
1470
- {
1471
- "name": "e",
1317
+ "name": "iconName",
1472
1318
  "type": {
1473
- "text": "CustomEvent"
1319
+ "text": "IconName"
1474
1320
  }
1475
1321
  },
1476
1322
  {
1477
- "name": "eventName",
1323
+ "name": "iconSize",
1478
1324
  "type": {
1479
- "text": "string"
1325
+ "text": "IconSizeVariant"
1480
1326
  }
1481
1327
  }
1482
1328
  ]
1483
1329
  },
1484
1330
  {
1485
1331
  "kind": "method",
1486
- "name": "_extendOptionsList",
1487
- "privacy": "private",
1488
- "parameters": [
1489
- {
1490
- "name": "value",
1491
- "default": "''"
1332
+ "name": "_buttonContent",
1333
+ "privacy": "protected",
1334
+ "return": {
1335
+ "type": {
1336
+ "text": "TemplateResult"
1492
1337
  }
1493
- ]
1494
- },
1338
+ }
1339
+ }
1340
+ ],
1341
+ "events": [
1495
1342
  {
1496
- "kind": "method",
1497
- "name": "_handleArrowDown",
1498
- "privacy": "private"
1499
- },
1343
+ "name": "customClick",
1344
+ "type": {
1345
+ "text": "CustomEvent"
1346
+ }
1347
+ }
1348
+ ],
1349
+ "attributes": [
1500
1350
  {
1501
- "kind": "method",
1502
- "name": "_handleArrowUp",
1503
- "privacy": "private"
1351
+ "name": "variant",
1352
+ "fieldName": "variant"
1504
1353
  },
1505
1354
  {
1506
- "kind": "field",
1507
- "name": "_handleClickOutside",
1508
- "privacy": "private"
1355
+ "name": "disabled",
1356
+ "type": {
1357
+ "text": "boolean"
1358
+ },
1359
+ "default": "false",
1360
+ "fieldName": "disabled"
1509
1361
  },
1510
1362
  {
1511
- "kind": "method",
1512
- "name": "_focusTargetOption",
1513
- "privacy": "private",
1514
- "parameters": [
1515
- {
1516
- "name": "targetOption",
1517
- "type": {
1518
- "text": "HTMLElement"
1519
- }
1520
- },
1521
- {
1522
- "name": "extrict",
1523
- "default": "true"
1524
- }
1525
- ]
1526
- },
1363
+ "name": "dark",
1364
+ "type": {
1365
+ "text": "boolean"
1366
+ },
1367
+ "default": "false",
1368
+ "fieldName": "dark"
1369
+ }
1370
+ ],
1371
+ "superclass": {
1372
+ "name": "LitElement",
1373
+ "package": "lit"
1374
+ },
1375
+ "customElement": true
1376
+ }
1377
+ ],
1378
+ "exports": [
1379
+ {
1380
+ "kind": "js",
1381
+ "name": "TuixBaseButton",
1382
+ "declaration": {
1383
+ "name": "TuixBaseButton",
1384
+ "module": "src/tuix-button/TuixBaseButton.ts"
1385
+ }
1386
+ }
1387
+ ]
1388
+ },
1389
+ {
1390
+ "kind": "javascript-module",
1391
+ "path": "src/tuix-button/TuixButton.styles.ts",
1392
+ "declarations": [
1393
+ {
1394
+ "kind": "variable",
1395
+ "name": "hostButtonStyles",
1396
+ "default": "css`\n :host {\n --t-button-primary-color: ${unsafeCSS(Palette.MAIN)};\n --t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};\n --t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};\n --t-button-text-color: ${unsafeCSS(Palette.WHITE)};\n --t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};\n --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};\n --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};\n --t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};\n --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};\n }\n :host([dark]) {\n --t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};\n --t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};\n --t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};\n --t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};\n --t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};\n --t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};\n --t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};\n --t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};\n --t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};\n }\n`"
1397
+ },
1398
+ {
1399
+ "kind": "variable",
1400
+ "name": "buttonSizeStyles",
1401
+ "default": "css`\n ${unsafeCSS(`\n ${slottedClassName(TextSize.Button)} {\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.25rem;\n }\n @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n ${slottedClassName(TextSize.Button)} {\n font-size: 0.938rem;\n font-weight: 400;\n line-height: 1.125rem;\n }\n }\n @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n ${slottedClassName(TextSize.Button)} {\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1rem;\n }\n }\n`)}\n`"
1402
+ },
1403
+ {
1404
+ "kind": "variable",
1405
+ "name": "buttonColorStyles",
1406
+ "default": "css`\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {\n background-color: var(--t-button-primary-color);\n outline: none;\n color: var(--t-button-text-color);\n }\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {\n background-color: var(--t-button-hover-primary-color);\n cursor: pointer;\n }\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {\n background-color: var(--t-button-hover-primary-color);\n outline: 2px solid var(--t-button-accent-color);\n }\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {\n background-color: var(--t-button-active-primary-color);\n outline: none;\n }\n\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {\n background-color: var(--t-button-secondary-color);\n outline: 1px solid var(--t-button-hover-primary-color);\n color: var(--t-button-text-secondary-color);\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {\n background-color: var(--t-button-hover-secondary-color);\n outline: 1px solid var(--t-button-primary-color);\n color: var(--t-button-primary-color);\n cursor: pointer;\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {\n background-color: var(--t-button-hover-secondary-color);\n outline: 2px solid var(--t-button-accent-color);\n color: var(--t-button-primary-color);\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {\n background-color: var(--t-button-active-secondary-color);\n outline: 1px solid var(--t-button-primary-color);\n color: var(--t-button-primary-color);\n }\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {\n outline: 1px solid var(--t-button-text-muted-color);\n }\n\n :host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,\n :host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {\n background-color: var(--t-button-disabled-bg-color);\n color: var(--t-button-text-muted-color);\n cursor: not-allowed;\n }\n`"
1407
+ }
1408
+ ],
1409
+ "exports": [
1410
+ {
1411
+ "kind": "js",
1412
+ "name": "hostButtonStyles",
1413
+ "declaration": {
1414
+ "name": "hostButtonStyles",
1415
+ "module": "src/tuix-button/TuixButton.styles.ts"
1416
+ }
1417
+ },
1418
+ {
1419
+ "kind": "js",
1420
+ "name": "buttonSizeStyles",
1421
+ "declaration": {
1422
+ "name": "buttonSizeStyles",
1423
+ "module": "src/tuix-button/TuixButton.styles.ts"
1424
+ }
1425
+ },
1426
+ {
1427
+ "kind": "js",
1428
+ "name": "buttonColorStyles",
1429
+ "declaration": {
1430
+ "name": "buttonColorStyles",
1431
+ "module": "src/tuix-button/TuixButton.styles.ts"
1432
+ }
1433
+ }
1434
+ ]
1435
+ },
1436
+ {
1437
+ "kind": "javascript-module",
1438
+ "path": "src/tuix-button/TuixButton.ts",
1439
+ "declarations": [
1440
+ {
1441
+ "kind": "class",
1442
+ "description": "",
1443
+ "name": "TuixButton",
1444
+ "members": [
1527
1445
  {
1528
- "kind": "method",
1529
- "name": "_toggleOptions",
1530
- "privacy": "private"
1446
+ "kind": "field",
1447
+ "name": "full",
1448
+ "type": {
1449
+ "text": "boolean"
1450
+ },
1451
+ "default": "false",
1452
+ "attribute": "full",
1453
+ "reflects": true
1531
1454
  },
1532
1455
  {
1533
- "kind": "method",
1534
- "name": "_focusOptionsContainer",
1535
- "privacy": "private"
1456
+ "kind": "field",
1457
+ "name": "iconRight",
1458
+ "type": {
1459
+ "text": "IconName | undefined"
1460
+ },
1461
+ "attribute": "iconRight"
1536
1462
  },
1537
1463
  {
1538
- "kind": "method",
1539
- "name": "_unselectPreviousOption",
1540
- "privacy": "private"
1464
+ "kind": "field",
1465
+ "name": "iconLeft",
1466
+ "type": {
1467
+ "text": "IconName | undefined"
1468
+ },
1469
+ "attribute": "iconLeft"
1541
1470
  },
1542
1471
  {
1543
1472
  "kind": "method",
1544
- "name": "_hasCompleteDescription",
1545
- "privacy": "private",
1473
+ "name": "_updateIconColor",
1474
+ "privacy": "protected",
1546
1475
  "return": {
1547
1476
  "type": {
1548
- "text": "boolean"
1477
+ "text": "void"
1549
1478
  }
1479
+ },
1480
+ "inheritedFrom": {
1481
+ "name": "TuixBaseButton",
1482
+ "module": "src/tuix-button/TuixBaseButton.ts"
1550
1483
  }
1551
1484
  },
1552
1485
  {
1553
1486
  "kind": "method",
1554
- "name": "_getOptionsContainerClasses",
1555
- "privacy": "private",
1487
+ "name": "_buttonContent",
1488
+ "privacy": "protected",
1556
1489
  "return": {
1557
1490
  "type": {
1558
- "text": "ClassInfo"
1491
+ "text": "TemplateResult"
1559
1492
  }
1493
+ },
1494
+ "inheritedFrom": {
1495
+ "name": "TuixBaseButton",
1496
+ "module": "src/tuix-button/TuixBaseButton.ts"
1560
1497
  }
1561
1498
  },
1562
1499
  {
1563
- "kind": "method",
1564
- "name": "_triggerUpdateByExternalValueChange",
1565
- "privacy": "private"
1500
+ "kind": "field",
1501
+ "name": "variant",
1502
+ "attribute": "variant",
1503
+ "reflects": true,
1504
+ "inheritedFrom": {
1505
+ "name": "TuixBaseButton",
1506
+ "module": "src/tuix-button/TuixBaseButton.ts"
1507
+ }
1566
1508
  },
1567
1509
  {
1568
- "kind": "method",
1569
- "name": "_resetPreviousSelection",
1570
- "privacy": "private"
1510
+ "kind": "field",
1511
+ "name": "disabled",
1512
+ "type": {
1513
+ "text": "boolean"
1514
+ },
1515
+ "default": "false",
1516
+ "attribute": "disabled",
1517
+ "reflects": true,
1518
+ "inheritedFrom": {
1519
+ "name": "TuixBaseButton",
1520
+ "module": "src/tuix-button/TuixBaseButton.ts"
1521
+ }
1571
1522
  },
1572
1523
  {
1573
- "kind": "method",
1574
- "name": "_getOptionsTemplate",
1575
- "privacy": "private",
1576
- "return": {
1577
- "type": {
1578
- "text": "TemplateResult[]"
1579
- }
1524
+ "kind": "field",
1525
+ "name": "dark",
1526
+ "type": {
1527
+ "text": "boolean"
1528
+ },
1529
+ "default": "false",
1530
+ "attribute": "dark",
1531
+ "reflects": true,
1532
+ "inheritedFrom": {
1533
+ "name": "TuixBaseButton",
1534
+ "module": "src/tuix-button/TuixBaseButton.ts"
1580
1535
  }
1581
- }
1582
- ],
1583
- "events": [
1536
+ },
1584
1537
  {
1585
- "name": "select",
1538
+ "kind": "field",
1539
+ "name": "iconColor",
1586
1540
  "type": {
1587
- "text": "CustomEvent"
1541
+ "text": "string"
1542
+ },
1543
+ "privacy": "protected",
1544
+ "default": "''",
1545
+ "inheritedFrom": {
1546
+ "name": "TuixBaseButton",
1547
+ "module": "src/tuix-button/TuixBaseButton.ts"
1588
1548
  }
1589
1549
  },
1590
1550
  {
1591
- "name": "eventName",
1592
- "type": {
1593
- "text": "CustomEvent"
1551
+ "kind": "method",
1552
+ "name": "_getTextColor",
1553
+ "privacy": "protected",
1554
+ "inheritedFrom": {
1555
+ "name": "TuixBaseButton",
1556
+ "module": "src/tuix-button/TuixBaseButton.ts"
1557
+ }
1558
+ },
1559
+ {
1560
+ "kind": "method",
1561
+ "name": "_handleClick",
1562
+ "privacy": "protected",
1563
+ "inheritedFrom": {
1564
+ "name": "TuixBaseButton",
1565
+ "module": "src/tuix-button/TuixBaseButton.ts"
1566
+ }
1567
+ },
1568
+ {
1569
+ "kind": "method",
1570
+ "name": "_iconTemplate",
1571
+ "privacy": "protected",
1572
+ "return": {
1573
+ "type": {
1574
+ "text": "TemplateResult"
1575
+ }
1576
+ },
1577
+ "parameters": [
1578
+ {
1579
+ "name": "iconName",
1580
+ "type": {
1581
+ "text": "IconName"
1582
+ }
1583
+ },
1584
+ {
1585
+ "name": "iconSize",
1586
+ "type": {
1587
+ "text": "IconSizeVariant"
1588
+ }
1589
+ }
1590
+ ],
1591
+ "inheritedFrom": {
1592
+ "name": "TuixBaseButton",
1593
+ "module": "src/tuix-button/TuixBaseButton.ts"
1594
1594
  }
1595
1595
  }
1596
1596
  ],
1597
1597
  "attributes": [
1598
1598
  {
1599
- "name": "value",
1599
+ "name": "full",
1600
1600
  "type": {
1601
- "text": "TuixDropdownOption | undefined"
1602
- },
1603
- "default": "undefined",
1604
- "resolveInitializer": {
1605
- "module": "src/tuix-dropdown/TuixDropdown.ts"
1601
+ "text": "boolean"
1606
1602
  },
1607
- "fieldName": "value"
1603
+ "default": "false",
1604
+ "fieldName": "full"
1608
1605
  },
1609
1606
  {
1610
- "name": "options",
1607
+ "name": "iconRight",
1611
1608
  "type": {
1612
- "text": "TuixDropdownOption[]"
1609
+ "text": "IconName | undefined"
1613
1610
  },
1614
- "default": "[]",
1615
- "fieldName": "options"
1611
+ "fieldName": "iconRight"
1616
1612
  },
1617
1613
  {
1618
- "name": "placeholder",
1614
+ "name": "iconLeft",
1619
1615
  "type": {
1620
- "text": "string"
1616
+ "text": "IconName | undefined"
1621
1617
  },
1622
- "default": "''",
1623
- "fieldName": "placeholder"
1618
+ "fieldName": "iconLeft"
1624
1619
  },
1625
1620
  {
1626
- "name": "title",
1627
- "type": {
1628
- "text": "string"
1629
- },
1630
- "default": "''",
1631
- "fieldName": "title"
1621
+ "name": "variant",
1622
+ "fieldName": "variant",
1623
+ "inheritedFrom": {
1624
+ "name": "TuixBaseButton",
1625
+ "module": "src/tuix-button/TuixBaseButton.ts"
1626
+ }
1632
1627
  },
1633
1628
  {
1634
1629
  "name": "disabled",
@@ -1636,7 +1631,11 @@
1636
1631
  "text": "boolean"
1637
1632
  },
1638
1633
  "default": "false",
1639
- "fieldName": "disabled"
1634
+ "fieldName": "disabled",
1635
+ "inheritedFrom": {
1636
+ "name": "TuixBaseButton",
1637
+ "module": "src/tuix-button/TuixBaseButton.ts"
1638
+ }
1640
1639
  },
1641
1640
  {
1642
1641
  "name": "dark",
@@ -1644,47 +1643,48 @@
1644
1643
  "text": "boolean"
1645
1644
  },
1646
1645
  "default": "false",
1647
- "fieldName": "dark"
1648
- },
1649
- {
1650
- "name": "description",
1651
- "type": {
1652
- "text": "string | undefined"
1653
- },
1654
- "fieldName": "description"
1655
- },
1656
- {
1657
- "name": "descriptionType",
1658
- "fieldName": "descriptionType"
1659
- },
1660
- {
1661
- "name": "type",
1662
- "fieldName": "type"
1646
+ "fieldName": "dark",
1647
+ "inheritedFrom": {
1648
+ "name": "TuixBaseButton",
1649
+ "module": "src/tuix-button/TuixBaseButton.ts"
1650
+ }
1663
1651
  }
1664
1652
  ],
1665
1653
  "superclass": {
1666
- "name": "LitElement",
1667
- "package": "lit"
1654
+ "name": "TuixBaseButton",
1655
+ "module": "/src/tuix-button/TuixBaseButton"
1668
1656
  },
1669
- "tagName": "tuix-dropdown",
1670
- "customElement": true
1657
+ "tagName": "tuix-button",
1658
+ "customElement": true,
1659
+ "events": [
1660
+ {
1661
+ "name": "customClick",
1662
+ "type": {
1663
+ "text": "CustomEvent"
1664
+ },
1665
+ "inheritedFrom": {
1666
+ "name": "TuixBaseButton",
1667
+ "module": "src/tuix-button/TuixBaseButton.ts"
1668
+ }
1669
+ }
1670
+ ]
1671
1671
  }
1672
1672
  ],
1673
1673
  "exports": [
1674
1674
  {
1675
1675
  "kind": "js",
1676
- "name": "TuixDropdown",
1676
+ "name": "TuixButton",
1677
1677
  "declaration": {
1678
- "name": "TuixDropdown",
1679
- "module": "src/tuix-dropdown/TuixDropdown.ts"
1678
+ "name": "TuixButton",
1679
+ "module": "src/tuix-button/TuixButton.ts"
1680
1680
  }
1681
1681
  },
1682
1682
  {
1683
1683
  "kind": "custom-element-definition",
1684
- "name": "tuix-dropdown",
1684
+ "name": "tuix-button",
1685
1685
  "declaration": {
1686
- "name": "TuixDropdown",
1687
- "module": "src/tuix-dropdown/TuixDropdown.ts"
1686
+ "name": "TuixButton",
1687
+ "module": "src/tuix-button/TuixButton.ts"
1688
1688
  }
1689
1689
  }
1690
1690
  ]
@@ -4438,37 +4438,59 @@
4438
4438
  },
4439
4439
  {
4440
4440
  "kind": "javascript-module",
4441
- "path": "src/tuix-button/enums/tuix-button.enums.ts",
4441
+ "path": "src/tuix-dropdown/enums/tuix-dropdown.enums.ts",
4442
+ "declarations": [],
4443
+ "exports": []
4444
+ },
4445
+ {
4446
+ "kind": "javascript-module",
4447
+ "path": "src/tuix-dropdown/interfaces/tuix-dropdown.interface.ts",
4448
+ "declarations": [],
4449
+ "exports": []
4450
+ },
4451
+ {
4452
+ "kind": "javascript-module",
4453
+ "path": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts",
4442
4454
  "declarations": [
4443
4455
  {
4444
4456
  "kind": "variable",
4445
- "name": "buttonTextColor",
4457
+ "name": "meta",
4446
4458
  "type": {
4447
- "text": "Record<MainVariant, string>"
4459
+ "text": "object"
4448
4460
  },
4449
- "default": "{\n [MainVariant.PRIMARY]: Palette.WHITE,\n [MainVariant.SECONDARY]: Palette.MAIN,\n}"
4461
+ "default": "{\n title: 'TuixDropdown',\n component: 'tuix-dropdown',\n argTypes: {\n value: {\n control: 'object',\n },\n options: {\n control: 'object',\n },\n disabled: {\n control: 'boolean',\n },\n placeholder: {\n control: 'text',\n },\n title: {\n control: 'text',\n },\n description: {\n control: 'text',\n },\n descriptionType: {\n control: 'select',\n options: [...Object.values(DescriptionType), null],\n },\n dark: {\n control: 'boolean',\n },\n type: {\n control: 'select',\n options: [...Object.values(DropdownType)],\n },\n onInputSingle: { action: 'input-single' },\n onSelect: { action: 'select' },\n },\n render: (args: ArgTypes) => html` <div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-dropdown\n ?disabled=\"${args.disabled}\"\n .value=\"${args.value}\"\n .options=\"${args.options}\"\n placeholder=\"${args.placeholder}\"\n title=\"${args.title}\"\n .description=\"${args.description}\"\n descriptionType=\"${args.descriptionType}\"\n ?dark=\"${args.dark}\"\n .type=\"${args.type}\"\n @input-single=\"${args.onInputSingle}\"\n @select=\"${args.onSelect}\"\n >\n </tuix-dropdown>\n </div>`,\n}"
4462
+ },
4463
+ {
4464
+ "kind": "variable",
4465
+ "name": "tuixDropdownObjectList",
4466
+ "type": {
4467
+ "text": "Story"
4468
+ },
4469
+ "default": "{\n args: {\n value: '458ac6ca-9a57-48c5-8abf-768460397607',\n // value: { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' }, // This works too\n disabled: false,\n title: 'Title',\n dark: false,\n options: [\n { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' },\n { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397602' },\n { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397603' },\n { name: 'apple2', value: '458ac6ca-9a57-48c5-8abf-768460397604' },\n { name: 'orange2', value: '458ac6ca-9a57-48c5-8abf-768460397605' },\n { name: 'tomato2', value: '458ac6ca-9a57-48c5-8abf-768460397606' },\n { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397607' },\n { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397608' },\n { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397609' },\n ],\n type: DropdownType.SEARCH,\n },\n}"
4450
4470
  }
4451
4471
  ],
4452
4472
  "exports": [
4453
4473
  {
4454
4474
  "kind": "js",
4455
- "name": "buttonTextColor",
4475
+ "name": "default",
4456
4476
  "declaration": {
4457
- "name": "buttonTextColor",
4458
- "module": "src/tuix-button/enums/tuix-button.enums.ts"
4477
+ "name": "meta",
4478
+ "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
4479
+ }
4480
+ },
4481
+ {
4482
+ "kind": "js",
4483
+ "name": "tuixDropdownObjectList",
4484
+ "declaration": {
4485
+ "name": "tuixDropdownObjectList",
4486
+ "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
4459
4487
  }
4460
4488
  }
4461
4489
  ]
4462
4490
  },
4463
4491
  {
4464
4492
  "kind": "javascript-module",
4465
- "path": "src/tuix-button/interfaces/tuix-button.interface.ts",
4466
- "declarations": [],
4467
- "exports": []
4468
- },
4469
- {
4470
- "kind": "javascript-module",
4471
- "path": "src/tuix-button/stories/tuix-button.stories.ts",
4493
+ "path": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts",
4472
4494
  "declarations": [
4473
4495
  {
4474
4496
  "kind": "variable",
@@ -4476,15 +4498,15 @@
4476
4498
  "type": {
4477
4499
  "text": "object"
4478
4500
  },
4479
- "default": "{\n title: 'TuixButton',\n component: 'tuix-button',\n argTypes: {\n value: {\n control: 'text',\n },\n variant: {\n control: 'inline-radio',\n options: Object.values(MainVariant),\n },\n iconLeft: {\n control: 'select',\n options: ['', ...[...Object.values(IconName), null]],\n },\n iconRight: {\n control: 'select',\n options: ['', ...[...Object.values(IconName), null]],\n },\n disabled: { control: 'boolean' },\n dark: { control: 'boolean' },\n full: { control: 'boolean' },\n onClick: { action: 'customClick' },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"width:100%; height:100vh; ${args.dark\n ? `background-color: ${Palette.BLACK};`\n : ''}\"\n >\n <div style=\"width:50%; margin:auto; height:100%; position:relative;\">\n <tuix-button\n style=\"width:100%; height:20%; text-align:center; position:absolute; top:50%;\"\n .variant=${args.variant}\n .iconLeft=${args.iconLeft}\n .iconRight=${args.iconRight}\n ?disabled=${args.disabled}\n ?dark=${args.dark}\n ?full=${args.full}\n @customClick=${(e: CustomEventTuixButton) => args.onClick?.(e)}\n >\n ${args.value}\n </tuix-button>\n </div>\n </div>\n `,\n}"
4501
+ "default": "{\n title: 'TuixDropdown',\n component: 'tuix-dropdown',\n argTypes: {\n value: { control: 'text' },\n\n options: {\n control: 'select',\n options: ['fruits', 'countries'],\n mapping: {\n fruits: fruits,\n countries: countryPhoneArray,\n },\n },\n disabled: {\n control: 'boolean',\n },\n placeholder: { control: 'text' },\n title: { control: 'text' },\n description: { control: 'text' },\n descriptionType: {\n control: 'select',\n options: [...Object.values(DescriptionType), null],\n },\n dark: {\n control: 'boolean',\n },\n type: {\n control: 'select',\n options: [...Object.values(DropdownType)],\n },\n onInputSingle: { action: 'input-single' },\n onSelect: { action: 'select' },\n },\n render: (args: ArgTypes) => html`<div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-dropdown\n ?disabled=\"${args.disabled}\"\n .value=\"${args.value}\"\n .options=\"${args.options}\"\n placeholder=\"${args.placeholder}\"\n title=\"${args.title}\"\n .description=\"${args.description}\"\n descriptionType=\"${args.descriptionType}\"\n ?dark=\"${args.dark}\"\n .type=\"${args.type}\"\n @input-single=\"${args.onInputSingle}\"\n @select=\"${args.onSelect}\"\n >\n </tuix-dropdown>\n </div>`,\n}"
4480
4502
  },
4481
4503
  {
4482
4504
  "kind": "variable",
4483
- "name": "Button",
4505
+ "name": "tuixDropdownExample",
4484
4506
  "type": {
4485
4507
  "text": "Story"
4486
4508
  },
4487
- "default": "{\n args: {\n value: 'Click me',\n variant: MainVariant.PRIMARY,\n disabled: false,\n dark: false,\n full: false,\n iconLeft: null,\n iconRight: null,\n },\n}"
4509
+ "default": "{\n args: {\n value: 'apple2',\n disabled: false,\n title: 'Title',\n dark: false,\n options: [\n 'apple',\n 'orange',\n 'tomato',\n 'apple2',\n 'orange2',\n 'tomato2',\n 'apple3',\n 'orange3',\n 'tomato3',\n ],\n type: DropdownType.SINGLE,\n },\n}"
4488
4510
  }
4489
4511
  ],
4490
4512
  "exports": [
@@ -4493,15 +4515,15 @@
4493
4515
  "name": "default",
4494
4516
  "declaration": {
4495
4517
  "name": "meta",
4496
- "module": "src/tuix-button/stories/tuix-button.stories.ts"
4518
+ "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
4497
4519
  }
4498
4520
  },
4499
4521
  {
4500
4522
  "kind": "js",
4501
- "name": "Button",
4523
+ "name": "tuixDropdownExample",
4502
4524
  "declaration": {
4503
- "name": "Button",
4504
- "module": "src/tuix-button/stories/tuix-button.stories.ts"
4525
+ "name": "tuixDropdownExample",
4526
+ "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
4505
4527
  }
4506
4528
  }
4507
4529
  ]
@@ -4594,59 +4616,37 @@
4594
4616
  },
4595
4617
  {
4596
4618
  "kind": "javascript-module",
4597
- "path": "src/tuix-dropdown/enums/tuix-dropdown.enums.ts",
4598
- "declarations": [],
4599
- "exports": []
4600
- },
4601
- {
4602
- "kind": "javascript-module",
4603
- "path": "src/tuix-dropdown/interfaces/tuix-dropdown.interface.ts",
4604
- "declarations": [],
4605
- "exports": []
4606
- },
4607
- {
4608
- "kind": "javascript-module",
4609
- "path": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts",
4619
+ "path": "src/tuix-button/enums/tuix-button.enums.ts",
4610
4620
  "declarations": [
4611
4621
  {
4612
4622
  "kind": "variable",
4613
- "name": "meta",
4614
- "type": {
4615
- "text": "object"
4616
- },
4617
- "default": "{\n title: 'TuixDropdown',\n component: 'tuix-dropdown',\n argTypes: {\n value: {\n control: 'object',\n },\n options: {\n control: 'object',\n },\n disabled: {\n control: 'boolean',\n },\n placeholder: {\n control: 'text',\n },\n title: {\n control: 'text',\n },\n description: {\n control: 'text',\n },\n descriptionType: {\n control: 'select',\n options: [...Object.values(DescriptionType), null],\n },\n dark: {\n control: 'boolean',\n },\n type: {\n control: 'select',\n options: [...Object.values(DropdownType)],\n },\n onInputSingle: { action: 'input-single' },\n onSelect: { action: 'select' },\n },\n render: (args: ArgTypes) => html` <div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-dropdown\n ?disabled=\"${args.disabled}\"\n .value=\"${args.value}\"\n .options=\"${args.options}\"\n placeholder=\"${args.placeholder}\"\n title=\"${args.title}\"\n .description=\"${args.description}\"\n descriptionType=\"${args.descriptionType}\"\n ?dark=\"${args.dark}\"\n .type=\"${args.type}\"\n @input-single=\"${args.onInputSingle}\"\n @select=\"${args.onSelect}\"\n >\n </tuix-dropdown>\n </div>`,\n}"
4618
- },
4619
- {
4620
- "kind": "variable",
4621
- "name": "tuixDropdownObjectList",
4623
+ "name": "buttonTextColor",
4622
4624
  "type": {
4623
- "text": "Story"
4625
+ "text": "Record<MainVariant, string>"
4624
4626
  },
4625
- "default": "{\n args: {\n value: '458ac6ca-9a57-48c5-8abf-768460397607',\n // value: { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' }, // This works too\n disabled: false,\n title: 'Title',\n dark: false,\n options: [\n { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397601' },\n { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397602' },\n { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397603' },\n { name: 'apple2', value: '458ac6ca-9a57-48c5-8abf-768460397604' },\n { name: 'orange2', value: '458ac6ca-9a57-48c5-8abf-768460397605' },\n { name: 'tomato2', value: '458ac6ca-9a57-48c5-8abf-768460397606' },\n { name: 'apple', value: '458ac6ca-9a57-48c5-8abf-768460397607' },\n { name: 'orange', value: '458ac6ca-9a57-48c5-8abf-768460397608' },\n { name: 'tomato', value: '458ac6ca-9a57-48c5-8abf-768460397609' },\n ],\n type: DropdownType.SEARCH,\n },\n}"
4627
+ "default": "{\n [MainVariant.PRIMARY]: Palette.WHITE,\n [MainVariant.SECONDARY]: Palette.MAIN,\n}"
4626
4628
  }
4627
4629
  ],
4628
4630
  "exports": [
4629
4631
  {
4630
4632
  "kind": "js",
4631
- "name": "default",
4632
- "declaration": {
4633
- "name": "meta",
4634
- "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
4635
- }
4636
- },
4637
- {
4638
- "kind": "js",
4639
- "name": "tuixDropdownObjectList",
4633
+ "name": "buttonTextColor",
4640
4634
  "declaration": {
4641
- "name": "tuixDropdownObjectList",
4642
- "module": "src/tuix-dropdown/stories/tuix-dropdown-object-list.stories.ts"
4635
+ "name": "buttonTextColor",
4636
+ "module": "src/tuix-button/enums/tuix-button.enums.ts"
4643
4637
  }
4644
4638
  }
4645
4639
  ]
4646
4640
  },
4647
4641
  {
4648
4642
  "kind": "javascript-module",
4649
- "path": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts",
4643
+ "path": "src/tuix-button/interfaces/tuix-button.interface.ts",
4644
+ "declarations": [],
4645
+ "exports": []
4646
+ },
4647
+ {
4648
+ "kind": "javascript-module",
4649
+ "path": "src/tuix-button/stories/tuix-button.stories.ts",
4650
4650
  "declarations": [
4651
4651
  {
4652
4652
  "kind": "variable",
@@ -4654,15 +4654,15 @@
4654
4654
  "type": {
4655
4655
  "text": "object"
4656
4656
  },
4657
- "default": "{\n title: 'TuixDropdown',\n component: 'tuix-dropdown',\n argTypes: {\n value: { control: 'text' },\n\n options: {\n control: 'select',\n options: ['fruits', 'countries'],\n mapping: {\n fruits: fruits,\n countries: countryPhoneArray,\n },\n },\n disabled: {\n control: 'boolean',\n },\n placeholder: { control: 'text' },\n title: { control: 'text' },\n description: { control: 'text' },\n descriptionType: {\n control: 'select',\n options: [...Object.values(DescriptionType), null],\n },\n dark: {\n control: 'boolean',\n },\n type: {\n control: 'select',\n options: [...Object.values(DropdownType)],\n },\n onInputSingle: { action: 'input-single' },\n onSelect: { action: 'select' },\n },\n render: (args: ArgTypes) => html`<div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-dropdown\n ?disabled=\"${args.disabled}\"\n .value=\"${args.value}\"\n .options=\"${args.options}\"\n placeholder=\"${args.placeholder}\"\n title=\"${args.title}\"\n .description=\"${args.description}\"\n descriptionType=\"${args.descriptionType}\"\n ?dark=\"${args.dark}\"\n .type=\"${args.type}\"\n @input-single=\"${args.onInputSingle}\"\n @select=\"${args.onSelect}\"\n >\n </tuix-dropdown>\n </div>`,\n}"
4657
+ "default": "{\n title: 'TuixButton',\n component: 'tuix-button',\n argTypes: {\n value: {\n control: 'text',\n },\n variant: {\n control: 'inline-radio',\n options: Object.values(MainVariant),\n },\n iconLeft: {\n control: 'select',\n options: ['', ...[...Object.values(IconName), null]],\n },\n iconRight: {\n control: 'select',\n options: ['', ...[...Object.values(IconName), null]],\n },\n disabled: { control: 'boolean' },\n dark: { control: 'boolean' },\n full: { control: 'boolean' },\n onClick: { action: 'customClick' },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"width:100%; height:100vh; ${args.dark\n ? `background-color: ${Palette.BLACK};`\n : ''}\"\n >\n <div style=\"width:50%; margin:auto; height:100%; position:relative;\">\n <tuix-button\n style=\"width:100%; height:20%; text-align:center; position:absolute; top:50%;\"\n .variant=${args.variant}\n .iconLeft=${args.iconLeft}\n .iconRight=${args.iconRight}\n ?disabled=${args.disabled}\n ?dark=${args.dark}\n ?full=${args.full}\n @customClick=${(e: CustomEventTuixButton) => args.onClick?.(e)}\n >\n ${args.value}\n </tuix-button>\n </div>\n </div>\n `,\n}"
4658
4658
  },
4659
4659
  {
4660
4660
  "kind": "variable",
4661
- "name": "tuixDropdownExample",
4661
+ "name": "Button",
4662
4662
  "type": {
4663
4663
  "text": "Story"
4664
4664
  },
4665
- "default": "{\n args: {\n value: 'apple2',\n disabled: false,\n title: 'Title',\n dark: false,\n options: [\n 'apple',\n 'orange',\n 'tomato',\n 'apple2',\n 'orange2',\n 'tomato2',\n 'apple3',\n 'orange3',\n 'tomato3',\n ],\n type: DropdownType.SINGLE,\n },\n}"
4665
+ "default": "{\n args: {\n value: 'Click me',\n variant: MainVariant.PRIMARY,\n disabled: false,\n dark: false,\n full: false,\n iconLeft: null,\n iconRight: null,\n },\n}"
4666
4666
  }
4667
4667
  ],
4668
4668
  "exports": [
@@ -4671,15 +4671,15 @@
4671
4671
  "name": "default",
4672
4672
  "declaration": {
4673
4673
  "name": "meta",
4674
- "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
4674
+ "module": "src/tuix-button/stories/tuix-button.stories.ts"
4675
4675
  }
4676
4676
  },
4677
4677
  {
4678
4678
  "kind": "js",
4679
- "name": "tuixDropdownExample",
4679
+ "name": "Button",
4680
4680
  "declaration": {
4681
- "name": "tuixDropdownExample",
4682
- "module": "src/tuix-dropdown/stories/tuix-dropdown.stories.ts"
4681
+ "name": "Button",
4682
+ "module": "src/tuix-button/stories/tuix-button.stories.ts"
4683
4683
  }
4684
4684
  }
4685
4685
  ]
@@ -4788,30 +4788,6 @@
4788
4788
  }
4789
4789
  ]
4790
4790
  },
4791
- {
4792
- "kind": "javascript-module",
4793
- "path": "src/tuix-input/interfaces/tuix-input.interface.ts",
4794
- "declarations": [
4795
- {
4796
- "kind": "variable",
4797
- "name": "InputState",
4798
- "type": {
4799
- "text": "object"
4800
- },
4801
- "default": "{\n INACTIVE: 'inactive',\n ACTIVE: 'active',\n DISABLED: 'disabled',\n}"
4802
- }
4803
- ],
4804
- "exports": [
4805
- {
4806
- "kind": "js",
4807
- "name": "InputState",
4808
- "declaration": {
4809
- "name": "InputState",
4810
- "module": "src/tuix-input/interfaces/tuix-input.interface.ts"
4811
- }
4812
- }
4813
- ]
4814
- },
4815
4791
  {
4816
4792
  "kind": "javascript-module",
4817
4793
  "path": "src/tuix-input/enums/tuix-input.enums.ts",
@@ -4870,47 +4846,31 @@
4870
4846
  },
4871
4847
  {
4872
4848
  "kind": "javascript-module",
4873
- "path": "src/tuix-input/stories/tuix-input.stories.ts",
4849
+ "path": "src/tuix-input/interfaces/tuix-input.interface.ts",
4874
4850
  "declarations": [
4875
4851
  {
4876
4852
  "kind": "variable",
4877
- "name": "meta",
4853
+ "name": "InputState",
4878
4854
  "type": {
4879
4855
  "text": "object"
4880
4856
  },
4881
- "default": "{\n title: 'TuixInput',\n component: 'tuix-input',\n argTypes: {\n value: {\n control: 'text',\n },\n iconRight: {\n control: 'select',\n options: [...Object.values(IconName), null],\n },\n disabled: {\n control: 'boolean',\n },\n readonly: {\n control: 'boolean',\n },\n placeholder: {\n control: 'text',\n },\n title: {\n control: 'text',\n },\n type: {\n control: 'select',\n options: Object.values(InputType),\n },\n maxlength: {\n control: 'number',\n },\n description: {\n control: 'text',\n },\n descriptionType: {\n control: 'select',\n options: [...Object.values(DescriptionType), null],\n },\n dark: {\n control: 'boolean',\n },\n autofocus: {\n control: 'boolean',\n },\n onBlur: { action: 'on-blur' },\n },\n render: (args: ArgTypes) => html` <div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-input\n style=\"${args.type === InputType.TEXT_AREA\n ? 'min-height: 200px; display: grid;'\n : ''}\"\n iconRight=\"${args.iconRight}\"\n ?disabled=\"${args.disabled}\"\n ?readonly=\"${args.readonly}\"\n value=\"${args.value}\"\n placeholder=\"${args.placeholder}\"\n title=\"${args.title}\"\n type=\"${args.type}\"\n maxlength=\"${args.maxlength}\"\n .description=\"${args.description}\"\n descriptionType=\"${args.descriptionType}\"\n ?dark=\"${args.dark}\"\n ?autofocus=\"${args.autofocus}\"\n @on-blur=\"${args.onBlur}\"\n >\n </tuix-input>\n </div>`,\n}"
4882
- },
4883
- {
4884
- "kind": "variable",
4885
- "name": "tuixInputExample",
4886
- "type": {
4887
- "text": "Story"
4888
- },
4889
- "default": "{\n args: {\n value: '',\n disabled: false,\n title: 'Title',\n type: InputType.TEXT,\n maxlength: 255,\n dark: false,\n autofocus: false,\n readonly: false,\n },\n}"
4857
+ "default": "{\n INACTIVE: 'inactive',\n ACTIVE: 'active',\n DISABLED: 'disabled',\n}"
4890
4858
  }
4891
4859
  ],
4892
4860
  "exports": [
4893
4861
  {
4894
4862
  "kind": "js",
4895
- "name": "default",
4896
- "declaration": {
4897
- "name": "meta",
4898
- "module": "src/tuix-input/stories/tuix-input.stories.ts"
4899
- }
4900
- },
4901
- {
4902
- "kind": "js",
4903
- "name": "tuixInputExample",
4863
+ "name": "InputState",
4904
4864
  "declaration": {
4905
- "name": "tuixInputExample",
4906
- "module": "src/tuix-input/stories/tuix-input.stories.ts"
4865
+ "name": "InputState",
4866
+ "module": "src/tuix-input/interfaces/tuix-input.interface.ts"
4907
4867
  }
4908
4868
  }
4909
4869
  ]
4910
4870
  },
4911
4871
  {
4912
4872
  "kind": "javascript-module",
4913
- "path": "src/tuix-link/stories/tuix-link.stories.ts",
4873
+ "path": "src/tuix-input/stories/tuix-input.stories.ts",
4914
4874
  "declarations": [
4915
4875
  {
4916
4876
  "kind": "variable",
@@ -4918,15 +4878,15 @@
4918
4878
  "type": {
4919
4879
  "text": "object"
4920
4880
  },
4921
- "default": "{\n title: 'TuixLink',\n component: 'tuix-link',\n argTypes: {\n value: { control: 'text' },\n href: { control: 'text' },\n target: {\n control: 'select',\n options: Object.values(LinkTarget),\n },\n variant: {\n control: 'inline-radio',\n options: Object.values(MainVariant),\n },\n disabled: {\n control: 'boolean',\n },\n dark: {\n control: 'boolean',\n },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"display: flex; flex-direction:column; gap:20px; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\n ${args.variant === MainVariant.SECONDARY\n ? `background-color: ${Palette.MAIN};`\n : ''}\"\n >\n <tuix-link\n href=\"${args.href}\"\n target=\"${args.target}\"\n variant=\"${args.variant}\"\n ?disabled=\"${args.disabled}\"\n ?dark=\"${args.dark}\"\n >\n <tuix-text size=\"${TextSize.Button}\"> ${args.value} </tuix-text>\n </tuix-link>\n <tuix-link\n href=\"${args.href}\"\n target=\"${args.target}\"\n variant=\"${args.variant}\"\n ?disabled=\"${args.disabled}\"\n ?dark=\"${args.dark}\"\n >\n ${args.value}\n </tuix-link>\n </div>\n `,\n}"
4881
+ "default": "{\n title: 'TuixInput',\n component: 'tuix-input',\n argTypes: {\n value: {\n control: 'text',\n },\n iconRight: {\n control: 'select',\n options: [...Object.values(IconName), null],\n },\n disabled: {\n control: 'boolean',\n },\n readonly: {\n control: 'boolean',\n },\n placeholder: {\n control: 'text',\n },\n title: {\n control: 'text',\n },\n type: {\n control: 'select',\n options: Object.values(InputType),\n },\n maxlength: {\n control: 'number',\n },\n description: {\n control: 'text',\n },\n descriptionType: {\n control: 'select',\n options: [...Object.values(DescriptionType), null],\n },\n dark: {\n control: 'boolean',\n },\n autofocus: {\n control: 'boolean',\n },\n onBlur: { action: 'on-blur' },\n },\n render: (args: ArgTypes) => html` <div\n style=\"display: flex; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\"\n >\n <tuix-input\n style=\"${args.type === InputType.TEXT_AREA\n ? 'min-height: 200px; display: grid;'\n : ''}\"\n iconRight=\"${args.iconRight}\"\n ?disabled=\"${args.disabled}\"\n ?readonly=\"${args.readonly}\"\n value=\"${args.value}\"\n placeholder=\"${args.placeholder}\"\n title=\"${args.title}\"\n type=\"${args.type}\"\n maxlength=\"${args.maxlength}\"\n .description=\"${args.description}\"\n descriptionType=\"${args.descriptionType}\"\n ?dark=\"${args.dark}\"\n ?autofocus=\"${args.autofocus}\"\n @on-blur=\"${args.onBlur}\"\n >\n </tuix-input>\n </div>`,\n}"
4922
4882
  },
4923
4883
  {
4924
4884
  "kind": "variable",
4925
- "name": "linkExample",
4885
+ "name": "tuixInputExample",
4926
4886
  "type": {
4927
4887
  "text": "Story"
4928
4888
  },
4929
- "default": "{\n args: {\n value: 'Test link',\n href: 'https://google.com',\n target: LinkTarget.BLANK,\n variant: MainVariant.PRIMARY,\n disabled: false,\n dark: false,\n },\n}"
4889
+ "default": "{\n args: {\n value: '',\n disabled: false,\n title: 'Title',\n type: InputType.TEXT,\n maxlength: 255,\n dark: false,\n autofocus: false,\n readonly: false,\n },\n}"
4930
4890
  }
4931
4891
  ],
4932
4892
  "exports": [
@@ -4935,15 +4895,15 @@
4935
4895
  "name": "default",
4936
4896
  "declaration": {
4937
4897
  "name": "meta",
4938
- "module": "src/tuix-link/stories/tuix-link.stories.ts"
4898
+ "module": "src/tuix-input/stories/tuix-input.stories.ts"
4939
4899
  }
4940
4900
  },
4941
4901
  {
4942
4902
  "kind": "js",
4943
- "name": "linkExample",
4903
+ "name": "tuixInputExample",
4944
4904
  "declaration": {
4945
- "name": "linkExample",
4946
- "module": "src/tuix-link/stories/tuix-link.stories.ts"
4905
+ "name": "tuixInputExample",
4906
+ "module": "src/tuix-input/stories/tuix-input.stories.ts"
4947
4907
  }
4948
4908
  }
4949
4909
  ]
@@ -4956,7 +4916,7 @@
4956
4916
  },
4957
4917
  {
4958
4918
  "kind": "javascript-module",
4959
- "path": "src/tuix-modal/stories/tuix-modal.stories.ts",
4919
+ "path": "src/tuix-link/stories/tuix-link.stories.ts",
4960
4920
  "declarations": [
4961
4921
  {
4962
4922
  "kind": "variable",
@@ -4964,15 +4924,15 @@
4964
4924
  "type": {
4965
4925
  "text": "object"
4966
4926
  },
4967
- "default": "{\n title: 'TuixModal',\n component: 'tuix-modal',\n argTypes: {\n dark: {\n control: 'boolean',\n },\n visible: {\n control: 'boolean',\n },\n onClose: { action: 'on-close' },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"height: 100vh; ${args.dark\n ? `background-color: ${Palette.BLACK};`\n : ''}\"\n >\n <tuix-modal\n ?dark=\"${args.dark}\"\n ?visible=\"${args.visible}\"\n @on-close=\"${args.onClose}\"\n >\n <tuix-text\n slot=\"title\"\n color=${TextVariant.PRIMARY}\n ?dark=${args.dark}\n size=\"${TextSize.S}\"\n >\n Title\n </tuix-text>\n <tuix-text slot=\"body\" ?dark=\"${args.dark}\">\n Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum\n dignissim at orci. Augue vivamus arcu massa porta facilisi.\n </tuix-text>\n <div\n slot=\"actions\"\n style=\"display:flex; gap: 10px; justify-content: flex-end;\n width: 100%;\"\n >\n <tuix-button ?dark=\"${args.dark}\">Action</tuix-button>\n <tuix-button variant=\"${MainVariant.SECONDARY}\" ?dark=\"${args.dark}\"\n >Cancel</tuix-button\n >\n </div>\n </tuix-modal>\n </div>\n `,\n}"
4927
+ "default": "{\n title: 'TuixLink',\n component: 'tuix-link',\n argTypes: {\n value: { control: 'text' },\n href: { control: 'text' },\n target: {\n control: 'select',\n options: Object.values(LinkTarget),\n },\n variant: {\n control: 'inline-radio',\n options: Object.values(MainVariant),\n },\n disabled: {\n control: 'boolean',\n },\n dark: {\n control: 'boolean',\n },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"display: flex; flex-direction:column; gap:20px; justify-content: center; align-items: center; height: 100vh;\n ${args.dark ? `background-color: ${Palette.BLACK};` : ''}\n ${args.variant === MainVariant.SECONDARY\n ? `background-color: ${Palette.MAIN};`\n : ''}\"\n >\n <tuix-link\n href=\"${args.href}\"\n target=\"${args.target}\"\n variant=\"${args.variant}\"\n ?disabled=\"${args.disabled}\"\n ?dark=\"${args.dark}\"\n >\n <tuix-text size=\"${TextSize.Button}\"> ${args.value} </tuix-text>\n </tuix-link>\n <tuix-link\n href=\"${args.href}\"\n target=\"${args.target}\"\n variant=\"${args.variant}\"\n ?disabled=\"${args.disabled}\"\n ?dark=\"${args.dark}\"\n >\n ${args.value}\n </tuix-link>\n </div>\n `,\n}"
4968
4928
  },
4969
4929
  {
4970
4930
  "kind": "variable",
4971
- "name": "modalExample",
4931
+ "name": "linkExample",
4972
4932
  "type": {
4973
4933
  "text": "Story"
4974
4934
  },
4975
- "default": "{\n args: {\n dark: false,\n visible: true,\n },\n}"
4935
+ "default": "{\n args: {\n value: 'Test link',\n href: 'https://google.com',\n target: LinkTarget.BLANK,\n variant: MainVariant.PRIMARY,\n disabled: false,\n dark: false,\n },\n}"
4976
4936
  }
4977
4937
  ],
4978
4938
  "exports": [
@@ -4981,15 +4941,15 @@
4981
4941
  "name": "default",
4982
4942
  "declaration": {
4983
4943
  "name": "meta",
4984
- "module": "src/tuix-modal/stories/tuix-modal.stories.ts"
4944
+ "module": "src/tuix-link/stories/tuix-link.stories.ts"
4985
4945
  }
4986
4946
  },
4987
4947
  {
4988
4948
  "kind": "js",
4989
- "name": "modalExample",
4949
+ "name": "linkExample",
4990
4950
  "declaration": {
4991
- "name": "modalExample",
4992
- "module": "src/tuix-modal/stories/tuix-modal.stories.ts"
4951
+ "name": "linkExample",
4952
+ "module": "src/tuix-link/stories/tuix-link.stories.ts"
4993
4953
  }
4994
4954
  }
4995
4955
  ]
@@ -5094,7 +5054,7 @@
5094
5054
  },
5095
5055
  {
5096
5056
  "kind": "javascript-module",
5097
- "path": "src/tuix-table/stories/tuix-table.stories.ts",
5057
+ "path": "src/tuix-modal/stories/tuix-modal.stories.ts",
5098
5058
  "declarations": [
5099
5059
  {
5100
5060
  "kind": "variable",
@@ -5102,15 +5062,15 @@
5102
5062
  "type": {
5103
5063
  "text": "object"
5104
5064
  },
5105
- "default": "{\n title: 'TuixTable',\n component: 'tuix-table',\n argTypes: {\n headers: { control: 'object' },\n data: { control: 'object' },\n paginated: { control: 'boolean' },\n disableMobileTable: { control: 'boolean' },\n showMobileTableInTablet: { control: 'boolean' },\n pageSizeOptions: { control: 'object' },\n totalItems: { control: 'number' },\n currentPage: { control: 'number' },\n currentSize: { control: 'number' },\n isLoadingData: { control: 'boolean' },\n loader: { control: 'object' },\n onNextPage: { action: 'next-page' },\n onPreviousPage: { action: 'previous-page' },\n onPageSizeChange: { action: 'page-size-change' },\n },\n}"
5065
+ "default": "{\n title: 'TuixModal',\n component: 'tuix-modal',\n argTypes: {\n dark: {\n control: 'boolean',\n },\n visible: {\n control: 'boolean',\n },\n onClose: { action: 'on-close' },\n },\n render: (args: ArgTypes) => html`\n <div\n style=\"height: 100vh; ${args.dark\n ? `background-color: ${Palette.BLACK};`\n : ''}\"\n >\n <tuix-modal\n ?dark=\"${args.dark}\"\n ?visible=\"${args.visible}\"\n @on-close=\"${args.onClose}\"\n >\n <tuix-text\n slot=\"title\"\n color=${TextVariant.PRIMARY}\n ?dark=${args.dark}\n size=\"${TextSize.S}\"\n >\n Title\n </tuix-text>\n <tuix-text slot=\"body\" ?dark=\"${args.dark}\">\n Lorem ipsum dolor sit amet consectetur. Sollicitudin id interdum\n dignissim at orci. Augue vivamus arcu massa porta facilisi.\n </tuix-text>\n <div\n slot=\"actions\"\n style=\"display:flex; gap: 10px; justify-content: flex-end;\n width: 100%;\"\n >\n <tuix-button ?dark=\"${args.dark}\">Action</tuix-button>\n <tuix-button variant=\"${MainVariant.SECONDARY}\" ?dark=\"${args.dark}\"\n >Cancel</tuix-button\n >\n </div>\n </tuix-modal>\n </div>\n `,\n}"
5106
5066
  },
5107
5067
  {
5108
5068
  "kind": "variable",
5109
- "name": "tuixTableExample",
5069
+ "name": "modalExample",
5110
5070
  "type": {
5111
5071
  "text": "Story"
5112
5072
  },
5113
- "default": "{\n render: (args: ArgTypes) => Template(args),\n args: {\n headers: defaultHeaderDescriptors,\n data: defaultData,\n paginated: true,\n disableMobileTable: false,\n showMobileTableInTablet: false,\n pageSizeOptions: [5, 10, 20],\n totalItems: 8,\n currentPage: 1,\n currentSize: 5,\n isLoadingData: false,\n loader: {\n size: '30px',\n color: Palette.MAIN,\n visible: true,\n ariaLabel: 'Loading',\n wrapperStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n padding: '48px 0',\n },\n },\n },\n}"
5073
+ "default": "{\n args: {\n dark: false,\n visible: true,\n },\n}"
5114
5074
  }
5115
5075
  ],
5116
5076
  "exports": [
@@ -5119,15 +5079,15 @@
5119
5079
  "name": "default",
5120
5080
  "declaration": {
5121
5081
  "name": "meta",
5122
- "module": "src/tuix-table/stories/tuix-table.stories.ts"
5082
+ "module": "src/tuix-modal/stories/tuix-modal.stories.ts"
5123
5083
  }
5124
5084
  },
5125
5085
  {
5126
5086
  "kind": "js",
5127
- "name": "tuixTableExample",
5087
+ "name": "modalExample",
5128
5088
  "declaration": {
5129
- "name": "tuixTableExample",
5130
- "module": "src/tuix-table/stories/tuix-table.stories.ts"
5089
+ "name": "modalExample",
5090
+ "module": "src/tuix-modal/stories/tuix-modal.stories.ts"
5131
5091
  }
5132
5092
  }
5133
5093
  ]
@@ -5172,6 +5132,46 @@
5172
5132
  }
5173
5133
  ]
5174
5134
  },
5135
+ {
5136
+ "kind": "javascript-module",
5137
+ "path": "src/tuix-table/stories/tuix-table.stories.ts",
5138
+ "declarations": [
5139
+ {
5140
+ "kind": "variable",
5141
+ "name": "meta",
5142
+ "type": {
5143
+ "text": "object"
5144
+ },
5145
+ "default": "{\n title: 'TuixTable',\n component: 'tuix-table',\n argTypes: {\n headers: { control: 'object' },\n data: { control: 'object' },\n paginated: { control: 'boolean' },\n disableMobileTable: { control: 'boolean' },\n showMobileTableInTablet: { control: 'boolean' },\n pageSizeOptions: { control: 'object' },\n totalItems: { control: 'number' },\n currentPage: { control: 'number' },\n currentSize: { control: 'number' },\n isLoadingData: { control: 'boolean' },\n loader: { control: 'object' },\n onNextPage: { action: 'next-page' },\n onPreviousPage: { action: 'previous-page' },\n onPageSizeChange: { action: 'page-size-change' },\n },\n}"
5146
+ },
5147
+ {
5148
+ "kind": "variable",
5149
+ "name": "tuixTableExample",
5150
+ "type": {
5151
+ "text": "Story"
5152
+ },
5153
+ "default": "{\n render: (args: ArgTypes) => Template(args),\n args: {\n headers: defaultHeaderDescriptors,\n data: defaultData,\n paginated: true,\n disableMobileTable: false,\n showMobileTableInTablet: false,\n pageSizeOptions: [5, 10, 20],\n totalItems: 8,\n currentPage: 1,\n currentSize: 5,\n isLoadingData: false,\n loader: {\n size: '30px',\n color: Palette.MAIN,\n visible: true,\n ariaLabel: 'Loading',\n wrapperStyle: {\n width: '100%',\n display: 'flex',\n justifyContent: 'center',\n padding: '48px 0',\n },\n },\n },\n}"
5154
+ }
5155
+ ],
5156
+ "exports": [
5157
+ {
5158
+ "kind": "js",
5159
+ "name": "default",
5160
+ "declaration": {
5161
+ "name": "meta",
5162
+ "module": "src/tuix-table/stories/tuix-table.stories.ts"
5163
+ }
5164
+ },
5165
+ {
5166
+ "kind": "js",
5167
+ "name": "tuixTableExample",
5168
+ "declaration": {
5169
+ "name": "tuixTableExample",
5170
+ "module": "src/tuix-table/stories/tuix-table.stories.ts"
5171
+ }
5172
+ }
5173
+ ]
5174
+ },
5175
5175
  {
5176
5176
  "kind": "javascript-module",
5177
5177
  "path": "src/tuix-text/stories/tuix-text.stories.ts",
@@ -5230,7 +5230,7 @@
5230
5230
  "type": {
5231
5231
  "text": "Record<ToastTypeExcludingNone, string>"
5232
5232
  },
5233
- "default": "{\n [ToastType.TEXT]: Palette.PRIMARY_950,\n [ToastType.WARNING]: DarkPalette.VALIDATION_50,\n [ToastType.ERROR]: DarkPalette.ERROR_50,\n [ToastType.SUCCESS]: DarkPalette.SUCCESS_50,\n}"
5233
+ "default": "{\n [ToastType.TEXT]: DarkPalette.TOAST_TEXT,\n [ToastType.WARNING]: DarkPalette.TOAST_WARNING,\n [ToastType.ERROR]: DarkPalette.TOAST_ERROR,\n [ToastType.SUCCESS]: DarkPalette.TOAST_SUCCESS,\n}"
5234
5234
  },
5235
5235
  {
5236
5236
  "kind": "variable",