@oslokommune/punkt-css 15.4.3 → 16.0.0

package/dist/css/pkt-components.css

@@ -967,12 +967,15 @@ pkt-card {
   background-color: var(--pkt-color-brand-light-beige-1000);
 }
 
-pkt-combobox {
+pkt-combobox,
+.pkt-combobox-component {
   display: block;
   max-width: 31rem;
   width: 100%;
 }
-pkt-combobox[fullwidth] {
+pkt-combobox[fullwidth], pkt-combobox--fullwidth,
+.pkt-combobox-component[fullwidth],
+.pkt-combobox-component--fullwidth {
   max-width: 100%;
 }
 
@@ -992,30 +995,16 @@ pkt-combobox[fullwidth] {
   height: 100%;
   min-width: 1.125rem;
   min-height: 1.125rem;
-  transform: rotate(0deg);
-  transition: transform 1s linear;
   padding: 0.5rem;
 }
 .pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn svg {
-  transition: transform 0.1s ease-in-out;
   width: 1.5rem;
   height: 1.5rem;
 }
-.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn-icon {
-  transform: rotate(0deg);
-  transition: transform 0.3s ease;
-}
-.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn-icon--open {
-  transform: rotate(180deg);
-  transition: transform 0.3s ease;
-}
 .pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]) {
   background-color: inherit;
   border-color: transparent;
 }
-.pkt-combobox__wrapper .pkt-combobox__arrow.pkt-btn:hover:not([data-disabled]) svg {
-  transform: translateY(0.25rem);
-}
 .pkt-combobox__wrapper .pkt-combobox__value {
   padding-left: 0.5rem;
 }
@@ -1025,7 +1014,9 @@ pkt-combobox[fullwidth] {
   position: relative;
   margin: 0;
   padding: 0.5rem 2rem 0.5rem 0.5rem;
-  border: 2px solid var(--pkt-color-border-default);
+  background-color: var(--pkt-color-input-background-normal);
+  border: 2px solid var(--pkt-color-input-border-normal);
+  color: var(--pkt-color-input-text-normal);
   min-height: 3rem;
   gap: 0.375rem;
   flex-wrap: wrap;
@@ -1038,18 +1029,27 @@ pkt-combobox[fullwidth] {
 .pkt-combobox__wrapper .pkt-combobox__input-div {
   display: contents;
 }
-.pkt-combobox__wrapper .pkt-combobox__input-div:first-child input {
-  padding-left: 0.5rem;
-}
 .pkt-combobox__wrapper .pkt-combobox__input--fullwidth {
   width: 100%;
 }
+.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) {
+  border-color: var(--pkt-color-input-border-hover);
+}
+.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) > .pkt-combobox__value {
+  color: var(--pkt-color-input-text-hover);
+}
+.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon {
+  --fg-color: var(--pkt-color-brand-warm-blue-1000);
+}
+.pkt-combobox__wrapper .pkt-combobox__input:hover:not(.pkt-combobox__wrapper .pkt-combobox__input--disabled):not(.pkt-combobox__wrapper .pkt-combobox__input--error) .pkt-combobox__arrow-icon:not(.pkt-combobox__arrow-icon--open) svg {
+  transform: translateY(0.25rem);
+}
 .pkt-combobox__wrapper .pkt-combobox__input--error, .pkt-combobox__wrapper .pkt-combobox__input--error:hover, .pkt-combobox__wrapper .pkt-combobox__input--error:focus, .pkt-combobox__wrapper .pkt-combobox__input--error:focus-within {
   border-color: var(--pkt-color-brand-red-1000);
 }
 .pkt-combobox__wrapper .pkt-combobox__input:focus, .pkt-combobox__wrapper .pkt-combobox__input:focus-within, .pkt-combobox__wrapper .pkt-combobox__input:focus-visible, .pkt-combobox__wrapper .pkt-combobox__input--open {
-  border-color: var(--pkt-color-brand-warm-blue-1000);
-  outline: none;
+  border-color: var(--pkt-color-input-border-active);
+  outline: 2px solid var(--pkt-color-input-border-active);
 }
 .pkt-combobox__wrapper .pkt-combobox__input--disabled, .pkt-combobox__wrapper .pkt-combobox__input--disabled:hover, .pkt-combobox__wrapper .pkt-combobox__input--disabled:focus, .pkt-combobox__wrapper .pkt-combobox__input--disabled:focus-within {
   background-color: var(--pkt-color-surface-default-gray);
@@ -1066,17 +1066,49 @@ pkt-combobox[fullwidth] {
   background: transparent;
   letter-spacing: inherit;
   line-height: 1.4rem;
-  padding: 0;
+  padding: 0 0 0 0.5rem;
   margin: 0;
-  width: 0;
+  flex: 1;
+  min-width: 3rem;
+}
+.pkt-combobox__wrapper .pkt-combobox__input input::placeholder {
+  color: var(--pkt-color-text-placeholder);
+  opacity: 1;
 }
 .pkt-combobox__wrapper .pkt-combobox__input input:focus, .pkt-combobox__wrapper .pkt-combobox__input input:active {
-  width: 100%;
   outline: none;
 }
 .pkt-combobox__wrapper .pkt-combobox__input .pkt-tag {
   margin: 0;
 }
+.pkt-combobox__wrapper .pkt-combobox__tag-list {
+  display: contents;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.pkt-combobox__wrapper .pkt-combobox__tag-list li {
+  display: contents;
+}
+.pkt-combobox__wrapper .pkt-combobox__arrow-icon {
+  position: absolute;
+  right: 0.25rem;
+  min-width: 1.125rem;
+  min-height: 1.125rem;
+  padding: 0.5rem;
+  transform: rotate(0deg);
+  transition: transform 0.3s ease;
+  pointer-events: none;
+}
+.pkt-combobox__wrapper .pkt-combobox__arrow-icon svg {
+  width: 1.5rem;
+  height: 1.5rem;
+  transition: transform 0.1s ease-in-out;
+}
+.pkt-combobox__wrapper .pkt-combobox__arrow-icon--open {
+  transform: rotate(180deg);
+  transition: transform 0.3s ease;
+}
 .pkt-combobox__wrapper .pkt-combobox__tags-outside {
   display: flex;
   flex-wrap: wrap;
@@ -1085,6 +1117,17 @@ pkt-combobox[fullwidth] {
 .pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-tag {
   margin: 0;
 }
+.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.pkt-combobox__wrapper .pkt-combobox__tags-outside .pkt-combobox__tag-list li {
+  display: contents;
+}
 .pkt-combobox__wrapper .pkt-combobox__placeholder {
   color: var(--pkt-color-text-placeholder);
   opacity: 1;
@@ -1456,6 +1499,7 @@ pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnai
   padding: 0.5rem;
   min-width: 0;
   overflow: hidden;
+  justify-content: end;
 }
 pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item--in-progress,
 .pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item--in-progress {
@@ -1794,8 +1838,8 @@ pkt-fileupload__queue-display__item__thumbnail--fallback .pkt-fileupload__queue-
 .pkt-fileupload__queue-display__item__thumbnail--fallback .pkt-fileupload__queue-display__item__thumbnail__title {
   letter-spacing: -0.2px;
   font-weight: 400;
-  font-size: 0.75rem;
-  line-height: 1.25rem;
+  font-size: 0.875rem;
+  line-height: 1.375rem;
 }
 pkt-fileupload__queue-display__item--canceled,
 .pkt-fileupload__queue-display__item--canceled {
@@ -3754,7 +3798,8 @@ pkt-listbox {
   margin: 0;
   overflow-y: auto;
   border: 2px solid var(--pkt-color-border-gray);
-  background-color: white;
+  background-color: var(--pkt-color-input-background-normal);
+  color: var(--pkt-color-input-text-normal);
   max-height: 18rem;
 }
 .pkt-listbox.pkt-listbox__open {
@@ -3832,6 +3877,11 @@ pkt-listbox {
 .pkt-listbox .pkt-listbox__option:hover:not(.pkt-listbox__search) {
   background-color: var(--pkt-color-surface-default-light-blue);
 }
+.pkt-listbox .pkt-listbox__empty {
+  padding: 0.75rem;
+  color: var(--pkt-color-text-body-muted);
+  list-style: none;
+}
 .pkt-listbox .pkt-listbox__banners {
   padding: 0.25rem;
   margin: 0;
@@ -3852,7 +3902,7 @@ pkt-listbox {
   width: 100%;
   box-sizing: border-box;
 }
-.pkt-listbox .pkt-listbox__banner--new-option, .pkt-listbox .pkt-listbox__banner--user-message {
+.pkt-listbox .pkt-listbox__banner--new-option, .pkt-listbox .pkt-listbox__banner--user-message, .pkt-listbox .pkt-listbox__banner--empty {
   background-color: var(--pkt-color-surface-default-gray);
 }
 .pkt-listbox .pkt-listbox__banner--maximum-reached {
@@ -5438,7 +5488,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/15.4/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/16.0/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;