@miljodirektoratet/md-css 5.7.0 → 5.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-css",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "CSS for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./src/index.css",

package/src/accordionitem/accordionitem.css

@@ -56,7 +56,7 @@
   line-height: 1.5rem;
 }
 
-.md-accordion-item__header:focus {
+.md-accordion-item__header:focus-visible {
   outline: 2px solid var(--mdPrimaryColor80);
 }
 
@@ -139,7 +139,7 @@
   text-decoration: underline;
 }
 
-.md-accordion-item__close-button:focus {
+.md-accordion-item__close-button:focus-visible {
   outline: 2px solid var(--mdPrimaryColor80);
   outline-offset: 2px;
 }

package/src/button/button.css

@@ -71,7 +71,7 @@
   margin-left: 0.5rem;
 }
 
-.md-button:focus {
+.md-button:focus-visible {
   background-color: var(--mdPrimaryColor80);
   outline: 2px white solid;
   outline-offset: -4px;
@@ -117,7 +117,7 @@
   background-color: var(--mdPrimaryColor20);
 }
 
-.md-button--secondary:focus:enabled {
+.md-button--secondary:focus-visible:enabled {
   background-color: #ffffff;
   border-color: var(--mdPrimaryColor80);
   color: var(--mdPrimaryColor80);
@@ -165,14 +165,14 @@
   background-color: var(--mdPrimaryColor20);
 }
 
-.md-button--tertiary:focus:enabled {
+.md-button--tertiary:focus-visible:enabled {
   border-color: var(--mdPrimaryColor);
   outline: 2px var(--mdPrimaryColor80) solid;
   background-color: transparent;
   outline-offset: 0px;
 }
 
-.md-button--tertiary:focus:hover:enabled {
+.md-button--tertiary:focus-visible:hover:enabled {
   background-color: var(--mdPrimaryColor20);
 }
 
@@ -199,7 +199,7 @@
   background-color: var(--mdErrorColor);
 }
 
-.md-button--danger:focus:enabled {
+.md-button--danger:focus-visible:enabled {
   background-color: var(--mdErrorColor);
   outline: 2px white solid;
   outline-offset: -4px;
@@ -234,7 +234,7 @@
   border-color: var(--mdErrorColor);
 }
 
-.md-button--danger-secondary:focus:enabled {
+.md-button--danger-secondary:focus-visible:enabled {
   background-color: #ffffff;
   border-color: var(--mdErrorColor);
   color: var(--mdErrorColor);

package/src/chips/chips.css

@@ -28,7 +28,7 @@
   background-color: var(--mdPrimaryColor120);
   color: #fff;
 }
-.md-chip.md-chip--solid:not(.md-chip--disabled):focus {
+.md-chip.md-chip--solid:not(.md-chip--disabled):focus-visible {
   outline-offset: 0.1875rem;
 }
 
@@ -36,7 +36,7 @@
   background-color: var(--mdPrimaryColor20);
 }
 
-.md-chip:not(.md-chip--disabled):focus {
+.md-chip:not(.md-chip--disabled):focus-visible {
   outline: 0.1875rem solid var(--mdPrimaryColor);
   outline-offset: -0.1875rem;
 }
@@ -48,7 +48,7 @@
   cursor: default;
 }
 
-.md-chip--disabled:focus {
+.md-chip--disabled:focus-visible {
   outline: none;
 }
 
@@ -57,7 +57,7 @@
   color: #fff;
 }
 
-.md-chip:not(.md-chip--disabled).md-chip--active:focus {
+.md-chip:not(.md-chip--disabled).md-chip--active:focus-visible {
   outline-offset: -0.3125rem;
   outline-color: #fff;
 }

package/src/formElements/autocomplete/autocomplete.css

@@ -61,8 +61,8 @@
   cursor: not-allowed;
 }
 
-.md-autocomplete__input:focus,
-.md-autocomplete__input:focus-within {
+.md-autocomplete__input:focus-visible,
+.md-autocomplete__input:focus-visible-within {
   outline: none;
 }
 
@@ -154,7 +154,7 @@
 }
 
 .md-autocomplete__dropdown-item:hover,
-.md-autocomplete__dropdown-item:focus {
+.md-autocomplete__dropdown-item:focus-visible {
   outline: none;
   background-color: var(--mdPrimaryColor20);
   transition: background-color 0.15s ease-in-out;
@@ -207,7 +207,7 @@
 }
 
 /* Focus state */
-.md-autocomplete:not(.md-autocomplete--open) .md-autocomplete__input:focus {
+.md-autocomplete:not(.md-autocomplete--open) .md-autocomplete__input:focus-visible {
   border: 2px solid var(--mdPrimaryColor);
 }
 

package/src/formElements/checkbox/checkbox.css

@@ -26,12 +26,12 @@
   min-width: 1.25rem;
 }
 
-.md-checkbox:focus-within .md-checkbox__label::before,
+.md-checkbox__input:focus-visible + .md-checkbox__label::before,
 .md-checkbox:hover .md-checkbox__label::before {
   background-color: var(--mdPrimaryColor20);
 }
 
-.md-checkbox:focus-within .md-checkbox__label {
+.md-checkbox__input:focus-visible + .md-checkbox__label {
   outline: 2px solid var(--mdPrimaryColor);
   outline-offset: 2px;
 }
@@ -45,7 +45,7 @@
 }
 
 .md-checkbox--disabled .md-checkbox__label::before,
-.md-checkbox--disabled:focus-within .md-checkbox__label::before,
+.md-checkbox--disabled .md-checkbox__input:focus-visible + .md-checkbox__label::before,
 .md-checkbox--disabled:hover .md-checkbox__label::before {
   background-color: var(--mdGreyColor20);
   border-color: var(--mdGreyColor60);

package/src/formElements/combobox/combobox.css

@@ -118,7 +118,7 @@
   cursor: pointer;
   line-height: 150%;
 
-  &:focus-visible {
+  &:focus-visible-visible {
     outline: 2px solid var(--mdPrimaryColor);
     outline-offset: -2px;
   }

package/src/formElements/input/input.css

@@ -25,14 +25,14 @@
 }
 
 .md-input:not(.md-input.md-input--readonly):not(.md-input.md-input--disabled):active,
-.md-input:not(.md-input.md-input--readonly):not(.md-input.md-input--disabled):focus {
+.md-input:not(.md-input.md-input--readonly):not(.md-input.md-input--disabled):focus-visible {
   outline: 2px solid var(--mdPrimaryColor80);
   outline-offset: -2px;
   border-color: transparent;
 }
 
-.md-input.md-input--disabled:focus,
-.md-input.md-input--readonly:focus {
+.md-input.md-input--disabled:focus-visible,
+.md-input.md-input--readonly:focus-visible {
   outline: 0;
   cursor: default;
 }

package/src/formElements/multiautocomplete/multiautocomplete.css

@@ -61,8 +61,8 @@
   cursor: not-allowed;
 }
 
-.md-multiautocomplete__input:focus,
-.md-multiautocomplete__input:focus-within {
+.md-multiautocomplete__input:focus-visible,
+.md-multiautocomplete__input:focus-visible-within {
   outline: none;
 }
 
@@ -171,7 +171,7 @@
 }
 
 .md-multiautocomplete__dropdown-item:hover,
-.md-multiautocomplete__dropdown-item:focus {
+.md-multiautocomplete__dropdown-item:focus-visible {
   outline: none;
   background-color: var(--mdPrimaryColor20);
   transition: background-color 0.15s ease-in-out;
@@ -231,7 +231,7 @@
 }
 
 /* Focus state */
-.md-multiautocomplete:not(.md-multiautocomplete--open) .md-multiautocomplete__input:focus {
+.md-multiautocomplete:not(.md-multiautocomplete--open) .md-multiautocomplete__input:focus-visible {
   border: 2px solid var(--mdPrimaryColor);
 }
 

package/src/formElements/multiselect/multiselect.css

@@ -50,20 +50,21 @@
   cursor: default;
 }
 
-.md-multiselect__button:focus,
-.md-multiselect__button:focus-within {
+.md-multiselect__button:focus-visible,
+.md-multiselect__button:focus-visible-within {
   outline: none;
 }
 .md-multiselect:not(.md-multiselect--disabled)
-  .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus,
+  .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-visible,
 .md-multiselect:not(.md-multiselect--disabled)
-  .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-within {
+  .md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-visible-within {
   padding: calc(0.75rem - 1px);
   border: 2px solid var(--mdPrimaryColor80);
 }
 
-.md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus,
-.md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus-within {
+.md-multiselect:not(.md-multiselect--disabled) .md-multiselect__button:not(.md-multiselect__button--open):focus-visible,
+.md-multiselect:not(.md-multiselect--disabled)
+  .md-multiselect__button:not(.md-multiselect__button--open):focus-visible-within {
   padding: calc(1rem - 1px);
   border: 2px solid var(--mdPrimaryColor80);
 }
@@ -159,22 +160,22 @@
 }
 
 .md-multiselect__dropdown-item:hover,
-.md-multiselect__dropdown-item:focus,
-.md-multiselect__dropdown-item:focus-within {
+.md-multiselect__dropdown-item:focus-visible,
+.md-multiselect__dropdown-item:focus-visible-within {
   outline: none;
   background-color: var(--mdPrimaryColor20);
   transition: background-color 0.15s ease-in-out;
 }
 
 .md-multiselect__dropdown-item:hover .md-checkbox__label,
-.md-multiselect__dropdown-item:focus .md-checkbox__label,
-.md-multiselect__dropdown-item:focus-within .md-checkbox__label {
+.md-multiselect__dropdown-item:focus-visible .md-checkbox__label,
+.md-multiselect__dropdown-item:focus-visible-within .md-checkbox__label {
   outline: none;
 }
 
 .md-multiselect__dropdown-item:hover .md-checkbox .md-checkbox__label::before,
-.md-multiselect__dropdown-item:focus .md-checkbox .md-checkbox__label::before,
-.md-multiselect__dropdown-item:focus-within .md-checkbox .md-checkbox__label::before {
+.md-multiselect__dropdown-item:focus-visible .md-checkbox .md-checkbox__label::before,
+.md-multiselect__dropdown-item:focus-visible-within .md-checkbox .md-checkbox__label::before {
   background-color: #fff;
 }
 
@@ -231,14 +232,14 @@
   padding-bottom: 0.75rem;
 }
 
-.md-multiselect__button:not(.md-multiselect__button--open):focus,
-.md-multiselect__button:not(.md-multiselect__button--open):focus-within {
+.md-multiselect__button:not(.md-multiselect__button--open):focus-visible,
+.md-multiselect__button:not(.md-multiselect__button--open):focus-visible-within {
   padding: calc(1rem - 1px);
   border: 2px solid var(--mdPrimaryColor80);
 }
 
-.md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus,
-.md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-within {
+.md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-visible,
+.md-multiselect__button.md-multiselect--small:not(.md-multiselect__button--open):focus-visible-within {
   padding: calc(0.75rem - 1px);
   border: 2px solid var(--mdPrimaryColor80);
 }

package/src/formElements/radiobutton/radiobutton.css

@@ -8,7 +8,7 @@
   position: relative;
 }
 
-.md-radiobutton:focus-within {
+.md-radiobutton:has(input[type='radio']:focus-visible) {
   outline: 2px solid var(--mdPrimaryColor);
   outline-offset: 2px;
 }
@@ -41,7 +41,7 @@
   position: relative;
 }
 
-.md-radiobutton:not(.md-radiobutton--disabled):focus-within .md-radiobutton__check-area,
+.md-radiobutton:has(input[type='radio']:focus-visible) .md-radiobutton__check-area,
 .md-radiobutton:not(.md-radiobutton--disabled):hover .md-radiobutton__check-area {
   background-color: var(--mdPrimaryColor20);
   text-decoration: underline;

package/src/formElements/select/select.css

@@ -17,7 +17,7 @@
   font-weight: 600;
 }
 
-.md-select__button-wrapper:focus-visible {
+.md-select__button-wrapper:focus-visible-visible {
   outline: 0;
 }
 .md-select__button {
@@ -64,7 +64,7 @@
   border-radius: 0;
   line-height: 150%;
 
-  &:focus-visible {
+  &:focus-visible-visible {
     outline: 2px solid var(--mdPrimaryColor);
     outline-offset: -2px;
   }
@@ -94,7 +94,7 @@
   cursor: pointer;
   line-height: 150%;
 
-  &:focus-visible {
+  &:focus-visible-visible {
     outline: 2px solid var(--mdPrimaryColor);
     outline-offset: -2px;
   }

package/src/formElements/textarea/textarea.css

@@ -18,14 +18,14 @@
 }
 
 .md-textarea:not(.md-textarea.md-textarea--readonly):not(.md-textarea.md-textarea--disabled):active,
-.md-textarea:not(.md-textarea.md-textarea--readonly):not(.md-textarea.md-textarea--disabled):focus {
+.md-textarea:not(.md-textarea.md-textarea--readonly):not(.md-textarea.md-textarea--disabled):focus-visible {
   outline: 2px solid var(--mdPrimaryColor80);
   outline-offset: -2px;
   border-color: transparent;
 }
 
-.md-textarea.md-textarea--disabled:focus,
-.md-textarea.md-textarea--readonly:focus {
+.md-textarea.md-textarea--disabled:focus-visible,
+.md-textarea.md-textarea--readonly:focus-visible {
   outline: 0;
   cursor: default;
 }

package/src/help/help.css

@@ -23,11 +23,11 @@
   border-right: 6px solid transparent;
 }
 
-.md-helpbutton:focus {
+.md-helpbutton:focus-visible {
   outline: none;
 }
 
-.md-helpbutton:focus .md-helpbutton__icon {
+.md-helpbutton:focus-visible .md-helpbutton__icon {
   outline: 2px solid var(--mdPrimaryColor);
   outline-offset: 2px;
 }

package/src/iconButton/iconButton.css

@@ -25,7 +25,7 @@
   height: 1rem;
 }
 
-.md-icon-button:focus {
+.md-icon-button:focus-visible {
   outline: 2px white solid;
   background-color: var(--mdPrimaryColor80);
   outline-offset: -3px;
@@ -63,11 +63,11 @@
   background-color: var(--mdPrimaryColor20);
 }
 
-.md-icon-button--border:hover:focus:enabled {
+.md-icon-button--border:hover:focus-visible:enabled {
   background-color: var(--mdPrimaryColor20);
 }
 
-.md-icon-button--border:focus:enabled {
+.md-icon-button--border:focus-visible:enabled {
   background-color: #ffffff;
   border: 1px solid var(--mdPrimaryColor80);
   outline: 1px var(--mdPrimaryColor80) solid;
@@ -100,7 +100,7 @@
   background-color: transparent;
 }
 
-.md-icon-button--plain:focus:enabled {
+.md-icon-button--plain:focus-visible:enabled {
   outline: 2px var(--mdPrimaryColor80) solid;
   outline-offset: -2px;
   background-color: transparent;

package/src/link/link.css

@@ -24,7 +24,7 @@
   text-decoration-color: var(--mdPrimaryColor);
 }
 
-.md-link:focus {
+.md-link:focus-visible {
   outline: 1px solid var(--mdPrimaryColor80);
 }
 

package/src/tabs/tabs.css

@@ -57,7 +57,7 @@
   cursor: pointer;
 }
 
-.md-tabs-container ul li .md-tabs-button:not(.md-tabs-button--disabled):focus {
+.md-tabs-container ul li .md-tabs-button:not(.md-tabs-button--disabled):focus-visible {
   outline: 2px solid var(--mdPrimaryColor);
   outline-offset: -2px;
   background-color: var(--mdPrimaryColor20);
@@ -97,7 +97,6 @@
   font-weight: 400;
 }
 
-
 .md-tabs-container.md-tabs__compact ul li .md-tabs-button--selected:hover:not(.md-tabs-button--disabled) {
   background-color: var(--mdPrimaryColor);
   color: white;
@@ -106,4 +105,4 @@
 
 .md-tabs-container.md-tabs__compact ul li .md-tabs-button::after {
   display: none;
-}
+}

package/src/tile/tile.css

@@ -46,7 +46,7 @@
   cursor: pointer;
 }
 
-.md-tile:not(.md-tile--disabled):focus {
+.md-tile:not(.md-tile--disabled):focus-visible {
   outline: 2px solid var(--mdPrimaryColor);
   outline-offset: -2px;
   background-color: var(--mdPrimaryColor30);
@@ -56,7 +56,7 @@
   background-color: var(--mdSecondaryColor80);
 }
 
-.md-tile--secondary:not(.md-tile--disabled):focus {
+.md-tile--secondary:not(.md-tile--disabled):focus-visible {
   background-color: var(--mdSecondaryColor80);
 }
 
@@ -157,7 +157,7 @@
   transition: all 0.15s ease-in-out;
 }
 
-.md-tile-vertical:focus {
+.md-tile-vertical:focus-visible {
   outline: 2px solid var(--mdPrimaryColor);
   outline-offset: -2px;
   background-color: var(--mdPrimaryColor30);
@@ -167,7 +167,7 @@
   background-color: var(--mdSecondaryColor80);
 }
 
-.md-tile-vertical--secondary:focus {
+.md-tile-vertical--secondary:focus-visible {
   background-color: var(--mdSecondaryColor80);
 }
 

package/src/toggle/toggle.css

@@ -2,8 +2,8 @@
   display: flex;
 }
 
-.md-toggle__wrapper:focus-within,
-.md-toggle__wrapper:focus {
+.md-toggle__wrapper:focus-visible-within,
+.md-toggle__wrapper:focus-visible {
   outline: none;
 }
 
@@ -25,7 +25,7 @@
   cursor: pointer;
 }
 
-.md-toggle__wrapper:focus-within .md-toggle__label-wrapper {
+.md-toggle__wrapper:focus-visible-within .md-toggle__label-wrapper {
   outline: 2px solid var(--mdPrimaryColor80);
   outline-offset: 4px;
 }