@oslokommune/punkt-css 14.5.3 → 15.0.0

package/dist/css/pkt-docs.css

@@ -14399,7 +14399,7 @@ a:active, a.pkt-link--active,
 .pkt-link--external::after {
   display: inline-block;
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/14.5/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -17589,6 +17589,10 @@ button.pkt-link {
   display: block !important;
 }
 
+.pkt-invisible {
+  visibility: hidden !important;
+}
+
 @media screen and (min-width: 0) {
   .pkt-hide-mobile-up,
   .pkt-show.pkt-hide-mobile-up {
@@ -18429,7 +18433,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   outline-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:indeterminate[type=checkbox]:not([role=switch]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/14.5/icons/minus-sign.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/minus-sign.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -18455,7 +18459,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(271deg) brightness(105%) contrast(101%);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/14.5/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -18513,7 +18517,7 @@ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn:activ
   cursor: not-allowed;
 }
 .pkt-input-check__input-checkbox:disabled[type=checkbox][role=switch]:checked:after {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/14.5/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/check-medium.svg);
   --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
   filter: grayscale(100%) brightness(400%);
 }
@@ -18712,7 +18716,10 @@ pkt-select {
 .pkt-input__container:is(:has(.pkt-datepicker__input:not(.pkt-datepicker--multiple))):not(:is(:has(.pkt-input--fullwidth))) {
   width: fit-content;
 }
-.pkt-input--fullwidth, .pkt-input--fullwidth + .pkt-input__counter {
+.pkt-input--fullwidth, *:has(.pkt-input--fullwidth) ~ .pkt-input__counter, .pkt-input--fullwidth + .pkt-input__counter {
+  width: 100%;
+}
+[fullwidth] .pkt-input__counter {
   width: 100%;
 }
 .pkt-input:is(textarea), .pkt-textinput__input:is(textarea), .pkt-select select:is(textarea),
@@ -18728,7 +18735,7 @@ pkt-select {
 }
 .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/14.5/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/15.0/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -20120,6 +20127,15 @@ 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);
+  color: var(--pkt-color-brand-dark-blue-1000);
+}
+.pkt-calendar .pkt-cal-in-range .pkt-btn,
+.pkt-calendar .pkt-cal-in-range .pkt-btn:focus,
+.pkt-calendar .pkt-cal-in-range .pkt-btn:hover,
+pkt-calendar .pkt-cal-in-range .pkt-btn,
+pkt-calendar .pkt-cal-in-range .pkt-btn:focus,
+pkt-calendar .pkt-cal-in-range .pkt-btn:hover {
+  color: var(--pkt-color-brand-dark-blue-1000);
 }
 .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,
@@ -20139,6 +20155,7 @@ pkt-calendar .pkt-cal-in-range-last :after {
 pkt-calendar .pkt-cal-range-hover :before,
 pkt-calendar .pkt-cal-range-hover .pkt-btn {
   background-color: var(--pkt-color-surface-default-light-blue);
+  color: var(--pkt-color-brand-dark-blue-1000);
 }
 .pkt-calendar .pkt-cal-range-hover ::after,
 pkt-calendar .pkt-cal-range-hover ::after {
@@ -20159,80 +20176,6 @@ 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-single,
-pkt-datepicker-range,
-pkt-datepicker-multiple {
-  display: block;
-}
-
-.pkt-datepicker__inputs {
-  width: 100%;
-  position: relative;
-}
-.pkt-datepicker__inputs .pkt-input__container {
-  width: fit-content;
-}
-.pkt-datepicker__inputs button.pkt-input-icon {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-.pkt-datepicker__inputs button.pkt-input-icon:hover {
-  background-color: inherit !important;
-  border-color: inherit !important;
-  --fg-color: var(--pkt-color-button-text-hover);
-}
-.pkt-datepicker__inputs .pkt-datepicker__input {
-  padding-right: 0;
-  background-image: none;
-}
-.pkt-datepicker__inputs .pkt-input-separator ~ .pkt-datepicker--range {
-  padding-left: 0.25rem;
-}
-
-.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);
-}
-
-.pkt-datepicker__input:not(.pkt-datepicker--multiple) {
-  width: 8.3rem;
-}
-
-.pkt-datepicker__input::-webkit-inner-spin-button,
-.pkt-datepicker__input::-webkit-calendar-picker-indicator {
-  display: none;
-  -webkit-appearance: none;
-}
-
-@-moz-document url-prefix() {
-  .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
-    width: 10.5rem;
-  }
-  .pkt-datepicker__inputs button.pkt-input-icon {
-    display: none;
-  }
-  .pkt-datepicker__inputs input.pkt-datepicker__input:has(~ button):not(:has(~ .pkt-input-separator)):not(:has(~ .pkt-input-prefix)) {
-    border-right-width: 2px !important;
-  }
-}
 /*
  * Cardcomponent
  */
@@ -20566,6 +20509,127 @@ pkt-combobox[fullwidth] {
   margin-top: 0.5rem;
 }
 
+.pkt-datepicker,
+pkt-datepicker {
+  display: block;
+  position: relative;
+}
+
+.pkt-datepicker__tags button.pkt-tag {
+  margin: 0 0.25rem 0.5rem 0;
+}
+
+.pkt-datepicker-single,
+.pkt-datepicker-range,
+.pkt-datepicker-multiple,
+pkt-datepicker-single,
+pkt-datepicker-range,
+pkt-datepicker-multiple {
+  display: block;
+}
+
+.pkt-datepicker__inputs {
+  width: 100%;
+  position: relative;
+}
+.pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)) {
+  width: fit-content;
+}
+.pkt-datepicker__inputs > .pkt-input__container {
+  border: 2px solid var(--pkt-color-input-border-normal);
+}
+.pkt-datepicker__inputs > .pkt-input__container .pkt-input,
+.pkt-datepicker__inputs > .pkt-input__container .pkt-input-prefix,
+.pkt-datepicker__inputs > .pkt-input__container .pkt-input-suffix,
+.pkt-datepicker__inputs > .pkt-input__container .pkt-input-icon,
+.pkt-datepicker__inputs > .pkt-input__container .pkt-input-separator {
+  border: 0;
+}
+.pkt-datepicker__inputs > .pkt-input__container:hover {
+  border-color: var(--pkt-color-input-border-active);
+}
+.pkt-datepicker__inputs > .pkt-input__container:focus-within {
+  border-color: var(--pkt-color-input-border-active);
+}
+.pkt-datepicker__inputs > .pkt-input__container:has(input:disabled), .pkt-datepicker__inputs > .pkt-input__container:has(input[readonly]) {
+  border-color: var(--pkt-color-input-border-disabled);
+}
+.pkt-datepicker__inputs > .pkt-input__container:has(.pkt-input--counter-error) {
+  border-color: var(--pkt-color-input-border-error);
+}
+.pkt-inputwrapper--error .pkt-datepicker__inputs > .pkt-input__container {
+  border-color: var(--pkt-color-brand-red-1000);
+}
+.pkt-inputwrapper--error .pkt-datepicker__inputs > .pkt-input__container:hover, .pkt-inputwrapper--error .pkt-datepicker__inputs > .pkt-input__container:focus-within {
+  border-color: var(--pkt-color-brand-red-1000);
+}
+.pkt-inputwrapper--disabled .pkt-datepicker__inputs > .pkt-input__container {
+  border-color: var(--pkt-color-border-states-disabled);
+}
+.pkt-inputwrapper--disabled .pkt-datepicker__inputs > .pkt-input__container:hover, .pkt-inputwrapper--disabled .pkt-datepicker__inputs > .pkt-input__container:focus-within {
+  border-color: var(--pkt-color-border-states-disabled);
+  box-shadow: none;
+  outline: none;
+}
+.pkt-datepicker__inputs button.pkt-input-icon {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.pkt-datepicker__inputs button.pkt-input-icon:hover {
+  background-color: inherit !important;
+  border-color: inherit !important;
+  --fg-color: var(--pkt-color-button-text-hover);
+}
+.pkt-datepicker__inputs .pkt-datepicker__input {
+  padding-right: 0;
+  background-image: none;
+}
+.pkt-datepicker__inputs .pkt-input-separator ~ .pkt-datepicker--range {
+  padding-left: 0.25rem;
+}
+
+.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);
+}
+
+.pkt-datepicker__input:not(.pkt-datepicker--multiple) {
+  width: 8.3rem;
+}
+
+.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
+  width: auto;
+  flex: 1;
+}
+
+.pkt-datepicker__input::-webkit-inner-spin-button,
+.pkt-datepicker__input::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+@-moz-document url-prefix() {
+  .pkt-datepicker__input:not(.pkt-datepicker--multiple) {
+    width: 10.5rem;
+  }
+  .pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
+    width: auto;
+    flex: 1;
+  }
+  .pkt-datepicker__inputs button.pkt-input-icon {
+    display: none;
+  }
+  .pkt-datepicker__inputs input.pkt-datepicker__input:has(~ button):not(:has(~ .pkt-input-separator)):not(:has(~ .pkt-input-prefix)) {
+    border-right-width: 2px !important;
+  }
+}
 /*
  * Footer element
  */