@oslokommune/punkt-css 16.15.0 → 16.16.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.
@@ -14410,7 +14410,7 @@ a:active, a.pkt-link--active,
14410
14410
  .pkt-link--external::after {
14411
14411
  display: inline-block;
14412
14412
  content: " ";
14413
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.15/icons/new-window-small.svg);
14413
+ --svg: url(https://punkt-cdn.oslo.kommune.no/16.16/icons/new-window-small.svg);
14414
14414
  background-image: var(--svg);
14415
14415
  background-repeat: no-repeat;
14416
14416
  background-size: 18px 18px;
@@ -18403,7 +18403,6 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18403
18403
  width: 1.5rem;
18404
18404
  height: 1.5rem;
18405
18405
  flex-shrink: 0;
18406
- transition: all 0.3s ease-out;
18407
18406
  }
18408
18407
  .pkt-input-check__input-checkbox[type=checkbox] {
18409
18408
  border-radius: 0;
@@ -18425,7 +18424,6 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18425
18424
  left: -1px;
18426
18425
  width: 1.5rem;
18427
18426
  border-radius: 0.75rem;
18428
- transition: all 0.3s ease-out;
18429
18427
  }
18430
18428
  .pkt-input-check__input-checkbox[type=radio] {
18431
18429
  border-radius: 50%;
@@ -18453,8 +18451,13 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18453
18451
  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-hover);
18454
18452
  outline-color: var(--pkt-color-input-border-hover);
18455
18453
  }
18454
+ .pkt-input-check__input-checkbox[type=radio]:focus-visible {
18455
+ border: 3px solid var(--pkt-color-input-check-background);
18456
+ outline: none;
18457
+ box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-input-border-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
18458
+ }
18456
18459
  .pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
18457
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.15/icons/minus-sign.svg);
18460
+ --svg: url(https://punkt-cdn.oslo.kommune.no/16.16/icons/minus-sign.svg);
18458
18461
  position: relative;
18459
18462
  background-color: var(--pkt-color-input-border-normal);
18460
18463
  }
@@ -18480,7 +18483,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18480
18483
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
18481
18484
  }
18482
18485
  .pkt-input-check__input-checkbox:checked[type=checkbox] {
18483
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.15/icons/check-medium.svg);
18486
+ --svg: url(https://punkt-cdn.oslo.kommune.no/16.16/icons/check-medium.svg);
18484
18487
  position: relative;
18485
18488
  background-color: var(--pkt-color-input-border-normal);
18486
18489
  }
@@ -18538,7 +18541,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
18538
18541
  cursor: not-allowed;
18539
18542
  }
18540
18543
  .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
18541
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.15/icons/check-medium.svg);
18544
+ --svg: url(https://punkt-cdn.oslo.kommune.no/16.16/icons/check-medium.svg);
18542
18545
  --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
18543
18546
  filter: grayscale(100%) brightness(400%);
18544
18547
  }
@@ -18756,7 +18759,7 @@ pkt-select {
18756
18759
  }
18757
18760
  .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
18758
18761
  .pkt-select:is(select):not([multiple]) {
18759
- --svg: url(https://punkt-cdn.oslo.kommune.no/16.15/icons/chevron-thin-down.svg);
18762
+ --svg: url(https://punkt-cdn.oslo.kommune.no/16.16/icons/chevron-thin-down.svg);
18760
18763
  background-image: var(--svg);
18761
18764
  background-repeat: no-repeat;
18762
18765
  background-position: right 0.7rem top 50%;
@@ -24469,6 +24472,33 @@ pkt-messagebox {
24469
24472
  hyphens: auto;
24470
24473
  }
24471
24474
 
24475
+ .pkt-skiplink {
24476
+ display: block;
24477
+ position: absolute;
24478
+ left: -9999px;
24479
+ top: auto;
24480
+ width: 1px;
24481
+ height: 1px;
24482
+ overflow: hidden;
24483
+ background-color: var(--pkt-color-background-default);
24484
+ padding: 0.5rem 1rem;
24485
+ z-index: 1000;
24486
+ clip: rect(0, 0, 0, 0);
24487
+ letter-spacing: -0.2px;
24488
+ font-weight: 300;
24489
+ font-size: 1.125rem;
24490
+ line-height: 1.75rem;
24491
+ }
24492
+ .pkt-skiplink:focus, .pkt-skiplink:focus-visible {
24493
+ position: fixed;
24494
+ left: 1rem;
24495
+ top: 1rem;
24496
+ width: auto;
24497
+ height: auto;
24498
+ overflow: visible;
24499
+ clip: auto;
24500
+ }
24501
+
24472
24502
  /*
24473
24503
  * Stepper component
24474
24504
  */