@amsterdam/design-system-css 0.16.0 → 1.0.0

package/src/components/checkbox/checkbox.scss

@@ -13,27 +13,7 @@
   @include input-label-focus;
 }
 
-.ams-checkbox__checkmark {
-  align-items: center;
-  block-size: calc(var(--ams-checkbox-font-size) * var(--ams-checkbox-line-height));
-  display: flex;
-  flex-shrink: 0;
-  inline-size: 1.5rem;
-
-  &::after {
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 1rem;
-    block-size: 1.5rem;
-    border-color: var(--ams-checkbox-checkmark-border-color);
-    border-style: solid;
-    border-width: var(--ams-checkbox-checkmark-border-width);
-    box-sizing: border-box;
-    content: "";
-    inline-size: 100%;
-  }
-}
-
+// Default
 .ams-checkbox__label {
   color: var(--ams-checkbox-color);
   cursor: var(--ams-checkbox-cursor);
@@ -47,166 +27,290 @@
 
   @include hyphenation;
   @include text-rendering;
+}
 
-  &:hover {
-    color: var(--ams-checkbox-hover-color);
-    text-decoration-line: underline;
-    text-decoration-thickness: var(--ams-checkbox-hover-text-decoration-thickness);
-    text-underline-offset: 0.375rem;
+.ams-checkbox__icon-container {
+  block-size: var(--ams-checkbox-icon-container-block-size);
+  display: flex;
+  flex: none;
+  inline-size: var(--ams-checkbox-icon-container-inline-size);
+}
 
-    .ams-checkbox__checkmark::after {
-      border-color: var(--ams-checkbox-checkmark-hover-border-color);
-      border-width: var(--ams-checkbox-checkmark-hover-border-width);
-    }
+.ams-checkbox__rectangle {
+  fill: var(--ams-checkbox-rectangle-fill);
+  stroke: var(--ams-checkbox-rectangle-stroke);
+}
+
+.ams-checkbox__hover-indicator {
+  stroke: none;
+}
+
+.ams-checkbox__checked-indicator {
+  display: none;
+  stroke: var(--ams-checkbox-checked-indicator-stroke);
+}
+
+.ams-checkbox__indeterminate-indicator {
+  display: none;
+  stroke: var(--ams-checkbox-indeterminate-indicator-stroke);
+}
+
+// Default hover
+.ams-checkbox__label:hover {
+  color: var(--ams-checkbox-hover-color);
+  text-decoration-line: underline;
+  text-decoration-thickness: var(--ams-checkbox-hover-text-decoration-thickness);
+  text-underline-offset: 0.375rem;
+
+  .ams-checkbox__rectangle {
+    stroke: var(--ams-checkbox-rectangle-hover-stroke);
+  }
+
+  .ams-checkbox__hover-indicator {
+    stroke: var(--ams-checkbox-hover-indicator-hover-stroke);
   }
 }
 
-// Default checked
-.ams-checkbox__input:checked {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    background-color: var(--ams-checkbox-checkmark-checked-background-color);
-    background-image: var(--ams-checkbox-checkmark-checked-background-image);
-    border: none;
+// Invalid
+.ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    stroke: var(--ams-checkbox-rectangle-invalid-stroke);
   }
 }
 
-// Default indeterminate
-.ams-checkbox__input:indeterminate {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    background-color: var(--ams-checkbox-checkmark-indeterminate-background-color);
-    background-image: var(--ams-checkbox-checkmark-indeterminate-background-image);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 1rem;
-    border: none;
+// Indeterminate
+.ams-checkbox__input:indeterminate + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-fill);
+  }
+
+  .ams-checkbox__indeterminate-indicator {
+    display: block;
   }
 }
 
-// Invalid unchecked
-.ams-checkbox__input:invalid,
-.ams-checkbox__input[aria-invalid="true"] {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    border-color: var(--ams-checkbox-checkmark-invalid-border-color);
+// Disabled
+.ams-checkbox__input:disabled + .ams-checkbox__label {
+  color: var(--ams-checkbox-disabled-color);
+  cursor: var(--ams-checkbox-disabled-cursor);
+
+  .ams-checkbox__rectangle {
+    stroke: var(--ams-checkbox-rectangle-disabled-stroke);
+  }
+
+  .ams-checkbox__hover-indicator {
+    stroke: none;
   }
 }
 
-// Disabled unchecked
-.ams-checkbox__input:disabled {
-  + .ams-checkbox__label {
-    color: var(--ams-checkbox-disabled-color);
-    cursor: var(--ams-checkbox-disabled-cursor);
+// Checked
+.ams-checkbox__input:checked:not(:indeterminate) + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-fill);
+  }
 
-    .ams-checkbox__checkmark::after {
-      border-color: var(--ams-checkbox-checkmark-disabled-border-color);
-      border-width: var(--ams-checkbox-checkmark-disabled-border-width);
-    }
+  .ams-checkbox__checked-indicator {
+    display: block;
   }
 }
 
 // Invalid checked
-.ams-checkbox__input:invalid:checked,
-.ams-checkbox__input[aria-invalid="true"]:checked {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    background-color: var(--ams-checkbox-checkmark-invalid-checked-background-color);
+.ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-invalid-fill);
   }
 }
 
 // Invalid indeterminate
-.ams-checkbox__input:invalid:indeterminate,
-.ams-checkbox__input[aria-invalid="true"]:indeterminate {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    background-color: var(--ams-checkbox-checkmark-invalid-indeterminate-background-color);
+.ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-invalid-fill);
   }
 }
 
-// Disabled label
-.ams-checkbox__input:disabled + .ams-checkbox__label:hover {
-  text-decoration: none;
-}
-
 // Disabled checked
-.ams-checkbox__input:disabled:checked {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    background-color: var(--ams-checkbox-checkmark-disabled-checked-background-color);
+.ams-checkbox__input:disabled:checked + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-disabled-fill);
   }
 }
 
 // Disabled indeterminate
-.ams-checkbox__input:disabled:indeterminate {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    background-color: var(--ams-checkbox-checkmark-disabled-indeterminate-background-color);
+.ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-disabled-fill);
   }
 }
 
-// Disabled invalid unchecked
-.ams-checkbox__input:invalid:disabled,
-.ams-checkbox__input[aria-invalid="true"]:disabled {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    border-color: var(--ams-checkbox-checkmark-disabled-border-color);
+// HOVER
+
+// Checked hover
+.ams-checkbox__input:checked + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-hover-fill);
   }
 }
 
-// HOVER STATES
+// Indeterminate hover
+.ams-checkbox__input:indeterminate + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-hover-fill);
+  }
+}
 
-// Invalid unchecked hover
-:is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid="true"])
-  + .ams-checkbox__label:hover
-  .ams-checkbox__checkmark::after {
-  border-color: var(--ams-checkbox-checkmark-invalid-hover-border-color);
+// Invalid hover
+.ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    stroke: var(--ams-checkbox-rectangle-invalid-hover-stroke);
+  }
+
+  .ams-checkbox__hover-indicator {
+    stroke: var(--ams-checkbox-hover-indicator-invalid-hover-stroke);
+  }
 }
 
-// Default checked hover
-.ams-checkbox__input:checked + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
-  background-color: var(--ams-checkbox-checkmark-checked-hover-background-color);
+// Disabled invalid hover
+.ams-checkbox__input[aria-invalid="true"]:disabled + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    stroke: var(--ams-checkbox-rectangle-hover-disabled-invalid-stroke);
+  }
 }
 
-// Default indeterminate hover
-.ams-checkbox__input:indeterminate + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
-  background-color: var(--ams-checkbox-checkmark-indeterminate-hover-background-color);
+// Disabled checked hover
+.ams-checkbox__input:disabled:checked + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-disabled-hover-fill);
+  }
+}
+
+// Disabled indeterminate hover
+.ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-disabled-hover-fill);
+  }
+}
+
+// Disabled hover
+.ams-checkbox__input:disabled + .ams-checkbox__label:hover {
+  text-decoration: none;
+
+  .ams-checkbox__hover-indicator {
+    stroke: none;
+  }
 }
 
 // Invalid checked hover
-:is(.ams-checkbox__input:invalid:checked, .ams-checkbox__input[aria-invalid="true"]:checked)
-  + .ams-checkbox__label:hover
-  .ams-checkbox__checkmark::after {
-  background-color: var(--ams-checkbox-checkmark-invalid-checked-hover-background-color);
+.ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-invalid-hover-fill);
+  }
 }
 
 // Invalid indeterminate hover
-:is(.ams-checkbox__input:invalid:indeterminate, .ams-checkbox__input[aria-invalid="true"]:indeterminate)
-  + .ams-checkbox__label:hover
-  .ams-checkbox__checkmark::after {
-  background-color: var(--ams-checkbox-checkmark-invalid-indeterminate-hover-background-color);
+.ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-invalid-hover-fill);
+  }
 }
 
-// Disabled checked hover
-.ams-checkbox__input:disabled:checked + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
-  background-color: var(--ams-checkbox-checkmark-disabled-checked-hover-background-color);
+// Disabled invalid checked hover
+.ams-checkbox__input[aria-invalid="true"]:disabled:checked + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-hover-disabled-invalid-fill);
+  }
 }
 
-// Disabled indeterminate hover
-.ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label:hover .ams-checkbox__checkmark::after {
-  background-color: var(--ams-checkbox-checkmark-disabled-indeterminate-hover-background-color);
+// Disabled invalid indeterminate hover
+.ams-checkbox__input[aria-invalid="true"]:disabled:indeterminate + .ams-checkbox__label:hover {
+  .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill);
+  }
 }
 
-// Disabled invalid unchecked hover
-:is(.ams-checkbox__input:invalid:disabled, .ams-checkbox__input[aria-invalid="true"]:disabled)
-  + .ams-checkbox__label:hover
-  .ams-checkbox__checkmark::after {
-  // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-  border-color: var(--ams-checkbox-checkmark-disabled-border-color);
+// FORCED COLORS
+
+// Default
+@media (forced-colors: active) {
+  .ams-checkbox__label,
+  .ams-checkbox__label:hover,
+  .ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label,
+  .ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label:hover {
+    .ams-checkbox__rectangle {
+      fill: Canvas;
+      stroke: FieldText;
+    }
+
+    .ams-checkbox__hover-indicator {
+      stroke: none;
+    }
+  }
 }
 
-// DISABLED INVALID STATES
+// Checked
+@media (forced-colors: active) {
+  .ams-checkbox__input:checked:not(:indeterminate) + .ams-checkbox__label,
+  .ams-checkbox__input:checked + .ams-checkbox__label:hover,
+  .ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label,
+  .ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label:hover {
+    .ams-checkbox__rectangle {
+      fill: ActiveText;
+      stroke: ActiveText;
+    }
 
-// Disabled invalid checked & indeterminate
-.ams-checkbox__input:invalid:disabled:checked,
-.ams-checkbox__input:invalid:disabled:indeterminate,
-.ams-checkbox__input[aria-invalid="true"]:disabled:checked,
-.ams-checkbox__input[aria-invalid="true"]:disabled:indeterminate {
-  + .ams-checkbox__label .ams-checkbox__checkmark::after {
-    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    background-color: var(--ams-checkbox-checkmark-disabled-checked-background-color);
+    .ams-checkbox__checked-indicator {
+      stroke: Canvas;
+    }
+  }
+}
+
+// Indeterminate
+@media (forced-colors: active) {
+  .ams-checkbox__input:indeterminate + .ams-checkbox__label,
+  .ams-checkbox__input:indeterminate + .ams-checkbox__label:hover,
+  .ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label,
+  .ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label:hover {
+    .ams-checkbox__rectangle {
+      fill: ActiveText;
+      stroke: ActiveText;
+    }
+
+    .ams-checkbox__indeterminate-indicator {
+      stroke: Canvas;
+    }
+  }
+}
+
+// Disabled
+@media (forced-colors: active) {
+  .ams-checkbox__input:disabled + .ams-checkbox__label,
+  .ams-checkbox__input:disabled + .ams-checkbox__label:hover,
+  .ams-checkbox__input[aria-invalid="true"]:disabled + .ams-checkbox__label,
+  .ams-checkbox__input[aria-invalid="true"]:disabled + .ams-checkbox__label:hover {
+    .ams-checkbox__rectangle {
+      stroke: GrayText;
+    }
+  }
+}
+
+// Disabled checked
+@media (forced-colors: active) {
+  .ams-checkbox__input:disabled:checked + .ams-checkbox__label,
+  .ams-checkbox__input:disabled:checked + .ams-checkbox__label:hover,
+  .ams-checkbox__input[aria-invalid="true"]:disabled:checked + .ams-checkbox__label:hover {
+    .ams-checkbox__rectangle {
+      fill: GrayText;
+      stroke: GrayText;
+    }
+  }
+}
+
+// Disabled indeterminate
+@media (forced-colors: active) {
+  .ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label,
+  .ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label:hover,
+  .ams-checkbox__input[aria-invalid="true"]:disabled:indeterminate + .ams-checkbox__label:hover {
+    .ams-checkbox__rectangle {
+      fill: GrayText;
+    }
   }
 }

package/src/components/date-input/date-input.scss

@@ -8,14 +8,15 @@
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
   appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
-  border: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
 
 .ams-date-input {
   background-color: var(--ams-date-input-background-color);
-  box-shadow: var(--ams-date-input-box-shadow);
+  border-color: var(--ams-date-input-border-color);
+  border-style: var(--ams-date-input-border-style);
+  border-width: var(--ams-date-input-border-width);
   box-sizing: border-box;
   color: var(--ams-date-input-color);
   font-family: var(--ams-date-input-font-family);
@@ -37,10 +38,6 @@
 
   @include text-rendering;
   @include reset-input;
-
-  &:hover {
-    box-shadow: var(--ams-date-input-hover-box-shadow);
-  }
 }
 
 // This changes the default calendar icon on Chromium browsers only
@@ -55,8 +52,6 @@
 }
 
 .ams-date-input:disabled {
-  background-color: var(--ams-date-input-disabled-background-color);
-  box-shadow: var(--ams-date-input-disabled-box-shadow);
   color: var(--ams-date-input-disabled-color);
   cursor: var(--ams-date-input-disabled-cursor);
 }
@@ -68,9 +63,14 @@
 
 .ams-date-input:invalid,
 .ams-date-input[aria-invalid="true"] {
-  box-shadow: var(--ams-date-input-invalid-box-shadow);
+  border-color: var(--ams-date-input-invalid-border-color);
 
   &:hover {
+    border-color: var(--ams-date-input-invalid-hover-border-color);
     box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
   }
 }
+
+.ams-date-input:not(:disabled):hover {
+  box-shadow: var(--ams-date-input-hover-box-shadow);
+}

package/src/components/dialog/dialog.scss

@@ -15,7 +15,9 @@
 so do not apply these styles without an `open` attribute. */
 .ams-dialog:not(dialog:not([open])) {
   background-color: var(--ams-dialog-background-color);
-  border: var(--ams-dialog-border);
+  border-color: var(--ams-dialog-border-color);
+  border-style: var(--ams-dialog-border-style);
+  border-width: var(--ams-dialog-border-width);
   box-sizing: border-box;
   display: flex; // We’d like to use CSS Grid here, but that doesn’t work as expected in Safari.
   flex-direction: column;

package/src/components/file-input/file-input.scss

@@ -6,13 +6,14 @@
 @use "../../common/text-rendering" as *;
 
 @mixin reset-button {
-  border: none;
   border-radius: 0; // Reset rounded borders on iOS devices
 }
 
 .ams-file-input {
   background-color: var(--ams-file-input-background-color);
-  border: var(--ams-file-input-border);
+  border-color: var(--ams-file-input-border-color);
+  border-style: var(--ams-file-input-border-style);
+  border-width: var(--ams-file-input-border-width);
   box-sizing: border-box;
   color: var(--ams-file-input-color);
   cursor: var(--ams-file-input-cursor);
@@ -38,7 +39,9 @@
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
   appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
   background-color: var(--ams-file-input-file-selector-button-background-color);
-  box-shadow: var(--ams-file-input-file-selector-button-box-shadow);
+  border-color: var(--ams-file-input-file-selector-button-border-color);
+  border-style: var(--ams-file-input-file-selector-button-border-style);
+  border-width: var(--ams-file-input-file-selector-button-border-width);
   box-sizing: border-box;
   color: var(--ams-file-input-file-selector-button-color);
   cursor: var(--ams-file-input-file-selector-button-cursor);
@@ -50,16 +53,9 @@
   padding-inline: var(--ams-file-input-file-selector-button-padding-inline);
 
   @include reset-button;
-
-  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-    border: var(
-      --ams-file-input-file-selector-button-forced-color-mode-border
-    ); // add border because forced colors changes box-shadow to none
-  }
 }
 
 .ams-file-input:disabled::file-selector-button {
-  box-shadow: var(--ams-file-input-file-selector-button-disabled-box-shadow);
   color: var(--ams-file-input-disabled-color);
   cursor: var(--ams-file-input-file-selector-button-disabled-cursor);
 }

package/src/components/hint/hint.scss

@@ -4,6 +4,6 @@
  */
 
 .ams-hint {
-  color: var(--ams-hint-color);
   display: inline-block;
+  font-weight: var(--ams-hint-font-weight);
 }

package/src/components/icon-button/README.md

@@ -2,14 +2,15 @@
 
 # Icon Button
 
-A button containing only an icon.
+An icon in a button that can be aligned with text.
 
 ## Guidelines
 
-- Use this button only if the icon is entirely clear and understandable.
-  Many icons are interpreted differently by different users.
-  Only use universally recognized icons, such as a close icon or a play icon.
-- Provide a label text that describes what the button does for screen reader users.
+- Choose an Icon Button instead of a regular Button if it must align with text.
+  Match the size of the Icon Button to that text.
+- Only [functional icons](https://designsystem.amsterdam/?path=/docs/brand-assets-icons--docs#functional-icons) can be used in an Icon Button.
+  For other icons, use a [Button](https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs) to allow the user to read its label.
+- Icon Button still needs a label to describe the button to users of screen readers.
 
 ## Relevant WCAG requirements
 

package/src/components/image/image.scss

@@ -7,8 +7,7 @@
   aspect-ratio: var(--ams-image-aspect-ratio);
   block-size: auto; /* [1] */
   font-style: italic; /* [3] */
-  inline-size: fit-content;
-  max-inline-size: 100%; /* [1] */
+  inline-size: 100%; /* [1] */
   object-fit: cover; /* [4] */
   vertical-align: middle; /* [2] */
 }

package/src/components/invalid-form-alert/invalid-form-alert.scss

@@ -1,3 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
 .ams-invalid-form-alert {
   outline-offset: var(--ams-invalid-form-alert-outline-offset);
 

package/src/components/page-header/page-header.scss

@@ -35,6 +35,14 @@
   inline-size: fit-content;
   outline-offset: var(--ams-page-header-logo-link-outline-offset);
   text-decoration: none;
+
+  @media (forced-colors: active) {
+    .ams-logo__emblem,
+    .ams-logo__text-primary,
+    .ams-logo__text-secondary {
+      fill: LinkText;
+    }
+  }
 }
 
 .ams-page-header__logo-link--hidden {
@@ -56,7 +64,7 @@
   color: var(--ams-page-header-brand-name-color);
   font-size: var(--ams-page-header-brand-name-font-size);
   font-weight: var(--ams-page-header-brand-name-font-weight);
-  line-height: 1.35;
+  line-height: var(--ams-page-header-brand-name-line-height);
   text-wrap: var(--ams-page-header-brand-name-text-wrap);
 }
 

package/src/components/password-input/password-input.scss

@@ -8,21 +8,22 @@
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
   appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
-  border: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
 
 .ams-password-input {
   background-color: var(--ams-password-input-background-color);
-  box-shadow: var(--ams-password-input-box-shadow);
+  border-color: var(--ams-password-input-border-color);
+  border-style: var(--ams-password-input-border-style);
+  border-width: var(--ams-password-input-border-width);
   box-sizing: border-box;
   color: var(--ams-password-input-color);
   font-family: var(--ams-password-input-font-family);
   font-size: var(--ams-password-input-font-size);
   font-weight: var(--ams-password-input-font-weight);
-  inline-size: 100%;
   line-height: var(--ams-password-input-line-height);
+  max-inline-size: 100%;
   outline-offset: var(--ams-password-input-outline-offset);
   padding-block: var(--ams-password-input-padding-block);
   padding-inline: var(--ams-password-input-padding-inline);
@@ -30,10 +31,10 @@
 
   @include text-rendering;
   @include reset-input;
+}
 
-  &:hover {
-    box-shadow: var(--ams-password-input-hover-box-shadow);
-  }
+.ams-password-input:not([size]) {
+  inline-size: 100%;
 }
 
 .ams-password-input::placeholder {
@@ -42,17 +43,20 @@
 }
 
 .ams-password-input:disabled {
-  background-color: var(--ams-password-input-disabled-background-color);
-  box-shadow: var(--ams-password-input-disabled-box-shadow);
   color: var(--ams-password-input-disabled-color);
   cursor: var(--ams-password-input-disabled-cursor);
 }
 
 .ams-password-input:invalid,
 .ams-password-input[aria-invalid="true"] {
-  box-shadow: var(--ams-password-input-invalid-box-shadow);
+  border-color: var(--ams-password-input-invalid-border-color);
 
   &:hover {
+    border-color: var(--ams-password-input-invalid-hover-border-color);
     box-shadow: var(--ams-password-input-invalid-hover-box-shadow);
   }
 }
+
+.ams-password-input:not(:disabled):hover {
+  box-shadow: var(--ams-password-input-hover-box-shadow);
+}