@oslokommune/punkt-css 13.2.3 → 13.3.1

package/dist/css/pkt-components.css

@@ -6,6 +6,11 @@ pkt-accordion-item {
   display: block;
 }
 
+pkt-accordion,
+pkt-accordion-item {
+  display: block;
+}
+
 .pkt-accordion,
 pkt-accordion::part(container) {
   display: grid;
@@ -21,7 +26,9 @@ pkt-accordion::part(container):focus-visible {
 
 .pkt-accordion--borderless .pkt-accordion-item,
 pkt-accordion[skin=borderless] .pkt-accordion-item {
+  color: var(--pkt-color-text-body-default);
   border: none;
+  background-color: var(--pkt-color-background-default);
 }
 .pkt-accordion--borderless .pkt-accordion-item[open] .pkt-accordion-item__title,
 pkt-accordion[skin=borderless] .pkt-accordion-item[open] .pkt-accordion-item__title {
@@ -30,7 +37,9 @@ pkt-accordion[skin=borderless] .pkt-accordion-item[open] .pkt-accordion-item__ti
 
 .pkt-accordion--outlined .pkt-accordion-item,
 pkt-accordion[skin=outlined] .pkt-accordion-item {
+  color: var(--pkt-color-text-body-default);
   border: 2px solid var(--pkt-color-border-subtle);
+  background-color: var(--pkt-color-background-default);
 }
 
 pkt-accordion[skin=beige]::part(container),
@@ -1536,19 +1545,19 @@ pkt-heading {
 }
 .pkt-heading--medium {
   letter-spacing: -0.2px;
-  font-weight: 400;
+  font-weight: 500;
   font-size: 1.875rem;
   line-height: 2.75rem;
 }
 .pkt-heading--small {
   letter-spacing: -0.2px;
-  font-weight: 400;
+  font-weight: 500;
   font-size: 1.5rem;
   line-height: 2.25rem;
 }
 .pkt-heading--xsmall {
   letter-spacing: -0.2px;
-  font-weight: 400;
+  font-weight: 500;
   font-size: 1.375rem;
   line-height: 2.125rem;
 }
@@ -2090,6 +2099,7 @@ pkt-listbox {
  * Loader component
  */
 .pkt-loader {
+  color: currentColor;
   width: fit-content;
   text-align: center;
 }
@@ -2613,25 +2623,61 @@ pkt-messagebox {
 .pkt-preview .pkt-tabs {
   --pkt-tabs-bg: var(--pkt-color-surface-default-gray);
 }
-.pkt-preview__mode {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-}
 .pkt-preview__component {
+  position: relative;
   display: flex;
   justify-content: space-around;
   align-items: center;
   min-height: 10rem;
   padding: 3rem 1rem;
-  margin: 1rem 0 0;
-  border: 0.25rem solid var(--pkt-color-surface-default-gray);
+  margin: 0;
   background-color: var(--pkt-color-background-default);
   transition: background-color 0.2s linear;
 }
 .pkt-preview__component--fullwidth > div {
   width: 100%;
 }
+.pkt-preview__component-container {
+  border: 2px solid var(--pkt-color-border-gray);
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+@media screen and (min-width: 64rem) {
+  .pkt-preview__component-container {
+    flex-direction: row;
+  }
+  .pkt-preview__component-container .pkt-preview__component {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+  .pkt-preview__component-container .pkt-preview__panel {
+    flex: 0 0 auto;
+    min-width: 20rem;
+    max-width: 25rem;
+    width: 100%;
+  }
+}
+.pkt-preview__panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 2rem 1.5rem;
+  justify-content: space-between;
+  align-items: stretch;
+  background-color: var(--pkt-color-surface-default-gray);
+}
+.pkt-preview__panel__options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.pkt-preview__options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
 .pkt-preview__opts {
   padding: 1rem;
   background-color: var(--pkt-color-surface-default-gray);
@@ -2646,14 +2692,53 @@ pkt-messagebox {
   right: 0;
   padding: 0 0.25rem 0;
 }
+.pkt-preview .hide-code-button {
+  position: absolute;
+  top: 100%;
+  margin-top: -1.5rem;
+  left: 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding-bottom: 1rem;
+  z-index: 2;
+}
 .pkt-preview__code {
+  color: var(--pkt-color-text-body-default);
   position: relative;
-  margin-bottom: 1rem;
-  font-size: 0.8rem;
 }
-.pkt-preview__code > pre {
+.pkt-preview__code-container {
+  position: relative;
+  padding: 2rem 2rem 0;
+  background-color: var(--pkt-color-grays-gray-800);
+  transition: max-height 0.5s ease;
+  max-height: 50rem;
+}
+.pkt-preview__code-container .pkt-tabs {
+  --pkt-tabs-bg: var(--pkt-color-grays-gray-800);
+}
+.pkt-preview__code-container.hide-code {
+  overflow: hidden;
+  max-height: 11.7rem;
+}
+.pkt-preview__code-container.hide-code:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(180deg, transparent 0%, transparent 93%, var(--pkt-color-grays-gray-800) 100%);
+}
+.pkt-preview__code pre {
+  max-height: 30rem;
+  overflow: auto;
   margin-top: 0 !important;
-  background-color: var(--pkt-color-surface-default-gray) !important;
+  background-color: transparent !important;
+  font-size: 1rem;
+  padding: 2rem 0;
 }
 .pkt-preview__copy {
   position: absolute;
@@ -2663,15 +2748,24 @@ pkt-messagebox {
   gap: 0.5rem;
   align-items: center;
 }
-.pkt-preview__specs {
-  background-color: var(--pkt-color-surface-default-gray);
+.pkt-preview__array-item, .pkt-preview__object-editor {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.pkt-preview__add-object {
+  text-align: right;
+  margin-top: 0.5rem;
+}
+.pkt-preview__remove-object {
+  position: absolute;
+  top: -2rem;
+  right: -0.25rem;
 }
 .pkt-preview__specs pre {
   margin-top: 0 !important;
 }
-.pkt-preview__specs h2 {
-  padding: 1rem;
-}
 
 .astro-code.github-light {
   background-color: var(--pkt-color-surface-default-gray) !important;
@@ -3084,7 +3178,7 @@ pkt-messagebox {
 .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);
+  background-color: var(--pkt-tabs-bg);
   outline: 0.25rem solid var(--pkt-color-border-states-focus);
   outline-offset: 0;
 }
@@ -3352,6 +3446,11 @@ pkt-tag > .pkt-tag {
 .pkt-tag.pkt-tag--blue-dark.pkt-btn:hover, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover {
   background-color: var(--pkt-color-brand-warm-blue-1000) !important;
   color: var(--pkt-color-brand-neutrals-200) !important;
+}
+.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover,
+.pkt-tag.pkt-tag--blue-dark.pkt-btn:hover svg, .pkt-tag.pkt-tag--blue-dark.pkt-btn:focus,
+.pkt-tag.pkt-tag--blue-dark.pkt-btn:focus svg, .pkt-tag.pkt-tag--blue-dark.pkt-tag--hover,
+.pkt-tag.pkt-tag--blue-dark.pkt-tag--hover svg {
   --fg-color: var(--pkt-color-brand-neutrals-200) !important;
 }
 .pkt-tag.pkt-tag--small {
@@ -3535,7 +3634,7 @@ pkt-select {
   padding-right: 3rem;
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/13.2/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/13.3/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;