@oslokommune/punkt-css 11.1.0 → 11.2.0

package/dist/css/pkt.css

@@ -11321,6 +11321,7 @@ body {
   padding-left: 1rem;
   padding-right: 1rem;
   width: 100%;
+  max-width: 100vw;
 }
 @media screen and (min-width: 48rem) {
   .pkt-container {
@@ -13503,8 +13504,8 @@ a,
   word-wrap: break-word;
   cursor: pointer;
 }
-a:visited:not(.pkt-linkcard):not(.pkt-btn),
-.pkt-link-button:visited:not(.pkt-linkcard):not(.pkt-btn) {
+a:visited:not(.pkt-linkcard):not(.pkt-btn):not(.pkt-tabs__link),
+.pkt-link-button:visited:not(.pkt-linkcard):not(.pkt-btn):not(.pkt-tabs__link) {
   color: inherit;
 }
 a:hover, a.pkt-link--hover,
@@ -13554,7 +13555,7 @@ a:active, a.pkt-link--active,
 }
 .pkt-link--external::after {
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/11.1/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.2/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -17452,7 +17453,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   outline-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/11.1/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.2/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -17708,7 +17709,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
 .pkt-select:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/11.1/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.2/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -19383,6 +19384,87 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   color: white;
 }
 
+.pkt-tabs {
+  --pkt-tabs-bg: var(--pkt-color-background-default);
+  background-color: var(--pkt-tabs-bg);
+  position: relative;
+  border-bottom: 1px solid var(--pkt-color-border-gray);
+}
+.pkt-tabs__list {
+  position: relative;
+  width: auto;
+  width: 100%;
+  overflow-x: scroll;
+  scrollbar-width: thin;
+  padding: 0.25rem 4rem 0 0.25rem;
+  margin: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+}
+.pkt-tabs__button {
+  border: 0;
+  padding: 0;
+  background: none;
+  border-radius: 0;
+}
+.pkt-tabs__link, .pkt-tabs__button {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  color: var(--pkt-color-text-action-disabled);
+  border-bottom: 0.25rem solid transparent;
+  font-size: 1rem;
+  font-weight: 400;
+  letter-spacing: -0.2px;
+  line-height: 1.5rem;
+  white-space: nowrap;
+}
+.pkt-tabs__link .pkt-icon, .pkt-tabs__button .pkt-icon {
+  --fg-color: currentColor;
+}
+.pkt-tabs__link, .pkt-tabs__link:hover, .pkt-tabs__link:active, .pkt-tabs__button, .pkt-tabs__button:hover, .pkt-tabs__button:active {
+  text-decoration: none;
+}
+.pkt-tabs__link:focus:not(:active), .pkt-tabs__link:focus-visible:not(:active), .pkt-tabs__button:focus:not(:active), .pkt-tabs__button:focus-visible:not(:active) {
+  border: 0;
+  box-shadow: none;
+  background-color: var(--pkt-color-surface-default-gray);
+  outline: 0.25rem solid var(--pkt-color-border-states-focus);
+  outline-offset: 0;
+}
+.pkt-tabs__link.active:focus, .pkt-tabs__link.active:focus-visible, .pkt-tabs__button.active:focus, .pkt-tabs__button.active:focus-visible {
+  box-shadow: none;
+  border-bottom: 0.25rem solid var(--pkt-color-border-blue);
+}
+.pkt-tabs__link:hover, .pkt-tabs__link:focus, .pkt-tabs__link:focus-visible, .pkt-tabs__link:focus-visible:is(:active), .pkt-tabs__link:focus:is(:active), .pkt-tabs__link:active, .pkt-tabs__button:hover, .pkt-tabs__button:focus, .pkt-tabs__button:focus-visible, .pkt-tabs__button:focus-visible:is(:active), .pkt-tabs__button:focus:is(:active), .pkt-tabs__button:active {
+  outline: 0;
+  color: var(--pkt-color-text-action-active);
+  border-bottom: 0.25rem solid var(--pkt-color-border-states-hover);
+}
+.pkt-tabs__link.active, .pkt-tabs__button.active {
+  color: var(--pkt-color-text-action-normal);
+  border-bottom: 0.25rem solid var(--pkt-color-border-blue);
+  font-size: 1rem;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 1.5rem;
+}
+.pkt-tabs:after {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 3;
+  background: linear-gradient(90deg, transparent 0%, var(--pkt-color-background-default) 100%);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 5rem;
+  pointer-events: none;
+}
+
 /* 
  * Header element
  */