@simplybusiness/mobius 9.3.4 → 10.1.0

package/src/components/Checkbox/Checkbox.css

@@ -1,132 +1,134 @@
-/* stylelint-disable no-descending-specificity -- complex component with many state combinations */
-.mobius-checkbox__input {
-  appearance: none;
-  position: absolute;
-  margin: var(--checkbox-margin);
-  width: var(--checkbox-width);
-  height: var(--checkbox-height);
-  border: var(--checkbox-border);
-  border-radius: var(--checkbox-border-radius);
-  pointer-events: none;
-  /* Handle custom icons */
-  background-repeat: no-repeat;
-  background-position: center;
-
-  &.--is-selected {
-    background-color: var(--checkbox-background-color);
-    background-image: var(--checkbox-icon);
-    background-size: var(--checkbox-icon-size);
-    &.--is-invalid {
-      background-color: var(--checkbox-background-color-invalid);
+@layer atoms {
+  /* stylelint-disable no-descending-specificity -- complex component with many state combinations */
+  .mobius-checkbox__input {
+    appearance: none;
+    position: absolute;
+    margin: var(--checkbox-margin);
+    width: var(--checkbox-width);
+    height: var(--checkbox-height);
+    border: var(--checkbox-border);
+    border-radius: var(--checkbox-border-radius);
+    pointer-events: none;
+    /* Handle custom icons */
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &.--is-selected {
+      background-color: var(--checkbox-background-color);
+      background-image: var(--checkbox-icon);
+      background-size: var(--checkbox-icon-size);
+      &.--is-invalid {
+        background-color: var(--checkbox-background-color-invalid);
+      }
+      &.--is-disabled {
+        background-color: var(--checkbox-background-color-disabled);
+      }
     }
+
+    /* Disable browser default since input already provides focus */
+    &:focus-visible {
+      outline: none;
+    }
+
+    /* Disabled */
     &.--is-disabled {
+      color: var(--checkbox-label-color-disabled);
+      border-color: var(--checkbox-border-color-disabled);
       background-color: var(--checkbox-background-color-disabled);
     }
-  }
-
-  /* Disable browser default since input already provides focus */
-  &:focus-visible {
-    outline: none;
-  }
-
-  /* Disabled */
-  &.--is-disabled {
-    color: var(--checkbox-label-color-disabled);
-    border-color: var(--checkbox-border-color-disabled);
-    background-color: var(--checkbox-background-color-disabled);
-  }
 
-  /* Invalid */
-  .--is-invalid &:not(.--is-disabled) {
-    border-color: var(--color-error);
-  }
-}
-
-.mobius-checkbox__label {
-  box-sizing: border-box;
-  display: flex;
-  align-items: flex-start;
-  flex-direction: row;
-  border: var(--checkbox-label-border);
-  border-radius: var(--radius-1);
-  padding: var(--checkbox-label-padding);
-  position: relative;
-  user-select: none;
-  cursor: pointer;
-  background-color: var(--color-background-input);
-
-  /* Disabled */
-  &.--is-disabled {
-    color: var(--checkbox-label-color-disabled);
-    border-color: var(--checkbox-border-color-disabled);
-    background-color: var(--checkbox-label-background-color-disabled);
-    cursor: not-allowed;
-
-    & .mobius-checkbox__icon {
-      color: var(--color-text-light);
+    /* Invalid */
+    .--is-invalid &:not(.--is-disabled) {
+      border-color: var(--color-error);
     }
   }
 
-  /* Hovered */
-  &:hover:not(.--is-disabled):not(&.--is-invalid) {
-    border-color: var(--color-primary);
-    background-color: var(--color-background-input-active);
+  .mobius-checkbox__label {
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: row;
+    border: var(--checkbox-label-border);
+    border-radius: var(--radius-1);
+    padding: var(--checkbox-label-padding);
+    position: relative;
+    user-select: none;
+    cursor: pointer;
+    background-color: var(--color-background-input);
+
+    /* Disabled */
+    &.--is-disabled {
+      color: var(--checkbox-label-color-disabled);
+      border-color: var(--checkbox-border-color-disabled);
+      background-color: var(--checkbox-label-background-color-disabled);
+      cursor: not-allowed;
 
-    & .mobius-checkbox__input {
-      border-color: var(--color-primary);
+      & .mobius-checkbox__icon {
+        color: var(--color-text-light);
+      }
     }
 
-    & .mobius-checkbox__icon {
-      color: var(--color-primary);
-    }
-  }
-
-  &:has(:focus-visible):not(.--is-disabled) {
-    &:not(.--is-invalid) {
-      box-shadow: var(--box-shadow-default);
+    /* Hovered */
+    &:hover:not(.--is-disabled):not(&.--is-invalid) {
       border-color: var(--color-primary);
       background-color: var(--color-background-input-active);
 
+      & .mobius-checkbox__input {
+        border-color: var(--color-primary);
+      }
+
       & .mobius-checkbox__icon {
         color: var(--color-primary);
       }
     }
-  }
 
-  /* Invalid */
-  &.--is-invalid:not(.--is-disabled) {
-    color: var(--checkbox-label-color-invalid);
-    border-color: var(--checkbox-border-color-invalid);
+    &:has(:focus-visible):not(.--is-disabled) {
+      &:not(.--is-invalid) {
+        box-shadow: var(--box-shadow-default);
+        border-color: var(--color-primary);
+        background-color: var(--color-background-input-active);
 
-    &:hover,
-    &:focus-within {
-      background-color: var(--checkbox-label-background-color-invalid);
-    }
-
-    & .mobius-checkbox__icon {
-      color: var(--checkbox-color-invalid);
+        & .mobius-checkbox__icon {
+          color: var(--color-primary);
+        }
+      }
     }
 
-    & .mobius-checkbox__input {
+    /* Invalid */
+    &.--is-invalid:not(.--is-disabled) {
+      color: var(--checkbox-label-color-invalid);
       border-color: var(--checkbox-border-color-invalid);
+
+      &:hover,
+      &:focus-within {
+        background-color: var(--checkbox-label-background-color-invalid);
+      }
+
+      & .mobius-checkbox__icon {
+        color: var(--checkbox-color-invalid);
+      }
+
+      & .mobius-checkbox__input {
+        border-color: var(--checkbox-border-color-invalid);
+      }
     }
   }
-}
 
-.mobius-checkbox__icon {
-  position: relative;
-  color: var(--checkbox-color);
-  visibility: var(--checkbox-default-icon-visibility);
-}
+  .mobius-checkbox__icon {
+    position: relative;
+    color: var(--checkbox-color);
+    visibility: var(--checkbox-default-icon-visibility);
+  }
 
-.mobius-checkbox__visible-label {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 100%;
-  padding-top: var(--checkbox-visible-label-padding-top);
-  font-family: var(--font-family);
-  line-height: var(--line-height-normal);
-  font-size: var(--checkbox-visible-label-font-size);
-  margin-left: var(--checkbox-label-gap);
+  .mobius-checkbox__visible-label {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    padding-top: var(--checkbox-visible-label-padding-top);
+    font-family: var(--font-family);
+    line-height: var(--line-height-normal);
+    font-size: var(--checkbox-visible-label-font-size);
+    margin-left: var(--checkbox-label-gap);
+  }
 }

package/src/components/Checkbox/CheckboxGroup.css

@@ -1,27 +1,29 @@
-.mobius-checkbox-group {
-  display: grid;
-  gap: var(--size-xs);
-
-  & .mobius-checkbox-group__wrapper {
+@layer atoms {
+  .mobius-checkbox-group {
     display: grid;
-    margin-bottom: var(--checkbox-group-wrapper-margin-bottom);
-  }
+    gap: var(--size-xs);
 
-  & .mobius-checkbox,
-  & .mobius-checkbox-group__wrapper {
-    margin-bottom: 0;
-  }
+    & .mobius-checkbox-group__wrapper {
+      display: grid;
+      margin-bottom: var(--checkbox-group-wrapper-margin-bottom);
+    }
 
-  &.--is-horizontal .mobius-checkbox-group__wrapper {
-    grid-template-columns: repeat(var(--checkbox-items-per-row), 1fr);
-    gap: var(--checkbox-group-wrapper-gap-horizontal);
-  }
+    & .mobius-checkbox,
+    & .mobius-checkbox-group__wrapper {
+      margin-bottom: 0;
+    }
 
-  &.--is-vertical .mobius-checkbox-group__wrapper {
-    gap: var(--checkbox-group-wrapper-gap-vertical);
-  }
+    &.--is-horizontal .mobius-checkbox-group__wrapper {
+      grid-template-columns: repeat(var(--checkbox-items-per-row), 1fr);
+      gap: var(--checkbox-group-wrapper-gap-horizontal);
+    }
+
+    &.--is-vertical .mobius-checkbox-group__wrapper {
+      gap: var(--checkbox-group-wrapper-gap-vertical);
+    }
 
-  &:where(.--is-optional) > :where(.mobius-label)::after {
-    content: " (optional)";
+    &:where(.--is-optional) > :where(.mobius-label)::after {
+      content: " (optional)";
+    }
   }
 }

package/src/components/Combobox/Combobox.css

@@ -1,112 +1,114 @@
-.mobius-combobox {
-  interpolate-size: allow-keywords;
-  position: relative;
-  width: 100%;
-}
-
-/* Override prefix icon position for animation */
-.mobius-text-field__input-wrapper.mobius-combobox__input {
-  padding-left: var(--size-sm);
-
-  & .mobius-text-field__prefix-inside {
-    padding-left: 0;
+@layer atoms {
+  .mobius-combobox {
+    interpolate-size: allow-keywords;
+    position: relative;
+    width: 100%;
   }
-}
 
-.mobius-combobox__list {
-  --animation-duration: 0.1s;
-  position: absolute;
-  margin: 0;
-  margin-top: var(--listbox-gap);
-  padding: 0;
-  top: 100%;
-  left: 0;
-  right: 0;
-  z-index: 1000;
-  background-color: #fff;
-  border: 1px solid var(--combobox-border-color);
-  border-radius: var(--radius-1);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  overflow-y: auto;
-  height: 0;
-  opacity: 0;
-  transition:
-    box-shadow var(--animation-duration) ease,
-    height var(--animation-duration) ease,
-    opacity var(--animation-duration) ease;
-  transition-behavior: allow-discrete;
+  /* Override prefix icon position for animation */
+  .mobius-text-field__input-wrapper.mobius-combobox__input {
+    padding-left: var(--size-sm);
 
-  .mobius-combobox--is-expanded & {
-    opacity: 1;
-    height: var(--listbox-height);
-    max-height: var(--listbox-max-height);
+    & .mobius-text-field__prefix-inside {
+      padding-left: 0;
+    }
   }
 
-  .mobius-combobox--is-expanded.mobius-combobox--is-mobile & {
-    max-height: var(--listbox-max-height-mobile);
-  }
-
-  /* Hidden state for accessibility - keeps listbox in DOM but invisible */
-  &.mobius-combobox__list--hidden {
-    visibility: hidden;
+  .mobius-combobox__list {
+    --animation-duration: 0.1s;
+    position: absolute;
+    margin: 0;
+    margin-top: var(--listbox-gap);
+    padding: 0;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background-color: #fff;
+    border: 1px solid var(--combobox-border-color);
+    border-radius: var(--radius-1);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    overflow-y: auto;
     height: 0;
     opacity: 0;
+    transition:
+      box-shadow var(--animation-duration) ease,
+      height var(--animation-duration) ease,
+      opacity var(--animation-duration) ease;
+    transition-behavior: allow-discrete;
+
+    .mobius-combobox--is-expanded & {
+      opacity: 1;
+      height: var(--listbox-height);
+      max-height: var(--listbox-max-height);
+    }
+
+    .mobius-combobox--is-expanded.mobius-combobox--is-mobile & {
+      max-height: var(--listbox-max-height-mobile);
+    }
+
+    /* Hidden state for accessibility - keeps listbox in DOM but invisible */
+    &.mobius-combobox__list--hidden {
+      visibility: hidden;
+      height: 0;
+      opacity: 0;
+    }
   }
-}
 
-.mobius-combobox__no-options {
-  padding: var(--option-padding);
-  text-align: center;
-}
+  .mobius-combobox__no-options {
+    padding: var(--option-padding);
+    text-align: center;
+  }
 
-.mobius-combobox__option {
-  padding: var(--option-padding);
-  cursor: pointer;
-  margin: 2px;
-  border: solid 2px transparent;
-  border-radius: var(--radius-1);
-}
+  .mobius-combobox__option {
+    padding: var(--option-padding);
+    cursor: pointer;
+    margin: 2px;
+    border: solid 2px transparent;
+    border-radius: var(--radius-1);
+  }
 
-.mobius-combobox__option:hover {
-  background-color: var(--color-primary);
-  color: var(--color-neutral-100);
-}
+  .mobius-combobox__option:hover {
+    background-color: var(--color-primary);
+    color: var(--color-neutral-100);
+  }
 
-.mobius-combobox__option--is-highlighted {
-  border-color: var(--color-focus);
-}
+  .mobius-combobox__option--is-highlighted {
+    border-color: var(--color-focus);
+  }
 
-/* Group styles */
-[role="group"] {
-  margin: 0;
-  padding: 0;
-}
+  /* Group styles */
+  [role="group"] {
+    margin: 0;
+    padding: 0;
+  }
 
-[role="group"] > [role="presentation"] {
-  display: block;
-  margin: 0;
-  padding: var(--option-padding);
-  font-weight: bold;
-  color: var(--combobox-group-color);
-  background-color: var(--combobox-group-background-color);
-}
+  [role="group"] > [role="presentation"] {
+    display: block;
+    margin: 0;
+    padding: var(--option-padding);
+    font-weight: bold;
+    color: var(--combobox-group-color);
+    background-color: var(--combobox-group-background-color);
+  }
 
-[role="option"] {
-  position: relative;
-  display: block;
-  cursor: pointer;
-}
+  [role="option"] {
+    position: relative;
+    display: block;
+    cursor: pointer;
+  }
 
-.mobius-combobox--is-loading input {
-  background-image: url("./loading-dots.svg");
-  background-position: right 10px center;
-  background-repeat: no-repeat;
-  background-size: 32px;
-}
+  .mobius-combobox--is-loading input {
+    background-image: url("./loading-dots.svg");
+    background-position: right 10px center;
+    background-repeat: no-repeat;
+    background-size: 32px;
+  }
 
-/* Pulse animation on focus ring */
-/*
-.mobius-combobox--is-loading .mobius-text-field__input-wrapper {
-  animation: pulse-animation 2s infinite;
+  /* Pulse animation on focus ring */
+  /*
+  .mobius-combobox--is-loading .mobius-text-field__input-wrapper {
+    animation: pulse-animation 2s infinite;
+  }
+  */
 }
-*/

package/src/components/Container/Container.css

@@ -1,13 +1,15 @@
-.mobius-container {
-  box-sizing: border-box;
-  margin-left: auto;
-  margin-right: auto;
+@layer atoms {
+  .mobius-container {
+    box-sizing: border-box;
+    margin-left: auto;
+    margin-right: auto;
 
-  &.--is-sm {
-    max-width: var(--size-inner-container);
-  }
+    &.--is-sm {
+      max-width: var(--size-inner-container);
+    }
 
-  &.--is-md {
-    max-width: var(--size-container);
+    &.--is-md {
+      max-width: var(--size-container);
+    }
   }
 }

package/src/components/Divider/Divider.css

@@ -1,14 +1,16 @@
-.mobius-divider {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: var(--size-lg);
-}
+@layer atoms {
+  .mobius-divider {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: var(--size-lg);
+  }
 
-.mobius-divider__inner {
-  width: 100%;
-  height: 1px;
-  background-color: var(--color-background-light);
+  .mobius-divider__inner {
+    width: 100%;
+    height: 1px;
+    background-color: var(--color-background-light);
+  }
 }