@navikt/ds-css 6.6.1 → 6.7.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 (24) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/baseline/_utilities.css +1 -1
  3. package/config/_mappings.js +1 -0
  4. package/dist/component/form.css +23 -94
  5. package/dist/component/form.min.css +1 -1
  6. package/dist/component/index.css +124 -97
  7. package/dist/component/index.min.css +2 -2
  8. package/dist/component/progressbar.css +107 -0
  9. package/dist/component/progressbar.min.css +1 -0
  10. package/dist/component/timeline.css +1 -1
  11. package/dist/component/timeline.min.css +1 -1
  12. package/dist/components.css +132 -102
  13. package/dist/components.min.css +1 -1
  14. package/dist/global/baseline.css +1 -1
  15. package/dist/global/baseline.min.css +1 -1
  16. package/dist/global/tokens.css +1 -1
  17. package/dist/index.css +124 -97
  18. package/dist/index.min.css +2 -2
  19. package/form/radio-checkbox.css +23 -101
  20. package/index.css +1 -0
  21. package/package.json +2 -2
  22. package/progress-bar.css +106 -0
  23. package/timeline.css +1 -1
  24. package/tokens.json +3 -0
package/dist/component/progressbar.css ADDED
@@ -0,0 +1,107 @@
1
+ .navds-progress-bar {
2
+ background: var(--a-surface-neutral-subtle);
3
+ position: relative;
4
+ border-radius: var(--a-border-radius-full);
5
+ overflow: hidden;
6
+ box-shadow:
7
+ inset 0 1px 3px 0 rgba(0 0 0 / 0.15),
8
+ inset 0 0 1px 0 rgba(0 0 0 / 0.2);
9
+ }
10
+
11
+ .navds-progress-bar--small {
12
+ height: 12px;
13
+ min-width: 12px;
14
+ }
15
+
16
+ .navds-progress-bar--medium {
17
+ height: 16px;
18
+ min-width: 16px;
19
+ }
20
+
21
+ .navds-progress-bar--large {
22
+ height: 24px;
23
+ min-width: 24px;
24
+ }
25
+
26
+ .navds-progress-bar__foreground {
27
+ --__ac-progress-bar-translate: initial;
28
+
29
+ transform: translateX(var(--__ac-progress-bar-translate));
30
+ background: var(--ac-progress-bar-fg, var(--a-surface-alt-3));
31
+ transform-origin: left;
32
+ position: absolute;
33
+ top: 0;
34
+ left: 0;
35
+ bottom: 0;
36
+ width: 100%;
37
+ border-radius: inherit;
38
+ transition: transform 0.2s ease;
39
+ }
40
+
41
+ .navds-progress-bar__foreground--indeterminate {
42
+ --__ac-progress-bar-duration: initial;
43
+ --__ac-progress-bar-delay: initial;
44
+
45
+ animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
46
+ animation-timing-function: ease-in-out, ease-in-out;
47
+ animation-duration: var(--__ac-progress-bar-duration), 2500ms;
48
+ animation-fill-mode: forwards, none;
49
+ animation-iteration-count: 1, infinite;
50
+ animation-delay: 0s, calc((var(--__ac-progress-bar-duration) + var(--__ac-progress-bar-delay)));
51
+ }
52
+
53
+ /* navds-progress-bar-indeterminate wave animation */
54
+
55
+ @keyframes navds-progress-bar-indeterminate {
56
+ 0% {
57
+ left: -50%;
58
+ width: 50%;
59
+ transform: translateX(0%);
60
+ }
61
+
62
+ 50% {
63
+ animation-direction: reverse;
64
+ left: 100%;
65
+ transform: translateX(0%);
66
+ width: 50%;
67
+ }
68
+
69
+ 100% {
70
+ left: -50%;
71
+ transform: translateX(0%);
72
+ width: 50%;
73
+ }
74
+ }
75
+
76
+ @keyframes navds-progress-bar-indeterminate-grow {
77
+ 0% {
78
+ transform: translateX(-100%);
79
+ }
80
+
81
+ 20% {
82
+ transform: translateX(-80%);
83
+ }
84
+
85
+ 30% {
86
+ transform: translateX(-40%);
87
+ }
88
+
89
+ 40%,
90
+ 50% {
91
+ transform: translateX(-20%);
92
+ }
93
+
94
+ 100% {
95
+ transform: translateX(-10%);
96
+ }
97
+ }
98
+
99
+ @media (forced-colors: active) {
100
+ .navds-progress-bar__foreground {
101
+ background: Highlight;
102
+ }
103
+
104
+ .navds-progress-bar {
105
+ outline: 1px solid transparent;
106
+ }
107
+ }
package/dist/component/progressbar.min.css ADDED
@@ -0,0 +1 @@
1
+ .navds-progress-bar{background:var(--a-surface-neutral-subtle);border-radius:var(--a-border-radius-full);box-shadow:inset 0 1px 3px 0 #00000026,inset 0 0 1px 0 #0003;overflow:hidden;position:relative}.navds-progress-bar--small{height:12px;min-width:12px}.navds-progress-bar--medium{height:16px;min-width:16px}.navds-progress-bar--large{height:24px;min-width:24px}.navds-progress-bar__foreground{--__ac-progress-bar-translate:initial;background:var(--ac-progress-bar-fg,var(--a-surface-alt-3));border-radius:inherit;bottom:0;left:0;position:absolute;top:0;transform:translateX(var(--__ac-progress-bar-translate));transform-origin:left;transition:transform .2s ease;width:100%}.navds-progress-bar__foreground--indeterminate{--__ac-progress-bar-duration:initial;--__ac-progress-bar-delay:initial;animation-delay:0s,calc(var(--__ac-progress-bar-duration) + var(--__ac-progress-bar-delay));animation-duration:var(--__ac-progress-bar-duration),2.5s;animation-fill-mode:forwards,none;animation-iteration-count:1,infinite;animation-name:navds-progress-bar-indeterminate-grow,navds-progress-bar-indeterminate;animation-timing-function:ease-in-out,ease-in-out}@keyframes navds-progress-bar-indeterminate{0%{left:-50%;transform:translateX(0);width:50%}50%{animation-direction:reverse;left:100%;transform:translateX(0);width:50%}to{left:-50%;transform:translateX(0);width:50%}}@keyframes navds-progress-bar-indeterminate-grow{0%{transform:translateX(-100%)}20%{transform:translateX(-80%)}30%{transform:translateX(-40%)}40%,50%{transform:translateX(-20%)}to{transform:translateX(-10%)}}@media (forced-colors:active){.navds-progress-bar__foreground{background:Highlight}.navds-progress-bar{outline:1px solid #0000}}
package/dist/component/timeline.css CHANGED
@@ -245,7 +245,7 @@
245
245
  .navds-timeline__pin-wrapper::before {
246
246
  content: "";
247
247
  top: var(--navdsc-timeline-pin-size);
248
- height: calc(88% - var(--navdsc-timeline-pin-size));
248
+ height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
249
249
  width: 1px;
250
250
  margin: 0 auto;
251
251
  background: var(--a-surface-inverted);
package/dist/component/timeline.min.css CHANGED
@@ -1 +1 @@
1
- .navds-timeline{align-items:center;display:grid;grid-template-columns:auto minmax(0,1fr);min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;position:relative;width:100%}.navds-timeline__axislabels{box-sizing:initial;grid-column:2;height:1rem;margin-bottom:var(--a-spacing-1);position:relative}.navds-timeline__row-label{align-items:center;display:flex;gap:var(--a-spacing-2);grid-column:1;margin-right:var(--a-spacing-4);min-height:1.5rem;white-space:nowrap;width:auto}.navds-timeline__row-label:where(:nth-last-child(2)){align-self:flex-end}.navds-timeline__axislabels-label{color:var(--ac-timeline-axislabel-text,var(--a-text-subtle));position:absolute;white-space:nowrap}.navds-timeline__row{background:var(--ac-timeline-row-bg,var(--a-surface-subtle));display:flex;grid-column:2;margin:var(--a-spacing-4) 0}.navds-timeline__row--active{background:var(--ac-timeline-row-active-bg,var(--a-surface-selected))}.navds-timeline__row:last-of-type{margin-bottom:0}.navds-timeline__row-periods{margin:0;min-height:1.5rem;position:relative;width:100%}.navds-timeline__row-periods>li{list-style-type:none}.navds-timeline__row-periods:focus{outline:none}.navds-timeline__period{align-items:center;border:none;border-radius:var(--a-border-radius-full);display:flex;font-size:1rem;height:100%;padding:0;position:absolute;z-index:2}.navds-timeline__period--inner{align-items:center;display:flex;margin:0 var(--a-spacing-1);overflow:hidden;text-align:left;text-overflow:clip;white-space:nowrap}.navds-timeline__period--inner svg{flex-shrink:0}.navds-timeline__period--clickable{cursor:pointer}.navds-timeline__period--success{background:var(--ac-timeline-period-success-bg,var(--a-surface-success-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-success-border,var(--a-border-success))}.navds-timeline__period--success.navds-timeline__period--clickable:hover{background:var(--a-surface-success-subtle-hover);background:var(--ac-timeline-period-success-bg-hover,var(--a-surface-success-subtle-hover))}.navds-timeline__period--warning{background:var(--ac-timeline-period-warning-bg,var(--a-surface-warning-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-warning-border,var(--a-border-warning))}.navds-timeline__period--warning.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-warning-bg-hover,var(--a-surface-warning-subtle-hover))}.navds-timeline__period--danger{background:var(--ac-timeline-period-danger-bg,var(--a-surface-danger-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-danger-border,var(--a-border-danger))}.navds-timeline__period--danger.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-danger-bg-hover,var(--a-surface-danger-subtle-hover))}.navds-timeline__period--info{background:var(--ac-timeline-period-info-bg,var(--a-surface-info-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-info-border,var(--a-border-info))}.navds-timeline__period--info.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-info-bg-hover,var(--a-surface-info-subtle-hover))}.navds-timeline__period--neutral{background:var(--ac-timeline-period-neutral-bg,var(--a-bg-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-neutral-border,var(--a-border-default))}.navds-timeline__period--neutral.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-neutral-bg-hover,var(--a-gray-200))}.navds-timeline__period--connected-both{border-radius:0}.navds-timeline__period--connected-right{border-bottom-right-radius:0;border-top-right-radius:0}.navds-timeline__period--connected-left{border-bottom-left-radius:0;border-top-left-radius:0}.navds-timeline__period--selected{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected));z-index:3}.navds-timeline__pin-wrapper{display:flex;flex-direction:column-reverse;grid-column:2;height:100%;isolation:isolate;position:absolute;top:0;z-index:1;--navdsc-timeline-pin-size:0.9rem}.navds-timeline__pin-button{background:var(--a-surface-default);border:none;border-radius:var(--a-border-radius-full);box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 5px var(--a-surface-default);cursor:pointer;padding:var(--a-spacing-1);position:relative;z-index:2}.navds-timeline__pin-button:before{border-radius:var(--a-border-radius-full);content:"";height:25px;inset:0;left:-9px;position:absolute;top:-9px;width:25px}.navds-timeline__pin-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 5px var(--a-surface-default)}.navds-timeline__pin-button:hover:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-timeline__pin-button:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}}.navds-timeline__pin-wrapper:before{background:var(--a-surface-inverted);content:"";height:calc(88% - var(--navdsc-timeline-pin-size));margin:0 auto;top:var(--navdsc-timeline-pin-size);width:1px}.navds-timeline__zoom{display:flex;float:right;list-style-type:none;margin-top:var(--a-spacing-6)}.navds-timeline__zoom-button{all:unset;background:var(--ac-timeline-zoom-bg,var(--a-surface-default));border-width:1px;border:1px solid var(--ac-timeline-zoom-border,var(--a-border-default));border-right-width:0;cursor:pointer;padding:6px 9px 6px 8px}.navds-timeline__zoom li:first-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium)}.navds-timeline__zoom li:last-child .navds-timeline__zoom-button{border-radius:0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;border-width:1px}.navds-timeline__zoom li:only-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium)}.navds-timeline__zoom-button:not([aria-pressed=true]):hover{background:var(--ac-timeline-zoom-bg-hover,var(--a-surface-action-subtle-hover))}.navds-timeline__zoom-button[aria-pressed=true]{background:var(--ac-timeline-zoom-selected-bg,var(--a-surface-inverted));color:var(--ac-timeline-zoom-selected-text,var(--a-text-on-inverted))}.navds-timeline__period:focus-visible{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom li:focus-within{z-index:var(--a-z-index-focus)}.navds-timeline__zoom-button:focus-visible{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible{margin-right:2px;padding-right:6px}@supports not selector(:focus-visible){.navds-timeline__period:focus{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom-button:focus{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus{margin-right:2px;padding-right:6px}}.navds-timeline__popover{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-medium);padding:var(--a-spacing-3);z-index:var(--a-z-index-popover)}.navds-timeline__popover:focus{outline:none}.navds-timeline__popover-arrow{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));height:1rem;position:absolute;transform:rotate(45deg);width:1rem;z-index:-1}.navds-timeline__popover[data-placement^=top]>.navds-timeline__popover-arrow{border-left-color:#0000;border-top-color:#0000}.navds-timeline__popover[data-placement^=bottom]>.navds-timeline__popover-arrow{border-bottom-color:#0000;border-right-color:#0000}.navds-timeline__popover[data-placement^=left]>.navds-timeline__popover-arrow{border-bottom-color:#0000;border-left-color:#0000}.navds-timeline__popover[data-placement^=right]>.navds-timeline__popover-arrow{border-right-color:#0000;border-top-color:#0000}@media (forced-colors:active){.navds-timeline__period:focus{outline:2px solid highlight;outline-offset:2px}.navds-timeline__period--danger,.navds-timeline__period--info,.navds-timeline__period--neutral,.navds-timeline__period--success,.navds-timeline__period--warning{forced-color-adjust:none}.navds-timeline__pin-wrapper:before,.navds-timeline__row{border:1px solid #0000}.navds-timeline__pin-button{outline:4px solid #0000}.navds-timeline__pin-button:focus,.navds-timeline__pin-button:focus-visible{box-shadow:none;outline:4px solid highlight;outline-offset:2px}.navds-timeline__popover[data-placement^=top]>.navds-timeline__popover-arrow{border-left-color:canvas;border-top-color:canvas}.navds-timeline__popover[data-placement^=bottom]>.navds-timeline__popover-arrow{border-bottom-color:canvas;border-right-color:canvas}.navds-timeline__popover[data-placement^=left]>.navds-timeline__popover-arrow{border-bottom-color:canvas;border-left-color:canvas}.navds-timeline__popover[data-placement^=right]>.navds-timeline__popover-arrow{border-right-color:canvas;border-top-color:canvas}}
1
+ .navds-timeline{align-items:center;display:grid;grid-template-columns:auto minmax(0,1fr);min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;position:relative;width:100%}.navds-timeline__axislabels{box-sizing:initial;grid-column:2;height:1rem;margin-bottom:var(--a-spacing-1);position:relative}.navds-timeline__row-label{align-items:center;display:flex;gap:var(--a-spacing-2);grid-column:1;margin-right:var(--a-spacing-4);min-height:1.5rem;white-space:nowrap;width:auto}.navds-timeline__row-label:where(:nth-last-child(2)){align-self:flex-end}.navds-timeline__axislabels-label{color:var(--ac-timeline-axislabel-text,var(--a-text-subtle));position:absolute;white-space:nowrap}.navds-timeline__row{background:var(--ac-timeline-row-bg,var(--a-surface-subtle));display:flex;grid-column:2;margin:var(--a-spacing-4) 0}.navds-timeline__row--active{background:var(--ac-timeline-row-active-bg,var(--a-surface-selected))}.navds-timeline__row:last-of-type{margin-bottom:0}.navds-timeline__row-periods{margin:0;min-height:1.5rem;position:relative;width:100%}.navds-timeline__row-periods>li{list-style-type:none}.navds-timeline__row-periods:focus{outline:none}.navds-timeline__period{align-items:center;border:none;border-radius:var(--a-border-radius-full);display:flex;font-size:1rem;height:100%;padding:0;position:absolute;z-index:2}.navds-timeline__period--inner{align-items:center;display:flex;margin:0 var(--a-spacing-1);overflow:hidden;text-align:left;text-overflow:clip;white-space:nowrap}.navds-timeline__period--inner svg{flex-shrink:0}.navds-timeline__period--clickable{cursor:pointer}.navds-timeline__period--success{background:var(--ac-timeline-period-success-bg,var(--a-surface-success-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-success-border,var(--a-border-success))}.navds-timeline__period--success.navds-timeline__period--clickable:hover{background:var(--a-surface-success-subtle-hover);background:var(--ac-timeline-period-success-bg-hover,var(--a-surface-success-subtle-hover))}.navds-timeline__period--warning{background:var(--ac-timeline-period-warning-bg,var(--a-surface-warning-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-warning-border,var(--a-border-warning))}.navds-timeline__period--warning.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-warning-bg-hover,var(--a-surface-warning-subtle-hover))}.navds-timeline__period--danger{background:var(--ac-timeline-period-danger-bg,var(--a-surface-danger-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-danger-border,var(--a-border-danger))}.navds-timeline__period--danger.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-danger-bg-hover,var(--a-surface-danger-subtle-hover))}.navds-timeline__period--info{background:var(--ac-timeline-period-info-bg,var(--a-surface-info-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-info-border,var(--a-border-info))}.navds-timeline__period--info.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-info-bg-hover,var(--a-surface-info-subtle-hover))}.navds-timeline__period--neutral{background:var(--ac-timeline-period-neutral-bg,var(--a-bg-subtle));box-shadow:inset 0 0 0 1px var(--ac-timeline-period-neutral-border,var(--a-border-default))}.navds-timeline__period--neutral.navds-timeline__period--clickable:hover{background:var(--ac-timeline-period-neutral-bg-hover,var(--a-gray-200))}.navds-timeline__period--connected-both{border-radius:0}.navds-timeline__period--connected-right{border-bottom-right-radius:0;border-top-right-radius:0}.navds-timeline__period--connected-left{border-bottom-left-radius:0;border-top-left-radius:0}.navds-timeline__period--selected{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected));z-index:3}.navds-timeline__pin-wrapper{display:flex;flex-direction:column-reverse;grid-column:2;height:100%;isolation:isolate;position:absolute;top:0;z-index:1;--navdsc-timeline-pin-size:0.9rem}.navds-timeline__pin-button{background:var(--a-surface-default);border:none;border-radius:var(--a-border-radius-full);box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 5px var(--a-surface-default);cursor:pointer;padding:var(--a-spacing-1);position:relative;z-index:2}.navds-timeline__pin-button:before{border-radius:var(--a-border-radius-full);content:"";height:25px;inset:0;left:-9px;position:absolute;top:-9px;width:25px}.navds-timeline__pin-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 5px var(--a-surface-default)}.navds-timeline__pin-button:hover:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-timeline__pin-button:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 3px var(--ac-timeline-pin-bg,var(--a-surface-danger)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus);outline:none}.navds-timeline__pin-button:hover:focus{box-shadow:inset 0 0 0 1px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 3px var(--ac-timeline-pin-bg-hover,var(--a-surface-danger-hover)),0 0 0 4px var(--a-surface-default),0 0 0 6px var(--a-border-focus)}}.navds-timeline__pin-wrapper:before{background:var(--a-surface-inverted);content:"";height:calc(100% - var(--navdsc-timeline-pin-size)*2);margin:0 auto;top:var(--navdsc-timeline-pin-size);width:1px}.navds-timeline__zoom{display:flex;float:right;list-style-type:none;margin-top:var(--a-spacing-6)}.navds-timeline__zoom-button{all:unset;background:var(--ac-timeline-zoom-bg,var(--a-surface-default));border-width:1px;border:1px solid var(--ac-timeline-zoom-border,var(--a-border-default));border-right-width:0;cursor:pointer;padding:6px 9px 6px 8px}.navds-timeline__zoom li:first-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium) 0 0 var(--a-border-radius-medium)}.navds-timeline__zoom li:last-child .navds-timeline__zoom-button{border-radius:0 var(--a-border-radius-medium) var(--a-border-radius-medium) 0;border-width:1px}.navds-timeline__zoom li:only-child .navds-timeline__zoom-button{border-radius:var(--a-border-radius-medium)}.navds-timeline__zoom-button:not([aria-pressed=true]):hover{background:var(--ac-timeline-zoom-bg-hover,var(--a-surface-action-subtle-hover))}.navds-timeline__zoom-button[aria-pressed=true]{background:var(--ac-timeline-zoom-selected-bg,var(--a-surface-inverted));color:var(--ac-timeline-zoom-selected-text,var(--a-text-on-inverted))}.navds-timeline__period:focus-visible{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom li:focus-within{z-index:var(--a-z-index-focus)}.navds-timeline__zoom-button:focus-visible{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus-visible{margin-right:2px;padding-right:6px}@supports not selector(:focus-visible){.navds-timeline__period:focus{box-shadow:0 0 0 2px var(--a-border-focus);outline:none;z-index:4}.navds-timeline__period--selected:focus{box-shadow:inset 0 0 0 2px var(--ac-timeline-period-selected-border,var(--a-border-action-selected)),0 0 0 2px var(--a-border-focus);z-index:3}.navds-timeline__zoom-button:focus{border-width:1px;box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 3px var(--a-border-focus)}.navds-timeline__zoom li:not(:last-child) .navds-timeline__zoom-button:focus{margin-right:2px;padding-right:6px}}.navds-timeline__popover{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-medium);padding:var(--a-spacing-3);z-index:var(--a-z-index-popover)}.navds-timeline__popover:focus{outline:none}.navds-timeline__popover-arrow{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));height:1rem;position:absolute;transform:rotate(45deg);width:1rem;z-index:-1}.navds-timeline__popover[data-placement^=top]>.navds-timeline__popover-arrow{border-left-color:#0000;border-top-color:#0000}.navds-timeline__popover[data-placement^=bottom]>.navds-timeline__popover-arrow{border-bottom-color:#0000;border-right-color:#0000}.navds-timeline__popover[data-placement^=left]>.navds-timeline__popover-arrow{border-bottom-color:#0000;border-left-color:#0000}.navds-timeline__popover[data-placement^=right]>.navds-timeline__popover-arrow{border-right-color:#0000;border-top-color:#0000}@media (forced-colors:active){.navds-timeline__period:focus{outline:2px solid highlight;outline-offset:2px}.navds-timeline__period--danger,.navds-timeline__period--info,.navds-timeline__period--neutral,.navds-timeline__period--success,.navds-timeline__period--warning{forced-color-adjust:none}.navds-timeline__pin-wrapper:before,.navds-timeline__row{border:1px solid #0000}.navds-timeline__pin-button{outline:4px solid #0000}.navds-timeline__pin-button:focus,.navds-timeline__pin-button:focus-visible{box-shadow:none;outline:4px solid highlight;outline-offset:2px}.navds-timeline__popover[data-placement^=top]>.navds-timeline__popover-arrow{border-left-color:canvas;border-top-color:canvas}.navds-timeline__popover[data-placement^=bottom]>.navds-timeline__popover-arrow{border-bottom-color:canvas;border-right-color:canvas}.navds-timeline__popover[data-placement^=left]>.navds-timeline__popover-arrow{border-bottom-color:canvas;border-left-color:canvas}.navds-timeline__popover[data-placement^=right]>.navds-timeline__popover-arrow{border-right-color:canvas;border-top-color:canvas}}
package/dist/components.css CHANGED
@@ -2676,8 +2676,8 @@
2676
2676
  height: calc(1.25rem - 0.25rem);
2677
2677
  }
2678
2678
 
2679
- .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
2680
- .navds-radio__input:focus-visible + .navds-radio__label::before {
2679
+ .navds-checkbox__input:focus + .navds-checkbox__label::before,
2680
+ .navds-radio__input:focus + .navds-radio__label::before {
2681
2681
  outline: 2px solid transparent;
2682
2682
  outline-offset: 2px;
2683
2683
  box-shadow:
@@ -2686,33 +2686,13 @@
2686
2686
  0 0 0 4px var(--a-border-focus);
2687
2687
  }
2688
2688
 
2689
- @supports not selector(:focus-visible) {
2690
- .navds-checkbox__input:focus + .navds-checkbox__label::before,
2691
- .navds-radio__input:focus + .navds-radio__label::before {
2692
- outline: 2px solid transparent;
2693
- outline-offset: 2px;
2694
- box-shadow:
2695
- 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)),
2696
- 0 0 0 4px var(--a-border-focus);
2697
- }
2698
- }
2699
-
2700
- .navds-checkbox__input:hover:focus-visible + .navds-checkbox__label::before,
2701
- .navds-radio__input:hover:focus-visible + .navds-radio__label::before {
2689
+ .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
2690
+ .navds-radio__input:hover:focus + .navds-radio__label::before {
2702
2691
  box-shadow:
2703
2692
  0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
2704
2693
  0 0 0 4px var(--a-border-focus);
2705
2694
  }
2706
2695
 
2707
- @supports not selector(:focus-visible) {
2708
- .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
2709
- .navds-radio__input:hover:focus + .navds-radio__label::before {
2710
- box-shadow:
2711
- 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover)),
2712
- 0 0 0 4px var(--a-border-focus);
2713
- }
2714
- }
2715
-
2716
2696
  .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
2717
2697
  content: "";
2718
2698
  position: absolute;
@@ -2770,24 +2750,14 @@
2770
2750
  background-position: 0.25rem center;
2771
2751
  }
2772
2752
 
2773
- .navds-checkbox__input:indeterminate:focus-visible + .navds-checkbox__label::before,
2774
- .navds-checkbox__input:checked:focus-visible + .navds-checkbox__label::before {
2753
+ .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
2754
+ .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
2775
2755
  box-shadow:
2776
2756
  0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
2777
2757
  0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
2778
2758
  0 0 0 4px var(--a-border-focus);
2779
2759
  }
2780
2760
 
2781
- @supports not selector(:focus-visible) {
2782
- .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
2783
- .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
2784
- box-shadow:
2785
- 0 0 0 1px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
2786
- 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
2787
- 0 0 0 4px var(--a-border-focus);
2788
- }
2789
- }
2790
-
2791
2761
  .navds-radio__input:checked + .navds-radio__label::before {
2792
2762
  box-shadow:
2793
2763
  0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
@@ -2795,40 +2765,23 @@
2795
2765
  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action-selected));
2796
2766
  }
2797
2767
 
2798
- .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
2768
+ .navds-radio__input:checked:focus + .navds-radio__label::before {
2799
2769
  box-shadow:
2800
2770
  0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-selected)),
2801
2771
  inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
2802
2772
  0 0 0 4px var(--a-border-focus);
2803
2773
  }
2804
2774
 
2805
- @supports not selector(:focus-visible) {
2806
- .navds-radio__input:checked:focus + .navds-radio__label::before {
2807
- box-shadow:
2808
- 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
2809
- inset 0 0 0 2px var(--ac-radio-checkbox-bg, var(--a-surface-default)),
2810
- 0 0 0 4px var(--a-border-focus);
2811
- }
2812
- }
2813
-
2814
2775
  .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
2815
2776
  .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
2816
2777
  color: var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
2817
2778
  }
2818
2779
 
2819
- .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
2820
- + .navds-checkbox__label::before,
2821
- .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
2780
+ .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
2781
+ .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
2822
2782
  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
2823
2783
  }
2824
2784
 
2825
- @supports not selector(:focus-visible) {
2826
- .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
2827
- .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
2828
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action-hover));
2829
- }
2830
- }
2831
-
2832
2785
  .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
2833
2786
  .navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
2834
2787
  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
@@ -2842,63 +2795,32 @@
2842
2795
  }
2843
2796
 
2844
2797
  .navds-checkbox--error
2845
- > .navds-checkbox__input:focus-visible:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
2798
+ > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
2846
2799
  + .navds-checkbox__label::before,
2847
- .navds-radio--error > .navds-radio__input:focus-visible:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
2800
+ .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
2848
2801
  box-shadow:
2849
2802
  0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
2850
2803
  0 0 0 4px var(--a-border-focus);
2851
2804
  }
2852
2805
 
2853
- @supports not selector(:focus-visible) {
2854
- .navds-checkbox--error
2855
- > .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
2856
- + .navds-checkbox__label::before,
2857
- .navds-radio--error > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked) + .navds-radio__label::before {
2858
- box-shadow:
2859
- 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
2860
- 0 0 0 4px var(--a-border-focus);
2861
- }
2862
- }
2863
-
2864
2806
  .navds-checkbox--error
2865
- > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus-visible)
2807
+ > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
2866
2808
  + .navds-checkbox__label::before,
2867
- .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus-visible) + .navds-radio__label::before {
2809
+ .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
2868
2810
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2869
2811
  box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2870
2812
  }
2871
2813
 
2872
2814
  .navds-checkbox--error
2873
- > .navds-checkbox__input:focus-visible:hover:not(:disabled):not(:checked):not(:indeterminate)
2815
+ > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
2874
2816
  + .navds-checkbox__label::before,
2875
- .navds-radio--error > .navds-radio__input:focus-visible:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
2817
+ .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
2876
2818
  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2877
2819
  box-shadow:
2878
2820
  0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
2879
2821
  0 0 0 4px var(--a-border-focus);
2880
2822
  }
2881
2823
 
2882
- @supports not selector(:focus-visible) {
2883
- .navds-checkbox--error
2884
- > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
2885
- + .navds-checkbox__label::before,
2886
- .navds-radio--error > .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
2887
- background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2888
- box-shadow: 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
2889
- }
2890
-
2891
- .navds-checkbox--error
2892
- > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
2893
- + .navds-checkbox__label::before,
2894
- .navds-radio--error > .navds-radio__input:focus:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
2895
- background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
2896
- box-shadow:
2897
- 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)),
2898
- 0 0 0 4px var(--a-border-focus);
2899
- }
2900
- }
2901
-
2902
2824
  .navds-checkbox--disabled,
2903
2825
  .navds-radio--disabled {
2904
2826
  opacity: 0.3;
@@ -2931,16 +2853,16 @@
2931
2853
  > .navds-checkbox__input:not(:disabled):not(:checked):not(:indeterminate)
2932
2854
  + .navds-checkbox__label::before,
2933
2855
  .navds-checkbox--readonly
2934
- > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus-visible)
2856
+ > .navds-checkbox__input:hover:not(:checked):not(:indeterminate):not(:focus)
2935
2857
  + .navds-checkbox__label::before,
2936
2858
  .navds-radio--readonly > .navds-radio__input:not(:disabled):not(:checked) + .navds-radio__label::before,
2937
- .navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus-visible) + .navds-radio__label::before {
2859
+ .navds-radio--readonly > .navds-radio__input:hover:not(:checked):not(:focus) + .navds-radio__label::before {
2938
2860
  background-color: var(--__ac-radio-checkbox-readonly-bg);
2939
2861
  box-shadow: 0 0 0 2px var(--__ac-radio-checkbox-readonly-border);
2940
2862
  }
2941
2863
 
2942
- .navds-checkbox--readonly > .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
2943
- .navds-radio--readonly > .navds-radio__input:focus-visible + .navds-radio__label::before {
2864
+ .navds-checkbox--readonly > .navds-checkbox__input:focus + .navds-checkbox__label::before,
2865
+ .navds-radio--readonly > .navds-radio__input:focus + .navds-radio__label::before {
2944
2866
  --__ac-radio-checkbox-readonly-border: var(--a-border-subtle), var(--a-shadow-focus);
2945
2867
  }
2946
2868
 
@@ -2970,8 +2892,8 @@
2970
2892
  }
2971
2893
 
2972
2894
  @media (forced-colors: active) {
2973
- .navds-checkbox__input:focus-visible + .navds-checkbox__label::before,
2974
- .navds-radio__input:focus-visible + .navds-radio__label::before {
2895
+ .navds-checkbox__input:focus + .navds-checkbox__label::before,
2896
+ .navds-radio__input:focus + .navds-radio__label::before {
2975
2897
  outline-color: highlight;
2976
2898
  }
2977
2899
 
@@ -3003,7 +2925,7 @@
3003
2925
  background-color: var(--__ac-radio-checkbox-high-contrast-text);
3004
2926
  }
3005
2927
 
3006
- .navds-radio__input:checked:focus-visible + .navds-radio__label::before {
2928
+ .navds-radio__input:checked:focus + .navds-radio__label::before {
3007
2929
  border: 1px solid var(--__ac-radio-checkbox-high-contrast-bg);
3008
2930
  outline: 2px solid highlight;
3009
2931
  outline-offset: 2px;
@@ -3014,7 +2936,7 @@
3014
2936
  color: highlight;
3015
2937
  }
3016
2938
 
3017
- .navds-checkbox__input:focus-visible + .navds-checkbox__label::before {
2939
+ .navds-checkbox__input:focus + .navds-checkbox__label::before {
3018
2940
  outline: 2px solid var(--__ac-radio-checkbox-high-contrast-highlight);
3019
2941
  }
3020
2942
 
@@ -5886,7 +5808,7 @@ button.navds-internalheader__title:active,
5886
5808
  .navds-timeline__pin-wrapper::before {
5887
5809
  content: "";
5888
5810
  top: var(--navdsc-timeline-pin-size);
5889
- height: calc(88% - var(--navdsc-timeline-pin-size));
5811
+ height: calc(100% - var(--navdsc-timeline-pin-size) * 2);
5890
5812
  width: 1px;
5891
5813
  margin: 0 auto;
5892
5814
  background: var(--a-surface-inverted);
@@ -6504,6 +6426,114 @@ button.navds-internalheader__title:active,
6504
6426
  transform: translateY(-1px) rotate(-180deg);
6505
6427
  }
6506
6428
 
6429
+ .navds-progress-bar {
6430
+ background: var(--a-surface-neutral-subtle);
6431
+ position: relative;
6432
+ border-radius: var(--a-border-radius-full);
6433
+ overflow: hidden;
6434
+ box-shadow:
6435
+ inset 0 1px 3px 0 rgba(0 0 0 / 0.15),
6436
+ inset 0 0 1px 0 rgba(0 0 0 / 0.2);
6437
+ }
6438
+
6439
+ .navds-progress-bar--small {
6440
+ height: 12px;
6441
+ min-width: 12px;
6442
+ }
6443
+
6444
+ .navds-progress-bar--medium {
6445
+ height: 16px;
6446
+ min-width: 16px;
6447
+ }
6448
+
6449
+ .navds-progress-bar--large {
6450
+ height: 24px;
6451
+ min-width: 24px;
6452
+ }
6453
+
6454
+ .navds-progress-bar__foreground {
6455
+ --__ac-progress-bar-translate: initial;
6456
+
6457
+ transform: translateX(var(--__ac-progress-bar-translate));
6458
+ background: var(--ac-progress-bar-fg, var(--a-surface-alt-3));
6459
+ transform-origin: left;
6460
+ position: absolute;
6461
+ top: 0;
6462
+ left: 0;
6463
+ bottom: 0;
6464
+ width: 100%;
6465
+ border-radius: inherit;
6466
+ transition: transform 0.2s ease;
6467
+ }
6468
+
6469
+ .navds-progress-bar__foreground--indeterminate {
6470
+ --__ac-progress-bar-duration: initial;
6471
+ --__ac-progress-bar-delay: initial;
6472
+
6473
+ animation-name: navds-progress-bar-indeterminate-grow, navds-progress-bar-indeterminate;
6474
+ animation-timing-function: ease-in-out, ease-in-out;
6475
+ animation-duration: var(--__ac-progress-bar-duration), 2500ms;
6476
+ animation-fill-mode: forwards, none;
6477
+ animation-iteration-count: 1, infinite;
6478
+ animation-delay: 0s, calc((var(--__ac-progress-bar-duration) + var(--__ac-progress-bar-delay)));
6479
+ }
6480
+
6481
+ /* navds-progress-bar-indeterminate wave animation */
6482
+
6483
+ @keyframes navds-progress-bar-indeterminate {
6484
+ 0% {
6485
+ left: -50%;
6486
+ width: 50%;
6487
+ transform: translateX(0%);
6488
+ }
6489
+
6490
+ 50% {
6491
+ animation-direction: reverse;
6492
+ left: 100%;
6493
+ transform: translateX(0%);
6494
+ width: 50%;
6495
+ }
6496
+
6497
+ 100% {
6498
+ left: -50%;
6499
+ transform: translateX(0%);
6500
+ width: 50%;
6501
+ }
6502
+ }
6503
+
6504
+ @keyframes navds-progress-bar-indeterminate-grow {
6505
+ 0% {
6506
+ transform: translateX(-100%);
6507
+ }
6508
+
6509
+ 20% {
6510
+ transform: translateX(-80%);
6511
+ }
6512
+
6513
+ 30% {
6514
+ transform: translateX(-40%);
6515
+ }
6516
+
6517
+ 40%,
6518
+ 50% {
6519
+ transform: translateX(-20%);
6520
+ }
6521
+
6522
+ 100% {
6523
+ transform: translateX(-10%);
6524
+ }
6525
+ }
6526
+
6527
+ @media (forced-colors: active) {
6528
+ .navds-progress-bar__foreground {
6529
+ background: Highlight;
6530
+ }
6531
+
6532
+ .navds-progress-bar {
6533
+ outline: 1px solid transparent;
6534
+ }
6535
+ }
6536
+
6507
6537
  .navds-skeleton {
6508
6538
  background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
6509
6539
  height: 1.3em;