@fremtind/jokul 0.37.2 → 0.37.4

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 (43) hide show
  1. package/build/build-stats.html +1 -1
  2. package/build/cjs/components/modal/Modal.cjs.map +1 -1
  3. package/build/cjs/components/popover/Popover.cjs +1 -1
  4. package/build/cjs/components/popover/Popover.cjs.map +1 -1
  5. package/build/cjs/components/text-input/BaseTextInput.cjs +1 -1
  6. package/build/cjs/components/text-input/BaseTextInput.cjs.map +1 -1
  7. package/build/es/components/modal/Modal.js.map +1 -1
  8. package/build/es/components/popover/Popover.js +1 -1
  9. package/build/es/components/popover/Popover.js.map +1 -1
  10. package/build/es/components/text-input/BaseTextInput.js +1 -1
  11. package/build/es/components/text-input/BaseTextInput.js.map +1 -1
  12. package/package.json +2 -2
  13. package/styles/components/button/button.css +2 -2
  14. package/styles/components/button/button.min.css +1 -1
  15. package/styles/components/checkbox/checkbox.css +4 -4
  16. package/styles/components/checkbox/checkbox.min.css +1 -1
  17. package/styles/components/feedback/feedback.css +2 -2
  18. package/styles/components/feedback/feedback.min.css +1 -1
  19. package/styles/components/input-group/input-group.css +2 -2
  20. package/styles/components/input-group/input-group.min.css +1 -1
  21. package/styles/components/input-panel/checkbox-panel.css +2 -2
  22. package/styles/components/input-panel/checkbox-panel.min.css +1 -1
  23. package/styles/components/input-panel/radio-panel.css +2 -2
  24. package/styles/components/input-panel/radio-panel.min.css +1 -1
  25. package/styles/components/loader/loader.css +6 -6
  26. package/styles/components/loader/loader.min.css +1 -1
  27. package/styles/components/loader/skeleton-loader.css +5 -5
  28. package/styles/components/loader/skeleton-loader.min.css +1 -1
  29. package/styles/components/message/message.css +2 -2
  30. package/styles/components/message/message.min.css +1 -1
  31. package/styles/components/progress-bar/progress-bar.css +2 -2
  32. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  33. package/styles/components/radio-button/radio-button.css +2 -2
  34. package/styles/components/radio-button/radio-button.min.css +1 -1
  35. package/styles/components/system-message/system-message.css +2 -2
  36. package/styles/components/system-message/system-message.min.css +1 -1
  37. package/styles/components/text-input/text-input.css +3 -23
  38. package/styles/components/text-input/text-input.min.css +1 -1
  39. package/styles/components/text-input/text-input.scss +6 -5
  40. package/styles/components/toast/toast.css +4 -4
  41. package/styles/components/toast/toast.min.css +1 -1
  42. package/styles/styles.css +40 -60
  43. package/styles/styles.min.css +1 -1
package/styles/styles.css CHANGED
@@ -565,34 +565,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-autosuggest__i
565
565
  box-sizing: border-box;
566
566
  align-items: center;
567
567
  justify-content: center;
568
- background-color: transparent;
569
- cursor: pointer;
570
568
  padding: var(--jkl-text-input-action-button-padding);
571
569
  height: var(--jkl-text-input-action-button-size);
572
570
  width: var(--jkl-text-input-action-button-size);
573
- color: var(--jkl-text-input-border-color);
574
571
  margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
575
572
  }
576
- .jkl-text-input-action-button {
577
- outline: 0;
578
- border-style: none;
579
- outline-style: none;
580
- }
581
- .jkl-text-input-action-button:active, .jkl-text-input-action-button:hover, .jkl-text-input-action-button:focus {
582
- outline: 0;
583
- outline-style: none;
584
- }
585
- @media screen and (forced-colors: active) {
586
- .jkl-text-input-action-button {
587
- outline: revert;
588
- border-style: revert;
589
- outline-style: revert;
590
- }
591
- .jkl-text-input-action-button:active, .jkl-text-input-action-button:hover, .jkl-text-input-action-button:focus {
592
- outline: revert;
593
- outline-style: revert;
594
- }
595
- }
596
573
  .jkl-text-input-action-button .jkl-icon-button__icon {
597
574
  height: var(--jkl-text-input-action-button-icon-size);
598
575
  width: var(--jkl-text-input-action-button-icon-size);
@@ -605,6 +582,9 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-autosuggest__i
605
582
  border: 0.125rem inset ButtonText;
606
583
  }
607
584
  }
585
+ .jkl-text-input-action-button:focus-visible {
586
+ outline: none !important;
587
+ }
608
588
  html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input-action-button:focus {
609
589
  position: relative;
610
590
  }
@@ -1149,7 +1129,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
1149
1129
  --color: var(--jkl-color-text-default);
1150
1130
  }
1151
1131
  .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
1152
- animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u18uksc forwards;
1132
+ animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u05eqkd forwards;
1153
1133
  }
1154
1134
  .jkl-form-support-label--sr-only {
1155
1135
  border: 0 !important;
@@ -1224,7 +1204,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
1224
1204
  white-space: nowrap !important; /* 3 */
1225
1205
  }
1226
1206
 
1227
- @keyframes jkl-support-icon-entrance-u18uksc {
1207
+ @keyframes jkl-support-icon-entrance-u05eqkd {
1228
1208
  0% {
1229
1209
  margin-right: 0;
1230
1210
  opacity: 0;
@@ -1670,7 +1650,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1670
1650
  height: 1rem;
1671
1651
  }
1672
1652
  html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1673
- animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-u18uktc;
1653
+ animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-u05eqld;
1674
1654
  }
1675
1655
  :not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
1676
1656
  scale: 1.05;
@@ -1714,7 +1694,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1714
1694
  --background-color: var(--jkl-color-background-interactive-hover);
1715
1695
  }
1716
1696
 
1717
- @keyframes jkl-tertiary-flash-u18uktc {
1697
+ @keyframes jkl-tertiary-flash-u05eqld {
1718
1698
  0% {
1719
1699
  opacity: 0.5;
1720
1700
  scale: 1;
@@ -1739,15 +1719,15 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1739
1719
  animation: 2500ms linear infinite;
1740
1720
  }
1741
1721
  .jkl-loader__dot--left {
1742
- animation-name: jkl-loader-left-spin-u18uku1;
1722
+ animation-name: jkl-loader-left-spin-u05eqli;
1743
1723
  margin-right: 1.71em;
1744
1724
  }
1745
1725
  .jkl-loader__dot--middle {
1746
- animation-name: jkl-loader-middle-spin-u18ukux;
1726
+ animation-name: jkl-loader-middle-spin-u05eqma;
1747
1727
  margin-right: 1.9em;
1748
1728
  }
1749
1729
  .jkl-loader__dot--right {
1750
- animation-name: jkl-loader-right-spin-u18ukvv;
1730
+ animation-name: jkl-loader-right-spin-u05eqmh;
1751
1731
  }
1752
1732
  @media screen and (forced-colors: active) {
1753
1733
  .jkl-loader__dot {
@@ -1775,7 +1755,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1775
1755
  margin-right: 0.3em;
1776
1756
  }
1777
1757
 
1778
- @keyframes jkl-loader-left-spin-u18uku1 {
1758
+ @keyframes jkl-loader-left-spin-u05eqli {
1779
1759
  0% {
1780
1760
  transform: rotate(0) scale(0);
1781
1761
  }
@@ -1789,7 +1769,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1789
1769
  transform: rotate(180deg) scale(0);
1790
1770
  }
1791
1771
  }
1792
- @keyframes jkl-loader-middle-spin-u18ukux {
1772
+ @keyframes jkl-loader-middle-spin-u05eqma {
1793
1773
  0% {
1794
1774
  transform: rotate(20deg) scale(0);
1795
1775
  }
@@ -1806,7 +1786,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1806
1786
  transform: rotate(200deg) scale(0);
1807
1787
  }
1808
1788
  }
1809
- @keyframes jkl-loader-right-spin-u18ukvv {
1789
+ @keyframes jkl-loader-right-spin-u05eqmh {
1810
1790
  0% {
1811
1791
  transform: rotate(40deg) scale(0);
1812
1792
  }
@@ -1854,7 +1834,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1854
1834
  bottom: 0;
1855
1835
  width: 12.5rem;
1856
1836
  background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
1857
- animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u18ukwb;
1837
+ animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u05eqmk;
1858
1838
  }
1859
1839
  @media (width >= 0) and (max-width: 679px) {
1860
1840
  .jkl-skeleton-animation {
@@ -1885,7 +1865,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1885
1865
  @media screen and (forced-colors: active) {
1886
1866
  .jkl-skeleton-element {
1887
1867
  border: 1px solid CanvasText;
1888
- animation: 2s ease infinite jkl-blink-u18ukwr;
1868
+ animation: 2s ease infinite jkl-blink-u05eqnh;
1889
1869
  }
1890
1870
  }
1891
1871
 
@@ -1941,11 +1921,11 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1941
1921
  }
1942
1922
  @media screen and (forced-colors: active) {
1943
1923
  .jkl-skeleton-table {
1944
- animation: 2s ease-in-out infinite jkl-blink-u18ukwr;
1924
+ animation: 2s ease-in-out infinite jkl-blink-u05eqnh;
1945
1925
  }
1946
1926
  }
1947
1927
 
1948
- @keyframes jkl-sweep-u18ukwb {
1928
+ @keyframes jkl-sweep-u05eqmk {
1949
1929
  0% {
1950
1930
  transform: translateX(calc(0vw - 200px));
1951
1931
  }
@@ -1953,7 +1933,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1953
1933
  transform: translateX(calc(100vw + 400px));
1954
1934
  }
1955
1935
  }
1956
- @keyframes jkl-blink-u18ukwr {
1936
+ @keyframes jkl-blink-u05eqnh {
1957
1937
  0% {
1958
1938
  opacity: 1;
1959
1939
  }
@@ -2416,7 +2396,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2416
2396
  --jkl-checkbox-line-height: 1.5rem;
2417
2397
  }
2418
2398
 
2419
- @keyframes jkl-checkbox-checked-u18ukxd {
2399
+ @keyframes jkl-checkbox-checked-u05eqnx {
2420
2400
  0% {
2421
2401
  width: 0;
2422
2402
  height: 0;
@@ -2430,7 +2410,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2430
2410
  height: 58%;
2431
2411
  }
2432
2412
  }
2433
- @keyframes jkl-checkbox-indeterminate-u18uky1 {
2413
+ @keyframes jkl-checkbox-indeterminate-u05eqog {
2434
2414
  0% {
2435
2415
  width: 0;
2436
2416
  }
@@ -2458,11 +2438,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2458
2438
  top: -6px;
2459
2439
  }
2460
2440
  .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
2461
- animation: jkl-checkbox-checked-u18ukxd 150ms ease-in-out forwards;
2441
+ animation: jkl-checkbox-checked-u05eqnx 150ms ease-in-out forwards;
2462
2442
  opacity: 1;
2463
2443
  }
2464
2444
  .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
2465
- animation: jkl-checkbox-indeterminate-u18uky1 150ms ease-in-out forwards;
2445
+ animation: jkl-checkbox-indeterminate-u05eqog 150ms ease-in-out forwards;
2466
2446
  opacity: 1;
2467
2447
  }
2468
2448
  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
@@ -3873,7 +3853,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-
3873
3853
  padding: 1rem 0 2.5rem 0;
3874
3854
  }
3875
3855
 
3876
- @keyframes jkl-show-u18ukyy {
3856
+ @keyframes jkl-show-u05eqoy {
3877
3857
  from {
3878
3858
  transform: translate3d(0, 0.5rem, 0);
3879
3859
  opacity: 0;
@@ -3908,7 +3888,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-calendar-date-
3908
3888
  }
3909
3889
  }
3910
3890
  .jkl-feedback__fade-in {
3911
- animation: jkl-show-u18ukyy 0.25s ease-out;
3891
+ animation: jkl-show-u05eqoy 0.25s ease-out;
3912
3892
  }
3913
3893
  .jkl-feedback__buttons {
3914
3894
  display: flex;
@@ -4148,7 +4128,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4148
4128
  --background-color: var(--jkl-color-background-alert-success);
4149
4129
  }
4150
4130
  .jkl-message--dismissed {
4151
- animation: jkl-dismiss-u18ukzt 400ms ease-in-out forwards;
4131
+ animation: jkl-dismiss-u05eqp3 400ms ease-in-out forwards;
4152
4132
  transition: visibility 0ms 400ms;
4153
4133
  visibility: hidden;
4154
4134
  }
@@ -4168,7 +4148,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4168
4148
  }
4169
4149
  }
4170
4150
 
4171
- @keyframes jkl-dismiss-u18ukzt {
4151
+ @keyframes jkl-dismiss-u05eqp3 {
4172
4152
  from {
4173
4153
  opacity: 1;
4174
4154
  transform: translate3d(0, 0, 0);
@@ -4224,7 +4204,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4224
4204
  --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
4225
4205
  }
4226
4206
 
4227
- @keyframes jkl-dot-in-u18ul0l {
4207
+ @keyframes jkl-dot-in-u05eqpe {
4228
4208
  0% {
4229
4209
  transform: scale(0.8);
4230
4210
  }
@@ -4269,7 +4249,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4269
4249
  }
4270
4250
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
4271
4251
  --dot-color: var(--jkl-color-border-action);
4272
- animation: jkl-dot-in-u18ul0l 150ms ease;
4252
+ animation: jkl-dot-in-u05eqpe 150ms ease;
4273
4253
  }
4274
4254
  @media screen and (forced-colors: active) {
4275
4255
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -4419,7 +4399,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4419
4399
  --background-color: var(--jkl-color-background-container-high);
4420
4400
  }
4421
4401
 
4422
- @keyframes jkl-dot-in-u18ul1l {
4402
+ @keyframes jkl-dot-in-u05eqpp {
4423
4403
  0% {
4424
4404
  transform: scale(0.8);
4425
4405
  }
@@ -4467,7 +4447,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4467
4447
  }
4468
4448
  }
4469
4449
  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
4470
- animation: jkl-dot-in-u18ul1l 150ms ease;
4450
+ animation: jkl-dot-in-u05eqpp 150ms ease;
4471
4451
  }
4472
4452
  .jkl-radio-panel:has(:checked) {
4473
4453
  --radio-dot-color: var(--jkl-color-border-action);
@@ -4479,7 +4459,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4479
4459
  --radio-dot-color: var(--jkl-color-text-on-alert);
4480
4460
  }
4481
4461
 
4482
- @keyframes jkl-checkbox-checked-u18ul2c {
4462
+ @keyframes jkl-checkbox-checked-u05eqqj {
4483
4463
  0% {
4484
4464
  width: 0;
4485
4465
  height: 0;
@@ -4542,7 +4522,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4542
4522
  }
4543
4523
  }
4544
4524
  .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
4545
- animation: jkl-checkbox-checked-u18ul2c 150ms ease-in-out forwards;
4525
+ animation: jkl-checkbox-checked-u05eqqj 150ms ease-in-out forwards;
4546
4526
  opacity: 1;
4547
4527
  }
4548
4528
  .jkl-checkbox-panel:has([aria-invalid=true]) {
@@ -5317,11 +5297,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
5317
5297
  }
5318
5298
 
5319
5299
  .jkl-countdown__tracker {
5320
- animation: jkl-downcount-u18ul30 var(--duration) linear forwards;
5300
+ animation: jkl-downcount-u05eqqv var(--duration) linear forwards;
5321
5301
  animation-play-state: var(--play-state, running);
5322
5302
  }
5323
5303
 
5324
- @keyframes jkl-downcount-u18ul30 {
5304
+ @keyframes jkl-downcount-u05eqqv {
5325
5305
  from {
5326
5306
  width: 100%;
5327
5307
  }
@@ -5522,7 +5502,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
5522
5502
  margin-bottom: 0;
5523
5503
  }
5524
5504
  .jkl-system-message--dismissed {
5525
- animation: jkl-dismiss-u18ul3y 400ms ease-in forwards;
5505
+ animation: jkl-dismiss-u05eqrf 400ms ease-in forwards;
5526
5506
  transition: visibility 0ms 400ms;
5527
5507
  visibility: hidden;
5528
5508
  }
@@ -5554,7 +5534,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-system-message
5554
5534
  }
5555
5535
  }
5556
5536
 
5557
- @keyframes jkl-dismiss-u18ul3y {
5537
+ @keyframes jkl-dismiss-u05eqrf {
5558
5538
  from {
5559
5539
  opacity: 1;
5560
5540
  transform: translate3d(0, 0, 0);
@@ -6435,14 +6415,14 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6435
6415
 
6436
6416
  .jkl-toast[data-animation=entering],
6437
6417
  .jkl-toast[data-animation=queued] {
6438
- animation: jkl-entering-u18ul4f 200ms ease-out forwards;
6418
+ animation: jkl-entering-u05eqrs 200ms ease-out forwards;
6439
6419
  }
6440
6420
 
6441
6421
  .jkl-toast[data-animation=exiting] {
6442
- animation: jkl-exiting-u18ul5e 150ms ease-in forwards;
6422
+ animation: jkl-exiting-u05eqru 150ms ease-in forwards;
6443
6423
  }
6444
6424
 
6445
- @keyframes jkl-entering-u18ul4f {
6425
+ @keyframes jkl-entering-u05eqrs {
6446
6426
  from {
6447
6427
  opacity: 0;
6448
6428
  transform: translate3d(0, 50%, 0);
@@ -6452,7 +6432,7 @@ html:not([data-mousenavigation]) .jkl-table-pagination__previous:focus, html:not
6452
6432
  transform: translate3d(0, 0, 0);
6453
6433
  }
6454
6434
  }
6455
- @keyframes jkl-exiting-u18ul5e {
6435
+ @keyframes jkl-exiting-u05eqru {
6456
6436
  from {
6457
6437
  opacity: 1;
6458
6438
  transform: translate3d(0, 0, 0);