@fremtind/jokul 0.55.0 → 0.56.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.
Files changed (58) hide show
  1. package/build/build-stats.html +1 -1
  2. package/build/cjs/components/breadcrumb/stories/Breadcrumb.stories.cjs +1 -1
  3. package/build/cjs/components/breadcrumb/stories/BreadcrumbItem.stories.cjs +1 -1
  4. package/build/cjs/components/input-group/stories/InputGroup.stories.cjs +1 -1
  5. package/build/cjs/components/input-group/stories/InputGroup.stories.cjs.map +1 -1
  6. package/build/cjs/components/modal/stories/CompleteModal.stories.cjs +2 -0
  7. package/build/cjs/components/modal/stories/CompleteModal.stories.cjs.map +1 -0
  8. package/build/cjs/components/modal/stories/CompleteModal.stories.d.cts +20 -0
  9. package/build/cjs/components/text-input/stories/BaseTextInput.stories.cjs +2 -0
  10. package/build/cjs/components/text-input/stories/BaseTextInput.stories.cjs.map +1 -0
  11. package/build/cjs/components/text-input/stories/BaseTextInput.stories.d.cts +55 -0
  12. package/build/cjs/components/text-input/stories/TextInput.stories.cjs +2 -0
  13. package/build/cjs/components/text-input/stories/TextInput.stories.cjs.map +1 -0
  14. package/build/cjs/components/text-input/stories/TextInput.stories.d.cts +27 -0
  15. package/build/es/components/breadcrumb/stories/Breadcrumb.stories.js +1 -1
  16. package/build/es/components/input-group/stories/InputGroup.stories.js +1 -1
  17. package/build/es/components/input-group/stories/InputGroup.stories.js.map +1 -1
  18. package/build/es/components/modal/stories/CompleteModal.stories.d.ts +20 -0
  19. package/build/es/components/modal/stories/CompleteModal.stories.js +2 -0
  20. package/build/es/components/modal/stories/CompleteModal.stories.js.map +1 -0
  21. package/build/es/components/text-input/stories/BaseTextInput.stories.d.ts +55 -0
  22. package/build/es/components/text-input/stories/BaseTextInput.stories.js +2 -0
  23. package/build/es/components/text-input/stories/BaseTextInput.stories.js.map +1 -0
  24. package/build/es/components/text-input/stories/TextInput.stories.d.ts +27 -0
  25. package/build/es/components/text-input/stories/TextInput.stories.js +2 -0
  26. package/build/es/components/text-input/stories/TextInput.stories.js.map +1 -0
  27. package/build/style.css +1 -1
  28. package/package.json +2 -2
  29. package/styles/components/button/button.css +2 -2
  30. package/styles/components/button/button.min.css +1 -1
  31. package/styles/components/checkbox/checkbox.css +4 -4
  32. package/styles/components/checkbox/checkbox.min.css +1 -1
  33. package/styles/components/checkbox-panel/checkbox-panel.css +2 -2
  34. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  35. package/styles/components/countdown/countdown.css +2 -2
  36. package/styles/components/countdown/countdown.min.css +1 -1
  37. package/styles/components/feedback/feedback.css +2 -2
  38. package/styles/components/feedback/feedback.min.css +1 -1
  39. package/styles/components/input-group/input-group.css +2 -2
  40. package/styles/components/input-group/input-group.min.css +1 -1
  41. package/styles/components/loader/loader.css +6 -6
  42. package/styles/components/loader/loader.min.css +1 -1
  43. package/styles/components/loader/skeleton-loader.css +5 -5
  44. package/styles/components/loader/skeleton-loader.min.css +1 -1
  45. package/styles/components/message/message.css +2 -2
  46. package/styles/components/message/message.min.css +1 -1
  47. package/styles/components/progress-bar/progress-bar.css +1 -1
  48. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  49. package/styles/components/radio-button/radio-button.css +2 -2
  50. package/styles/components/radio-button/radio-button.min.css +1 -1
  51. package/styles/components/radio-panel/radio-panel.css +2 -2
  52. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  53. package/styles/components/system-message/system-message.css +2 -2
  54. package/styles/components/system-message/system-message.min.css +1 -1
  55. package/styles/components/toast/toast.css +4 -4
  56. package/styles/components/toast/toast.min.css +1 -1
  57. package/styles/styles.css +38 -38
  58. package/styles/styles.min.css +1 -1
package/styles/styles.css CHANGED
@@ -870,7 +870,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input__in
870
870
  --color: var(--jkl-color-text-default);
871
871
  }
872
872
  .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 {
873
- animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u3pkstt forwards;
873
+ animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-uqc9mfg forwards;
874
874
  }
875
875
  .jkl-form-support-label--sr-only {
876
876
  border: 0 !important;
@@ -945,7 +945,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-input__in
945
945
  white-space: nowrap !important; /* 3 */
946
946
  }
947
947
 
948
- @keyframes jkl-support-icon-entrance-u3pkstt {
948
+ @keyframes jkl-support-icon-entrance-uqc9mfg {
949
949
  0% {
950
950
  margin-right: 0;
951
951
  opacity: 0;
@@ -1295,7 +1295,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-tooltip-trigge
1295
1295
  opacity: 0.15;
1296
1296
  }
1297
1297
  html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1298
- animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-u3pksun;
1298
+ animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-uqc9mfl;
1299
1299
  }
1300
1300
  .jkl-button--primary, .jkl-button--secondary, .jkl-button--ghost {
1301
1301
  --border-radius: 999px;
@@ -1337,7 +1337,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1337
1337
  --background-color: var(--jkl-color-background-interactive-hover);
1338
1338
  }
1339
1339
 
1340
- @keyframes jkl-tertiary-flash-u3pksun {
1340
+ @keyframes jkl-tertiary-flash-uqc9mfl {
1341
1341
  0% {
1342
1342
  opacity: 0.5;
1343
1343
  scale: 1;
@@ -1362,15 +1362,15 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1362
1362
  animation: 2500ms linear infinite;
1363
1363
  }
1364
1364
  .jkl-loader__dot--left {
1365
- animation-name: jkl-loader-left-spin-u3pksuv;
1365
+ animation-name: jkl-loader-left-spin-uqc9mfm;
1366
1366
  margin-right: 1.71em;
1367
1367
  }
1368
1368
  .jkl-loader__dot--middle {
1369
- animation-name: jkl-loader-middle-spin-u3pksvt;
1369
+ animation-name: jkl-loader-middle-spin-uqc9mgb;
1370
1370
  margin-right: 1.9em;
1371
1371
  }
1372
1372
  .jkl-loader__dot--right {
1373
- animation-name: jkl-loader-right-spin-u3pksw4;
1373
+ animation-name: jkl-loader-right-spin-uqc9mgu;
1374
1374
  }
1375
1375
  @media screen and (forced-colors: active) {
1376
1376
  .jkl-loader__dot {
@@ -1398,7 +1398,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1398
1398
  margin-right: 0.3em;
1399
1399
  }
1400
1400
 
1401
- @keyframes jkl-loader-left-spin-u3pksuv {
1401
+ @keyframes jkl-loader-left-spin-uqc9mfm {
1402
1402
  0% {
1403
1403
  transform: rotate(0) scale(0);
1404
1404
  }
@@ -1412,7 +1412,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1412
1412
  transform: rotate(180deg) scale(0);
1413
1413
  }
1414
1414
  }
1415
- @keyframes jkl-loader-middle-spin-u3pksvt {
1415
+ @keyframes jkl-loader-middle-spin-uqc9mgb {
1416
1416
  0% {
1417
1417
  transform: rotate(20deg) scale(0);
1418
1418
  }
@@ -1429,7 +1429,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1429
1429
  transform: rotate(200deg) scale(0);
1430
1430
  }
1431
1431
  }
1432
- @keyframes jkl-loader-right-spin-u3pksw4 {
1432
+ @keyframes jkl-loader-right-spin-uqc9mgu {
1433
1433
  0% {
1434
1434
  transform: rotate(40deg) scale(0);
1435
1435
  }
@@ -1477,7 +1477,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1477
1477
  bottom: 0;
1478
1478
  width: 12.5rem;
1479
1479
  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%);
1480
- animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u3pkswb;
1480
+ animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-uqc9mhc;
1481
1481
  }
1482
1482
  @media (width >= 0) and (max-width: 679px) {
1483
1483
  .jkl-skeleton-animation {
@@ -1508,7 +1508,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1508
1508
  @media screen and (forced-colors: active) {
1509
1509
  .jkl-skeleton-element {
1510
1510
  border: 1px solid CanvasText;
1511
- animation: 2s ease infinite jkl-blink-u3pkswq;
1511
+ animation: 2s ease infinite jkl-blink-uqc9mhx;
1512
1512
  }
1513
1513
  }
1514
1514
 
@@ -1564,11 +1564,11 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1564
1564
  }
1565
1565
  @media screen and (forced-colors: active) {
1566
1566
  .jkl-skeleton-table {
1567
- animation: 2s ease-in-out infinite jkl-blink-u3pkswq;
1567
+ animation: 2s ease-in-out infinite jkl-blink-uqc9mhx;
1568
1568
  }
1569
1569
  }
1570
1570
 
1571
- @keyframes jkl-sweep-u3pkswb {
1571
+ @keyframes jkl-sweep-uqc9mhc {
1572
1572
  0% {
1573
1573
  transform: translateX(calc(0vw - 200px));
1574
1574
  }
@@ -1576,7 +1576,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
1576
1576
  transform: translateX(calc(100vw + 400px));
1577
1577
  }
1578
1578
  }
1579
- @keyframes jkl-blink-u3pkswq {
1579
+ @keyframes jkl-blink-uqc9mhx {
1580
1580
  0% {
1581
1581
  opacity: 1;
1582
1582
  }
@@ -2040,7 +2040,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2040
2040
  --jkl-checkbox-line-height: 1.5rem;
2041
2041
  }
2042
2042
 
2043
- @keyframes jkl-checkbox-checked-u3pksxn {
2043
+ @keyframes jkl-checkbox-checked-uqc9miv {
2044
2044
  0% {
2045
2045
  width: 0;
2046
2046
  height: 0;
@@ -2054,7 +2054,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2054
2054
  height: 58%;
2055
2055
  }
2056
2056
  }
2057
- @keyframes jkl-checkbox-indeterminate-u3pksyj {
2057
+ @keyframes jkl-checkbox-indeterminate-uqc9mj3 {
2058
2058
  0% {
2059
2059
  width: 0;
2060
2060
  }
@@ -2082,11 +2082,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2082
2082
  top: -6px;
2083
2083
  }
2084
2084
  .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
2085
- animation: jkl-checkbox-checked-u3pksxn 150ms ease-in-out forwards;
2085
+ animation: jkl-checkbox-checked-uqc9miv 150ms ease-in-out forwards;
2086
2086
  opacity: 1;
2087
2087
  }
2088
2088
  .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
2089
- animation: jkl-checkbox-indeterminate-u3pksyj 150ms ease-in-out forwards;
2089
+ animation: jkl-checkbox-indeterminate-uqc9mj3 150ms ease-in-out forwards;
2090
2090
  opacity: 1;
2091
2091
  }
2092
2092
  .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
@@ -2257,7 +2257,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2257
2257
  --outer-border-thickness: 0.125rem;
2258
2258
  }
2259
2259
 
2260
- @keyframes jkl-checkbox-checked-u3pksz0 {
2260
+ @keyframes jkl-checkbox-checked-uqc9mk1 {
2261
2261
  0% {
2262
2262
  width: 0;
2263
2263
  height: 0;
@@ -2320,7 +2320,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-nav-card:focus
2320
2320
  }
2321
2321
  }
2322
2322
  .jkl-checkbox-panel:has(:checked) .jkl-checkbox-panel__decorator::after {
2323
- animation: jkl-checkbox-checked-u3pksz0 150ms ease-in-out forwards;
2323
+ animation: jkl-checkbox-checked-uqc9mk1 150ms ease-in-out forwards;
2324
2324
  opacity: 1;
2325
2325
  }
2326
2326
  .jkl-checkbox-panel:has([aria-invalid=true]) {
@@ -3016,11 +3016,11 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3016
3016
  }
3017
3017
  }
3018
3018
  .jkl-countdown__tracker {
3019
- animation: jkl-downcount-u3pksz5 var(--duration) linear forwards;
3019
+ animation: jkl-downcount-uqc9mke var(--duration) linear forwards;
3020
3020
  animation-play-state: var(--play-state, running);
3021
3021
  }
3022
3022
 
3023
- @keyframes jkl-downcount-u3pksz5 {
3023
+ @keyframes jkl-downcount-uqc9mke {
3024
3024
  from {
3025
3025
  width: 100%;
3026
3026
  }
@@ -3696,7 +3696,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3696
3696
  padding: 1rem 0 2.5rem 0;
3697
3697
  }
3698
3698
 
3699
- @keyframes jkl-show-u3pkszv {
3699
+ @keyframes jkl-show-uqc9mle {
3700
3700
  from {
3701
3701
  transform: translate3d(0, 0.5rem, 0);
3702
3702
  opacity: 0;
@@ -3731,7 +3731,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-combobox__wrap
3731
3731
  }
3732
3732
  }
3733
3733
  .jkl-feedback__fade-in {
3734
- animation: jkl-show-u3pkszv 0.25s ease-out;
3734
+ animation: jkl-show-uqc9mle 0.25s ease-out;
3735
3735
  }
3736
3736
  .jkl-feedback__buttons {
3737
3737
  display: flex;
@@ -3973,7 +3973,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3973
3973
  --background-color: var(--jkl-color-background-alert-success);
3974
3974
  }
3975
3975
  .jkl-message--dismissed {
3976
- animation: jkl-dismiss-u3pkt0v 400ms ease-in-out forwards;
3976
+ animation: jkl-dismiss-uqc9mm1 400ms ease-in-out forwards;
3977
3977
  transition: visibility 0ms 400ms;
3978
3978
  visibility: hidden;
3979
3979
  }
@@ -3993,7 +3993,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
3993
3993
  }
3994
3994
  }
3995
3995
 
3996
- @keyframes jkl-dismiss-u3pkt0v {
3996
+ @keyframes jkl-dismiss-uqc9mm1 {
3997
3997
  from {
3998
3998
  opacity: 1;
3999
3999
  transform: translate3d(0, 0, 0);
@@ -4049,7 +4049,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4049
4049
  --jkl-radio-button-label-font-weight: var(--jkl-small-font-weight);
4050
4050
  }
4051
4051
 
4052
- @keyframes jkl-dot-in-u3pkt0w {
4052
+ @keyframes jkl-dot-in-uqc9mmr {
4053
4053
  0% {
4054
4054
  transform: scale(0.8);
4055
4055
  }
@@ -4094,7 +4094,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus + .jkl-
4094
4094
  }
4095
4095
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
4096
4096
  --dot-color: var(--jkl-color-border-action);
4097
- animation: jkl-dot-in-u3pkt0w 150ms ease;
4097
+ animation: jkl-dot-in-uqc9mmr 150ms ease;
4098
4098
  }
4099
4099
  @media screen and (forced-colors: active) {
4100
4100
  .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after {
@@ -4905,7 +4905,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4905
4905
  transition-duration: 150ms;
4906
4906
  }
4907
4907
 
4908
- @keyframes jkl-downcount-u3pkt1o {
4908
+ @keyframes jkl-downcount-uqc9mni {
4909
4909
  from {
4910
4910
  width: 100%;
4911
4911
  }
@@ -4913,7 +4913,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4913
4913
  width: 0%;
4914
4914
  }
4915
4915
  }
4916
- @keyframes jkl-dot-in-u3pkt2i {
4916
+ @keyframes jkl-dot-in-uqc9mnp {
4917
4917
  0% {
4918
4918
  transform: scale(0.8);
4919
4919
  }
@@ -4961,7 +4961,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
4961
4961
  }
4962
4962
  }
4963
4963
  .jkl-radio-panel__input:checked + .jkl-radio-panel__decorator::after {
4964
- animation: jkl-dot-in-u3pkt2i 150ms ease;
4964
+ animation: jkl-dot-in-uqc9mnp 150ms ease;
4965
4965
  }
4966
4966
  .jkl-radio-panel:has(:checked) {
4967
4967
  --radio-dot-color: var(--jkl-color-border-action);
@@ -5173,7 +5173,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5173
5173
  margin-bottom: 0;
5174
5174
  }
5175
5175
  .jkl-system-message--dismissed {
5176
- animation: jkl-dismiss-u3pkt2y 400ms ease-in forwards;
5176
+ animation: jkl-dismiss-uqc9mo7 400ms ease-in forwards;
5177
5177
  transition: visibility 0ms 400ms;
5178
5178
  visibility: hidden;
5179
5179
  }
@@ -5205,7 +5205,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select:has(:fo
5205
5205
  }
5206
5206
  }
5207
5207
 
5208
- @keyframes jkl-dismiss-u3pkt2y {
5208
+ @keyframes jkl-dismiss-uqc9mo7 {
5209
5209
  from {
5210
5210
  opacity: 1;
5211
5211
  transform: translate3d(0, 0, 0);
@@ -6384,14 +6384,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
6384
6384
 
6385
6385
  .jkl-toast[data-animation=entering],
6386
6386
  .jkl-toast[data-animation=queued] {
6387
- animation: jkl-entering-u3pkt39 200ms ease-out forwards;
6387
+ animation: jkl-entering-uqc9mol 200ms ease-out forwards;
6388
6388
  }
6389
6389
 
6390
6390
  .jkl-toast[data-animation=exiting] {
6391
- animation: jkl-exiting-u3pkt49 150ms ease-in forwards;
6391
+ animation: jkl-exiting-uqc9mpl 150ms ease-in forwards;
6392
6392
  }
6393
6393
 
6394
- @keyframes jkl-entering-u3pkt39 {
6394
+ @keyframes jkl-entering-uqc9mol {
6395
6395
  from {
6396
6396
  opacity: 0;
6397
6397
  transform: translate3d(0, 50%, 0);
@@ -6401,7 +6401,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-text-area__tex
6401
6401
  transform: translate3d(0, 0, 0);
6402
6402
  }
6403
6403
  }
6404
- @keyframes jkl-exiting-u3pkt49 {
6404
+ @keyframes jkl-exiting-uqc9mpl {
6405
6405
  from {
6406
6406
  opacity: 1;
6407
6407
  transform: translate3d(0, 0, 0);