@navikt/ds-css 6.7.1 → 6.8.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 (17) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/config/_mappings.js +11 -0
  3. package/dist/component/form.css +42 -0
  4. package/dist/component/form.min.css +1 -1
  5. package/dist/component/index.css +63 -42
  6. package/dist/component/index.min.css +1 -15
  7. package/dist/component/primitives.css +20 -41
  8. package/dist/component/primitives.min.css +1 -15
  9. package/dist/components.css +73 -41
  10. package/dist/components.min.css +1 -15
  11. package/dist/global/tokens.css +1 -1
  12. package/dist/index.css +63 -42
  13. package/dist/index.min.css +1 -15
  14. package/form/form-progress.css +52 -0
  15. package/form/index.css +1 -0
  16. package/package.json +2 -2
  17. package/primitives/hgrid.css +20 -41
package/dist/global/tokens.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 10 May 2024 12:39:18 GMT
3
+ * Generated on Tue, 14 May 2024 13:31:33 GMT
4
4
  */
5
5
 
6
6
  :root, :host {
package/dist/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Fri, 10 May 2024 12:39:18 GMT
4
+ * Generated on Tue, 14 May 2024 13:31:33 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-1-alt: 0.375rem;
@@ -4405,6 +4405,48 @@ body,
4405
4405
  background: var(--a-surface-selected);
4406
4406
  border-radius: var(--a-border-radius-large);
4407
4407
  }
4408
+ .navds-form-progress__bar {
4409
+ margin-bottom: var(--a-spacing-2);
4410
+ }
4411
+ .navds-form-progress__button[data-state="closed"] .navds-form-progress__btn-txt-hide,
4412
+ .navds-form-progress__button[data-state="open"] .navds-form-progress__btn-txt-show {
4413
+ display: none;
4414
+ }
4415
+ .navds-form-progress__button:hover svg {
4416
+ transform: translateY(1px);
4417
+ }
4418
+ .navds-form-progress__button[data-state="open"] svg {
4419
+ transform: rotate(-180deg);
4420
+ }
4421
+ .navds-form-progress__button[data-state="open"]:hover svg {
4422
+ transform: translateY(-1px) rotate(-180deg);
4423
+ }
4424
+ .navds-form-progress__collapsible {
4425
+ display: grid;
4426
+ grid-template-rows: 0fr;
4427
+ overflow: hidden;
4428
+ transition: grid-template-rows 0.3s cubic-bezier(0.3, 0, 0.15, 1);
4429
+ }
4430
+ .navds-form-progress__collapsible[hidden] {
4431
+ display: grid;
4432
+ }
4433
+ .navds-form-progress__collapsible[data-state="open"] {
4434
+ grid-template-rows: 1fr;
4435
+ }
4436
+ .navds-form-progress__collapsible-content {
4437
+ min-height: 0;
4438
+ transition: visibility 0.3s;
4439
+ visibility: hidden;
4440
+ }
4441
+ .navds-form-progress__collapsible[data-state="open"] .navds-form-progress__collapsible-content {
4442
+ visibility: visible;
4443
+ }
4444
+ .navds-form-progress__stepper {
4445
+ border: 2px solid var(--a-border-subtle);
4446
+ border-radius: var(--a-border-radius-large);
4447
+ padding: var(--a-spacing-2) var(--a-spacing-4) 0;
4448
+ margin-top: var(--a-spacing-1);
4449
+ }
4408
4450
  .navds-help-text__button {
4409
4451
  margin: 0;
4410
4452
  border: 0;
@@ -7333,18 +7375,18 @@ button.navds-stepper__step {
7333
7375
  }
7334
7376
  .navds-hgrid {
7335
7377
  --__ac-hgrid-columns-xs: initial;
7336
- --__ac-hgrid-columns-sm: initial;
7337
- --__ac-hgrid-columns-md: initial;
7338
- --__ac-hgrid-columns-lg: initial;
7339
- --__ac-hgrid-columns-xl: initial;
7340
- --__ac-hgrid-columns-2xl: initial;
7378
+ --__ac-hgrid-columns-sm: var(--__ac-hgrid-columns-xs);
7379
+ --__ac-hgrid-columns-md: var(--__ac-hgrid-columns-sm);
7380
+ --__ac-hgrid-columns-lg: var(--__ac-hgrid-columns-md);
7381
+ --__ac-hgrid-columns-xl: var(--__ac-hgrid-columns-lg);
7382
+ --__ac-hgrid-columns-2xl: var(--__ac-hgrid-columns-xl);
7341
7383
  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
7342
7384
  --__ac-hgrid-gap-xs: initial;
7343
- --__ac-hgrid-gap-sm: initial;
7344
- --__ac-hgrid-gap-md: initial;
7345
- --__ac-hgrid-gap-lg: initial;
7346
- --__ac-hgrid-gap-xl: initial;
7347
- --__ac-hgrid-gap-2xl: initial;
7385
+ --__ac-hgrid-gap-sm: var(--__ac-hgrid-gap-xs);
7386
+ --__ac-hgrid-gap-md: var(--__ac-hgrid-gap-sm);
7387
+ --__ac-hgrid-gap-lg: var(--__ac-hgrid-gap-md);
7388
+ --__ac-hgrid-gap-xl: var(--__ac-hgrid-gap-lg);
7389
+ --__ac-hgrid-gap-2xl: var(--__ac-hgrid-gap-xl);
7348
7390
  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
7349
7391
  --__ac-hgrid-align: initial;
7350
7392
 
@@ -7355,53 +7397,32 @@ button.navds-stepper__step {
7355
7397
  }
7356
7398
  @media (min-width: 480px) {
7357
7399
  .navds-hgrid {
7358
- --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
7359
- --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
7400
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm);
7401
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm);
7360
7402
  }
7361
7403
  }
7362
7404
  @media (min-width: 768px) {
7363
7405
  .navds-hgrid {
7364
- --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
7365
- --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
7406
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-md);
7407
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-md);
7366
7408
  }
7367
7409
  }
7368
7410
  @media (min-width: 1024px) {
7369
7411
  .navds-hgrid {
7370
- --__ac-hgrid-columns: var(
7371
- --__ac-hgrid-columns-lg,
7372
- var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
7373
- );
7374
- --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
7412
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-lg);
7413
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg);
7375
7414
  }
7376
7415
  }
7377
7416
  @media (min-width: 1280px) {
7378
7417
  .navds-hgrid {
7379
- --__ac-hgrid-columns: var(
7380
- --__ac-hgrid-columns-xl,
7381
- var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
7382
- );
7383
- --__ac-hgrid-gap: var(
7384
- --__ac-hgrid-gap-xl,
7385
- var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
7386
- );
7418
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-xl);
7419
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-xl);
7387
7420
  }
7388
7421
  }
7389
7422
  @media (min-width: 1440px) {
7390
7423
  .navds-hgrid {
7391
- --__ac-hgrid-columns: var(
7392
- --__ac-hgrid-columns-2xl,
7393
- var(
7394
- --__ac-hgrid-columns-xl,
7395
- var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
7396
- )
7397
- );
7398
- --__ac-hgrid-gap: var(
7399
- --__ac-hgrid-gap-2xl,
7400
- var(
7401
- --__ac-hgrid-gap-xl,
7402
- var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
7403
- )
7404
- );
7424
+ --__ac-hgrid-columns: var(--__ac-hgrid-columns-2xl);
7425
+ --__ac-hgrid-gap: var(--__ac-hgrid-gap-2xl);
7405
7426
  }
7406
7427
  }
7407
7428
  .navds-stack {