@navikt/ds-css 3.0.1 → 3.1.1

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 (68) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/button.css +87 -12
  3. package/chat.css +0 -5
  4. package/chips.css +24 -0
  5. package/date.css +42 -8
  6. package/dist/component/button.css +87 -12
  7. package/dist/component/button.min.css +1 -1
  8. package/dist/component/chat.css +0 -5
  9. package/dist/component/chat.min.css +1 -1
  10. package/dist/component/chips.css +24 -0
  11. package/dist/component/chips.min.css +1 -1
  12. package/dist/component/date.css +42 -8
  13. package/dist/component/date.min.css +1 -1
  14. package/dist/component/expansioncard.css +7 -3
  15. package/dist/component/expansioncard.min.css +1 -1
  16. package/dist/component/form.css +161 -33
  17. package/dist/component/form.min.css +1 -1
  18. package/dist/component/helptext.css +20 -4
  19. package/dist/component/helptext.min.css +1 -1
  20. package/dist/component/index.css +420 -77
  21. package/dist/component/index.min.css +2 -2
  22. package/dist/component/link.css +11 -1
  23. package/dist/component/link.min.css +1 -1
  24. package/dist/component/linkpanel.css +8 -1
  25. package/dist/component/linkpanel.min.css +1 -1
  26. package/dist/component/modal.css +9 -1
  27. package/dist/component/modal.min.css +1 -1
  28. package/dist/component/pagination.css +7 -1
  29. package/dist/component/pagination.min.css +1 -1
  30. package/dist/component/popover.css +8 -1
  31. package/dist/component/popover.min.css +1 -1
  32. package/dist/component/readmore.css +8 -1
  33. package/dist/component/readmore.min.css +1 -1
  34. package/dist/component/stepper.css +9 -1
  35. package/dist/component/stepper.min.css +1 -1
  36. package/dist/component/table.css +15 -2
  37. package/dist/component/table.min.css +1 -1
  38. package/dist/component/tabs.css +16 -1
  39. package/dist/component/tabs.min.css +1 -1
  40. package/dist/component/togglegroup.css +22 -2
  41. package/dist/component/togglegroup.min.css +1 -1
  42. package/dist/components.css +419 -76
  43. package/dist/components.min.css +2 -2
  44. package/dist/global/tokens.css +1 -1
  45. package/dist/index.css +420 -77
  46. package/dist/index.min.css +2 -2
  47. package/expansioncard.css +7 -3
  48. package/form/error-summary.css +8 -1
  49. package/form/fieldset.css +1 -1
  50. package/form/form.css +5 -1
  51. package/form/radio-checkbox.css +79 -16
  52. package/form/search.css +39 -7
  53. package/form/select.css +8 -1
  54. package/form/switch.css +8 -2
  55. package/form/text-field.css +15 -2
  56. package/form/textarea.css +16 -2
  57. package/help-text.css +20 -4
  58. package/link-panel.css +8 -1
  59. package/link.css +11 -1
  60. package/modal.css +9 -1
  61. package/package.json +2 -2
  62. package/pagination.css +7 -1
  63. package/popover.css +8 -1
  64. package/read-more.css +8 -1
  65. package/stepper.css +9 -1
  66. package/table.css +15 -2
  67. package/tabs.css +16 -1
  68. package/toggle-group.css +22 -2
package/toggle-group.css CHANGED
@@ -49,20 +49,40 @@
49
49
  color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
50
50
  }
51
51
 
52
- .navds-toggle-group__button:focus {
52
+ .navds-toggle-group__button:focus-visible {
53
53
  outline: none;
54
54
  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
55
55
  }
56
56
 
57
- .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
57
+ @supports not selector(:focus-visible) {
58
+ .navds-toggle-group__button:focus {
59
+ outline: none;
60
+ box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
61
+ }
62
+ }
63
+
64
+ .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
58
65
  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
59
66
  }
60
67
 
68
+ @supports not selector(:focus-visible) {
69
+ .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
70
+ box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
71
+ }
72
+ }
73
+
61
74
  .navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
62
75
  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
63
76
  0 0 0 4px var(--a-border-focus);
64
77
  }
65
78
 
79
+ @supports not selector(:focus-visible) {
80
+ .navds-toggle-group--neutral > .navds-toggle-group__button:focus-visible:hover[aria-pressed="false"] {
81
+ box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
82
+ 0 0 0 4px var(--a-border-focus);
83
+ }
84
+ }
85
+
66
86
  .navds-toggle-group__button-inner {
67
87
  display: flex;
68
88
  align-items: center;