@telia/teddy 0.0.21 → 0.0.22

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 (52) hide show
  1. package/dist/components/accordion/accordion-content.d.ts +5 -0
  2. package/dist/components/accordion/accordion-content.js +15 -0
  3. package/dist/components/accordion/accordion-header.d.ts +6 -0
  4. package/dist/components/accordion/accordion-header.js +16 -0
  5. package/dist/components/accordion/accordion-indicator.d.ts +5 -0
  6. package/dist/components/accordion/accordion-indicator.js +16 -0
  7. package/dist/components/accordion/accordion-item.d.ts +8 -0
  8. package/dist/components/accordion/accordion-item.js +15 -0
  9. package/dist/components/accordion/accordion-root.d.ts +15 -0
  10. package/dist/components/accordion/accordion-root.js +39 -0
  11. package/dist/components/accordion/accordion-title.d.ts +7 -0
  12. package/dist/components/accordion/accordion-title.js +15 -0
  13. package/dist/components/accordion/accordion-trigger.d.ts +12 -0
  14. package/dist/components/accordion/accordion-trigger.js +20 -0
  15. package/dist/components/accordion/index.d.ts +29 -2
  16. package/dist/components/accordion/index.js +15 -1
  17. package/dist/components/card/card.d.ts +1 -1
  18. package/dist/components/chip/chip-indicator.d.ts +2 -2
  19. package/dist/components/chip/index.d.ts +2 -2
  20. package/dist/components/drawer/drawer-close.d.ts +15 -0
  21. package/dist/components/drawer/drawer-close.js +22 -0
  22. package/dist/components/drawer/drawer-content.d.ts +22 -0
  23. package/dist/components/drawer/drawer-content.js +25 -0
  24. package/dist/components/drawer/drawer-description.d.ts +9 -0
  25. package/dist/components/drawer/drawer-description.js +19 -0
  26. package/dist/components/drawer/drawer-footer.d.ts +8 -0
  27. package/dist/components/drawer/drawer-footer.js +16 -0
  28. package/dist/components/drawer/drawer-overlay.d.ts +13 -0
  29. package/dist/components/drawer/drawer-overlay.js +26 -0
  30. package/dist/components/drawer/drawer-root.d.ts +29 -0
  31. package/dist/components/drawer/drawer-root.js +11 -0
  32. package/dist/components/drawer/drawer-title.d.ts +9 -0
  33. package/dist/components/drawer/drawer-title.js +17 -0
  34. package/dist/components/drawer/drawer-trigger.d.ts +12 -0
  35. package/dist/components/drawer/drawer-trigger.js +10 -0
  36. package/dist/components/drawer/index.js +20 -0
  37. package/dist/components/index.d.ts +1 -0
  38. package/dist/components/index.js +3 -1
  39. package/dist/components/modal/modal.js +10 -9
  40. package/dist/components/navigation-menu/navigation-menu.d.ts +1 -1
  41. package/dist/components/notification/notification.d.ts +2 -2
  42. package/dist/components/text-field/text-field.d.ts +1 -1
  43. package/dist/components/toggle/toggle.d.ts +2 -2
  44. package/dist/drawer.module-B3QhrxH1.js +14 -0
  45. package/dist/main.js +3 -1
  46. package/dist/style.css +273 -172
  47. package/dist/utils/generate-styling/grid.d.ts +24 -24
  48. package/dist/utils/generate-styling/index.d.ts +16 -16
  49. package/dist/utils/generate-styling/util.d.ts +2 -2
  50. package/package.json +14 -13
  51. package/dist/components/accordion/accordion.d.ts +0 -61
  52. package/dist/components/accordion/accordion.js +0 -93
package/dist/style.css CHANGED
@@ -1,109 +1,104 @@
1
- ._teddy-image_oyxp8_1 {
2
- width: 100%;
3
- max-width: 100%;
4
- height: 100%;
5
- display: block;
6
- font-style: italic;
7
- background-repeat: no-repeat;
8
- }@layer flex {
9
- ._teddy-flex_19teo_2 {
10
- box-sizing: border-box;
11
- display: flex;
12
- justify-content: flex-start;
1
+ @keyframes _teddy-fade-in_1sy9d_1 {
2
+ from {
3
+ opacity: 0;
4
+ }
5
+ to {
6
+ opacity: 1;
13
7
  }
14
- }._teddy-chip__item_1er2j_1 {
15
- font: inherit;
16
- cursor: pointer;
17
- outline: inherit;
18
- border-radius: var(--teddy-border-radius-md);
19
- border: none;
20
- background: var(--teddy-color-background-interactive-transparent);
21
- padding: 0.625rem var(--teddy-spacing-200);
22
- display: inline-flex;
23
- align-items: center;
24
- justify-content: center;
25
- color: var(--teddy-color-text-interactive-primary);
26
- font-weight: var(--teddy-typography-weight-normal);
27
- text-align: center;
28
- line-height: var(--teddy-typography-line-height-loose);
29
- box-sizing: border-box;
30
- position: relative;
31
- overflow: hidden;
32
8
  }
33
- ._teddy-chip__item_1er2j_1:focus {
34
- outline: var(--teddy-color-border-interactive-focus) auto var(--teddy-border-width-sm);
35
- outline-offset: var(--teddy-spacing-50);
9
+ @keyframes _teddy-fade-out_1sy9d_1 {
10
+ from {
11
+ opacity: 1;
12
+ }
13
+ to {
14
+ opacity: 0;
15
+ }
36
16
  }
37
- ._teddy-chip__item_1er2j_1:focus:not(:focus-visible) {
38
- outline: none;
17
+ ._teddy-drawer__overlay_1sy9d_17 {
18
+ position: fixed;
19
+ inset: 0;
20
+ display: grid;
21
+ place-items: center;
39
22
  }
40
- ._teddy-chip__item_1er2j_1::before, ._teddy-chip__item_1er2j_1::after {
23
+ ._teddy-drawer__overlay_1sy9d_17::before {
24
+ position: fixed;
41
25
  content: "";
42
- display: block;
43
26
  inset: 0;
44
- position: absolute;
45
- }
46
- ._teddy-chip__item--unavailable_1er2j_33::after {
47
- opacity: 1;
48
- left: calc(50% - var(--teddy-border-width-xs) / 2);
49
- top: -50%;
50
- background: var(--teddy-color-text-interactive-primary);
51
- width: var(--teddy-border-width-xs);
52
- height: 200%;
53
- transform: rotate(-60deg);
54
- transform-origin: center;
55
- }
56
- ._teddy-chip__item--unavailable_1er2j_33[data-state=on]::after {
57
- background: var(--teddy-color-text-interactive-on-primary);
58
- }
59
- ._teddy-chip__item_1er2j_1::before {
60
- border-radius: inherit;
61
- opacity: 1;
62
- outline: var(--teddy-color-border-interactive-primary) auto var(--teddy-border-width-xs);
63
- }
64
- ._teddy-chip__item_1er2j_1:hover::before:not(:disabled) {
65
- outline-width: var(--teddy-border-width-sm);
66
- outline-offset: calc(var(--teddy-border-width-xs) * -1);
67
- }
68
- ._teddy-chip__item_1er2j_1[data-state=off]:hover {
69
- background-color: var(--teddy-color-background-interactive-transparent-hover);
70
- color: var(--teddy-color-text-interactive-primary-hover);
71
- }
72
- ._teddy-chip__item_1er2j_1[data-state=off]:active {
73
- background-color: var(--teddy-color-background-interactive-transparent-active);
74
- color: var(--teddy-color-text-interactive-primary-active);
75
- }
76
- ._teddy-chip__item_1er2j_1[data-state=off]:disabled {
77
- background-color: var(--teddy-color-background-interactive-transparent);
78
- color: var(--teddy-color-text-weak);
79
- }
80
- ._teddy-chip__item_1er2j_1[data-state=on] {
81
- background-color: var(--teddy-color-background-interactive-primary);
82
- color: var(--teddy-color-text-interactive-on-primary);
83
- font-weight: var(--teddy-typography-weight-medium);
84
- }
85
- ._teddy-chip__item_1er2j_1[data-state=on]:hover {
86
- background-color: var(--teddy-color-background-interactive-primary-hover);
27
+ background-color: var(--teddy-color-overlay-default);
87
28
  }
88
- ._teddy-chip__item_1er2j_1[data-state=on]:active {
89
- background-color: var(--teddy-color-background-interactive-primary-active);
29
+ ._teddy-drawer__overlay--container_1sy9d_29 {
30
+ position: absolute;
90
31
  }
91
- ._teddy-chip__item_1er2j_1[data-state=on]:disabled {
92
- background-color: var(--teddy-color-background-interactive-disabled);
93
- color: var(--teddy-color-text-weak);
32
+ ._teddy-drawer__overlay--container_1sy9d_29::before {
33
+ position: absolute;
94
34
  }
95
- ._teddy-chip__item_1er2j_1[data-state=on] ._teddy-chip__indicator_1er2j_82 {
96
- display: unset;
35
+ ._teddy-drawer__overlay--container_1sy9d_29 ._teddy-drawer__content_1sy9d_35 {
36
+ position: absolute;
97
37
  }
98
- ._teddy-chip__item_1er2j_1:disabled {
99
- cursor: not-allowed;
100
- color: var(--teddy-color-text-weak);
38
+ ._teddy-drawer__content_1sy9d_35 {
39
+ background-color: var(--teddy-color-background-primary);
40
+ box-shadow: var(--teddy-shadow-lg);
41
+ position: fixed;
42
+ overflow: hidden;
43
+ inset: 0 0 0 auto;
44
+ max-width: 500px;
45
+ padding: var(--teddy-spacing-300);
46
+ display: flex;
47
+ flex-direction: column;
48
+ gap: var(--teddy-spacing-200);
101
49
  }
102
- ._teddy-chip__item_1er2j_1:disabled::before {
103
- outline-color: var(--teddy-color-border-medium);
50
+ ._teddy-drawer__close--floating_1sy9d_50 {
51
+ position: absolute;
52
+ top: var(--teddy-spacing-250);
53
+ right: var(--teddy-spacing-250);
104
54
  }
105
- ._teddy-chip__indicator_1er2j_82 {
106
- display: none;
55
+ @media (prefers-reduced-motion: no-preference) {
56
+ @keyframes _drawer-overlay-no-op_1sy9d_1 {
57
+ from {
58
+ opacity: 1;
59
+ }
60
+ to {
61
+ opacity: 1;
62
+ }
63
+ }
64
+ @keyframes _drawer-content-show_1sy9d_1 {
65
+ from {
66
+ opacity: 0;
67
+ transform: translateX(24rem);
68
+ }
69
+ to {
70
+ opacity: 1;
71
+ transform: translateX(0px);
72
+ }
73
+ }
74
+ @keyframes _drawer-content-hide_1sy9d_1 {
75
+ from {
76
+ opacity: 1;
77
+ transform: translateX(0px);
78
+ }
79
+ to {
80
+ opacity: 0;
81
+ transform: translateX(24rem);
82
+ }
83
+ }
84
+ ._teddy-drawer__overlay_1sy9d_17 {
85
+ /* Keep the overlay mounted until the children have animated */
86
+ }
87
+ ._teddy-drawer__overlay_1sy9d_17:where([data-state=closed]) {
88
+ animation: _drawer-overlay-no-op_1sy9d_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
89
+ }
90
+ ._teddy-drawer__overlay_1sy9d_17:where([data-state=open])::before {
91
+ animation: _teddy-fade-in_1sy9d_1 500ms cubic-bezier(0.16, 1, 0.3, 1);
92
+ }
93
+ ._teddy-drawer__overlay_1sy9d_17:where([data-state=closed])::before {
94
+ animation: _teddy-fade-out_1sy9d_1 400ms cubic-bezier(0.16, 1, 0.3, 1);
95
+ }
96
+ ._teddy-drawer__content_1sy9d_35:where([data-state=open]) {
97
+ animation: _drawer-content-show_1sy9d_1 450ms cubic-bezier(0.16, 1, 0.3, 1);
98
+ }
99
+ ._teddy-drawer__content_1sy9d_35:where([data-state=closed]) {
100
+ animation: _drawer-content-hide_1sy9d_1 350ms cubic-bezier(0.16, 1, 0.3, 1);
101
+ }
107
102
  }@layer icon {
108
103
  ._teddy-icon_1rwgf_2 {
109
104
  display: inline;
@@ -144,84 +139,6 @@
144
139
  font-family: var(--teddy-typography-family-default);
145
140
  gap: var(--teddy-spacing-100);
146
141
  }
147
- }@layer text {
148
- ._teddy-text_15w9u_2 {
149
- color: inherit;
150
- display: block;
151
- margin: 0;
152
- hyphens: none;
153
- }
154
- ._teddy-text--disabled_15w9u_8 {
155
- color: var(--teddy-color-text-weak);
156
- }
157
- ._teddy-text--hyphens_15w9u_11 {
158
- hyphens: auto;
159
- }
160
- ._teddy-text--paragraph-100_15w9u_14 {
161
- font-family: var(--teddy-typography-family-default);
162
- font-weight: var(--teddy-typography-weight-normal);
163
- font-size: var(--teddy-typography-scale-100);
164
- line-height: var(--teddy-typography-line-height-loose);
165
- }
166
- ._teddy-text--paragraph-100-medium_15w9u_20 {
167
- font-family: var(--teddy-typography-family-default);
168
- font-weight: var(--teddy-typography-weight-normal);
169
- font-size: var(--teddy-typography-scale-100);
170
- line-height: var(--teddy-typography-line-height-loose);
171
- font-weight: var(--teddy-typography-weight-medium);
172
- }
173
- ._teddy-text--paragraph-100-bold_15w9u_27 {
174
- font-family: var(--teddy-typography-family-default);
175
- font-weight: var(--teddy-typography-weight-normal);
176
- font-size: var(--teddy-typography-scale-100);
177
- line-height: var(--teddy-typography-line-height-loose);
178
- font-weight: var(--teddy-typography-weight-bold);
179
- }
180
- ._teddy-text--paragraph-200_15w9u_34 {
181
- font-family: var(--teddy-typography-family-default);
182
- font-weight: var(--teddy-typography-weight-normal);
183
- font-size: var(--teddy-typography-scale-100);
184
- line-height: var(--teddy-typography-line-height-looser);
185
- }
186
- ._teddy-text--preamble-100_15w9u_40 {
187
- font-family: var(--teddy-typography-family-default);
188
- font-weight: var(--teddy-typography-weight-normal);
189
- font-size: var(--teddy-typography-scale-200);
190
- line-height: var(--teddy-typography-line-height-loose);
191
- }
192
- ._teddy-text--preamble-200_15w9u_46 {
193
- font-family: var(--teddy-typography-family-default);
194
- font-weight: var(--teddy-typography-weight-normal);
195
- font-size: clamp(var(--teddy-typography-scale-150), 3vw, var(--teddy-typography-scale-400));
196
- line-height: var(--teddy-typography-line-height-loose);
197
- }
198
- ._teddy-text--additional-100_15w9u_52 {
199
- font-family: var(--teddy-typography-family-default);
200
- font-weight: var(--teddy-typography-weight-normal);
201
- font-size: var(--teddy-typography-scale-75);
202
- line-height: var(--teddy-typography-line-height-loose);
203
- }
204
- ._teddy-text--additional-100-medium_15w9u_58 {
205
- font-family: var(--teddy-typography-family-default);
206
- font-weight: var(--teddy-typography-weight-normal);
207
- font-size: var(--teddy-typography-scale-75);
208
- line-height: var(--teddy-typography-line-height-loose);
209
- font-weight: var(--teddy-typography-weight-medium);
210
- }
211
- ._teddy-text--overline-100_15w9u_65 {
212
- font-family: var(--teddy-typography-family-default);
213
- font-size: var(--teddy-typography-scale-75);
214
- letter-spacing: var(--teddy-spacing-10);
215
- line-height: var(--teddy-typography-line-height-tight);
216
- text-transform: uppercase;
217
- }
218
- ._teddy-text--overline-200_15w9u_72 {
219
- font-family: var(--teddy-typography-family-default);
220
- font-size: clamp(var(--teddy-typography-scale-75), 3vw, var(--teddy-typography-scale-100));
221
- letter-spacing: var(--teddy-spacing-10);
222
- line-height: var(--teddy-typography-line-height-tight);
223
- text-transform: uppercase;
224
- }
225
142
  }._teddy-spinner--xxs_ywden_1 {
226
143
  height: var(--teddy-spacing-250);
227
144
  width: var(--teddy-spacing-250);
@@ -540,6 +457,90 @@
540
457
  ._teddy-button--icon-only_1biph_56 ._teddy-button__loading_1biph_242 {
541
458
  background-color: var(--teddy-color-gray-100);
542
459
  }
460
+ }@layer text {
461
+ ._teddy-text_15w9u_2 {
462
+ color: inherit;
463
+ display: block;
464
+ margin: 0;
465
+ hyphens: none;
466
+ }
467
+ ._teddy-text--disabled_15w9u_8 {
468
+ color: var(--teddy-color-text-weak);
469
+ }
470
+ ._teddy-text--hyphens_15w9u_11 {
471
+ hyphens: auto;
472
+ }
473
+ ._teddy-text--paragraph-100_15w9u_14 {
474
+ font-family: var(--teddy-typography-family-default);
475
+ font-weight: var(--teddy-typography-weight-normal);
476
+ font-size: var(--teddy-typography-scale-100);
477
+ line-height: var(--teddy-typography-line-height-loose);
478
+ }
479
+ ._teddy-text--paragraph-100-medium_15w9u_20 {
480
+ font-family: var(--teddy-typography-family-default);
481
+ font-weight: var(--teddy-typography-weight-normal);
482
+ font-size: var(--teddy-typography-scale-100);
483
+ line-height: var(--teddy-typography-line-height-loose);
484
+ font-weight: var(--teddy-typography-weight-medium);
485
+ }
486
+ ._teddy-text--paragraph-100-bold_15w9u_27 {
487
+ font-family: var(--teddy-typography-family-default);
488
+ font-weight: var(--teddy-typography-weight-normal);
489
+ font-size: var(--teddy-typography-scale-100);
490
+ line-height: var(--teddy-typography-line-height-loose);
491
+ font-weight: var(--teddy-typography-weight-bold);
492
+ }
493
+ ._teddy-text--paragraph-200_15w9u_34 {
494
+ font-family: var(--teddy-typography-family-default);
495
+ font-weight: var(--teddy-typography-weight-normal);
496
+ font-size: var(--teddy-typography-scale-100);
497
+ line-height: var(--teddy-typography-line-height-looser);
498
+ }
499
+ ._teddy-text--preamble-100_15w9u_40 {
500
+ font-family: var(--teddy-typography-family-default);
501
+ font-weight: var(--teddy-typography-weight-normal);
502
+ font-size: var(--teddy-typography-scale-200);
503
+ line-height: var(--teddy-typography-line-height-loose);
504
+ }
505
+ ._teddy-text--preamble-200_15w9u_46 {
506
+ font-family: var(--teddy-typography-family-default);
507
+ font-weight: var(--teddy-typography-weight-normal);
508
+ font-size: clamp(var(--teddy-typography-scale-150), 3vw, var(--teddy-typography-scale-400));
509
+ line-height: var(--teddy-typography-line-height-loose);
510
+ }
511
+ ._teddy-text--additional-100_15w9u_52 {
512
+ font-family: var(--teddy-typography-family-default);
513
+ font-weight: var(--teddy-typography-weight-normal);
514
+ font-size: var(--teddy-typography-scale-75);
515
+ line-height: var(--teddy-typography-line-height-loose);
516
+ }
517
+ ._teddy-text--additional-100-medium_15w9u_58 {
518
+ font-family: var(--teddy-typography-family-default);
519
+ font-weight: var(--teddy-typography-weight-normal);
520
+ font-size: var(--teddy-typography-scale-75);
521
+ line-height: var(--teddy-typography-line-height-loose);
522
+ font-weight: var(--teddy-typography-weight-medium);
523
+ }
524
+ ._teddy-text--overline-100_15w9u_65 {
525
+ font-family: var(--teddy-typography-family-default);
526
+ font-size: var(--teddy-typography-scale-75);
527
+ letter-spacing: var(--teddy-spacing-10);
528
+ line-height: var(--teddy-typography-line-height-tight);
529
+ text-transform: uppercase;
530
+ }
531
+ ._teddy-text--overline-200_15w9u_72 {
532
+ font-family: var(--teddy-typography-family-default);
533
+ font-size: clamp(var(--teddy-typography-scale-75), 3vw, var(--teddy-typography-scale-100));
534
+ letter-spacing: var(--teddy-spacing-10);
535
+ line-height: var(--teddy-typography-line-height-tight);
536
+ text-transform: uppercase;
537
+ }
538
+ }@layer flex {
539
+ ._teddy-flex_19teo_2 {
540
+ box-sizing: border-box;
541
+ display: flex;
542
+ justify-content: flex-start;
543
+ }
543
544
  }@layer heading {
544
545
  ._teddy-heading_r8os0_2 {
545
546
  color: var(--teddy-color-text-default);
@@ -623,6 +624,106 @@
623
624
  font-size: clamp(var(--teddy-typography-scale-800), 3cqw, var(--teddy-typography-scale-1000));
624
625
  line-height: var(--teddy-typography-line-height-tight);
625
626
  }
627
+ }._teddy-image_oyxp8_1 {
628
+ width: 100%;
629
+ max-width: 100%;
630
+ height: 100%;
631
+ display: block;
632
+ font-style: italic;
633
+ background-repeat: no-repeat;
634
+ }._teddy-chip__item_1er2j_1 {
635
+ font: inherit;
636
+ cursor: pointer;
637
+ outline: inherit;
638
+ border-radius: var(--teddy-border-radius-md);
639
+ border: none;
640
+ background: var(--teddy-color-background-interactive-transparent);
641
+ padding: 0.625rem var(--teddy-spacing-200);
642
+ display: inline-flex;
643
+ align-items: center;
644
+ justify-content: center;
645
+ color: var(--teddy-color-text-interactive-primary);
646
+ font-weight: var(--teddy-typography-weight-normal);
647
+ text-align: center;
648
+ line-height: var(--teddy-typography-line-height-loose);
649
+ box-sizing: border-box;
650
+ position: relative;
651
+ overflow: hidden;
652
+ }
653
+ ._teddy-chip__item_1er2j_1:focus {
654
+ outline: var(--teddy-color-border-interactive-focus) auto var(--teddy-border-width-sm);
655
+ outline-offset: var(--teddy-spacing-50);
656
+ }
657
+ ._teddy-chip__item_1er2j_1:focus:not(:focus-visible) {
658
+ outline: none;
659
+ }
660
+ ._teddy-chip__item_1er2j_1::before, ._teddy-chip__item_1er2j_1::after {
661
+ content: "";
662
+ display: block;
663
+ inset: 0;
664
+ position: absolute;
665
+ }
666
+ ._teddy-chip__item--unavailable_1er2j_33::after {
667
+ opacity: 1;
668
+ left: calc(50% - var(--teddy-border-width-xs) / 2);
669
+ top: -50%;
670
+ background: var(--teddy-color-text-interactive-primary);
671
+ width: var(--teddy-border-width-xs);
672
+ height: 200%;
673
+ transform: rotate(-60deg);
674
+ transform-origin: center;
675
+ }
676
+ ._teddy-chip__item--unavailable_1er2j_33[data-state=on]::after {
677
+ background: var(--teddy-color-text-interactive-on-primary);
678
+ }
679
+ ._teddy-chip__item_1er2j_1::before {
680
+ border-radius: inherit;
681
+ opacity: 1;
682
+ outline: var(--teddy-color-border-interactive-primary) auto var(--teddy-border-width-xs);
683
+ }
684
+ ._teddy-chip__item_1er2j_1:hover::before:not(:disabled) {
685
+ outline-width: var(--teddy-border-width-sm);
686
+ outline-offset: calc(var(--teddy-border-width-xs) * -1);
687
+ }
688
+ ._teddy-chip__item_1er2j_1[data-state=off]:hover {
689
+ background-color: var(--teddy-color-background-interactive-transparent-hover);
690
+ color: var(--teddy-color-text-interactive-primary-hover);
691
+ }
692
+ ._teddy-chip__item_1er2j_1[data-state=off]:active {
693
+ background-color: var(--teddy-color-background-interactive-transparent-active);
694
+ color: var(--teddy-color-text-interactive-primary-active);
695
+ }
696
+ ._teddy-chip__item_1er2j_1[data-state=off]:disabled {
697
+ background-color: var(--teddy-color-background-interactive-transparent);
698
+ color: var(--teddy-color-text-weak);
699
+ }
700
+ ._teddy-chip__item_1er2j_1[data-state=on] {
701
+ background-color: var(--teddy-color-background-interactive-primary);
702
+ color: var(--teddy-color-text-interactive-on-primary);
703
+ font-weight: var(--teddy-typography-weight-medium);
704
+ }
705
+ ._teddy-chip__item_1er2j_1[data-state=on]:hover {
706
+ background-color: var(--teddy-color-background-interactive-primary-hover);
707
+ }
708
+ ._teddy-chip__item_1er2j_1[data-state=on]:active {
709
+ background-color: var(--teddy-color-background-interactive-primary-active);
710
+ }
711
+ ._teddy-chip__item_1er2j_1[data-state=on]:disabled {
712
+ background-color: var(--teddy-color-background-interactive-disabled);
713
+ color: var(--teddy-color-text-weak);
714
+ }
715
+ ._teddy-chip__item_1er2j_1[data-state=on] ._teddy-chip__indicator_1er2j_82 {
716
+ display: unset;
717
+ }
718
+ ._teddy-chip__item_1er2j_1:disabled {
719
+ cursor: not-allowed;
720
+ color: var(--teddy-color-text-weak);
721
+ }
722
+ ._teddy-chip__item_1er2j_1:disabled::before {
723
+ outline-color: var(--teddy-color-border-medium);
724
+ }
725
+ ._teddy-chip__indicator_1er2j_82 {
726
+ display: none;
626
727
  }._teddy-link_1jza5_1 {
627
728
  align-items: center;
628
729
  cursor: pointer;
package/dist/utils/generate-styling/grid.d.ts CHANGED
@@ -1,22 +1,22 @@
1
1
  import { Responsive, numberIterator } from './util';
2
2
 
3
3
  export declare const gridTemplateRowsValues: readonly [...{
4
- key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
5
- value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
4
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
5
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
6
6
  }[], {
7
7
  readonly key: "none";
8
8
  readonly value: "none";
9
9
  }];
10
10
  export declare const gridTemplateColumnsValues: readonly [...{
11
- readonly key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
12
- readonly value: "repeat(10, minmax(0, 1fr))" | "repeat(1, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
11
+ readonly key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
12
+ readonly value: "repeat(1, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(10, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
13
13
  }[], {
14
14
  readonly key: "none";
15
15
  readonly value: "none";
16
16
  }];
17
17
  declare const gridColumnValues: readonly [...{
18
- key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
19
- value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
18
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
19
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
20
20
  }[], {
21
21
  readonly key: "span-2";
22
22
  readonly value: "span 2";
@@ -52,8 +52,8 @@ declare const gridColumnValues: readonly [...{
52
52
  readonly value: "span 12";
53
53
  }];
54
54
  declare const gridRowValues: readonly [...{
55
- key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
56
- value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
55
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
56
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
57
57
  }[], {
58
58
  readonly key: "span-2";
59
59
  readonly value: "span 2";
@@ -131,8 +131,8 @@ export declare const gridLayout: readonly [{
131
131
  readonly key: "rows";
132
132
  readonly className: "teddy-gtr";
133
133
  readonly values: readonly [...{
134
- key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
135
- value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
134
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
135
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
136
136
  }[], {
137
137
  readonly key: "none";
138
138
  readonly value: "none";
@@ -141,8 +141,8 @@ export declare const gridLayout: readonly [{
141
141
  readonly key: "columns";
142
142
  readonly className: "teddy-gtc";
143
143
  readonly values: readonly [...{
144
- readonly key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
145
- readonly value: "repeat(10, minmax(0, 1fr))" | "repeat(1, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
144
+ readonly key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
145
+ readonly value: "repeat(1, minmax(0, 1fr))" | "repeat(2, minmax(0, 1fr))" | "repeat(10, minmax(0, 1fr))" | "repeat(3, minmax(0, 1fr))" | "repeat(4, minmax(0, 1fr))" | "repeat(5, minmax(0, 1fr))" | "repeat(6, minmax(0, 1fr))" | "repeat(7, minmax(0, 1fr))" | "repeat(8, minmax(0, 1fr))" | "repeat(9, minmax(0, 1fr))" | "repeat(11, minmax(0, 1fr))" | "repeat(12, minmax(0, 1fr))";
146
146
  }[], {
147
147
  readonly key: "none";
148
148
  readonly value: "none";
@@ -171,36 +171,36 @@ export declare const gridChildren: readonly [{
171
171
  readonly key: "gridColumnStart";
172
172
  readonly className: "teddy-gcs";
173
173
  readonly values: {
174
- key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
175
- value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
174
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
175
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
176
176
  }[];
177
177
  }, {
178
178
  readonly key: "gridColumnEnd";
179
179
  readonly className: "teddy-gce";
180
180
  readonly values: {
181
- key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
182
- value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
181
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
182
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
183
183
  }[];
184
184
  }, {
185
185
  readonly key: "gridRowStart";
186
186
  readonly className: "teddy-grs";
187
187
  readonly values: {
188
- key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
189
- value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
188
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
189
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
190
190
  }[];
191
191
  }, {
192
192
  readonly key: "gridRowEnd";
193
193
  readonly className: "teddy-gre";
194
194
  readonly values: {
195
- key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
196
- value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
195
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
196
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
197
197
  }[];
198
198
  }, {
199
199
  readonly key: "gridColumn";
200
200
  readonly className: "teddy-gc";
201
201
  readonly values: readonly [...{
202
- key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
203
- value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
202
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
203
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
204
204
  }[], {
205
205
  readonly key: "span-2";
206
206
  readonly value: "span 2";
@@ -239,8 +239,8 @@ export declare const gridChildren: readonly [{
239
239
  readonly key: "gridRow";
240
240
  readonly className: "teddy-gr";
241
241
  readonly values: readonly [...{
242
- key: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
243
- value: "10" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
242
+ key: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
243
+ value: "1" | "2" | "10" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "11" | "12";
244
244
  }[], {
245
245
  readonly key: "span-2";
246
246
  readonly value: "span 2";