@oslokommune/punkt-css 11.10.1 → 11.11.0

package/dist/css/pkt.css

@@ -13565,7 +13565,7 @@ a:active, a.pkt-link--active,
 }
 .pkt-link--external::after {
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/11.10/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.11/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -17431,7 +17431,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.10/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.11/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -17491,7 +17491,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   cursor: not-allowed;
 }
 .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/11.10/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.11/icons/check-medium.svg);
   --pkt-color-input-check-border: var(
     --pkt-color-input-border-normal
   );
@@ -17719,7 +17719,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.10/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/11.11/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -18271,6 +18271,128 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   overflow-x: auto;
 }
 
+/*
+ * Accordion/Expandable component
+ */
+.pkt-accordion {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0fr;
+  row-gap: 0.5rem;
+  transition: grid-template-rows 500ms;
+  font-size: 1.5rem;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 2.25rem;
+}
+.pkt-accordion:focus-visible {
+  border: 0.25rem solid var(--pkt-color-border-states-hover);
+}
+
+.pkt-accordion--borderless .pkt-accordion-item {
+  border: none;
+}
+.pkt-accordion--borderless .pkt-accordion-item[open] .pkt-accordion-item__title {
+  box-shadow: inset 0 0 0 0.25rem var(--pkt-color-border-states-active);
+}
+
+.pkt-accordion--outlined .pkt-accordion-item {
+  border: 3px solid var(--pkt-color-border-gray);
+}
+
+.pkt-accordion--beige {
+  row-gap: 0;
+}
+.pkt-accordion--beige .pkt-accordion-item:nth-child(odd) {
+  background-color: var(--pkt-color-surface-default-light-beige);
+}
+
+.pkt-accordion--blue {
+  row-gap: 0;
+}
+.pkt-accordion--blue .pkt-accordion-item:nth-child(odd) {
+  background-color: var(--pkt-color-surface-default-light-blue);
+}
+
+.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item {
+  border: none;
+}
+.pkt-accordion--compact.pkt-accordion--borderless .pkt-accordion-item--open .pkt-accordion-item__title {
+  box-shadow: inset 0 0 0 0.125rem var(--pkt-color-border-states-active);
+}
+
+.pkt-accordion--compact > .pkt-accordion-item .pkt-accordion-item__title {
+  padding: 1rem;
+  font-size: 1rem;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 1.5rem;
+}
+.pkt-accordion--compact > .pkt-accordion-item .pkt-accordion-item__content {
+  padding: 1rem;
+  font-size: 1rem;
+  font-weight: 300;
+  letter-spacing: -0.2px;
+  line-height: 1.5rem;
+}
+
+.pkt-accordion-item {
+  color: var(--pkt-color-brand-dark-blue-1000);
+  background-color: var(--pkt-color-brand-neutrals-white);
+  transition: transform 0.3s;
+  appearance: none;
+  text-align: left;
+}
+.pkt-accordion-item summary::-webkit-details-marker {
+  display: none;
+}
+.pkt-accordion-item__title {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  padding: 1.5rem;
+}
+.pkt-accordion-item__title:hover {
+  text-decoration: underline;
+}
+.pkt-accordion-item__title:hover .pkt-accordion-item__icon {
+  transform: translateY(0.25rem);
+}
+.pkt-accordion-item__title:focus-visible {
+  outline: 0.25rem solid var(--pkt-color-border-states-focus);
+}
+.pkt-accordion-item__icon {
+  transition: transform 0.2s;
+}
+.pkt-accordion-item__content {
+  border-top: none;
+  display: none;
+  font-size: 1.125rem;
+  font-weight: 300;
+  letter-spacing: -0.2px;
+  line-height: 1.75rem;
+  padding: 1.5rem;
+}
+
+.pkt-accordion-item[open] .pkt-accordion-item__title {
+  border-bottom: none;
+}
+.pkt-accordion-item[open] .pkt-accordion-item__title:hover .pkt-accordion-item__icon {
+  transform: rotate(180deg) translateY(0.25rem);
+}
+.pkt-accordion-item[open] .pkt-accordion-item__content {
+  display: block;
+}
+.pkt-accordion-item[open] .pkt-accordion-item__icon {
+  transform: rotate(180deg) translateY(0);
+}
+
+.pkt-icon.pkt-accordion-item__icon > svg {
+  min-height: 2rem;
+  min-width: 2rem;
+}
+
 /*
  * Alert component
  */