@oslokommune/punkt-css 12.2.0 → 12.3.0

package/dist/css/pkt-components.css

@@ -391,180 +391,282 @@
 }
 
 .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 td,
+pkt-calendar .pkt-cal-days td {
+  padding: 0;
 }
-.pkt-calendar .pkt-cal-days > li,
-pkt-el-calendar .pkt-cal-days > li {
+.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
  */
@@ -1010,30 +1112,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;
 }
@@ -1613,6 +1713,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;
@@ -1978,8 +2082,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 {
@@ -2374,6 +2478,9 @@ pkt-el-icon--large {
   margin: 0;
   padding: 0.5rem 1rem;
 }
+.pkt-input:not(.pkt-input-compact), .pkt-textinput__input:not(.pkt-input-compact) {
+  min-height: 3rem;
+}
 .pkt-input-compact.pkt-input, .pkt-input-compact.pkt-textinput__input {
   border: 0;
   border-bottom: 1px solid var(--pkt-color-input-border-normal);
@@ -2403,7 +2510,7 @@ pkt-el-icon--large {
   padding-right: 3rem;
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/12.2/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%;
@@ -2548,4 +2655,27 @@ pkt-el-icon--large {
   letter-spacing: -0.2px;
   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 {
+    border: 0;
+  }
 }