@oslokommune/punkt-css 13.2.0 → 13.3.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 (55) hide show
  1. package/CHANGELOG.md +1736 -1253
  2. package/README.md +2 -2
  3. package/dist/css/components/accordion.css +9 -0
  4. package/dist/css/components/accordion.min.css +1 -1
  5. package/dist/css/components/heading.css +3 -3
  6. package/dist/css/components/heading.min.css +1 -1
  7. package/dist/css/components/linkcard.css +2 -0
  8. package/dist/css/components/linkcard.min.css +1 -1
  9. package/dist/css/components/loader.css +1 -0
  10. package/dist/css/components/loader.min.css +1 -1
  11. package/dist/css/components/preview.css +100 -16
  12. package/dist/css/components/preview.min.css +1 -1
  13. package/dist/css/components/tabs.css +1 -1
  14. package/dist/css/components/tabs.min.css +1 -1
  15. package/dist/css/components/tag.css +5 -0
  16. package/dist/css/components/tag.min.css +1 -1
  17. package/dist/css/components/textinput.css +1 -1
  18. package/dist/css/components/textinput.min.css +1 -1
  19. package/dist/css/elements/checkbox-radio.css +2 -2
  20. package/dist/css/elements/checkbox-radio.min.css +1 -1
  21. package/dist/css/elements/input.css +1 -1
  22. package/dist/css/elements/input.min.css +1 -1
  23. package/dist/css/elements/select.css +1 -1
  24. package/dist/css/elements/select.min.css +1 -1
  25. package/dist/css/elements/table.css +2 -1
  26. package/dist/css/elements/table.min.css +1 -1
  27. package/dist/css/pkt-base.css +93 -89
  28. package/dist/css/pkt-base.min.css +1 -1
  29. package/dist/css/pkt-components.css +122 -21
  30. package/dist/css/pkt-components.min.css +1 -1
  31. package/dist/css/pkt-docs.css +220 -118
  32. package/dist/css/pkt-docs.min.css +1 -1
  33. package/dist/css/pkt-elements.css +5 -4
  34. package/dist/css/pkt-elements.min.css +1 -1
  35. package/dist/css/pkt-normalise.css +1 -1
  36. package/dist/css/pkt-normalise.min.css +1 -1
  37. package/dist/css/pkt.css +220 -114
  38. package/dist/css/pkt.min.css +1 -1
  39. package/dist/scss/abstracts/mixins/_breakpoints.scss +46 -1
  40. package/dist/scss/abstracts/variables/_index.scss +1 -1
  41. package/dist/scss/abstracts/variables/_typography.scss +1 -1
  42. package/dist/scss/base/_defaults.scss +2 -2
  43. package/dist/scss/base/_grid.scss +2 -1
  44. package/dist/scss/base/_typography.scss +5 -2
  45. package/dist/scss/components/_accordion.scss +10 -0
  46. package/dist/scss/components/_heading.scss +3 -3
  47. package/dist/scss/components/_linkcard.scss +2 -0
  48. package/dist/scss/components/_loader.scss +1 -0
  49. package/dist/scss/components/_preview.scss +102 -16
  50. package/dist/scss/components/_tabs.scss +1 -1
  51. package/dist/scss/components/_tag.scss +4 -1
  52. package/dist/scss/elements/_table.scss +2 -1
  53. package/dist/scss/normalise/_index.scss +1 -1
  54. package/dist/scss/pkt-docs.scss +0 -3
  55. package/package.json +2 -2
package/dist/css/pkt.css CHANGED
@@ -39,7 +39,7 @@ pre,
39
39
  code,
40
40
  kbd,
41
41
  samp {
42
- font-family: monospace, monospace; /* 1 */
42
+ font-family: Menlo, Consolas, monospace;
43
43
  font-size: 1em; /* 2 */
44
44
  }
45
45
 
@@ -1542,7 +1542,7 @@ input[type=search]::-webkit-search-decoration {
1542
1542
  --pkt-color-text-action-normal: var(--pkt-color-brand-neutrals-white);
1543
1543
  }
1544
1544
 
1545
- /*
1545
+ /*
1546
1546
  * Defaults for elementer
1547
1547
  *
1548
1548
  */
@@ -1578,7 +1578,7 @@ body {
1578
1578
  -moz-osx-font-smoothing: grayscale;
1579
1579
  min-height: 100vh;
1580
1580
  overflow-y: auto;
1581
- line-height: 1.5;
1581
+ line-height: 1.75;
1582
1582
  text-rendering: optimizeSpeed;
1583
1583
  scroll-behavior: smooth;
1584
1584
  }
@@ -13854,264 +13854,264 @@ body {
13854
13854
  row-gap: 6.25rem;
13855
13855
  }
13856
13856
  }
13857
- .pkt-grid > .pkt-cell--left {
13857
+ .pkt-grid > .pkt-cell--left, .pkt-grid > * > .pkt-cell--left {
13858
13858
  justify-self: start;
13859
13859
  }
13860
- .pkt-grid > .pkt-cell--center {
13860
+ .pkt-grid > .pkt-cell--center, .pkt-grid > * > .pkt-cell--center {
13861
13861
  justify-self: center;
13862
13862
  }
13863
- .pkt-grid > .pkt-cell--right {
13863
+ .pkt-grid > .pkt-cell--right, .pkt-grid > * > .pkt-cell--right {
13864
13864
  justify-self: end;
13865
13865
  }
13866
- .pkt-grid > .pkt-cell--top {
13866
+ .pkt-grid > .pkt-cell--top, .pkt-grid > * > .pkt-cell--top {
13867
13867
  align-self: self-start;
13868
13868
  }
13869
- .pkt-grid > .pkt-cell--center-vertical {
13869
+ .pkt-grid > .pkt-cell--center-vertical, .pkt-grid > * > .pkt-cell--center-vertical {
13870
13870
  align-self: center;
13871
13871
  }
13872
- .pkt-grid > .pkt-cell--bottom {
13872
+ .pkt-grid > .pkt-cell--bottom, .pkt-grid > * > .pkt-cell--bottom {
13873
13873
  align-self: self-end;
13874
13874
  }
13875
- .pkt-grid > .pkt-cell.pkt-cell--span2 {
13875
+ .pkt-grid > .pkt-cell.pkt-cell--span2, .pkt-grid > * > .pkt-cell.pkt-cell--span2 {
13876
13876
  grid-column-end: span 2;
13877
13877
  }
13878
- .pkt-grid > .pkt-cell.pkt-cell--span3 {
13878
+ .pkt-grid > .pkt-cell.pkt-cell--span3, .pkt-grid > * > .pkt-cell.pkt-cell--span3 {
13879
13879
  grid-column-end: span 3;
13880
13880
  }
13881
- .pkt-grid > .pkt-cell.pkt-cell--span4 {
13881
+ .pkt-grid > .pkt-cell.pkt-cell--span4, .pkt-grid > * > .pkt-cell.pkt-cell--span4 {
13882
13882
  grid-column-end: span 4;
13883
13883
  }
13884
- .pkt-grid > .pkt-cell.pkt-cell--span5 {
13884
+ .pkt-grid > .pkt-cell.pkt-cell--span5, .pkt-grid > * > .pkt-cell.pkt-cell--span5 {
13885
13885
  grid-column-end: span 5;
13886
13886
  }
13887
- .pkt-grid > .pkt-cell.pkt-cell--span6 {
13887
+ .pkt-grid > .pkt-cell.pkt-cell--span6, .pkt-grid > * > .pkt-cell.pkt-cell--span6 {
13888
13888
  grid-column-end: span 6;
13889
13889
  }
13890
- .pkt-grid > .pkt-cell.pkt-cell--span7 {
13890
+ .pkt-grid > .pkt-cell.pkt-cell--span7, .pkt-grid > * > .pkt-cell.pkt-cell--span7 {
13891
13891
  grid-column-end: span 7;
13892
13892
  }
13893
- .pkt-grid > .pkt-cell.pkt-cell--span8 {
13893
+ .pkt-grid > .pkt-cell.pkt-cell--span8, .pkt-grid > * > .pkt-cell.pkt-cell--span8 {
13894
13894
  grid-column-end: span 8;
13895
13895
  }
13896
- .pkt-grid > .pkt-cell.pkt-cell--span9 {
13896
+ .pkt-grid > .pkt-cell.pkt-cell--span9, .pkt-grid > * > .pkt-cell.pkt-cell--span9 {
13897
13897
  grid-column-end: span 9;
13898
13898
  }
13899
- .pkt-grid > .pkt-cell.pkt-cell--span10 {
13899
+ .pkt-grid > .pkt-cell.pkt-cell--span10, .pkt-grid > * > .pkt-cell.pkt-cell--span10 {
13900
13900
  grid-column-end: span 10;
13901
13901
  }
13902
- .pkt-grid > .pkt-cell.pkt-cell--span11 {
13902
+ .pkt-grid > .pkt-cell.pkt-cell--span11, .pkt-grid > * > .pkt-cell.pkt-cell--span11 {
13903
13903
  grid-column-end: span 11;
13904
13904
  }
13905
- .pkt-grid > .pkt-cell.pkt-cell--span12 {
13905
+ .pkt-grid > .pkt-cell.pkt-cell--span12, .pkt-grid > * > .pkt-cell.pkt-cell--span12 {
13906
13906
  grid-column-end: span 12;
13907
13907
  }
13908
13908
  @media screen and (min-width: 0) {
13909
- .pkt-grid > .pkt-cell.pkt-cell--span2-mobile-up {
13909
+ .pkt-grid > .pkt-cell.pkt-cell--span2-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-mobile-up {
13910
13910
  grid-column-end: span 2;
13911
13911
  }
13912
- .pkt-grid > .pkt-cell.pkt-cell--span3-mobile-up {
13912
+ .pkt-grid > .pkt-cell.pkt-cell--span3-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span3-mobile-up {
13913
13913
  grid-column-end: span 3;
13914
13914
  }
13915
- .pkt-grid > .pkt-cell.pkt-cell--span4-mobile-up {
13915
+ .pkt-grid > .pkt-cell.pkt-cell--span4-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span4-mobile-up {
13916
13916
  grid-column-end: span 4;
13917
13917
  }
13918
- .pkt-grid > .pkt-cell.pkt-cell--span5-mobile-up {
13918
+ .pkt-grid > .pkt-cell.pkt-cell--span5-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span5-mobile-up {
13919
13919
  grid-column-end: span 5;
13920
13920
  }
13921
- .pkt-grid > .pkt-cell.pkt-cell--span6-mobile-up {
13921
+ .pkt-grid > .pkt-cell.pkt-cell--span6-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span6-mobile-up {
13922
13922
  grid-column-end: span 6;
13923
13923
  }
13924
- .pkt-grid > .pkt-cell.pkt-cell--span7-mobile-up {
13924
+ .pkt-grid > .pkt-cell.pkt-cell--span7-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span7-mobile-up {
13925
13925
  grid-column-end: span 7;
13926
13926
  }
13927
- .pkt-grid > .pkt-cell.pkt-cell--span8-mobile-up {
13927
+ .pkt-grid > .pkt-cell.pkt-cell--span8-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span8-mobile-up {
13928
13928
  grid-column-end: span 8;
13929
13929
  }
13930
- .pkt-grid > .pkt-cell.pkt-cell--span9-mobile-up {
13930
+ .pkt-grid > .pkt-cell.pkt-cell--span9-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span9-mobile-up {
13931
13931
  grid-column-end: span 9;
13932
13932
  }
13933
- .pkt-grid > .pkt-cell.pkt-cell--span10-mobile-up {
13933
+ .pkt-grid > .pkt-cell.pkt-cell--span10-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span10-mobile-up {
13934
13934
  grid-column-end: span 10;
13935
13935
  }
13936
- .pkt-grid > .pkt-cell.pkt-cell--span11-mobile-up {
13936
+ .pkt-grid > .pkt-cell.pkt-cell--span11-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span11-mobile-up {
13937
13937
  grid-column-end: span 11;
13938
13938
  }
13939
- .pkt-grid > .pkt-cell.pkt-cell--span12-mobile-up {
13939
+ .pkt-grid > .pkt-cell.pkt-cell--span12-mobile-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-mobile-up {
13940
13940
  grid-column-end: span 12;
13941
13941
  }
13942
13942
  }
13943
13943
  @media screen and (min-width: 36rem) {
13944
- .pkt-grid > .pkt-cell.pkt-cell--span2-phablet-up {
13944
+ .pkt-grid > .pkt-cell.pkt-cell--span2-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-phablet-up {
13945
13945
  grid-column-end: span 2;
13946
13946
  }
13947
- .pkt-grid > .pkt-cell.pkt-cell--span3-phablet-up {
13947
+ .pkt-grid > .pkt-cell.pkt-cell--span3-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span3-phablet-up {
13948
13948
  grid-column-end: span 3;
13949
13949
  }
13950
- .pkt-grid > .pkt-cell.pkt-cell--span4-phablet-up {
13950
+ .pkt-grid > .pkt-cell.pkt-cell--span4-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span4-phablet-up {
13951
13951
  grid-column-end: span 4;
13952
13952
  }
13953
- .pkt-grid > .pkt-cell.pkt-cell--span5-phablet-up {
13953
+ .pkt-grid > .pkt-cell.pkt-cell--span5-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span5-phablet-up {
13954
13954
  grid-column-end: span 5;
13955
13955
  }
13956
- .pkt-grid > .pkt-cell.pkt-cell--span6-phablet-up {
13956
+ .pkt-grid > .pkt-cell.pkt-cell--span6-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span6-phablet-up {
13957
13957
  grid-column-end: span 6;
13958
13958
  }
13959
- .pkt-grid > .pkt-cell.pkt-cell--span7-phablet-up {
13959
+ .pkt-grid > .pkt-cell.pkt-cell--span7-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span7-phablet-up {
13960
13960
  grid-column-end: span 7;
13961
13961
  }
13962
- .pkt-grid > .pkt-cell.pkt-cell--span8-phablet-up {
13962
+ .pkt-grid > .pkt-cell.pkt-cell--span8-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span8-phablet-up {
13963
13963
  grid-column-end: span 8;
13964
13964
  }
13965
- .pkt-grid > .pkt-cell.pkt-cell--span9-phablet-up {
13965
+ .pkt-grid > .pkt-cell.pkt-cell--span9-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span9-phablet-up {
13966
13966
  grid-column-end: span 9;
13967
13967
  }
13968
- .pkt-grid > .pkt-cell.pkt-cell--span10-phablet-up {
13968
+ .pkt-grid > .pkt-cell.pkt-cell--span10-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span10-phablet-up {
13969
13969
  grid-column-end: span 10;
13970
13970
  }
13971
- .pkt-grid > .pkt-cell.pkt-cell--span11-phablet-up {
13971
+ .pkt-grid > .pkt-cell.pkt-cell--span11-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span11-phablet-up {
13972
13972
  grid-column-end: span 11;
13973
13973
  }
13974
- .pkt-grid > .pkt-cell.pkt-cell--span12-phablet-up {
13974
+ .pkt-grid > .pkt-cell.pkt-cell--span12-phablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-phablet-up {
13975
13975
  grid-column-end: span 12;
13976
13976
  }
13977
13977
  }
13978
13978
  @media screen and (min-width: 48rem) {
13979
- .pkt-grid > .pkt-cell.pkt-cell--span2-tablet-up {
13979
+ .pkt-grid > .pkt-cell.pkt-cell--span2-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-tablet-up {
13980
13980
  grid-column-end: span 2;
13981
13981
  }
13982
- .pkt-grid > .pkt-cell.pkt-cell--span3-tablet-up {
13982
+ .pkt-grid > .pkt-cell.pkt-cell--span3-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span3-tablet-up {
13983
13983
  grid-column-end: span 3;
13984
13984
  }
13985
- .pkt-grid > .pkt-cell.pkt-cell--span4-tablet-up {
13985
+ .pkt-grid > .pkt-cell.pkt-cell--span4-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span4-tablet-up {
13986
13986
  grid-column-end: span 4;
13987
13987
  }
13988
- .pkt-grid > .pkt-cell.pkt-cell--span5-tablet-up {
13988
+ .pkt-grid > .pkt-cell.pkt-cell--span5-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span5-tablet-up {
13989
13989
  grid-column-end: span 5;
13990
13990
  }
13991
- .pkt-grid > .pkt-cell.pkt-cell--span6-tablet-up {
13991
+ .pkt-grid > .pkt-cell.pkt-cell--span6-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span6-tablet-up {
13992
13992
  grid-column-end: span 6;
13993
13993
  }
13994
- .pkt-grid > .pkt-cell.pkt-cell--span7-tablet-up {
13994
+ .pkt-grid > .pkt-cell.pkt-cell--span7-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span7-tablet-up {
13995
13995
  grid-column-end: span 7;
13996
13996
  }
13997
- .pkt-grid > .pkt-cell.pkt-cell--span8-tablet-up {
13997
+ .pkt-grid > .pkt-cell.pkt-cell--span8-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span8-tablet-up {
13998
13998
  grid-column-end: span 8;
13999
13999
  }
14000
- .pkt-grid > .pkt-cell.pkt-cell--span9-tablet-up {
14000
+ .pkt-grid > .pkt-cell.pkt-cell--span9-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span9-tablet-up {
14001
14001
  grid-column-end: span 9;
14002
14002
  }
14003
- .pkt-grid > .pkt-cell.pkt-cell--span10-tablet-up {
14003
+ .pkt-grid > .pkt-cell.pkt-cell--span10-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span10-tablet-up {
14004
14004
  grid-column-end: span 10;
14005
14005
  }
14006
- .pkt-grid > .pkt-cell.pkt-cell--span11-tablet-up {
14006
+ .pkt-grid > .pkt-cell.pkt-cell--span11-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span11-tablet-up {
14007
14007
  grid-column-end: span 11;
14008
14008
  }
14009
- .pkt-grid > .pkt-cell.pkt-cell--span12-tablet-up {
14009
+ .pkt-grid > .pkt-cell.pkt-cell--span12-tablet-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-tablet-up {
14010
14010
  grid-column-end: span 12;
14011
14011
  }
14012
14012
  }
14013
14013
  @media screen and (min-width: 64rem) {
14014
- .pkt-grid > .pkt-cell.pkt-cell--span2-tablet-big-up {
14014
+ .pkt-grid > .pkt-cell.pkt-cell--span2-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-tablet-big-up {
14015
14015
  grid-column-end: span 2;
14016
14016
  }
14017
- .pkt-grid > .pkt-cell.pkt-cell--span3-tablet-big-up {
14017
+ .pkt-grid > .pkt-cell.pkt-cell--span3-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span3-tablet-big-up {
14018
14018
  grid-column-end: span 3;
14019
14019
  }
14020
- .pkt-grid > .pkt-cell.pkt-cell--span4-tablet-big-up {
14020
+ .pkt-grid > .pkt-cell.pkt-cell--span4-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span4-tablet-big-up {
14021
14021
  grid-column-end: span 4;
14022
14022
  }
14023
- .pkt-grid > .pkt-cell.pkt-cell--span5-tablet-big-up {
14023
+ .pkt-grid > .pkt-cell.pkt-cell--span5-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span5-tablet-big-up {
14024
14024
  grid-column-end: span 5;
14025
14025
  }
14026
- .pkt-grid > .pkt-cell.pkt-cell--span6-tablet-big-up {
14026
+ .pkt-grid > .pkt-cell.pkt-cell--span6-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span6-tablet-big-up {
14027
14027
  grid-column-end: span 6;
14028
14028
  }
14029
- .pkt-grid > .pkt-cell.pkt-cell--span7-tablet-big-up {
14029
+ .pkt-grid > .pkt-cell.pkt-cell--span7-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span7-tablet-big-up {
14030
14030
  grid-column-end: span 7;
14031
14031
  }
14032
- .pkt-grid > .pkt-cell.pkt-cell--span8-tablet-big-up {
14032
+ .pkt-grid > .pkt-cell.pkt-cell--span8-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span8-tablet-big-up {
14033
14033
  grid-column-end: span 8;
14034
14034
  }
14035
- .pkt-grid > .pkt-cell.pkt-cell--span9-tablet-big-up {
14035
+ .pkt-grid > .pkt-cell.pkt-cell--span9-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span9-tablet-big-up {
14036
14036
  grid-column-end: span 9;
14037
14037
  }
14038
- .pkt-grid > .pkt-cell.pkt-cell--span10-tablet-big-up {
14038
+ .pkt-grid > .pkt-cell.pkt-cell--span10-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span10-tablet-big-up {
14039
14039
  grid-column-end: span 10;
14040
14040
  }
14041
- .pkt-grid > .pkt-cell.pkt-cell--span11-tablet-big-up {
14041
+ .pkt-grid > .pkt-cell.pkt-cell--span11-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span11-tablet-big-up {
14042
14042
  grid-column-end: span 11;
14043
14043
  }
14044
- .pkt-grid > .pkt-cell.pkt-cell--span12-tablet-big-up {
14044
+ .pkt-grid > .pkt-cell.pkt-cell--span12-tablet-big-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-tablet-big-up {
14045
14045
  grid-column-end: span 12;
14046
14046
  }
14047
14047
  }
14048
14048
  @media screen and (min-width: 80rem) {
14049
- .pkt-grid > .pkt-cell.pkt-cell--span2-laptop-up {
14049
+ .pkt-grid > .pkt-cell.pkt-cell--span2-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-laptop-up {
14050
14050
  grid-column-end: span 2;
14051
14051
  }
14052
- .pkt-grid > .pkt-cell.pkt-cell--span3-laptop-up {
14052
+ .pkt-grid > .pkt-cell.pkt-cell--span3-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span3-laptop-up {
14053
14053
  grid-column-end: span 3;
14054
14054
  }
14055
- .pkt-grid > .pkt-cell.pkt-cell--span4-laptop-up {
14055
+ .pkt-grid > .pkt-cell.pkt-cell--span4-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span4-laptop-up {
14056
14056
  grid-column-end: span 4;
14057
14057
  }
14058
- .pkt-grid > .pkt-cell.pkt-cell--span5-laptop-up {
14058
+ .pkt-grid > .pkt-cell.pkt-cell--span5-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span5-laptop-up {
14059
14059
  grid-column-end: span 5;
14060
14060
  }
14061
- .pkt-grid > .pkt-cell.pkt-cell--span6-laptop-up {
14061
+ .pkt-grid > .pkt-cell.pkt-cell--span6-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span6-laptop-up {
14062
14062
  grid-column-end: span 6;
14063
14063
  }
14064
- .pkt-grid > .pkt-cell.pkt-cell--span7-laptop-up {
14064
+ .pkt-grid > .pkt-cell.pkt-cell--span7-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span7-laptop-up {
14065
14065
  grid-column-end: span 7;
14066
14066
  }
14067
- .pkt-grid > .pkt-cell.pkt-cell--span8-laptop-up {
14067
+ .pkt-grid > .pkt-cell.pkt-cell--span8-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span8-laptop-up {
14068
14068
  grid-column-end: span 8;
14069
14069
  }
14070
- .pkt-grid > .pkt-cell.pkt-cell--span9-laptop-up {
14070
+ .pkt-grid > .pkt-cell.pkt-cell--span9-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span9-laptop-up {
14071
14071
  grid-column-end: span 9;
14072
14072
  }
14073
- .pkt-grid > .pkt-cell.pkt-cell--span10-laptop-up {
14073
+ .pkt-grid > .pkt-cell.pkt-cell--span10-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span10-laptop-up {
14074
14074
  grid-column-end: span 10;
14075
14075
  }
14076
- .pkt-grid > .pkt-cell.pkt-cell--span11-laptop-up {
14076
+ .pkt-grid > .pkt-cell.pkt-cell--span11-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span11-laptop-up {
14077
14077
  grid-column-end: span 11;
14078
14078
  }
14079
- .pkt-grid > .pkt-cell.pkt-cell--span12-laptop-up {
14079
+ .pkt-grid > .pkt-cell.pkt-cell--span12-laptop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-laptop-up {
14080
14080
  grid-column-end: span 12;
14081
14081
  }
14082
14082
  }
14083
14083
  @media screen and (min-width: 100rem) {
14084
- .pkt-grid > .pkt-cell.pkt-cell--span2-desktop-up {
14084
+ .pkt-grid > .pkt-cell.pkt-cell--span2-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span2-desktop-up {
14085
14085
  grid-column-end: span 2;
14086
14086
  }
14087
- .pkt-grid > .pkt-cell.pkt-cell--span3-desktop-up {
14087
+ .pkt-grid > .pkt-cell.pkt-cell--span3-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span3-desktop-up {
14088
14088
  grid-column-end: span 3;
14089
14089
  }
14090
- .pkt-grid > .pkt-cell.pkt-cell--span4-desktop-up {
14090
+ .pkt-grid > .pkt-cell.pkt-cell--span4-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span4-desktop-up {
14091
14091
  grid-column-end: span 4;
14092
14092
  }
14093
- .pkt-grid > .pkt-cell.pkt-cell--span5-desktop-up {
14093
+ .pkt-grid > .pkt-cell.pkt-cell--span5-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span5-desktop-up {
14094
14094
  grid-column-end: span 5;
14095
14095
  }
14096
- .pkt-grid > .pkt-cell.pkt-cell--span6-desktop-up {
14096
+ .pkt-grid > .pkt-cell.pkt-cell--span6-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span6-desktop-up {
14097
14097
  grid-column-end: span 6;
14098
14098
  }
14099
- .pkt-grid > .pkt-cell.pkt-cell--span7-desktop-up {
14099
+ .pkt-grid > .pkt-cell.pkt-cell--span7-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span7-desktop-up {
14100
14100
  grid-column-end: span 7;
14101
14101
  }
14102
- .pkt-grid > .pkt-cell.pkt-cell--span8-desktop-up {
14102
+ .pkt-grid > .pkt-cell.pkt-cell--span8-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span8-desktop-up {
14103
14103
  grid-column-end: span 8;
14104
14104
  }
14105
- .pkt-grid > .pkt-cell.pkt-cell--span9-desktop-up {
14105
+ .pkt-grid > .pkt-cell.pkt-cell--span9-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span9-desktop-up {
14106
14106
  grid-column-end: span 9;
14107
14107
  }
14108
- .pkt-grid > .pkt-cell.pkt-cell--span10-desktop-up {
14108
+ .pkt-grid > .pkt-cell.pkt-cell--span10-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span10-desktop-up {
14109
14109
  grid-column-end: span 10;
14110
14110
  }
14111
- .pkt-grid > .pkt-cell.pkt-cell--span11-desktop-up {
14111
+ .pkt-grid > .pkt-cell.pkt-cell--span11-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span11-desktop-up {
14112
14112
  grid-column-end: span 11;
14113
14113
  }
14114
- .pkt-grid > .pkt-cell.pkt-cell--span12-desktop-up {
14114
+ .pkt-grid > .pkt-cell.pkt-cell--span12-desktop-up, .pkt-grid > * > .pkt-cell.pkt-cell--span12-desktop-up {
14115
14115
  grid-column-end: span 12;
14116
14116
  }
14117
14117
  }
@@ -14123,12 +14123,16 @@ body {
14123
14123
  *
14124
14124
  */
14125
14125
  body {
14126
- color: var(--pkt-color-text-body-default);
14127
14126
  font-family: 'Oslo Sans', arial, sans-serif;
14128
14127
  font-size: 1rem;
14129
14128
  font-weight: 300;
14130
14129
  letter-spacing: normal;
14131
- line-height: 1.5rem;
14130
+ line-height: 1.75rem;
14131
+ }
14132
+
14133
+ body,
14134
+ [data-mode=dark] {
14135
+ color: var(--pkt-color-text-body-default);
14132
14136
  }
14133
14137
 
14134
14138
  em {
@@ -14192,7 +14196,7 @@ a:active, a.pkt-link--active,
14192
14196
  }
14193
14197
 
14194
14198
  .pkt-link__icon {
14195
- --fg-color: currentColor;
14199
+ --fg-color: var(--pkt-color-text-action-normal);
14196
14200
  width: 1.5rem;
14197
14201
  height: 1.5rem;
14198
14202
  flex-shrink: 0;
@@ -14214,7 +14218,7 @@ a:active, a.pkt-link--active,
14214
14218
  .pkt-link--external::after {
14215
14219
  display: inline-block;
14216
14220
  content: " ";
14217
- --svg: url(https://punkt-cdn.oslo.kommune.no/13.2/icons/new-window-small.svg);
14221
+ --svg: url(https://punkt-cdn.oslo.kommune.no/13.3/icons/new-window-small.svg);
14218
14222
  background-image: var(--svg);
14219
14223
  background-repeat: no-repeat;
14220
14224
  background-size: 18px 18px;
@@ -18230,7 +18234,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18230
18234
  outline-color: var(--pkt-color-input-border-hover);
18231
18235
  }
18232
18236
  .pkt-input-check__input-checkbox:checked[type=checkbox] {
18233
- --svg: url(https://punkt-cdn.oslo.kommune.no/13.2/icons/check-medium.svg);
18237
+ --svg: url(https://punkt-cdn.oslo.kommune.no/13.3/icons/check-medium.svg);
18234
18238
  position: relative;
18235
18239
  background-color: var(--pkt-color-input-border-normal);
18236
18240
  }
@@ -18288,7 +18292,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18288
18292
  cursor: not-allowed;
18289
18293
  }
18290
18294
  .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
18291
- --svg: url(https://punkt-cdn.oslo.kommune.no/13.2/icons/check-medium.svg);
18295
+ --svg: url(https://punkt-cdn.oslo.kommune.no/13.3/icons/check-medium.svg);
18292
18296
  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
18293
18297
  filter: grayscale(100%) brightness(400%);
18294
18298
  }
@@ -18541,7 +18545,7 @@ pkt-select {
18541
18545
  }
18542
18546
  .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
18543
18547
  .pkt-select:is(select):not([multiple]) {
18544
- --svg: url(https://punkt-cdn.oslo.kommune.no/13.2/icons/chevron-thin-down.svg);
18548
+ --svg: url(https://punkt-cdn.oslo.kommune.no/13.3/icons/chevron-thin-down.svg);
18545
18549
  background-image: var(--svg);
18546
18550
  background-repeat: no-repeat;
18547
18551
  background-position: right 0.7rem top 50%;
@@ -19081,7 +19085,8 @@ pkt-select {
19081
19085
  border-collapse: collapse;
19082
19086
  }
19083
19087
  .pkt-table__header,
19084
- .pkt-table thead {
19088
+ .pkt-table thead,
19089
+ .pkt-table thead.pkt-table__header th {
19085
19090
  text-align: left;
19086
19091
  vertical-align: top;
19087
19092
  font-size: 1.125rem;
@@ -19191,6 +19196,11 @@ pkt-accordion-item {
19191
19196
  display: block;
19192
19197
  }
19193
19198
 
19199
+ pkt-accordion,
19200
+ pkt-accordion-item {
19201
+ display: block;
19202
+ }
19203
+
19194
19204
  .pkt-accordion,
19195
19205
  pkt-accordion::part(container) {
19196
19206
  display: grid;
@@ -19206,7 +19216,9 @@ pkt-accordion::part(container):focus-visible {
19206
19216
 
19207
19217
  .pkt-accordion--borderless .pkt-accordion-item,
19208
19218
  pkt-accordion[skin=borderless] .pkt-accordion-item {
19219
+ color: var(--pkt-color-text-body-default);
19209
19220
  border: none;
19221
+ background-color: var(--pkt-color-background-default);
19210
19222
  }
19211
19223
  .pkt-accordion--borderless .pkt-accordion-item[open] .pkt-accordion-item__title,
19212
19224
  pkt-accordion[skin=borderless] .pkt-accordion-item[open] .pkt-accordion-item__title {
@@ -19215,7 +19227,9 @@ pkt-accordion[skin=borderless] .pkt-accordion-item[open] .pkt-accordion-item__ti
19215
19227
 
19216
19228
  .pkt-accordion--outlined .pkt-accordion-item,
19217
19229
  pkt-accordion[skin=outlined] .pkt-accordion-item {
19230
+ color: var(--pkt-color-text-body-default);
19218
19231
  border: 2px solid var(--pkt-color-border-subtle);
19232
+ background-color: var(--pkt-color-background-default);
19219
19233
  }
19220
19234
 
19221
19235
  pkt-accordion[skin=beige]::part(container),
@@ -20721,19 +20735,19 @@ pkt-heading {
20721
20735
  }
20722
20736
  .pkt-heading--medium {
20723
20737
  letter-spacing: -0.2px;
20724
- font-weight: 400;
20738
+ font-weight: 500;
20725
20739
  font-size: 1.875rem;
20726
20740
  line-height: 2.75rem;
20727
20741
  }
20728
20742
  .pkt-heading--small {
20729
20743
  letter-spacing: -0.2px;
20730
- font-weight: 400;
20744
+ font-weight: 500;
20731
20745
  font-size: 1.5rem;
20732
20746
  line-height: 2.25rem;
20733
20747
  }
20734
20748
  .pkt-heading--xsmall {
20735
20749
  letter-spacing: -0.2px;
20736
- font-weight: 400;
20750
+ font-weight: 500;
20737
20751
  font-size: 1.375rem;
20738
20752
  line-height: 2.125rem;
20739
20753
  }
@@ -20993,6 +21007,8 @@ pkt-linkcard {
20993
21007
  }
20994
21008
  .pkt-linkcard:hover .pkt-linkcard__title {
20995
21009
  text-decoration: underline;
21010
+ text-decoration-thickness: 0.12rem;
21011
+ text-underline-offset: 0.15em;
20996
21012
  }
20997
21013
  .pkt-linkcard:hover .pkt-link--external::after {
20998
21014
  filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
@@ -21273,6 +21289,7 @@ pkt-listbox {
21273
21289
  * Loader component
21274
21290
  */
21275
21291
  .pkt-loader {
21292
+ color: currentColor;
21276
21293
  width: fit-content;
21277
21294
  text-align: center;
21278
21295
  }
@@ -21796,25 +21813,61 @@ pkt-messagebox {
21796
21813
  .pkt-preview .pkt-tabs {
21797
21814
  --pkt-tabs-bg: var(--pkt-color-surface-default-gray);
21798
21815
  }
21799
- .pkt-preview__mode {
21800
- position: absolute;
21801
- top: 1rem;
21802
- right: 1rem;
21803
- }
21804
21816
  .pkt-preview__component {
21817
+ position: relative;
21805
21818
  display: flex;
21806
21819
  justify-content: space-around;
21807
21820
  align-items: center;
21808
21821
  min-height: 10rem;
21809
21822
  padding: 3rem 1rem;
21810
- margin: 1rem 0 0;
21811
- border: 0.25rem solid var(--pkt-color-surface-default-gray);
21823
+ margin: 0;
21812
21824
  background-color: var(--pkt-color-background-default);
21813
21825
  transition: background-color 0.2s linear;
21814
21826
  }
21815
21827
  .pkt-preview__component--fullwidth > div {
21816
21828
  width: 100%;
21817
21829
  }
21830
+ .pkt-preview__component-container {
21831
+ border: 2px solid var(--pkt-color-border-gray);
21832
+ display: flex;
21833
+ flex-direction: column;
21834
+ gap: 0;
21835
+ }
21836
+ @media screen and (min-width: 64rem) {
21837
+ .pkt-preview__component-container {
21838
+ flex-direction: row;
21839
+ }
21840
+ .pkt-preview__component-container .pkt-preview__component {
21841
+ flex: 1 1 0;
21842
+ min-width: 0;
21843
+ }
21844
+ .pkt-preview__component-container .pkt-preview__panel {
21845
+ flex: 0 0 auto;
21846
+ min-width: 20rem;
21847
+ max-width: 25rem;
21848
+ width: 100%;
21849
+ }
21850
+ }
21851
+ .pkt-preview__panel {
21852
+ display: flex;
21853
+ flex-direction: column;
21854
+ gap: 1rem;
21855
+ padding: 2rem 1.5rem;
21856
+ justify-content: space-between;
21857
+ align-items: stretch;
21858
+ background-color: var(--pkt-color-surface-default-gray);
21859
+ }
21860
+ .pkt-preview__panel__options {
21861
+ display: flex;
21862
+ flex-direction: column;
21863
+ gap: 1rem;
21864
+ margin-bottom: 1rem;
21865
+ }
21866
+ .pkt-preview__options {
21867
+ display: flex;
21868
+ flex-direction: column;
21869
+ gap: 1rem;
21870
+ }
21818
21871
  .pkt-preview__opts {
21819
21872
  padding: 1rem;
21820
21873
  background-color: var(--pkt-color-surface-default-gray);
@@ -21829,14 +21882,53 @@ pkt-messagebox {
21829
21882
  right: 0;
21830
21883
  padding: 0 0.25rem 0;
21831
21884
  }
21885
+ .pkt-preview .hide-code-button {
21886
+ position: absolute;
21887
+ top: 100%;
21888
+ margin-top: -1.5rem;
21889
+ left: 0;
21890
+ width: 100%;
21891
+ display: flex;
21892
+ justify-content: center;
21893
+ align-items: flex-end;
21894
+ padding-bottom: 1rem;
21895
+ z-index: 2;
21896
+ }
21832
21897
  .pkt-preview__code {
21898
+ color: var(--pkt-color-text-body-default);
21833
21899
  position: relative;
21834
- margin-bottom: 1rem;
21835
- font-size: 0.8rem;
21836
21900
  }
21837
- .pkt-preview__code > pre {
21901
+ .pkt-preview__code-container {
21902
+ position: relative;
21903
+ padding: 2rem 2rem 0;
21904
+ background-color: var(--pkt-color-grays-gray-800);
21905
+ transition: max-height 0.5s ease;
21906
+ max-height: 50rem;
21907
+ }
21908
+ .pkt-preview__code-container .pkt-tabs {
21909
+ --pkt-tabs-bg: var(--pkt-color-grays-gray-800);
21910
+ }
21911
+ .pkt-preview__code-container.hide-code {
21912
+ overflow: hidden;
21913
+ max-height: 11.7rem;
21914
+ }
21915
+ .pkt-preview__code-container.hide-code:after {
21916
+ content: "";
21917
+ display: block;
21918
+ position: absolute;
21919
+ top: 0;
21920
+ bottom: 0;
21921
+ left: 0;
21922
+ right: 0;
21923
+ background: linear-gradient(180deg, transparent 0%, transparent 93%, var(--pkt-color-grays-gray-800) 100%);
21924
+ }
21925
+ .pkt-preview__code pre {
21926
+ max-height: 30rem;
21927
+ overflow: auto;
21838
21928
  margin-top: 0 !important;
21839
- background-color: var(--pkt-color-surface-default-gray) !important;
21929
+ background-color: transparent !important;
21930
+ font-size: 1rem;
21931
+ padding: 2rem 0;
21840
21932
  }
21841
21933
  .pkt-preview__copy {
21842
21934
  position: absolute;
@@ -21846,15 +21938,24 @@ pkt-messagebox {
21846
21938
  gap: 0.5rem;
21847
21939
  align-items: center;
21848
21940
  }
21849
- .pkt-preview__specs {
21850
- background-color: var(--pkt-color-surface-default-gray);
21941
+ .pkt-preview__array-item, .pkt-preview__object-editor {
21942
+ position: relative;
21943
+ display: flex;
21944
+ flex-direction: column;
21945
+ gap: 1rem;
21946
+ }
21947
+ .pkt-preview__add-object {
21948
+ text-align: right;
21949
+ margin-top: 0.5rem;
21950
+ }
21951
+ .pkt-preview__remove-object {
21952
+ position: absolute;
21953
+ top: -2rem;
21954
+ right: -0.25rem;
21851
21955
  }
21852
21956
  .pkt-preview__specs pre {
21853
21957
  margin-top: 0 !important;
21854
21958
  }
21855
- .pkt-preview__specs h2 {
21856
- padding: 1rem;
21857
- }
21858
21959
 
21859
21960
  .astro-code.github-light {
21860
21961
  background-color: var(--pkt-color-surface-default-gray) !important;
@@ -22267,7 +22368,7 @@ pkt-messagebox {
22267
22368
  .pkt-tabs__link:focus:not(:active), .pkt-tabs__link:focus-visible:not(:active), .pkt-tabs__button:focus:not(:active), .pkt-tabs__button:focus-visible:not(:active) {
22268
22369
  border: 0;
22269
22370
  box-shadow: none;
22270
- background-color: var(--pkt-color-surface-default-gray);
22371
+ background-color: var(--pkt-tabs-bg);
22271
22372
  outline: 0.25rem solid var(--pkt-color-border-states-focus);
22272
22373
  outline-offset: 0;
22273
22374
  }
@@ -22535,6 +22636,11 @@ pkt-tag > .pkt-tag {
22535
22636
  .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover {
22536
22637
  background-color: var(--pkt-color-brand-warm-blue-1000) !important;
22537
22638
  color: var(--pkt-color-brand-neutrals-200) !important;
22639
+ }
22640
+ .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,
22641
+ .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover svg, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,
22642
+ .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus svg, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover,
22643
+ .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover svg {
22538
22644
  --fg-color: var(--pkt-color-brand-neutrals-200) !important;
22539
22645
  }
22540
22646
  .pkt-tag.pkt-tag--small {