@kompasid/lit-web-components 0.7.8 → 0.8.0

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.
@@ -46,9 +46,20 @@ export const TWStyles = css `
46
46
  -o-tab-size: 4;
47
47
  tab-size: 4;
48
48
  /* 3 */
49
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
50
- 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
51
- 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
49
+ font-family:
50
+ ui-sans-serif,
51
+ system-ui,
52
+ -apple-system,
53
+ BlinkMacSystemFont,
54
+ 'Segoe UI',
55
+ Roboto,
56
+ 'Helvetica Neue',
57
+ Arial,
58
+ 'Noto Sans',
59
+ sans-serif,
60
+ 'Apple Color Emoji',
61
+ 'Segoe UI Emoji',
62
+ 'Segoe UI Symbol',
52
63
  'Noto Color Emoji';
53
64
  /* 4 */
54
65
  font-feature-settings: normal;
@@ -453,19 +464,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
453
464
  --tw-skew-y: 0;
454
465
  --tw-scale-x: 1;
455
466
  --tw-scale-y: 1;
456
- --tw-pan-x: ;
457
- --tw-pan-y: ;
458
- --tw-pinch-zoom: ;
467
+ --tw-pan-x: ;
468
+ --tw-pan-y: ;
469
+ --tw-pinch-zoom: ;
459
470
  --tw-scroll-snap-strictness: proximity;
460
- --tw-gradient-from-position: ;
461
- --tw-gradient-via-position: ;
462
- --tw-gradient-to-position: ;
463
- --tw-ordinal: ;
464
- --tw-slashed-zero: ;
465
- --tw-numeric-figure: ;
466
- --tw-numeric-spacing: ;
467
- --tw-numeric-fraction: ;
468
- --tw-ring-inset: ;
471
+ --tw-gradient-from-position: ;
472
+ --tw-gradient-via-position: ;
473
+ --tw-gradient-to-position: ;
474
+ --tw-ordinal: ;
475
+ --tw-slashed-zero: ;
476
+ --tw-numeric-figure: ;
477
+ --tw-numeric-spacing: ;
478
+ --tw-numeric-fraction: ;
479
+ --tw-ring-inset: ;
469
480
  --tw-ring-offset-width: 0px;
470
481
  --tw-ring-offset-color: #fff;
471
482
  --tw-ring-color: rgb(4 104 203 / 0.5);
@@ -473,24 +484,24 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
473
484
  --tw-ring-shadow: 0 0 #0000;
474
485
  --tw-shadow: 0 0 #0000;
475
486
  --tw-shadow-colored: 0 0 #0000;
476
- --tw-blur: ;
477
- --tw-brightness: ;
478
- --tw-contrast: ;
479
- --tw-grayscale: ;
480
- --tw-hue-rotate: ;
481
- --tw-invert: ;
482
- --tw-saturate: ;
483
- --tw-sepia: ;
484
- --tw-drop-shadow: ;
485
- --tw-backdrop-blur: ;
486
- --tw-backdrop-brightness: ;
487
- --tw-backdrop-contrast: ;
488
- --tw-backdrop-grayscale: ;
489
- --tw-backdrop-hue-rotate: ;
490
- --tw-backdrop-invert: ;
491
- --tw-backdrop-opacity: ;
492
- --tw-backdrop-saturate: ;
493
- --tw-backdrop-sepia: ;
487
+ --tw-blur: ;
488
+ --tw-brightness: ;
489
+ --tw-contrast: ;
490
+ --tw-grayscale: ;
491
+ --tw-hue-rotate: ;
492
+ --tw-invert: ;
493
+ --tw-saturate: ;
494
+ --tw-sepia: ;
495
+ --tw-drop-shadow: ;
496
+ --tw-backdrop-blur: ;
497
+ --tw-backdrop-brightness: ;
498
+ --tw-backdrop-contrast: ;
499
+ --tw-backdrop-grayscale: ;
500
+ --tw-backdrop-hue-rotate: ;
501
+ --tw-backdrop-invert: ;
502
+ --tw-backdrop-opacity: ;
503
+ --tw-backdrop-saturate: ;
504
+ --tw-backdrop-sepia: ;
494
505
  }
495
506
 
496
507
  ::backdrop {
@@ -503,19 +514,19 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
503
514
  --tw-skew-y: 0;
504
515
  --tw-scale-x: 1;
505
516
  --tw-scale-y: 1;
506
- --tw-pan-x: ;
507
- --tw-pan-y: ;
508
- --tw-pinch-zoom: ;
517
+ --tw-pan-x: ;
518
+ --tw-pan-y: ;
519
+ --tw-pinch-zoom: ;
509
520
  --tw-scroll-snap-strictness: proximity;
510
- --tw-gradient-from-position: ;
511
- --tw-gradient-via-position: ;
512
- --tw-gradient-to-position: ;
513
- --tw-ordinal: ;
514
- --tw-slashed-zero: ;
515
- --tw-numeric-figure: ;
516
- --tw-numeric-spacing: ;
517
- --tw-numeric-fraction: ;
518
- --tw-ring-inset: ;
521
+ --tw-gradient-from-position: ;
522
+ --tw-gradient-via-position: ;
523
+ --tw-gradient-to-position: ;
524
+ --tw-ordinal: ;
525
+ --tw-slashed-zero: ;
526
+ --tw-numeric-figure: ;
527
+ --tw-numeric-spacing: ;
528
+ --tw-numeric-fraction: ;
529
+ --tw-ring-inset: ;
519
530
  --tw-ring-offset-width: 0px;
520
531
  --tw-ring-offset-color: #fff;
521
532
  --tw-ring-color: rgb(4 104 203 / 0.5);
@@ -523,24 +534,24 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
523
534
  --tw-ring-shadow: 0 0 #0000;
524
535
  --tw-shadow: 0 0 #0000;
525
536
  --tw-shadow-colored: 0 0 #0000;
526
- --tw-blur: ;
527
- --tw-brightness: ;
528
- --tw-contrast: ;
529
- --tw-grayscale: ;
530
- --tw-hue-rotate: ;
531
- --tw-invert: ;
532
- --tw-saturate: ;
533
- --tw-sepia: ;
534
- --tw-drop-shadow: ;
535
- --tw-backdrop-blur: ;
536
- --tw-backdrop-brightness: ;
537
- --tw-backdrop-contrast: ;
538
- --tw-backdrop-grayscale: ;
539
- --tw-backdrop-hue-rotate: ;
540
- --tw-backdrop-invert: ;
541
- --tw-backdrop-opacity: ;
542
- --tw-backdrop-saturate: ;
543
- --tw-backdrop-sepia: ;
537
+ --tw-blur: ;
538
+ --tw-brightness: ;
539
+ --tw-contrast: ;
540
+ --tw-grayscale: ;
541
+ --tw-hue-rotate: ;
542
+ --tw-invert: ;
543
+ --tw-saturate: ;
544
+ --tw-sepia: ;
545
+ --tw-drop-shadow: ;
546
+ --tw-backdrop-blur: ;
547
+ --tw-backdrop-brightness: ;
548
+ --tw-backdrop-contrast: ;
549
+ --tw-backdrop-grayscale: ;
550
+ --tw-backdrop-hue-rotate: ;
551
+ --tw-backdrop-invert: ;
552
+ --tw-backdrop-opacity: ;
553
+ --tw-backdrop-saturate: ;
554
+ --tw-backdrop-sepia: ;
544
555
  }
545
556
 
546
557
  .collapse {
@@ -599,10 +610,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
599
610
  top: 0px;
600
611
  }
601
612
 
602
- .bottom-6 {
603
- bottom: 1.5rem;
604
- }
605
-
606
613
  .z-0 {
607
614
  z-index: 0;
608
615
  }
@@ -666,16 +673,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
666
673
  margin-bottom: 1.5rem;
667
674
  }
668
675
 
669
- .my-2 {
670
- margin-top: 0.5rem;
671
- margin-bottom: 0.5rem;
672
- }
673
-
674
- .my-3 {
675
- margin-top: 0.75rem;
676
- margin-bottom: 0.75rem;
677
- }
678
-
679
676
  .-ml-2 {
680
677
  margin-left: -0.5rem;
681
678
  }
@@ -1017,14 +1014,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1017
1014
  max-width: 20rem;
1018
1015
  }
1019
1016
 
1020
- .max-w-lg {
1021
- max-width: 32rem;
1022
- }
1023
-
1024
- .max-w-md {
1025
- max-width: 28rem;
1026
- }
1027
-
1028
1017
  .flex-none {
1029
1018
  flex: none;
1030
1019
  }
@@ -1661,9 +1650,20 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1661
1650
  }
1662
1651
 
1663
1652
  .font-sans {
1664
- font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
1665
- 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
1666
- 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
1653
+ font-family:
1654
+ ui-sans-serif,
1655
+ system-ui,
1656
+ -apple-system,
1657
+ BlinkMacSystemFont,
1658
+ 'Segoe UI',
1659
+ Roboto,
1660
+ 'Helvetica Neue',
1661
+ Arial,
1662
+ 'Noto Sans',
1663
+ sans-serif,
1664
+ 'Apple Color Emoji',
1665
+ 'Segoe UI Emoji',
1666
+ 'Segoe UI Symbol',
1667
1667
  'Noto Color Emoji';
1668
1668
  }
1669
1669
 
@@ -1695,6 +1695,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1695
1695
  line-height: 1.25rem;
1696
1696
  }
1697
1697
 
1698
+ .text-xl {
1699
+ font-size: 1.25rem;
1700
+ line-height: 1.75rem;
1701
+ }
1702
+
1698
1703
  .text-xs {
1699
1704
  font-size: 0.75rem;
1700
1705
  line-height: 1rem;
@@ -1775,6 +1780,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1775
1780
  color: rgb(0 0 0 / var(--tw-text-opacity));
1776
1781
  }
1777
1782
 
1783
+ .text-blue-200 {
1784
+ --tw-text-opacity: 1;
1785
+ color: rgb(147 200 253 / var(--tw-text-opacity));
1786
+ }
1787
+
1778
1788
  .text-blue-300 {
1779
1789
  --tw-text-opacity: 1;
1780
1790
  color: rgb(90 171 252 / var(--tw-text-opacity));
@@ -1886,15 +1896,34 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1886
1896
  }
1887
1897
 
1888
1898
  .transition {
1889
- transition-property: color, background-color, border-color,
1890
- text-decoration-color, fill, stroke, opacity, box-shadow, transform,
1891
- filter, -webkit-backdrop-filter;
1899
+ transition-property:
1900
+ color,
1901
+ background-color,
1902
+ border-color,
1903
+ text-decoration-color,
1904
+ fill,
1905
+ stroke,
1906
+ opacity,
1907
+ box-shadow,
1908
+ transform,
1909
+ filter,
1910
+ -webkit-backdrop-filter;
1892
1911
  transition-property: color, background-color, border-color,
1893
1912
  text-decoration-color, fill, stroke, opacity, box-shadow, transform,
1894
1913
  filter, backdrop-filter;
1895
- transition-property: color, background-color, border-color,
1896
- text-decoration-color, fill, stroke, opacity, box-shadow, transform,
1897
- filter, backdrop-filter, -webkit-backdrop-filter;
1914
+ transition-property:
1915
+ color,
1916
+ background-color,
1917
+ border-color,
1918
+ text-decoration-color,
1919
+ fill,
1920
+ stroke,
1921
+ opacity,
1922
+ box-shadow,
1923
+ transform,
1924
+ filter,
1925
+ backdrop-filter,
1926
+ -webkit-backdrop-filter;
1898
1927
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1899
1928
  transition-duration: 150ms;
1900
1929
  }
@@ -1933,6 +1962,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1933
1962
  margin-right: 0px;
1934
1963
  }
1935
1964
 
1965
+ .md\\:my-3 {
1966
+ margin-top: 0.75rem;
1967
+ margin-bottom: 0.75rem;
1968
+ }
1969
+
1936
1970
  .md\\:my-8 {
1937
1971
  margin-top: 2rem;
1938
1972
  margin-bottom: 2rem;
@@ -1943,16 +1977,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1943
1977
  margin-bottom: auto;
1944
1978
  }
1945
1979
 
1946
- .md\\:my-3 {
1947
- margin-top: 0.75rem;
1948
- margin-bottom: 0.75rem;
1949
- }
1950
-
1951
- .md\\:my-10 {
1952
- margin-top: 2.5rem;
1953
- margin-bottom: 2.5rem;
1954
- }
1955
-
1956
1980
  .md\\:mb-0 {
1957
1981
  margin-bottom: 0px;
1958
1982
  }
@@ -1977,6 +2001,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1977
2001
  margin-top: 0px;
1978
2002
  }
1979
2003
 
2004
+ .md\\:mt-2 {
2005
+ margin-top: 0.5rem;
2006
+ }
2007
+
2008
+ .md\\:mt-2\\.5 {
2009
+ margin-top: 0.625rem;
2010
+ }
2011
+
1980
2012
  .md\\:mt-3 {
1981
2013
  margin-top: 0.75rem;
1982
2014
  }
@@ -1989,22 +2021,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1989
2021
  margin-top: 2rem;
1990
2022
  }
1991
2023
 
1992
- .md\\:mt-2 {
1993
- margin-top: 0.5rem;
1994
- }
1995
-
1996
- .md\\:mt-1 {
1997
- margin-top: 0.25rem;
1998
- }
1999
-
2000
- .md\\:mt-10 {
2001
- margin-top: 2.5rem;
2002
- }
2003
-
2004
- .md\\:mt-2\\.5 {
2005
- margin-top: 0.625rem;
2006
- }
2007
-
2008
2024
  .md\\:block {
2009
2025
  display: block;
2010
2026
  }
@@ -2102,6 +2118,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
2102
2118
  max-width: 200px;
2103
2119
  }
2104
2120
 
2121
+ .md\\:max-w-\\[464px\\] {
2122
+ max-width: 464px;
2123
+ }
2124
+
2105
2125
  .md\\:max-w-full {
2106
2126
  max-width: 100%;
2107
2127
  }
@@ -2110,10 +2130,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
2110
2130
  max-width: 24rem;
2111
2131
  }
2112
2132
 
2113
- .md\\:max-w-\\[464px\\] {
2114
- max-width: 464px;
2115
- }
2116
-
2117
2133
  .md\\:grid-cols-1 {
2118
2134
  grid-template-columns: repeat(1, minmax(0, 1fr));
2119
2135
  }
@@ -2180,18 +2196,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
2180
2196
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
2181
2197
  }
2182
2198
 
2183
- .md\\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
2184
- --tw-space-y-reverse: 0;
2185
- margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
2186
- margin-bottom: calc(1rem * var(--tw-space-y-reverse));
2187
- }
2188
-
2189
2199
  .md\\:space-y-1 > :not([hidden]) ~ :not([hidden]) {
2190
2200
  --tw-space-y-reverse: 0;
2191
2201
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
2192
2202
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
2193
2203
  }
2194
2204
 
2205
+ .md\\:space-y-4 > :not([hidden]) ~ :not([hidden]) {
2206
+ --tw-space-y-reverse: 0;
2207
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
2208
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
2209
+ }
2210
+
2195
2211
  .md\\:self-start {
2196
2212
  align-self: flex-start;
2197
2213
  }
@@ -2261,11 +2277,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
2261
2277
  padding-bottom: 0.5rem;
2262
2278
  }
2263
2279
 
2264
- .md\\:py-6 {
2265
- padding-top: 1.5rem;
2266
- padding-bottom: 1.5rem;
2267
- }
2268
-
2269
2280
  .md\\:py-3 {
2270
2281
  padding-top: 0.75rem;
2271
2282
  padding-bottom: 0.75rem;
@@ -2276,14 +2287,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
2276
2287
  padding-bottom: 0.875rem;
2277
2288
  }
2278
2289
 
2279
- .md\\:py-4 {
2280
- padding-top: 1rem;
2281
- padding-bottom: 1rem;
2282
- }
2283
-
2284
- .md\\:py-10 {
2285
- padding-top: 2.5rem;
2286
- padding-bottom: 2.5rem;
2290
+ .md\\:py-6 {
2291
+ padding-top: 1.5rem;
2292
+ padding-bottom: 1.5rem;
2287
2293
  }
2288
2294
 
2289
2295
  .md\\:pb-4 {
@@ -2302,24 +2308,12 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
2302
2308
  padding-top: 0.75rem;
2303
2309
  }
2304
2310
 
2305
- .md\\:pt-8 {
2306
- padding-top: 2rem;
2307
- }
2308
-
2309
- .md\\:pt-4 {
2310
- padding-top: 1rem;
2311
- }
2312
-
2313
- .md\\:pt-2 {
2314
- padding-top: 0.5rem;
2315
- }
2316
-
2317
2311
  .md\\:pt-5 {
2318
2312
  padding-top: 1.25rem;
2319
2313
  }
2320
2314
 
2321
- .md\\:pt-6 {
2322
- padding-top: 1.5rem;
2315
+ .md\\:pt-8 {
2316
+ padding-top: 2rem;
2323
2317
  }
2324
2318
 
2325
2319
  .md\\:text-left {
@@ -2395,14 +2389,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
2395
2389
  margin-top: 0px;
2396
2390
  }
2397
2391
 
2398
- .lg\\:mt-2 {
2399
- margin-top: 0.5rem;
2400
- }
2401
-
2402
- .lg\\:mt-1 {
2403
- margin-top: 0.25rem;
2404
- }
2405
-
2406
2392
  .lg\\:block {
2407
2393
  display: block;
2408
2394
  }
@@ -2506,12 +2492,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
2506
2492
  }
2507
2493
 
2508
2494
  @media (min-width: 1280px) {
2509
- .xl\\:space-y-1 > :not([hidden]) ~ :not([hidden]) {
2510
- --tw-space-y-reverse: 0;
2511
- margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
2512
- margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
2513
- }
2514
-
2515
2495
  .xl\\:px-0 {
2516
2496
  padding-left: 0px;
2517
2497
  padding-right: 0px;