@oslokommune/punkt-css 12.1.0 → 12.3.0

package/dist/css/pkt.css

@@ -185,6 +185,29 @@ textarea {
   height: auto;
 }
 
+/**
+  * Remove the default appearance of date and time inputs
+  */
+input[type=date],
+input[type=time],
+input[type=datetime-local],
+input[type=month] {
+  -webkit-appearance: textfield;
+}
+
+input::-webkit-datetime-edit {
+  margin-bottom: -4px;
+}
+
+/**
+  * Remove the calendar icon in date inputs
+  */
+input[type=date]::-webkit-inner-spin-button,
+input[type=date]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
 /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
@@ -13514,6 +13537,11 @@ a,
   word-wrap: break-word;
   cursor: pointer;
 }
+a span,
+.pkt-link-button span {
+  color: inherit;
+  text-decoration: inherit;
+}
 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;
@@ -13546,37 +13574,42 @@ a:active, a.pkt-link--active,
 .pkt-link {
   display: inline;
   text-align: left;
-  align-items: center;
+  align-items: baseline;
 }
+
 .pkt-link__icon {
   --fg-color: currentColor;
   width: 1.5rem;
   height: 1.5rem;
   flex-shrink: 0;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
+  align-self: center;
 }
-.pkt-link--icon-left {
+.pkt-link--icon-left, .pkt-link--icon-right {
   display: inline-flex;
-  flex-direction: row;
   text-decoration: none;
+  align-items: baseline;
+}
+.pkt-link--icon-left {
+  flex-direction: row;
 }
 .pkt-link--icon-right {
-  display: inline-flex;
   flex-direction: row-reverse;
-  text-decoration: none;
 }
 .pkt-link--external::after {
   display: inline-block;
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/12.1/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/12.3/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
   width: 1.125rem;
   height: 1.125rem;
   vertical-align: middle;
+  align-self: center;
 }
-.pkt-link--external:hover::after {
+.pkt-link--external:hover::after, .pkt-link:hover pkt-icon {
   filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
 }
 
@@ -16621,6 +16654,14 @@ button.pkt-link {
   white-space: nowrap;
 }
 
+/*
+ * Display contents and disregard layout
+ */
+.pkt-display-contents,
+.pkt-contents {
+  display: contents;
+}
+
 /* 
  * Visibility
  */
@@ -16752,11 +16793,11 @@ button.pkt-link {
  * Variant: label-only, icon-left, icon-right, icon-only
  * Background: light, dark
  */
-.pkt-btn__icon > svg {
+.pkt-btn__icon svg {
   --ring-color: var(--pkt-color-brand-dark-blue-700);
   --spinner-color: var(--pkt-color-brand-blue-1000);
 }
-[data-mode=dark] .pkt-btn__icon > svg {
+[data-mode=dark] .pkt-btn__icon svg {
   --ring-color: var(--pkt-color-brand-neutrals-white);
   --spinner-color: var(--pkt-color-brand-dark-blue-1000);
 }
@@ -17063,14 +17104,14 @@ button.pkt-link {
   line-height: 1.1;
   padding: 0 0.5rem;
 }
-.pkt-btn--small .pkt-btn__icon {
+.pkt-btn--small .pkt-btn__icon, .pkt-btn--small .pkt-btn__icon .pkt-icon {
   height: 1.25rem;
   width: 1.25rem;
 }
 .pkt-btn--small.pkt-btn--icon-only {
   padding: 0 0.5625rem;
 }
-.pkt-btn__icon {
+.pkt-btn__icon, .pkt-btn__icon .pkt-icon {
   height: 1.5rem;
   width: 1.5rem;
 }
@@ -17098,7 +17139,7 @@ button.pkt-link {
   line-height: 1.1;
   padding: 0 1rem;
 }
-.pkt-btn--large .pkt-btn__icon {
+.pkt-btn--large .pkt-btn__icon, .pkt-btn--large .pkt-btn__icon .pkt-icon {
   height: 2rem;
   width: 2rem;
 }
@@ -17116,7 +17157,8 @@ button.pkt-link {
 .pkt-btn:link, .pkt-btn:visited {
   color: var(--pkt-color-button-text-normal);
 }
-a.pkt-btn:focus, .pkt-btn:enabled:focus, .pkt-btn.pkt-btn--focus {
+a.pkt-btn:focus,
+div.pkt-btn:not([data-disabled]):focus, .pkt-btn:enabled:focus, .pkt-btn.pkt-btn--focus {
   background-color: var(--pkt-color-button-background-focus);
   color: var(--pkt-color-button-text-focus);
   border-color: var(--pkt-color-button-border-focus);
@@ -17124,7 +17166,8 @@ a.pkt-btn:focus, .pkt-btn:enabled:focus, .pkt-btn.pkt-btn--focus {
   text-decoration: none;
 }
 
-a.pkt-btn:hover, .pkt-btn:enabled:hover, .pkt-btn.pkt-btn--hover {
+a.pkt-btn:hover,
+div.pkt-btn:not([data-disabled]):hover, .pkt-btn:enabled:hover, .pkt-btn.pkt-btn--hover {
   background-color: var(--pkt-color-button-background-hover);
   border-color: var(--pkt-color-button-border-hover);
   color: var(--pkt-color-button-text-hover);
@@ -17132,7 +17175,8 @@ a.pkt-btn:hover, .pkt-btn:enabled:hover, .pkt-btn.pkt-btn--hover {
   text-decoration: underline;
 }
 
-a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pkt-btn--active:hover {
+a.pkt-btn:active,
+div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pkt-btn--active:hover {
   background-color: var(--pkt-color-button-background-active);
   border-color: var(--pkt-color-button-border-active);
   color: var(--pkt-color-button-text-active);
@@ -17140,7 +17184,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   text-decoration: none;
 }
 
-.pkt-btn:disabled {
+.pkt-btn:disabled, .pkt-btn[disabled], .pkt-btn[data-disabled] {
   background-color: var(--pkt-color-button-background-disabled);
   border-color: var(--pkt-color-button-border-disabled);
   color: var(--pkt-color-button-text-disabled);
@@ -17434,7 +17478,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/12.1/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/12.3/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -17494,7 +17538,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/12.1/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/12.3/icons/check-medium.svg);
   --pkt-color-input-check-border: var(
     --pkt-color-input-border-normal
   );
@@ -17702,6 +17746,10 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   margin: 0;
   padding: 0.5rem 1rem;
 }
+.pkt-input:not(.pkt-input-compact), .pkt-textinput__input:not(.pkt-input-compact), .pkt-select select:not(.pkt-input-compact),
+.pkt-select:not(.pkt-input-compact):is(select) {
+  min-height: 3rem;
+}
 .pkt-input-compact.pkt-input, .pkt-input-compact.pkt-textinput__input, .pkt-select select.pkt-input-compact,
 .pkt-input-compact.pkt-select:is(select) {
   border: 0;
@@ -17737,7 +17785,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/12.1/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/12.3/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -17897,7 +17945,32 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   line-height: 1.375rem;
   color: var(--pkt-color-input-text-error);
 }
+.pkt-input__range-inputs {
+  container: range/inline-size;
+}
 
+@container range (width < 30rem) {
+  .pkt-input__container {
+    border: 2px solid var(--pkt-color-input-border-normal);
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: min-content auto 4rem;
+    gap: 0;
+  }
+  .pkt-input__container > :nth-child(2) {
+    grid-column-start: span 2;
+  }
+  .pkt-input__container .pkt-input-prefix,
+  .pkt-input__container .pkt-input-suffix,
+  .pkt-input__container .pkt-input-icon,
+  .pkt-input__container .pkt-input,
+  .pkt-input__container .pkt-textinput__input,
+  .pkt-input__container .pkt-select select,
+  .pkt-select .pkt-input__container select,
+  .pkt-input__container .pkt-select:is(select) {
+    border: 0;
+  }
+}
 /* 
  * List elements
  */
@@ -18077,6 +18150,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   color: black;
 }
 
+.pkt-section--gray,
 .pkt-section--grey {
   margin: 1rem 0;
   padding: 0.75rem;
@@ -18093,11 +18167,13 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   */
 }
 @media screen and (min-width: 35.938rem) {
+  .pkt-section--gray,
   .pkt-section--grey {
     padding: 1rem;
   }
 }
 @media screen and (min-width: 48rem) {
+  .pkt-section--gray,
   .pkt-section--grey {
     padding: 1.5rem;
   }
@@ -18732,180 +18808,282 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 
 .pkt-calendar,
-pkt-el-calendar {
+pkt-calendar {
+  z-index: 2;
+  display: block;
+  position: relative;
   max-width: 25rem;
 }
 .pkt-calendar .pkt-cal-month-nav,
-pkt-el-calendar .pkt-cal-month-nav {
+pkt-calendar .pkt-cal-month-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
 }
 .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker,
-pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker {
+pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker {
   display: flex;
   gap: 0.5rem;
 }
 .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input,
-pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input {
+pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input {
   font-size: 1rem;
   font-weight: 500;
   letter-spacing: -0.2px;
   line-height: 1.5rem;
 }
 .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select),
-pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select) {
+pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker .pkt-input:is(select) {
   text-align: right;
 }
 .pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year,
-pkt-el-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year {
+pkt-calendar .pkt-cal-month-nav .pkt-cal-month-picker > .pkt-cal-input-year {
   max-width: 4.5rem;
 }
+.pkt-calendar .pkt-cal-month-nav td,
+.pkt-calendar .pkt-cal-days td,
+pkt-calendar .pkt-cal-month-nav td,
+pkt-calendar .pkt-cal-days td {
+  border: 0;
+}
 .pkt-calendar .pkt-cal-month-nav .pkt-btn,
-.pkt-calendar .pkt-cal-month-nav li,
+.pkt-calendar .pkt-cal-month-nav td > div,
 .pkt-calendar .pkt-cal-days .pkt-btn,
-.pkt-calendar .pkt-cal-days li,
-pkt-el-calendar .pkt-cal-month-nav .pkt-btn,
-pkt-el-calendar .pkt-cal-month-nav li,
-pkt-el-calendar .pkt-cal-days .pkt-btn,
-pkt-el-calendar .pkt-cal-days li {
+.pkt-calendar .pkt-cal-days td > div,
+pkt-calendar .pkt-cal-month-nav .pkt-btn,
+pkt-calendar .pkt-cal-month-nav td > div,
+pkt-calendar .pkt-cal-days .pkt-btn,
+pkt-calendar .pkt-cal-days td > div {
   font: inherit;
   aspect-ratio: 1/1;
   display: flex;
   justify-content: center;
   align-items: center;
+  border: 0;
 }
 .pkt-calendar .pkt-cal-month-nav .pkt-btn,
 .pkt-calendar .pkt-cal-days .pkt-btn,
-pkt-el-calendar .pkt-cal-month-nav .pkt-btn,
-pkt-el-calendar .pkt-cal-days .pkt-btn {
-  margin: 1px;
-  z-index: 1;
+pkt-calendar .pkt-cal-month-nav .pkt-btn,
+pkt-calendar .pkt-cal-days .pkt-btn {
+  margin: 0;
   border-radius: 50%;
 }
 .pkt-calendar .pkt-cal-month-nav .pkt-btn:focus, .pkt-calendar .pkt-cal-month-nav .pkt-btn:active,
 .pkt-calendar .pkt-cal-days .pkt-btn:focus,
 .pkt-calendar .pkt-cal-days .pkt-btn:active,
-pkt-el-calendar .pkt-cal-month-nav .pkt-btn:focus,
-pkt-el-calendar .pkt-cal-month-nav .pkt-btn:active,
-pkt-el-calendar .pkt-cal-days .pkt-btn:focus,
-pkt-el-calendar .pkt-cal-days .pkt-btn:active {
+pkt-calendar .pkt-cal-month-nav .pkt-btn:focus,
+pkt-calendar .pkt-cal-month-nav .pkt-btn:active,
+pkt-calendar .pkt-cal-days .pkt-btn:focus,
+pkt-calendar .pkt-cal-days .pkt-btn:active {
   outline: 0;
   border: 0;
 }
-.pkt-calendar .pkt-cal-month-nav .pkt-btn:disabled,
-.pkt-calendar .pkt-cal-days .pkt-btn:disabled,
-pkt-el-calendar .pkt-cal-month-nav .pkt-btn:disabled,
-pkt-el-calendar .pkt-cal-days .pkt-btn:disabled {
-  background-color: transparent;
-  border: 0;
-  cursor: not-allowed;
-}
 .pkt-calendar .pkt-cal-days,
-pkt-el-calendar .pkt-cal-days {
-  list-style: none;
-  display: grid;
-  grid-template-columns: repeat(7, 14.285%);
+pkt-calendar .pkt-cal-days {
   margin: 0;
   padding-left: 0;
-  justify-content: center;
-  align-items: center;
+  border-spacing: 0;
 }
-.pkt-calendar .pkt-cal-days > li,
-pkt-el-calendar .pkt-cal-days > li {
+.pkt-calendar .pkt-cal-days td,
+pkt-calendar .pkt-cal-days td {
+  padding: 0;
+}
+.pkt-calendar .pkt-cal-days div,
+pkt-calendar .pkt-cal-days div {
   aspect-ratio: 1/1;
   justify-content: center;
   align-items: center;
   position: relative;
   text-align: center;
-  z-index: 1;
 }
-.pkt-calendar .pkt-cal-days > li:before, .pkt-calendar .pkt-cal-days > li:after,
-pkt-el-calendar .pkt-cal-days > li:before,
-pkt-el-calendar .pkt-cal-days > li:after {
+.pkt-calendar .pkt-cal-days div:before, .pkt-calendar .pkt-cal-days div:after,
+pkt-calendar .pkt-cal-days div:before,
+pkt-calendar .pkt-cal-days div:after {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
-  z-index: 0;
+  z-index: -1;
 }
-.pkt-calendar .pkt-cal-days > li:before,
-pkt-el-calendar .pkt-cal-days > li:before {
+.pkt-calendar .pkt-cal-days div:before,
+pkt-calendar .pkt-cal-days div:before {
   left: 0;
   right: 50%;
 }
-.pkt-calendar .pkt-cal-days > li:after,
-pkt-el-calendar .pkt-cal-days > li:after {
+.pkt-calendar .pkt-cal-days div:after,
+pkt-calendar .pkt-cal-days div:after {
   left: 50%;
   right: 0;
 }
 .pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names, .pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days,
-pkt-el-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,
-pkt-el-calendar.pkt-cal-weeknumbers .pkt-cal-days {
+pkt-calendar.pkt-cal-weeknumbers .pkt-cal-day-names,
+pkt-calendar.pkt-cal-weeknumbers .pkt-cal-days {
   grid-template-columns: repeat(8, 12.5%);
 }
 .pkt-calendar .pkt-cal-other,
-pkt-el-calendar .pkt-cal-other {
+.pkt-calendar .pkt-cal-days [data-disabled],
+pkt-calendar .pkt-cal-other,
+pkt-calendar .pkt-cal-days [data-disabled] {
+  cursor: not-allowed;
   color: var(--pkt-color-grays-gray-200);
 }
 .pkt-calendar .pkt-cal-other .pkt-btn,
-pkt-el-calendar .pkt-cal-other .pkt-btn {
+.pkt-calendar .pkt-cal-days [data-disabled] .pkt-btn,
+pkt-calendar .pkt-cal-other .pkt-btn,
+pkt-calendar .pkt-cal-days [data-disabled] .pkt-btn {
   color: inherit;
   background: transparent;
   border: none;
 }
 .pkt-calendar .pkt-cal-today .pkt-btn,
-pkt-el-calendar .pkt-cal-today .pkt-btn {
-  z-index: 2;
+pkt-calendar .pkt-cal-today .pkt-btn {
   text-decoration: underline;
   outline: 1px solid var(--pkt-color-border-default);
+  outline-offset: -1px;
 }
 .pkt-calendar .pkt-cal-selected .pkt-btn,
 .pkt-calendar .pkt-cal-selected .pkt-btn:focus,
-pkt-el-calendar .pkt-cal-selected .pkt-btn,
-pkt-el-calendar .pkt-cal-selected .pkt-btn:focus {
+.pkt-calendar .pkt-cal-selected .pkt-btn:hover,
+pkt-calendar .pkt-cal-selected .pkt-btn,
+pkt-calendar .pkt-cal-selected .pkt-btn:focus,
+pkt-calendar .pkt-cal-selected .pkt-btn:hover {
   background-color: var(--pkt-color-surface-strong-blue);
 }
-.pkt-calendar .pkt-cal-selected .pkt-btn:hover,
-.pkt-calendar .pkt-cal-selected .pkt-btn:focus:hover,
-pkt-el-calendar .pkt-cal-selected .pkt-btn:hover,
-pkt-el-calendar .pkt-cal-selected .pkt-btn:focus:hover {
-  border-color: var(--pkt-color-surface-strong-blue);
-}
-.pkt-calendar .pkt-cal-in-range:before, .pkt-calendar .pkt-cal-in-range:after, .pkt-calendar .pkt-cal-in-range-first:after, .pkt-calendar .pkt-cal-in-range-last:before,
-pkt-el-calendar .pkt-cal-in-range:before,
-pkt-el-calendar .pkt-cal-in-range:after,
-pkt-el-calendar .pkt-cal-in-range-first:after,
-pkt-el-calendar .pkt-cal-in-range-last:before {
+.pkt-calendar .pkt-cal-in-range :before,
+.pkt-calendar .pkt-cal-in-range :after, .pkt-calendar .pkt-cal-in-range-first :after, .pkt-calendar .pkt-cal-in-range-last :before,
+pkt-calendar .pkt-cal-in-range :before,
+pkt-calendar .pkt-cal-in-range :after,
+pkt-calendar .pkt-cal-in-range-first :after,
+pkt-calendar .pkt-cal-in-range-last :before {
   background-color: var(--pkt-color-surface-default-light-blue);
 }
-.pkt-calendar .pkt-cal-in-range-first:before, .pkt-calendar .pkt-cal-in-range-last:after,
-pkt-el-calendar .pkt-cal-in-range-first:before,
-pkt-el-calendar .pkt-cal-in-range-last:after {
+.pkt-calendar .pkt-cal-in-range-first :before, .pkt-calendar .pkt-cal-in-range-last :after,
+pkt-calendar .pkt-cal-in-range-first :before,
+pkt-calendar .pkt-cal-in-range-last :after {
   background-color: transparent;
 }
-.pkt-calendar .pkt-cal-range-hover:before,
+.pkt-calendar .pkt-cal-range-hover :before,
 .pkt-calendar .pkt-cal-range-hover .pkt-btn,
-pkt-el-calendar .pkt-cal-range-hover:before,
-pkt-el-calendar .pkt-cal-range-hover .pkt-btn {
+pkt-calendar .pkt-cal-range-hover :before,
+pkt-calendar .pkt-cal-range-hover .pkt-btn {
   background-color: var(--pkt-color-surface-default-light-blue);
 }
 .pkt-calendar .pkt-cal-range-hover .pkt-btn,
-pkt-el-calendar .pkt-cal-range-hover .pkt-btn {
+pkt-calendar .pkt-cal-range-hover .pkt-btn {
   border-color: var(--pkt-color-surface-default-light-blue);
 }
 .pkt-calendar .pkt-cal-excluded,
-pkt-el-calendar .pkt-cal-excluded {
+pkt-calendar .pkt-cal-excluded {
   background-color: var(--pkt-color-brand-neutrals-100);
 }
-.pkt-calendar .pkt-cal-excluded:before, .pkt-calendar .pkt-cal-excluded:after,
-pkt-el-calendar .pkt-cal-excluded:before,
-pkt-el-calendar .pkt-cal-excluded:after {
+.pkt-calendar .pkt-cal-excluded :before,
+.pkt-calendar .pkt-cal-excluded :after,
+pkt-calendar .pkt-cal-excluded :before,
+pkt-calendar .pkt-cal-excluded :after {
   background-color: transparent;
 }
 
+pkt-datepicker {
+  display: block;
+  position: relative;
+}
+pkt-datepicker .pkt-datepicker {
+  position: relative;
+}
+pkt-datepicker .pkt-datepicker__tags .pkt-tag {
+  margin: 0 0.25rem 0.5rem 0;
+}
+
+.pkt-datepicker__inputs {
+  width: 100%;
+  position: relative;
+}
+
+.pkt-calendar-popup {
+  top: 100%;
+  left: 0;
+  z-index: 2;
+  margin: 0;
+  padding: 0.5rem;
+  position: absolute;
+  width: max-content;
+  background: var(--pkt-color-background-default);
+  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+/*
+ * Cardcomponent
+ */
+.pkt-card {
+  padding: 2rem;
+  display: flex;
+  gap: 3rem;
+}
+.pkt-card__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.pkt-card__tags {
+  display: flex;
+  gap: 1rem;
+}
+.pkt-card--landscape {
+  flex-direction: row;
+  max-width: 950px;
+}
+.pkt-card--landscape .pkt-card__image {
+  min-width: 320px;
+  overflow: hidden;
+}
+.pkt-card--landscape .pkt-card__image img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+.pkt-card--portrait {
+  flex-direction: column;
+  max-width: 500px;
+}
+.pkt-card--portrait .pkt-card__image {
+  max-height: 400px;
+  overflow: hidden;
+}
+.pkt-card--portrait .pkt-card__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+.pkt-card--outlined {
+  border: 3px solid var(--pkt-color-grays-gray-100);
+  background-color: var(--pkt-color-background-default);
+}
+.pkt-card--gray {
+  background-color: var(--pkt-color-background-subtle);
+}
+.pkt-card--blue {
+  background-color: var(--pkt-color-brand-blue-300);
+}
+.pkt-card--green {
+  background-color: var(--pkt-color-brand-light-green-400);
+}
+.pkt-card--beige {
+  background-color: var(--pkt-color-brand-light-beige-1000);
+}
+.pkt-card h1,
+.pkt-card h2,
+.pkt-card h3,
+.pkt-card h4,
+.pkt-card h5,
+.pkt-card p {
+  padding: 0;
+  margin: 0;
+}
+
 /*
  * Footer element
  */
@@ -19351,30 +19529,28 @@ pkt-el-calendar .pkt-cal-excluded:after {
  * TODO: use SVG icons instead
  */
 .pkt-icon,
-pkt-el-icon {
+pkt-icon {
   display: inline-flex;
   min-height: 1rem;
   min-width: 1rem;
 }
 .pkt-icon > svg,
-pkt-el-icon > svg {
+pkt-icon > svg {
   min-height: 1rem;
   min-width: 1rem;
   max-height: 100%;
   max-width: 100%;
 }
-.pkt-icon--small,
-pkt-el-icon--small {
+
+.pkt-icon--small {
   height: 1rem;
   width: 1rem;
 }
-.pkt-icon--medium,
-pkt-el-icon--medium {
+.pkt-icon--medium {
   height: 1.5rem;
   width: 1.5rem;
 }
-.pkt-icon--large,
-pkt-el-icon--large {
+.pkt-icon--large {
   height: 4rem;
   width: 4rem;
 }
@@ -19625,14 +19801,14 @@ pkt-el-icon--large {
 .pkt-linkcard--blue:hover, .pkt-linkcard--blue:focus, .pkt-linkcard--blue:focus-visible, .pkt-linkcard--blue:active {
   color: var(--pkt-color-brand-warm-blue-1000) !important;
 }
-.pkt-linkcard--grey {
+.pkt-linkcard--gray, .pkt-linkcard--grey {
   background-color: var(--pkt-color-surface-default-gray) !important;
   color: var(--pkt-color-text-body-dark) !important;
 }
-.pkt-linkcard--grey:hover {
+.pkt-linkcard--gray:hover, .pkt-linkcard--grey:hover {
   background-color: var(--pkt-color-surface-strong-gray) !important;
 }
-.pkt-linkcard--grey:hover, .pkt-linkcard--grey:focus, .pkt-linkcard--grey:focus-visible, .pkt-linkcard--grey:active {
+.pkt-linkcard--gray:hover, .pkt-linkcard--gray:focus, .pkt-linkcard--gray:focus-visible, .pkt-linkcard--gray:active, .pkt-linkcard--grey:hover, .pkt-linkcard--grey:focus, .pkt-linkcard--grey:focus-visible, .pkt-linkcard--grey:active {
   color: var(--pkt-color-brand-warm-blue-1000) !important;
 }
 .pkt-linkcard--green {
@@ -19645,7 +19821,7 @@ pkt-el-icon--large {
 .pkt-linkcard--green:hover, .pkt-linkcard--green:focus, .pkt-linkcard--green:focus-visible, .pkt-linkcard--green:active {
   color: var(--pkt-color-brand-warm-blue-1000) !important;
 }
-.pkt-linkcard--grey-outline {
+.pkt-linkcard--gray-outline, .pkt-linkcard--grey-outline {
   border: 4px solid var(--pkt-color-border-subtle) !important;
 }
 .pkt-linkcard--beige-outline {
@@ -19954,6 +20130,10 @@ pkt-el-icon--large {
   background-color: var(--pkt-color-surface-default-gray) !important;
 }
 
+.preview-content {
+  display: contents;
+}
+
 .pkt-progressbar {
   --pkt-progress-width: 0%;
   --pkt-progress-label-width: 5rem;
@@ -20319,8 +20499,8 @@ pkt-el-icon--large {
   white-space: nowrap;
 }
 .pkt-tabs__link .pkt-icon,
-.pkt-tabs__link pkt-el-icon, .pkt-tabs__button .pkt-icon,
-.pkt-tabs__button pkt-el-icon {
+.pkt-tabs__link pkt-icon, .pkt-tabs__button .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 {
@@ -20524,28 +20704,28 @@ pkt-el-icon--large {
 .pkt-tag--beige.pkt-btn:active > svg, .pkt-tag--beige.pkt-tag--active > svg {
   --fg-color: var(--pkt-color-tag-text-active);
 }
-.pkt-tag--grey {
+.pkt-tag--gray, .pkt-tag--grey {
   background: var(--pkt-color-surface-default-gray);
 }
-.pkt-tag--grey.pkt-btn:hover, .pkt-tag--grey.pkt-tag--hover {
+.pkt-tag--gray.pkt-btn:hover, .pkt-tag--gray.pkt-tag--hover, .pkt-tag--grey.pkt-btn:hover, .pkt-tag--grey.pkt-tag--hover {
   background-color: var(--pkt-color-surface-strong-gray);
   color: var(--pkt-color-tag-text-hover);
 }
-.pkt-tag--grey.pkt-btn:hover > svg, .pkt-tag--grey.pkt-tag--hover > svg {
+.pkt-tag--gray.pkt-btn:hover > svg, .pkt-tag--gray.pkt-tag--hover > svg, .pkt-tag--grey.pkt-btn:hover > svg, .pkt-tag--grey.pkt-tag--hover > svg {
   --fg-color: var(--pkt-color-tag-text-hover);
 }
-.pkt-tag--grey.pkt-btn:focus, .pkt-tag--grey.pkt-tag--focus {
+.pkt-tag--gray.pkt-btn:focus, .pkt-tag--gray.pkt-tag--focus, .pkt-tag--grey.pkt-btn:focus, .pkt-tag--grey.pkt-tag--focus {
   background-color: var(--pkt-color-surface-strong-gray);
   color: var(--pkt-color-tag-text-active);
 }
-.pkt-tag--grey.pkt-btn:focus > svg, .pkt-tag--grey.pkt-tag--focus > svg {
+.pkt-tag--gray.pkt-btn:focus > svg, .pkt-tag--gray.pkt-tag--focus > svg, .pkt-tag--grey.pkt-btn:focus > svg, .pkt-tag--grey.pkt-tag--focus > svg {
   --fg-color: var(--pkt-color-tag-text-active);
 }
-.pkt-tag--grey.pkt-btn:active, .pkt-tag--grey.pkt-tag--active {
+.pkt-tag--gray.pkt-btn:active, .pkt-tag--gray.pkt-tag--active, .pkt-tag--grey.pkt-btn:active, .pkt-tag--grey.pkt-tag--active {
   background-color: var(--pkt-color-surface-strong-gray);
   color: var(--pkt-color-tag-text-active);
 }
-.pkt-tag--grey.pkt-btn:active > svg, .pkt-tag--grey.pkt-tag--active > svg {
+.pkt-tag--gray.pkt-btn:active > svg, .pkt-tag--gray.pkt-tag--active > svg, .pkt-tag--grey.pkt-btn:active > svg, .pkt-tag--grey.pkt-tag--active > svg {
   --fg-color: var(--pkt-color-tag-text-active);
 }
 .pkt-tag--blue-light {