@miljodirektoratet/md-css 4.3.1 → 5.0.0

package/package.json

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

package/src/button/button.css

@@ -6,7 +6,7 @@
   font-weight: 400;
   font-family: 'Open sans';
   font-size: 1rem;
-  padding: 0.75rem 1.5rem;
+  padding: 0.75rem 1rem;
   width: fit-content;
   border: none;
 }
@@ -23,8 +23,8 @@
 }
 
 .md-button--small {
-  padding: 0.4rem 0.8rem;
-  border-radius: 0.43rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
 }
 
 .md-button__topIcon {
@@ -41,7 +41,7 @@
   height: 1.25rem;
   width: 1.25rem;
   flex-shrink: 0;
-  margin-right: 1rem;
+  margin-right: 0.5rem;
 }
 
 .md-button--small > .md-button__leftIcon {
@@ -52,7 +52,7 @@
   height: 1.25rem;
   width: 1.25rem;
   flex-shrink: 0;
-  margin-left: 1rem;
+  margin-left: 0.5rem;
 }
 .md-button__rightIcon .md-loading-spinner {
   width: 1rem;
@@ -90,7 +90,7 @@
   background-color: #ffffff;
   border: 2px solid var(--mdPrimaryColor);
   color: var(--mdPrimaryColor);
-  padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
+  padding: calc(0.75rem - 2px) calc(1rem - 2px);
 }
 
 .md-button--small.md-button--secondary {
@@ -111,7 +111,7 @@
 
 .md-button--secondary:disabled {
   background-color: #fff;
-  color: var(--mdGreyColor20);
+  color: var(--mdGreyColor60);
   border-color: var(--mdGreyColor20);
 }
 
@@ -120,7 +120,7 @@
 }
 
 .md-button--secondary:disabled > .md-button__rightIcon {
-  color: var(--mdGreyColor20);
+  color: var(--mdGreyColor60);
 }
 
 .md-button--tertiary {
@@ -128,7 +128,7 @@
   border: none;
   border-radius: 0.43rem;
   color: var(--mdPrimaryColor);
-  padding: 0.75rem 1.5rem;
+  padding: 0.75rem 1rem;
 }
 
 .md-button--small.md-button--tertiary {
@@ -178,3 +178,42 @@
 .md-button--danger:hover:enabled {
   background-color: var(--mdErrorColor120);
 }
+
+/* Danger secondary */
+.md-button--danger-secondary {
+  background-color: #ffffff;
+  border: 2px solid var(--mdErrorColor);
+  color: var(--mdErrorColor);
+  padding: calc(0.75rem - 2px) calc(1rem - 2px);
+}
+
+.md-button--small.md-button--danger-secondary {
+  padding: 0.5rem 0.75rem;
+}
+
+.md-button--danger-secondary:hover:enabled {
+  background-color: var(--mdErrorBackgroundColor);
+  border-color: var(--mdErrorColor);
+}
+
+.md-button--danger-secondary:focus:enabled {
+  background-color: #ffffff;
+  border-color: var(--mdErrorColor);
+  color: var(--mdErrorColor);
+  outline: 2px var(--mdErrorColor) solid;
+  outline-offset: -6px;
+}
+
+.md-button--danger-secondary:disabled {
+  background-color: #fff;
+  color: var(--mdGreyColor60);
+  border-color: var(--mdGreyColor20);
+}
+
+.md-button--danger-secondary > .md-button__rightIcon {
+  color: var(--mdErrorColor);
+}
+
+.md-button--danger-secondary:disabled > .md-button__rightIcon {
+  color: var(--mdGreyColor60);
+}

package/src/formElements/checkbox/checkbox.css

@@ -44,18 +44,18 @@
   background-size: 1.125rem;
 }
 
-.md-checkbox--disabled .md-checkbox__input:checked + .md-checkbox__label::before {
-  filter: grayscale(100%);
-}
-
 .md-checkbox--disabled .md-checkbox__label::before,
 .md-checkbox--disabled:focus-within .md-checkbox__label::before,
 .md-checkbox--disabled:hover .md-checkbox__label::before {
   background-color: var(--mdGreyColor20);
-  border-color: var(--mdGreyColor80);
+  border-color: var(--mdGreyColor60);
   cursor: default;
 }
 
+.md-checkbox--disabled .md-checkbox__input:checked + .md-checkbox__label::before {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iZTk2NWRkN2EtN2NlNS00MTc0LThjMjEtY2UwNjIzYmFmNTJhIiBkYXRhLW5hbWU9ImNoZWNrbWFyay1ncmVlbiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTMgMTAuMDIiPjx0aXRsZT5jaGVja21hcmstZ3JlZW48L3RpdGxlPjxwYXRoIGQ9Ik0xMS4xNCwwLDQuODMsNi4zMWwtMy0zTDAsNS4xOSw0LjgzLDEwLDEzLDEuODZaIiBmaWxsPSIjODA4MDgwIiAvPjwvc3ZnPg==);
+}
+
 .md-checkbox--disabled .md-checkbox__labelText,
 .md-checkbox--disabled .md-checkbox__label {
   cursor: default;

package/src/formElements/select/README.md

@@ -1,55 +1,71 @@
 # Structure
 
-To use the `Select` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
+To use the `MdSelect` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure. Note that this component is built on [Ariakit select](https://ariakit.org/components/select), so implementing it outside React may be challenging due to the complex accessibility behavior it provides.
 
 Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<div class="md-select [md-select--open, md-select--disabled, md-select--medium, md-select--small]">
-    <div class="md-select__label">
-        <div>{label}</div>
-        <div class="md-select__help-button">
-            {button to trigger help text}
+<div class="md-select md-select--[large|medium|small] [md-select--has-error]">
+    <!-- Label section with optional help button -->
+    <div class="md-select__label-wrapper">
+        <div class="md-select__label">
+            <Ariakit.SelectLabel>{label}</Ariakit.SelectLabel>
+            <div class="md-select__help-button">
+                <!-- Help button component -->
+            </div>
         </div>
-    </div>
 
-    <div class="md-select__help-text [md-select__help-text--open]">
-        {helpText}
+        <div class="md-select__help-text [md-select__help-text--open]">
+            <!-- Help text component -->
+        </div>
     </div>
 
-    <MdClickOutsideWrapper> <- optional wrapper to close selectbox when clicking outside
-        <button
-            class="md-select__button [md-select__button--open]"
-            tabIndex={0}
-            onClick={function to toggle expand|collapse}
-        >
-            <div class="md-select__button-text">{displayValue}</div>
-            <div class="md-select__button-icon">
-                <!-- Use MdIconChevronForward or icon from Material Symbols here -->
-                <MdIconChevronForwward />
-            </div>
-        </button>
-
-        <div class="md-select__dropdown">
-            <button
-                tabIndex={open ? 0: -1}
-                class="md-select__dropdown-item [md-select__dropdown-item--selected]"
-                onClick={function to handle select|deselect option}
-            >
-            <div class="md-select__dropdown-item-text">{option.text}</div>
-
-            {if seleceted option
-                <div class="md-select__dropdown-item-clear" title="Klikk for å fjerne valg">
-                    <!-- Use MdIconClose or icon from Material Symbols here -->
-                    <MdIconClose />
+    <!-- Button wrapper -->
+    <div class="md-select__button-wrapper">
+        <Ariakit.Select class="md-select__button">
+            Selected value text
+            <div class="md-select__button-right">
+                <div>
+                    <!-- Counter for multi-select: +{count} -->
                 </div>
-            }
+                <!-- Reset button - displayed when allowReset is true and there's a value -->
+                <button class="md-select__reset" aria-label="Nullstill">
+                    <!-- Close/clear icon -->
+                </button>
+                <!-- Dropdown arrow button -->
+                <button class="md-select__button-icon">
+                    <!-- Chevron down icon -->
+                </button>
+            </div>
+        </Ariakit.Select>
+    </div>
 
-            </button>
-        </div>
-    </MdClickOutsideWrapper>
+    <!-- Dropdown/popover -->
+    <Ariakit.SelectPopover class="md-select__popover">
+        <!-- For regular options -->
+        <Ariakit.SelectItem class="md-select__item">
+            <!-- For single select: just text -->
+            Option text
+            
+            <!-- For multi-select: checkbox -->
+            <MdCheckbox label="Option text" />
+        </Ariakit.SelectItem>
+    </Ariakit.SelectPopover>
+
+    <!-- Error text -->
     <div class="md-select__error">{errorText}</div>
 </div>
 ```
+
+## Accessibility Notes
+
+The MdSelect component uses Ariakit's Select component which handles numerous accessibility attributes including:
+
+- Proper ARIA roles and attributes
+- Keyboard navigation
+- Focus management
+- Screen reader announcements
+
+When implementing this outside of React, you'll need to handle these accessibility concerns manually. The library automatically manages attributes like `aria-controls`, `aria-expanded`, `aria-pressed`, etc.

package/src/formElements/select/select.css

@@ -3,195 +3,171 @@
   width: 100%;
 }
 
-.md-select--medium {
-  max-width: 440px;
-}
-
-.md-select--small {
-  max-width: 260px;
-}
-
-.md-select__container {
-  position: relative;
+/* Label */
+.md-select__label-wrapper {
+  margin-bottom: 0.5rem;
 }
 
 .md-select__label {
   display: flex;
-  align-items: flex-end;
-  font-weight: 600;
+  align-items: center;
+  gap: 0.5rem;
 }
-
-.md-select__label-wrapper {
-  margin-bottom: 0.5rem;
+.md-select__label label {
+  font-weight: 600;
 }
 
-.md-select__label > * + * {
-  margin-left: 1rem;
+.md-select__button-wrapper:focus-visible {
+  outline: 0;
 }
-
 .md-select__button {
-  font-family: 'Open sans';
-  font-size: 1rem;
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  width: 100%;
+  font-size: 1rem;
+  line-height: 150%;
+  border: 1px solid var(--mdPrimaryColor);
+  padding: 0.6875rem 1rem;
   background-color: #fff;
-  padding: 1rem;
-  border: 1px solid var(--mdGreyColor60);
-  color: var(--mdGreyColor);
-  text-align: left;
-  cursor: pointer;
-}
-
-.md-select__button.md-select__button--error {
-  border-color: var(--mdErrorColor);
+  position: relative;
+  outline-width: 0;
+  outline-style: solid;
+  outline-offset: -2px;
+  outline-color: var(--mdPrimaryColor);
+  transition: outline-width 0.1s ease-in;
 }
-
-.md-select__button.md-select__button--small {
-  padding: 0.75rem;
+.md-select--large .md-select__button {
+  padding: 0.9375rem 1rem;
 }
-
-.md-select__button:not(.md-select__button--open):focus.md-select__button--small {
-  padding: calc(0.75rem - 1px);
+.md-select--small .md-select__button {
+  padding: 0.4375rem 1rem;
 }
-.md-select__button.md-select__button--open.md-select__button--small {
-  padding: calc(0.75rem - 1px);
-  padding-bottom: 0.75rem;
+.md-select__button[data-focus-visible],
+.md-select__button[aria-expanded='true'] {
+  outline-width: 2px;
+  transition: outline-width 0.1s ease-in;
 }
-
-.md-select--disabled .md-select__button {
+.md-select__button:disabled {
   background-color: var(--mdGreyColor20);
-  color: var(--mdGreyColor60);
-  cursor: not-allowed;
-}
-
-.md-select__button:focus,
-.md-select__button:focus-within {
-  outline: none;
+  border-color: var(--mdGreyColor60);
 }
+.md-select__button .md-select__button-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  cursor: pointer;
+  pointer-events: auto;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  line-height: 150%;
 
-.md-select__button:not(.md-select__button--open):focus,
-.md-select__button:not(.md-select__button--open):focus-within {
-  padding: calc(1rem - 1px);
-  border: 2px solid var(--mdPrimaryColor);
+  &:focus-visible {
+    outline: 2px solid var(--mdPrimaryColor);
+    outline-offset: -2px;
+  }
 }
-
-.md-select--error.md-select__button:not(.md-select__button--open):focus,
-.md-select--error.md-select__button:not(.md-select__button--open):focus-within {
-  border-color: var(--mdErrorColor);
+.md-select__button[aria-expanded='false'] .md-select__button-icon svg {
+  rotate: 0deg;
+  transition: rotate 0.2s ease-in;
 }
-
-.md-select__button-text {
-  display: flex;
-  flex-grow: 1;
-  padding-right: 1rem;
-  min-height: 1.375rem;
+.md-select__button[aria-expanded='true'] .md-select__button-icon svg {
+  rotate: 180deg;
+  transition: rotate 0.2s ease-in;
 }
-
-.md-select__button-icon {
+.md-select__button-right {
   display: flex;
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  rotate: 90deg;
-  color: var(--mdGreyColor);
+  align-items: center;
+  gap: 0.5rem;
 }
+.md-select__reset {
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  margin-right: 0.3rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  cursor: pointer;
+  line-height: 150%;
 
-.md-select__help-text {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.15s ease-out;
+  &:focus-visible {
+    outline: 2px solid var(--mdPrimaryColor);
+    outline-offset: -2px;
+  }
 }
 
-.md-select__help-text--open {
-  padding-top: 0.5rem;
-  max-height: 2000px;
-  transition: max-height 0.5s ease-in;
-}
-
-.md-select__dropdown {
-  position: absolute;
-  max-height: 0;
-  overflow: hidden;
-  z-index: -1;
+/* popover */
+.md-select__popover {
+  background-color: #fff;
+  max-height: min(var(--popover-available-height, 300px), 300px);
+  overflow: auto;
+  overscroll-behavior: contain;
+  border: 2px solid var(--mdPrimaryColor);
+  border-top: 0;
   opacity: 0;
-  transition: max-height 0.5s ease-in-out;
-  width: 100%;
+  transition-duration: 200ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  animation-duration: 200ms;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateY(-5%);
+  z-index: 3;
+}
+.md-select__popover[data-enter] {
+  opacity: 1;
+  transform: translateY(0%);
+  outline: 0;
 }
 
-.md-select__dropdown-item {
-  display: flex;
-  align-items: center;
-  font-family: 'Open sans';
-  border: 0;
-  background-color: #fff;
-  font-size: 1rem;
-  width: 100%;
-  text-align: left;
-  padding: 0.9rem;
-  transition: background-color 0.15s ease-in-out;
+/* Select item */
+.md-select__item {
+  padding: 0.75rem;
   cursor: pointer;
 }
-
-.md-select__dropdown-item:hover,
-.md-select__dropdown-item:focus {
-  outline: none;
-  background-color: var(--mdPrimaryColor20);
-  transition: background-color 0.15s ease-in-out;
+.md-select__item--no-result {
+  font-style: italic;
 }
-
-.md-select__dropdown-item--selected {
-  background-color: var(--mdPrimaryColor10);
+.md-select--large .md-select__item {
+  padding: 1rem 0.75rem;
 }
-
-.md-select__dropdown-item-text {
-  display: flex;
-  flex-grow: 1;
+.md-select--small .md-select__item {
+  padding: 0.5rem 0.75rem;
 }
-
-.md-select__dropdown-item-clear {
-  display: flex;
-  flex-shrink: 0;
-  height: 1.25rem;
-  width: 1.25rem;
-  color: var(--mdPrimaryColor);
-}
-
-/* Open state */
-.md-select--open .md-select__button {
-  border-top: 2px solid var(--mdPrimaryColor);
-  border-right: 2px solid var(--mdPrimaryColor);
-  border-left: 2px solid var(--mdPrimaryColor);
-}
-
-.md-select__button--open {
-  padding: calc(1rem - 1px);
-  padding-bottom: 1rem;
+.md-select__item[aria-selected='true'] {
+  background-color: var(--mdPrimaryColor20);
 }
+.md-select__item[data-focus-visible],
+.md-select__item[data-active-item] {
+  background-color: var(--mdPrimaryColor40);
 
-.md-select--open .md-select__dropdown {
-  max-height: 350px;
-  overflow-y: auto;
-  opacity: 1;
-  transition: max-height 0.5s ease-in-out;
-  border: 2px solid var(--mdPrimaryColor);
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
-  border-top: 0;
-  z-index: 2;
+  .md-checkbox__label::before {
+    background-color: #fff;
+  }
 }
 
-/* open + error */
-.md-select--open.md-select--error .md-select__button {
-  border-color: var(--mdErrorColor);
+/* Help text */
+.md-select__help-text {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.15s ease-out;
 }
-.md-select--open.md-select--error .md-select__dropdown {
-  border-color: var(--mdErrorColor);
+.md-select__help-text--open {
+  padding-top: 0.5rem;
+  max-height: 2000px;
+  transition: max-height 0.5s ease-in;
 }
 
-/* Error text */
+/* Error */
 .md-select__error {
-  color: var(--mdErrorColor);
-  font-size: 0.88rem;
   margin-top: 0.5rem;
+  color: var(--mdErrorColor);
+  font-size: 0.88em;
+}
+.md-select--has-error .md-select__button,
+.md-select--has-error .md-select__popover {
+  outline-color: var(--mdErrorColor);
+  border-color: var(--mdErrorColor);
 }