@oslokommune/punkt-css 9.2.2 → 9.2.5

package/dist/css/pkt.css

@@ -13681,7 +13681,8 @@ 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]) {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='var(--fg-color  %232A2859)' fill-rule='evenodd' d='M16 19.41 6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z'/%3E%3C/svg%3E");
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.2/icons/chevron-thin-down.svg);
+  background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
   background-size: 1.5rem auto, 100%;
@@ -13702,16 +13703,16 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-input--hover.pkt-select:is(select) {
   border-color: var(--color-hover);
 }
-.pkt-input:focus-visible + .pkt-input-suffix, .pkt-textinput__input:focus-visible + .pkt-input-suffix, .pkt-select select:focus-visible + .pkt-input-suffix,
-.pkt-select:focus-visible:is(select) + .pkt-input-suffix, .pkt-input.pkt-input__textinput--focus, .pkt-input__textinput--focus.pkt-textinput__input, .pkt-select select.pkt-input__textinput--focus,
+.pkt-input:focus-visible, .pkt-textinput__input:focus-visible, .pkt-select select:focus-visible,
+.pkt-select:focus-visible:is(select), .pkt-input.pkt-input__textinput--focus, .pkt-input__textinput--focus.pkt-textinput__input, .pkt-select select.pkt-input__textinput--focus,
 .pkt-input__textinput--focus.pkt-select:is(select) {
-  box-shadow: 0 0 0 2px var(--color-active);
   border-color: var(--color-active);
 }
 .pkt-input:focus, .pkt-textinput__input:focus, .pkt-select select:focus,
 .pkt-select:focus:is(select) {
   outline: none;
-  box-shadow: 0 0 0 2px var(--color-active);
+  --focus-outline: var(--color-active);
+  box-shadow: 0 0 0 2px var(--focus-outline);
   border-color: var(--color-active);
 }
 .pkt-input:disabled, .pkt-textinput__input:disabled, .pkt-select select:disabled,
@@ -13778,7 +13779,8 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   background-color: var(--color-red-30);
 }
 .pkt-input--counter-error:focus {
-  box-shadow: 0 0 0 2px var(--color-red);
+  --focus-outline: var(--color-red);
+  box-shadow: 0 0 0 2px var(--focus-outline);
 }
 .pkt-input__container {
   display: flex;
@@ -13802,6 +13804,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   margin: 0;
 }
 .pkt-input__container input:focus {
+  outline: none;
   box-shadow: none;
 }
 .pkt-input__container:hover .pkt-input, .pkt-input__container:hover .pkt-textinput__input, .pkt-input__container:hover .pkt-select select, .pkt-select .pkt-input__container:hover select,
@@ -13809,13 +13812,15 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   border-color: var(--color-hover);
 }
 .pkt-input__container:focus-within {
-  outline: 2px solid var(--color-active);
+  --focus-outline: var(--color-active);
+  box-shadow: 0 0 0 2px var(--focus-outline);
 }
 .pkt-input__container:focus-within .pkt-input, .pkt-input__container:focus-within .pkt-textinput__input, .pkt-input__container:focus-within .pkt-select select, .pkt-select .pkt-input__container:focus-within select,
 .pkt-input__container:focus-within .pkt-select:is(select),
 .pkt-input__container:focus-within .pkt-input-prefix,
 .pkt-input__container:focus-within .pkt-input-suffix,
 .pkt-input__container:focus-within .pkt-input-icon {
+  outline: 0;
   border-color: var(--color-active);
 }
 .pkt-input__counter {
@@ -15214,22 +15219,20 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-inputwrapper--error .pkt-input,
 .pkt-inputwrapper--error .pkt-input-prefix,
 .pkt-inputwrapper--error .pkt-input-suffix,
-.pkt-inputwrapper--error .pkt-input-icon {
-  border-color: var(--color-red);
-}
+.pkt-inputwrapper--error .pkt-input-icon,
 .pkt-inputwrapper--error .pkt-input:hover,
+.pkt-inputwrapper--error .pkt-input__container:hover,
 .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input,
 .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-prefix,
 .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-suffix,
-.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-icon {
-  border-color: var(--color-red);
-}
-.pkt-inputwrapper--error .pkt-input:focus-within,
+.pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-icon,
+.pkt-inputwrapper--error .pkt-input__container:focus-within,
 .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input,
 .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-prefix,
 .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-suffix,
 .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-icon {
   border-color: var(--color-red);
+  --focus-outline: var(--color-red);
 }
 .pkt-inputwrapper--disabled {
   color: var(--color-disabled);