@navikt/ds-css 3.2.2 → 3.2.3

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 (16) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/copybutton.css +22 -0
  3. package/date.css +35 -8
  4. package/dist/component/copybutton.css +22 -0
  5. package/dist/component/copybutton.min.css +1 -1
  6. package/dist/component/date.css +35 -8
  7. package/dist/component/date.min.css +1 -1
  8. package/dist/component/index.css +51 -9
  9. package/dist/component/index.min.css +2 -2
  10. package/dist/components.css +50 -8
  11. package/dist/components.min.css +2 -2
  12. package/dist/global/tokens.css +1 -1
  13. package/dist/index.css +51 -9
  14. package/dist/index.min.css +2 -2
  15. package/package.json +2 -2
  16. package/tokens.json +3 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 3.2.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1993](https://github.com/navikt/aksel/pull/1993) [`475e994f4`](https://github.com/navikt/aksel/commit/475e994f494b2080ffc05eb1684b6a244e3e2969) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :bug: Fikset small-variant av datepicker-input
8
+
9
+ - :recycle: Refactored Datepicker.Input-button for bugfix
10
+
11
+ - [#1994](https://github.com/navikt/aksel/pull/1994) [`444e905e0`](https://github.com/navikt/aksel/commit/444e905e01965fd5cac40ff20c5225b072e67221) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :tada: CopyButton har nå en `xsmall`-variant
12
+
13
+ - Kan nå lettere brukes i tabeller
14
+
3
15
  ## 3.2.2
4
16
 
5
17
  ## 3.2.1
package/copybutton.css CHANGED
@@ -27,6 +27,12 @@
27
27
  min-height: 2rem;
28
28
  }
29
29
 
30
+ .navds-copybutton--xsmall {
31
+ --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2);
32
+
33
+ min-height: 1.5rem;
34
+ }
35
+
30
36
  .navds-copybutton--icon-only {
31
37
  --__ac-copybutton-padding: var(--a-spacing-3);
32
38
  }
@@ -35,6 +41,14 @@
35
41
  --__ac-copybutton-padding: var(--a-spacing-1);
36
42
  }
37
43
 
44
+ .navds-copybutton--xsmall.navds-copybutton--icon-only {
45
+ --__ac-copybutton-padding: var(--a-spacing-05);
46
+ }
47
+
48
+ .navds-copybutton--xsmall .navds-copybutton__icon {
49
+ font-size: 1.25rem;
50
+ }
51
+
38
52
  .navds-copybutton__icon {
39
53
  font-size: 1.5rem;
40
54
  display: flex;
@@ -45,6 +59,10 @@
45
59
  margin: 0;
46
60
  }
47
61
 
62
+ :where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
63
+ margin: -2px;
64
+ }
65
+
48
66
  .navds-copybutton:focus-visible {
49
67
  outline: none;
50
68
  box-shadow: var(--a-shadow-focus);
@@ -108,6 +126,10 @@
108
126
  gap: var(--a-spacing-2);
109
127
  }
110
128
 
129
+ .navds-copybutton--xsmall > .navds-copybutton__content {
130
+ gap: var(--a-spacing-1);
131
+ }
132
+
111
133
  .navds-copybutton--active > .navds-copybutton__content {
112
134
  animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
113
135
  }
package/date.css CHANGED
@@ -198,11 +198,11 @@
198
198
  }
199
199
 
200
200
  .navds-date__field-input {
201
- padding-right: var(--a-spacing-12);
201
+ padding-right: var(--a-spacing-14);
202
202
  }
203
203
 
204
204
  .navds-form-field--small .navds-date__field-input {
205
- padding-right: var(--a-spacing-8);
205
+ padding-right: var(--a-spacing-10);
206
206
  }
207
207
 
208
208
  /* Error-handling */
@@ -223,24 +223,51 @@
223
223
 
224
224
  .navds-date__field-button {
225
225
  position: absolute;
226
- right: var(--a-spacing-2);
226
+ right: 1px;
227
227
  top: 50%;
228
228
  transform: translateY(-50%);
229
229
  color: var(--ac-date-input-button-text, var(--a-text-default));
230
+ display: inline-flex;
231
+ cursor: pointer;
232
+ margin: 0;
233
+ text-decoration: none;
234
+ border: none;
235
+ background: none;
236
+ border-radius: 3px;
237
+ padding: var(--a-spacing-3);
238
+ align-items: center;
239
+ justify-content: center;
240
+ font-size: 1.5rem;
241
+ height: calc(100% - 2px);
242
+ border-start-start-radius: 0;
243
+ border-end-start-radius: 0;
230
244
  }
231
245
 
232
246
  .navds-form-field--small .navds-date__field-button {
233
- right: var(--a-spacing-2);
234
- height: 1.5rem;
235
- width: 1.5rem;
247
+ padding: var(--a-spacing-1);
236
248
  }
237
249
 
238
- .navds-form-field--small .navds-date__field-button svg {
239
- font-size: var(--a-font-size-medium);
250
+ .navds-date__field-button:hover:where(:not([disabled])) {
251
+ color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
252
+ background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
240
253
  }
241
254
 
242
255
  .navds-form-field--disabled .navds-date__field-button {
243
256
  opacity: 1;
257
+ cursor: not-allowed;
258
+ }
259
+
260
+ .navds-date__field-button:focus-visible {
261
+ outline: none;
262
+ box-shadow: var(--a-shadow-focus);
263
+ border-radius: var(--a-border-radius-medium);
264
+ }
265
+
266
+ @supports not selector(:focus-visible) {
267
+ .navds-date__field-button:focus {
268
+ outline: none;
269
+ box-shadow: var(--a-shadow-focus);
270
+ }
244
271
  }
245
272
 
246
273
  .navds-date__caption__year {
package/dist/component/copybutton.css CHANGED
@@ -27,6 +27,12 @@
27
27
  min-height: 2rem;
28
28
  }
29
29
 
30
+ .navds-copybutton--xsmall {
31
+ --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2);
32
+
33
+ min-height: 1.5rem;
34
+ }
35
+
30
36
  .navds-copybutton--icon-only {
31
37
  --__ac-copybutton-padding: var(--a-spacing-3);
32
38
  }
@@ -35,6 +41,14 @@
35
41
  --__ac-copybutton-padding: var(--a-spacing-1);
36
42
  }
37
43
 
44
+ .navds-copybutton--xsmall.navds-copybutton--icon-only {
45
+ --__ac-copybutton-padding: var(--a-spacing-05);
46
+ }
47
+
48
+ .navds-copybutton--xsmall .navds-copybutton__icon {
49
+ font-size: 1.25rem;
50
+ }
51
+
38
52
  .navds-copybutton__icon {
39
53
  font-size: 1.5rem;
40
54
  display: flex;
@@ -45,6 +59,10 @@
45
59
  margin: 0;
46
60
  }
47
61
 
62
+ :where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
63
+ margin: -2px;
64
+ }
65
+
48
66
  .navds-copybutton:focus-visible {
49
67
  outline: none;
50
68
  box-shadow: var(--a-shadow-focus);
@@ -110,6 +128,10 @@
110
128
  gap: var(--a-spacing-2);
111
129
  }
112
130
 
131
+ .navds-copybutton--xsmall > .navds-copybutton__content {
132
+ gap: var(--a-spacing-1);
133
+ }
134
+
113
135
  .navds-copybutton--active > .navds-copybutton__content {
114
136
  animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
115
137
  }
package/dist/component/copybutton.min.css CHANGED
@@ -1 +1 @@
1
- [data-theme=dark] .navds-copybutton,[data-theme=dark].navds-copybutton{--a-text-action:var(--a-blue-300);--a-surface-hover:rgba(214,231,255,.13);--a-icon-success:#33aa5f;--a-text-subtle:rgba(231,240,254,.69);--a-text-default:rgba(251,252,254,.96)}.navds-copybutton{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-5);background:none;border:none;border-radius:var(--ac-copybutton-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;margin:0;padding:var(--__ac-copybutton-padding);place-content:center;text-decoration:none}.navds-copybutton--small{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-3);min-height:2rem}.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-3)}.navds-copybutton--small.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-1)}.navds-copybutton__icon{display:flex;font-size:1.5rem;margin-left:-4px}.navds-copybutton__icon:only-child{margin:0}.navds-copybutton:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-copybutton:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-copybutton--action{background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));color:var(--ac-copybutton-action-text,var(--a-text-action))}.navds-copybutton--action:hover{background-color:var(--ac-copybutton-action-hover-bg,var(--a-surface-hover));color:var(--ac-copybutton-action-hover-text,var(--a-text-action))}.navds-copybutton--action:hover:where(:disabled),.navds-copybutton--action:where(:disabled){background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-action-text,var(--a-text-action))}.navds-copybutton--active.navds-copybutton--action{color:var(--ac-copybutton-action-active-text,var(--a-icon-success))}.navds-copybutton--neutral{background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));color:var(--ac-copybutton-neutral-text,var(--a-text-subtle))}.navds-copybutton--neutral:hover{background-color:var(--ac-copybutton-neutral-hover-bg,var(--a-surface-hover));color:var(--ac-copybutton-neutral-hover-text,var(--a-text-default))}.navds-copybutton--neutral:hover:where(:disabled,.navds-copybutton--disabled),.navds-copybutton--neutral:where(:disabled,.navds-copybutton--disabled){background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-neutral-text,var(--a-text-default))}.navds-copybutton--active.navds-copybutton--neutral{color:var(--ac-copybutton-neutral-active-text,var(--a-text-default))}.navds-copybutton__content{align-items:center;display:inline-flex;gap:var(--a-spacing-2);justify-content:center}.navds-copybutton--active>.navds-copybutton__content{-webkit-animation:var(--ac-copybutton-animation,akselCopyButtonAnimation .4s linear);animation:var(--ac-copybutton-animation,akselCopyButtonAnimation .4s linear)}@-webkit-keyframes akselCopyButtonAnimation{0%{opacity:.4}to{opacity:1}}@keyframes akselCopyButtonAnimation{0%{opacity:.4}to{opacity:1}}.navds-copybutton:where(:disabled){cursor:not-allowed;opacity:.3}
1
+ [data-theme=dark] .navds-copybutton,[data-theme=dark].navds-copybutton{--a-text-action:var(--a-blue-300);--a-surface-hover:rgba(214,231,255,.13);--a-icon-success:#33aa5f;--a-text-subtle:rgba(231,240,254,.69);--a-text-default:rgba(251,252,254,.96)}.navds-copybutton{--__ac-copybutton-padding:var(--a-spacing-3) var(--a-spacing-5);background:none;border:none;border-radius:var(--ac-copybutton-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;margin:0;padding:var(--__ac-copybutton-padding);place-content:center;text-decoration:none}.navds-copybutton--small{--__ac-copybutton-padding:var(--a-spacing-1) var(--a-spacing-3);min-height:2rem}.navds-copybutton--xsmall{--__ac-copybutton-padding:var(--a-spacing-05) var(--a-spacing-2);min-height:1.5rem}.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-3)}.navds-copybutton--small.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-1)}.navds-copybutton--xsmall.navds-copybutton--icon-only{--__ac-copybutton-padding:var(--a-spacing-05)}.navds-copybutton--xsmall .navds-copybutton__icon{font-size:1.25rem}.navds-copybutton__icon{display:flex;font-size:1.5rem;margin-left:-4px}.navds-copybutton__icon:only-child{margin:0}:where(.navds-copybutton--small,.navds-copybutton--xsmall):where(:not(:only-child)){margin:-2px}.navds-copybutton:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-copybutton:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-copybutton--action{background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));color:var(--ac-copybutton-action-text,var(--a-text-action))}.navds-copybutton--action:hover{background-color:var(--ac-copybutton-action-hover-bg,var(--a-surface-hover));color:var(--ac-copybutton-action-hover-text,var(--a-text-action))}.navds-copybutton--action:hover:where(:disabled),.navds-copybutton--action:where(:disabled){background-color:var(--ac-copybutton-action-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-action-text,var(--a-text-action))}.navds-copybutton--active.navds-copybutton--action{color:var(--ac-copybutton-action-active-text,var(--a-icon-success))}.navds-copybutton--neutral{background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));color:var(--ac-copybutton-neutral-text,var(--a-text-subtle))}.navds-copybutton--neutral:hover{background-color:var(--ac-copybutton-neutral-hover-bg,var(--a-surface-hover));color:var(--ac-copybutton-neutral-hover-text,var(--a-text-default))}.navds-copybutton--neutral:hover:where(:disabled,.navds-copybutton--disabled),.navds-copybutton--neutral:where(:disabled,.navds-copybutton--disabled){background-color:var(--ac-copybutton-neutral-bg,var(--a-surface-transparent));box-shadow:none;color:var(--ac-copybutton-neutral-text,var(--a-text-default))}.navds-copybutton--active.navds-copybutton--neutral{color:var(--ac-copybutton-neutral-active-text,var(--a-text-default))}.navds-copybutton__content{align-items:center;display:inline-flex;gap:var(--a-spacing-2);justify-content:center}.navds-copybutton--xsmall>.navds-copybutton__content{gap:var(--a-spacing-1)}.navds-copybutton--active>.navds-copybutton__content{-webkit-animation:var(--ac-copybutton-animation,akselCopyButtonAnimation .4s linear);animation:var(--ac-copybutton-animation,akselCopyButtonAnimation .4s linear)}@-webkit-keyframes akselCopyButtonAnimation{0%{opacity:.4}to{opacity:1}}@keyframes akselCopyButtonAnimation{0%{opacity:.4}to{opacity:1}}.navds-copybutton:where(:disabled){cursor:not-allowed;opacity:.3}
package/dist/component/date.css CHANGED
@@ -200,11 +200,11 @@
200
200
  }
201
201
 
202
202
  .navds-date__field-input {
203
- padding-right: var(--a-spacing-12);
203
+ padding-right: var(--a-spacing-14);
204
204
  }
205
205
 
206
206
  .navds-form-field--small .navds-date__field-input {
207
- padding-right: var(--a-spacing-8);
207
+ padding-right: var(--a-spacing-10);
208
208
  }
209
209
 
210
210
  /* Error-handling */
@@ -226,24 +226,51 @@
226
226
 
227
227
  .navds-date__field-button {
228
228
  position: absolute;
229
- right: var(--a-spacing-2);
229
+ right: 1px;
230
230
  top: 50%;
231
231
  transform: translateY(-50%);
232
232
  color: var(--ac-date-input-button-text, var(--a-text-default));
233
+ display: inline-flex;
234
+ cursor: pointer;
235
+ margin: 0;
236
+ text-decoration: none;
237
+ border: none;
238
+ background: none;
239
+ border-radius: 3px;
240
+ padding: var(--a-spacing-3);
241
+ align-items: center;
242
+ justify-content: center;
243
+ font-size: 1.5rem;
244
+ height: calc(100% - 2px);
245
+ border-start-start-radius: 0;
246
+ border-end-start-radius: 0;
233
247
  }
234
248
 
235
249
  .navds-form-field--small .navds-date__field-button {
236
- right: var(--a-spacing-2);
237
- height: 1.5rem;
238
- width: 1.5rem;
250
+ padding: var(--a-spacing-1);
239
251
  }
240
252
 
241
- .navds-form-field--small .navds-date__field-button svg {
242
- font-size: var(--a-font-size-medium);
253
+ .navds-date__field-button:hover:where(:not([disabled])) {
254
+ color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
255
+ background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
243
256
  }
244
257
 
245
258
  .navds-form-field--disabled .navds-date__field-button {
246
259
  opacity: 1;
260
+ cursor: not-allowed;
261
+ }
262
+
263
+ .navds-date__field-button:focus-visible {
264
+ outline: none;
265
+ box-shadow: var(--a-shadow-focus);
266
+ border-radius: var(--a-border-radius-medium);
267
+ }
268
+
269
+ @supports not selector(:focus-visible) {
270
+ .navds-date__field-button:focus {
271
+ outline: none;
272
+ box-shadow: var(--a-shadow-focus);
273
+ }
247
274
  }
248
275
 
249
276
  .navds-date__caption__year {
package/dist/component/date.min.css CHANGED
@@ -1 +1 @@
1
- .navds-date{padding:var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date .rdp-weeknumber{align-items:center;background:var(--ac-date-week-bg,var(--a-surface-neutral));border-radius:var(--a-border-radius-small);color:var(--ac-date-week-text,var(--a-text-on-neutral));display:flex;font-size:var(--a-font-size-small);justify-content:center;padding:var(--a-spacing-05) var(--a-spacing-1)}.navds-date__caption-dropdown{align-items:center;display:flex;gap:var(--a-spacing-2);justify-content:space-between}.navds-date__caption__month-wrapper{align-items:center;display:flex;gap:var(--a-spacing-2);justify-content:center}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-small) var(--a-border-radius-small) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-small) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-small)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible{box-shadow:var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus{box-shadow:var(--a-shadow-focus)}}.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-date__month-button{all:unset;border-radius:var(--a-border-radius-medium);cursor:pointer;height:2.75rem;text-align:center;text-transform:capitalize;width:3rem}.navds-date__month-button:focus-visible,.navds-monthpicker__caption-button:focus-visible{box-shadow:var(--a-shadow-focus);z-index:1}@supports not selector(:focus-visible){.navds-date__month-button:focus,.navds-monthpicker__caption-button:focus{box-shadow:var(--a-shadow-focus);z-index:1}}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date .navds-date__field{display:flex;flex-direction:column;position:relative;width:100%}.navds-date__field-wrapper{align-items:center;display:inline-flex;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date__field-button,.navds-date__field-input:focus-visible{z-index:1}@supports not selector(:focus-visible){.navds-date__field-input:focus{z-index:1}}.navds-date .rdp-day_selected,.navds-monthpicker__month--selected{background:var(--ac-date-selected-bg,var(--a-surface-action-selected));color:var(--ac-date-selected-text,var(--a-text-on-action));cursor:pointer}.navds-date .rdp-day_disabled{background-color:var(--ac-date-disabled-bg,var(--a-surface-neutral-subtle));color:var(--ac-date-disabled-text,var(--a-text-subtle));cursor:not-allowed;text-decoration:line-through}.navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,.navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover{background:var(--ac-date-hover-bg,var(--a-surface-action-subtle-hover));cursor:pointer}.navds-date .rdp-day_today{box-shadow:0 0 0 1px var(--ac-date-today-border,var(--a-border-action-selected));text-decoration:underline}.navds-date__caption{align-items:center;display:flex;gap:var(--a-spacing-2);justify-content:space-between}.navds-date__caption-button,.navds-date__caption-button:disabled,.navds-date__caption-button:disabled:hover{color:var(--ac-date-caption-text,var(--a-text-default))}.navds-date__field-input{padding-right:var(--a-spacing-12)}.navds-form-field--small .navds-date__field-input{padding-right:var(--a-spacing-8)}.navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled){border-color:var(--ac-date-input-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger))}.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}}.navds-date__field-button{color:var(--ac-date-input-button-text,var(--a-text-default));position:absolute;right:var(--a-spacing-2);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{height:1.5rem;right:var(--a-spacing-2);width:1.5rem}.navds-form-field--small .navds-date__field-button svg{font-size:var(--a-font-size-medium)}.navds-form-field--disabled .navds-date__field-button{opacity:1}.navds-date__caption__year{width:5rem}.navds-date .rdp-day_outside{pointer-events:none;visibility:hidden}
1
+ .navds-date{padding:var(--a-spacing-3)}.navds-date .rdp-day_range_middle.rdp-day_disabled{background:var(--ac-date-middle-bg,var(--a-surface-action-selected));color:var(--ac-date-middle-text,var(--a-text-on-action))}.navds-date .rdp-month,.navds-date.rdp-month{display:grid;gap:var(--a-spacing-5)}.navds-date__caption-label{text-transform:capitalize}.navds-date .rdp-head_cell{font-size:var(--a-font-size-small);text-transform:capitalize}.navds-date .rdp-weeknumber{align-items:center;background:var(--ac-date-week-bg,var(--a-surface-neutral));border-radius:var(--a-border-radius-small);color:var(--ac-date-week-text,var(--a-text-on-neutral));display:flex;font-size:var(--a-font-size-small);justify-content:center;padding:var(--a-spacing-05) var(--a-spacing-1)}.navds-date__caption-dropdown{align-items:center;display:flex;gap:var(--a-spacing-2);justify-content:space-between}.navds-date__caption__month-wrapper{align-items:center;display:flex;gap:var(--a-spacing-2);justify-content:center}.navds-date__caption__month .navds-select__container select{text-transform:capitalize}.navds-date .rdp-button{all:unset;border-radius:var(--a-border-radius-medium);height:2.5rem;text-align:center;width:2.5rem}.navds-date .rdp-day_range_start{border-radius:var(--a-border-radius-xlarge) var(--a-border-radius-small) var(--a-border-radius-small) var(--a-border-radius-xlarge)}.navds-date .rdp-day_range_end:not(.rdp-day_range_start){border-radius:var(--a-border-radius-small) var(--a-border-radius-xlarge) var(--a-border-radius-xlarge) var(--a-border-radius-small)}.navds-date .rdp-day_range_start.rdp-day_range_end{border-radius:var(--a-border-radius-xlarge)}.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus-visible,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus-visible{box-shadow:var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button:not(.rdp-day_selected):not([disabled]):focus,.navds-date .rdp-button:not(.rdp-day_selected):not([disabled]):focus{box-shadow:var(--a-shadow-focus)}}.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus-visible,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date .navds-date__month-button.rdp-day_selected:not([disabled]):focus,.navds-date .rdp-button.rdp-day_selected:not([disabled]):focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-date__month-button{all:unset;border-radius:var(--a-border-radius-medium);cursor:pointer;height:2.75rem;text-align:center;text-transform:capitalize;width:3rem}.navds-date__month-button:focus-visible,.navds-monthpicker__caption-button:focus-visible{box-shadow:var(--a-shadow-focus);z-index:1}@supports not selector(:focus-visible){.navds-date__month-button:focus,.navds-monthpicker__caption-button:focus{box-shadow:var(--a-shadow-focus);z-index:1}}.navds-date__year-label{align-items:center;display:flex}.navds-date__standalone-wrapper,.navds-date__wrapper{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date .navds-date__field{display:flex;flex-direction:column;position:relative;width:100%}.navds-date__field-wrapper{align-items:center;display:inline-flex;position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-date__field-button,.navds-date__field-input:focus-visible{z-index:1}@supports not selector(:focus-visible){.navds-date__field-input:focus{z-index:1}}.navds-date .rdp-day_selected,.navds-monthpicker__month--selected{background:var(--ac-date-selected-bg,var(--a-surface-action-selected));color:var(--ac-date-selected-text,var(--a-text-on-action));cursor:pointer}.navds-date .rdp-day_disabled{background-color:var(--ac-date-disabled-bg,var(--a-surface-neutral-subtle));color:var(--ac-date-disabled-text,var(--a-text-subtle));cursor:not-allowed;text-decoration:line-through}.navds-date .rdp-button:where(:not(.rdp-day_selected):not([disabled])):hover,.navds-date__month-button:where(:not(.rdp-day_selected):not([disabled])):hover{background:var(--ac-date-hover-bg,var(--a-surface-action-subtle-hover));cursor:pointer}.navds-date .rdp-day_today{box-shadow:0 0 0 1px var(--ac-date-today-border,var(--a-border-action-selected));text-decoration:underline}.navds-date__caption{align-items:center;display:flex;gap:var(--a-spacing-2);justify-content:space-between}.navds-date__caption-button,.navds-date__caption-button:disabled,.navds-date__caption-button:disabled:hover{color:var(--ac-date-caption-text,var(--a-text-default))}.navds-date__field-input{padding-right:var(--a-spacing-14)}.navds-form-field--small .navds-date__field-input{padding-right:var(--a-spacing-10)}.navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled){border-color:var(--ac-date-input-error-border,var(--a-border-danger));box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger))}.navds-date__field--error .navds-date__field-input:focus-visible:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-date__field--error .navds-date__field-input:focus:not(:hover):not(:disabled){box-shadow:inset 0 0 0 1px var(--ac-date-input-error-border,var(--a-border-danger)),var(--a-shadow-focus)}}.navds-date__field-button{align-items:center;background:none;border:none;border-end-start-radius:0;border-radius:3px;border-start-start-radius:0;color:var(--ac-date-input-button-text,var(--a-text-default));cursor:pointer;display:inline-flex;font-size:1.5rem;height:calc(100% - 2px);justify-content:center;margin:0;padding:var(--a-spacing-3);position:absolute;right:1px;text-decoration:none;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.navds-form-field--small .navds-date__field-button{padding:var(--a-spacing-1)}.navds-date__field-button:hover:where(:not([disabled])){background-color:var(--ac-date-input-button-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-date-input-button-hover-text,var(--a-text-action-on-action-subtle))}.navds-form-field--disabled .navds-date__field-button{cursor:not-allowed;opacity:1}.navds-date__field-button:focus-visible{border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-date__field-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-date__caption__year{width:5rem}.navds-date .rdp-day_outside{pointer-events:none;visibility:hidden}
package/dist/component/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Fri, 19 May 2023 07:50:09 GMT
4
+ * Generated on Mon, 22 May 2023 14:46:03 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-05: 0.125rem;
@@ -1908,12 +1908,23 @@ body,
1908
1908
 
1909
1909
  min-height: 2rem;
1910
1910
  }
1911
+ .navds-copybutton--xsmall {
1912
+ --__ac-copybutton-padding: var(--a-spacing-05) var(--a-spacing-2);
1913
+
1914
+ min-height: 1.5rem;
1915
+ }
1911
1916
  .navds-copybutton--icon-only {
1912
1917
  --__ac-copybutton-padding: var(--a-spacing-3);
1913
1918
  }
1914
1919
  .navds-copybutton--small.navds-copybutton--icon-only {
1915
1920
  --__ac-copybutton-padding: var(--a-spacing-1);
1916
1921
  }
1922
+ .navds-copybutton--xsmall.navds-copybutton--icon-only {
1923
+ --__ac-copybutton-padding: var(--a-spacing-05);
1924
+ }
1925
+ .navds-copybutton--xsmall .navds-copybutton__icon {
1926
+ font-size: 1.25rem;
1927
+ }
1917
1928
  .navds-copybutton__icon {
1918
1929
  font-size: 1.5rem;
1919
1930
  display: flex;
@@ -1922,6 +1933,9 @@ body,
1922
1933
  .navds-copybutton__icon:only-child {
1923
1934
  margin: 0;
1924
1935
  }
1936
+ :where(.navds-copybutton--small, .navds-copybutton--xsmall):where(:not(:only-child)) {
1937
+ margin: -2px;
1938
+ }
1925
1939
  .navds-copybutton:focus-visible {
1926
1940
  outline: none;
1927
1941
  box-shadow: var(--a-shadow-focus);
@@ -1974,6 +1988,9 @@ body,
1974
1988
  justify-content: center;
1975
1989
  gap: var(--a-spacing-2);
1976
1990
  }
1991
+ .navds-copybutton--xsmall > .navds-copybutton__content {
1992
+ gap: var(--a-spacing-1);
1993
+ }
1977
1994
  .navds-copybutton--active > .navds-copybutton__content {
1978
1995
  animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
1979
1996
  }
@@ -3586,10 +3603,10 @@ body,
3586
3603
  color: var(--ac-date-caption-text, var(--a-text-default));
3587
3604
  }
3588
3605
  .navds-date__field-input {
3589
- padding-right: var(--a-spacing-12);
3606
+ padding-right: var(--a-spacing-14);
3590
3607
  }
3591
3608
  .navds-form-field--small .navds-date__field-input {
3592
- padding-right: var(--a-spacing-8);
3609
+ padding-right: var(--a-spacing-10);
3593
3610
  }
3594
3611
  /* Error-handling */
3595
3612
  .navds-date__field--error .navds-date__field-input:not(:hover):not(:disabled) {
@@ -3606,21 +3623,46 @@ body,
3606
3623
  }
3607
3624
  .navds-date__field-button {
3608
3625
  position: absolute;
3609
- right: var(--a-spacing-2);
3626
+ right: 1px;
3610
3627
  top: 50%;
3611
3628
  transform: translateY(-50%);
3612
3629
  color: var(--ac-date-input-button-text, var(--a-text-default));
3630
+ display: inline-flex;
3631
+ cursor: pointer;
3632
+ margin: 0;
3633
+ text-decoration: none;
3634
+ border: none;
3635
+ background: none;
3636
+ border-radius: 3px;
3637
+ padding: var(--a-spacing-3);
3638
+ align-items: center;
3639
+ justify-content: center;
3640
+ font-size: 1.5rem;
3641
+ height: calc(100% - 2px);
3642
+ border-start-start-radius: 0;
3643
+ border-end-start-radius: 0;
3613
3644
  }
3614
3645
  .navds-form-field--small .navds-date__field-button {
3615
- right: var(--a-spacing-2);
3616
- height: 1.5rem;
3617
- width: 1.5rem;
3646
+ padding: var(--a-spacing-1);
3618
3647
  }
3619
- .navds-form-field--small .navds-date__field-button svg {
3620
- font-size: var(--a-font-size-medium);
3648
+ .navds-date__field-button:hover:where(:not([disabled])) {
3649
+ color: var(--ac-date-input-button-hover-text, var(--a-text-action-on-action-subtle));
3650
+ background-color: var(--ac-date-input-button-hover-bg, var(--a-surface-action-subtle-hover));
3621
3651
  }
3622
3652
  .navds-form-field--disabled .navds-date__field-button {
3623
3653
  opacity: 1;
3654
+ cursor: not-allowed;
3655
+ }
3656
+ .navds-date__field-button:focus-visible {
3657
+ outline: none;
3658
+ box-shadow: var(--a-shadow-focus);
3659
+ border-radius: var(--a-border-radius-medium);
3660
+ }
3661
+ @supports not selector(:focus-visible) {
3662
+ .navds-date__field-button:focus {
3663
+ outline: none;
3664
+ box-shadow: var(--a-shadow-focus);
3665
+ }
3624
3666
  }
3625
3667
  .navds-date__caption__year {
3626
3668
  width: 5rem;