@oslokommune/punkt-css 15.4.4 → 16.0.0

package/dist/css/pkt-docs.css

@@ -14410,7 +14410,7 @@ a:active, a.pkt-link--active,
 .pkt-link--external::after {
   display: inline-block;
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/15.4/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/16.0/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -18452,7 +18452,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/15.4/icons/minus-sign.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/16.0/icons/minus-sign.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -18478,7 +18478,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/15.4/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/16.0/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -18536,7 +18536,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/15.4/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/16.0/icons/check-medium.svg);
   --pkt-color-input-check-border: var(--pkt-color-input-border-normal);
   filter: grayscale(100%) brightness(400%);
 }
@@ -18754,7 +18754,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/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%;
@@ -20409,12 +20409,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%;
 }
 
@@ -20434,30 +20437,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;
 }
@@ -20467,7 +20456,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;
@@ -20480,18 +20471,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);
@@ -20508,17 +20508,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;
@@ -20527,6 +20559,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;
@@ -23197,7 +23240,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 {
@@ -23275,6 +23319,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;
@@ -23295,7 +23344,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 {