@danske/sapphire-css 50.2.1 → 52.2.0

package/components/dropzone/dropzone.module.css

@@ -11,8 +11,10 @@
   height: var(--sapphire-global-size-generic-480);
   min-height: var(--sapphire-global-size-generic-480);
   padding: var(--sapphire-semantic-size-spacing-2xl);
+  border: var(--sapphire-semantic-size-border-sm) dashed
+    var(--sapphire-semantic-color-border-field-default);
   border-radius: var(--sapphire-semantic-size-radius-md);
-  transition-property: opacity, background-color, color;
+  transition-property: opacity, background-color, border-color, color;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: var(--sapphire-semantic-transitions-fade);
   overflow: hidden;
@@ -29,29 +31,10 @@
      */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  --mask-data: url('data:image/svg+xml,%3csvg stroke="black" width="70%25" height="70%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="6" ry="6" stroke-width="2" stroke-dasharray="5 6.01126518182488" stroke-dashoffset="4" stroke-linecap="butt"/%3e%3c/svg%3e');
 }
 
-/* The before is needed because the SVG image cannot take CSS var, so the background of the ::before is set to the correct color instead */
-.sapphire-dropzone::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  /* Dashed borders cannot be customised, so we use a trick with the SVG image to customise it */
-  mask: var(--mask-data);
-  -webkit-mask: var(--mask-data);
-  background: var(--sapphire-semantic-color-border-field-default);
-  border-radius: var(--sapphire-semantic-size-radius-md);
-  transition-property: opacity, background-color, color;
-  transition-duration: var(--sapphire-semantic-time-fade-quick);
-  transition-timing-function: var(--sapphire-semantic-transitions-fade);
-}
-
-.sapphire-dropzone.sapphire-dropzone--error::before {
-  background: var(--sapphire-semantic-color-foreground-negative);
+.sapphire-dropzone.sapphire-dropzone--error {
+  border-color: var(--sapphire-semantic-color-border-negative-default);
 }
 
 .sapphire-dropzone:not(:disabled):not(.is-disabled):not(:active):not(
@@ -60,7 +43,7 @@
 .sapphire-dropzone:not(:disabled):not(.is-disabled):not(:active):not(
     .is-active
   ).is-hover {
-  background: none;
+  background: var(--sapphire-semantic-color-background-action-tertiary-hover);
 }
 
 .sapphire-dropzone:not(:disabled):not(.is-disabled).sapphire-dropzone:active,
@@ -70,20 +53,7 @@
 .sapphire-dropzone:not(:disabled):not(
     .is-disabled
   ).sapphire-dropzone.is-active {
-  background: none;
-}
-
-.sapphire-dropzone:not(:active):not(.is-disabled):not(
-    .is-active
-  ).is-hover::before,
-.sapphire-dropzone:not(:active):not(.is-disabled):not(.is-active):not(
-    .js-hover
-  ):hover::before {
-  background: var(--sapphire-semantic-color-background-action-primary-hover);
-}
-
-.sapphire-dropzone.is-active::before {
-  background: var(--sapphire-semantic-color-background-action-primary-active);
+  background: var(--sapphire-semantic-color-background-action-tertiary-active);
 }
 
 .sapphire-dropzone:focus {
@@ -92,14 +62,9 @@
 
 .sapphire-dropzone.is-focus,
 .sapphire-dropzone:not(.js-focus):focus-visible {
-  outline: none;
-}
-
-.sapphire-dropzone.is-focus::before,
-.sapphire-dropzone:not(.js-focus):focus-visible::before {
-  mask: var(--mask-data);
-  -webkit-mask: var(--mask-data);
-  background: var(--sapphire-semantic-color-focus-ring);
+  outline: var(--sapphire-semantic-size-focus-ring) solid
+    var(--sapphire-semantic-color-focus-ring);
+  outline-offset: var(--sapphire-semantic-size-focus-ring);
 }
 
 .sapphire-dropzone:disabled,
@@ -111,10 +76,8 @@
 .sapphire-dropzone--dropping {
   background: var(--sapphire-semantic-color-background-accent-subtle);
   backdrop-filter: var(--sapphire-semantic-backdrop-filter-blur);
-}
-
-.sapphire-dropzone.sapphire-dropzone--dropping::before {
-  background: var(--sapphire-semantic-color-foreground-on-accent-subtle);
+  border-style: solid;
+  border-color: var(--sapphire-semantic-color-border-accent);
 }
 
 .sapphire-dropzone__content {

package/components/field/field.module.css

@@ -29,10 +29,26 @@
   width: auto;
 }
 
+/**
+ * When a field contains a field group, add some extra spacing
+ * between the control and the group.
+ */
+.sapphire-field--has-field-group {
+  row-gap: var(--sapphire-semantic-size-spacing-sm);
+}
+
+.sapphire-field--has-field-group.sapphire-field--md {
+  row-gap: var(--sapphire-semantic-size-spacing-xs);
+}
+
+.sapphire-field--has-field-group.sapphire-field--sm {
+  row-gap: var(--sapphire-semantic-size-spacing-2xs);
+}
+
 /**
  * We need to reset browser styles in case the DOM element is a <fieldset>
  */
-fieldset.sapphire-field {
+.sapphire-field--fieldset {
   border: 0;
   margin: 0;
   padding: 0;
@@ -61,10 +77,36 @@ legend.sapphire-field__label {
   font-size: var(--sapphire-semantic-size-font-control-lg);
 }
 
+.sapphire-field--md {
+  row-gap: var(--sapphire-semantic-size-spacing-3xs);
+}
+
+.sapphire-field--sm {
+  row-gap: var(--sapphire-semantic-size-spacing-4xs);
+}
+
 .sapphire-field--md .sapphire-field__control {
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
+.sapphire-field--sm .sapphire-field__control {
+  font-size: var(--sapphire-semantic-size-font-control-md);
+}
+
+.sapphire-field__labeled-value {
+  display: flex;
+  align-items: center;
+  min-height: var(--sapphire-semantic-size-height-control-lg);
+}
+
+.sapphire-field--md .sapphire-field__labeled-value {
+  min-height: var(--sapphire-semantic-size-height-control-md);
+}
+
+.sapphire-field--sm .sapphire-field__labeled-value {
+  min-height: var(--sapphire-semantic-size-height-control-sm);
+}
+
 /**
  * For when the control contains a group of inputs
  */
@@ -77,6 +119,10 @@ legend.sapphire-field__label {
   gap: var(--sapphire-semantic-size-spacing-2xs);
 }
 
+.sapphire-field--sm .sapphire-field__control--group {
+  gap: var(--sapphire-semantic-size-spacing-3xs);
+}
+
 /**
  * Modifier which makes the control's width exceed the
  * field's container. This is useful when the control's
@@ -123,6 +169,12 @@ legend.sapphire-field__label {
   gap: var(--sapphire-semantic-size-spacing-2xs);
 }
 
+.sapphire-field--sm .sapphire-field__note-row {
+  font-size: var(--sapphire-semantic-size-font-label-sm);
+  line-height: var(--sapphire-semantic-size-line-height-sm);
+  gap: var(--sapphire-semantic-size-spacing-2xs);
+}
+
 .sapphire-field__note {
   flex: 1;
 }
@@ -138,6 +190,10 @@ legend.sapphire-field__label {
   padding-top: 0;
 }
 
+.sapphire-field--sm .sapphire-field__note-icon {
+  padding-top: 0;
+}
+
 /**
  * Disabled
  */
@@ -178,6 +234,11 @@ legend.sapphire-field__label {
   max-height: var(--sapphire-semantic-size-height-control-md);
 }
 
+.sapphire-field--label-placement-side.sapphire-field--sm
+  .sapphire-field__label {
+  max-height: var(--sapphire-semantic-size-height-control-sm);
+}
+
 .sapphire-field--label-placement-side.sapphire-field--label-alignment-top
   .sapphire-field__label {
   align-items: flex-start;
@@ -185,26 +246,130 @@ legend.sapphire-field__label {
 }
 
 /*
- * FieldSet - a wrapper for fields, that handles spacing, and label alignment when labels are on
- * the side.
+ * FormLayout
  */
-.sapphire-fieldset {
+.sapphire-form-layout {
   display: inline-flex;
   flex-direction: column;
-  width: min-content; /* this is needed to have the labels column shrunk to the largest one */
-  gap: var(--sapphire-semantic-size-spacing-lg);
+  align-items: flex-start;
+  row-gap: var(--sapphire-semantic-size-spacing-xl);
 }
 
-.sapphire-fieldset .sapphire-field--label-placement-side {
-  grid-template-columns: 1fr min-content;
+.sapphire-form-layout--md {
+  row-gap: var(--sapphire-semantic-size-spacing-lg);
 }
 
-.sapphire-fieldset
-  .sapphire-field--label-placement-side
-  .sapphire-field__label {
-  /* That is necessary because of width: min-content on field-set. Would be nice to avoid it
-     but couldn't find a way to avoid it while meeting the other requirements of having labels
-     aligned and not take up more space than needed.
-   */
+.sapphire-form-layout--sm {
+  row-gap: var(--sapphire-semantic-size-spacing-md);
+}
+
+.sapphire-form-layout--sm:has(> .sapphire-field--label-placement-side) {
+  row-gap: var(--sapphire-semantic-size-spacing-sm);
+}
+
+.sapphire-form-layout--has-width {
+  --sapphire-form-layout-field-width: 100%;
+}
+
+.sapphire-form-layout
+  > .sapphire-field--label-placement-side:not(.sapphire-field--fieldset) {
+  grid-template-columns:
+    var(--sapphire-form-layout-label-width, max-content)
+    minmax(var(--sapphire-semantic-size-width-field), 1fr);
+}
+
+.sapphire-form-layout
+  > .sapphire-field--label-placement-side:not(
+    .sapphire-field--fieldset
+  )[style*='width'] {
+  grid-template-columns:
+    var(--sapphire-form-layout-label-width, max-content)
+    1fr;
+}
+
+.sapphire-form-layout
+  > .sapphire-field--label-placement-side
+  > .sapphire-field__label {
   white-space: nowrap;
 }
+
+.sapphire-form-layout
+  > .sapphire-field--label-placement-side
+  .sapphire-field__control {
+  width: 100%;
+}
+
+.sapphire-form-layout
+  > .sapphire-field:not(.sapphire-field--label-placement-side) {
+  width: var(
+    --sapphire-form-layout-field-width,
+    var(--sapphire-semantic-size-width-field)
+  );
+}
+
+.sapphire-form-layout > .sapphire-field--label-placement-side {
+  width: var(--sapphire-form-layout-field-width, auto);
+}
+
+/* flex layout since <legend> cannot be a grid item */
+.sapphire-form-layout
+  > .sapphire-field--fieldset.sapphire-field--label-placement-side {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: var(--sapphire-semantic-size-spacing-md);
+  min-width: 0;
+}
+
+.sapphire-form-layout
+  > .sapphire-field--fieldset.sapphire-field--label-placement-side
+  > .sapphire-field__label {
+  flex: 0 0 auto;
+  width: var(--sapphire-form-layout-label-width, auto);
+}
+
+.sapphire-form-layout
+  > .sapphire-field--fieldset.sapphire-field--label-placement-side
+  > .sapphire-field__control {
+  flex: 1 1 var(--sapphire-semantic-size-width-field);
+  min-width: 0;
+  width: auto;
+  max-width: var(
+    --sapphire-form-layout-field-width,
+    var(--sapphire-semantic-size-width-field)
+  );
+}
+
+/* [style*='width'] also matches min-width/max-width, but that's fine here —
+ * fields with any width intent should opt into this sizing behavior. */
+
+/* Fieldset with explicit width: lift the max-width cap */
+.sapphire-form-layout
+  > .sapphire-field--fieldset.sapphire-field--label-placement-side[style*='width']
+  > .sapphire-field__control {
+  max-width: none;
+}
+
+/* Inner fields without an explicit width fill remaining space */
+.sapphire-form-layout
+  > .sapphire-field--fieldset
+  > .sapphire-field__control
+  > .sapphire-field:not([style*='width']) {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.sapphire-form-layout
+  > .sapphire-field--fieldset.sapphire-field--label-placement-side
+  > .sapphire-field__message {
+  flex: 0 0 100%;
+  padding-left: calc(
+    var(--sapphire-form-layout-label-width, 0px) +
+      var(--sapphire-semantic-size-spacing-md)
+  );
+}
+
+.sapphire-form-layout
+  > .sapphire-field--fieldset.sapphire-field--label-placement-side.sapphire-field--label-alignment-top {
+  align-items: flex-start;
+}

package/components/field/field.module.css.d.ts

@@ -1,9 +1,13 @@
 declare const styles: {
   readonly "sapphire-field": string;
   readonly "sapphire-field--no-width": string;
+  readonly "sapphire-field--has-field-group": string;
+  readonly "sapphire-field--md": string;
+  readonly "sapphire-field--sm": string;
+  readonly "sapphire-field--fieldset": string;
   readonly "sapphire-field__label": string;
   readonly "sapphire-field__control": string;
-  readonly "sapphire-field--md": string;
+  readonly "sapphire-field__labeled-value": string;
   readonly "sapphire-field__control--group": string;
   readonly "sapphire-field--no-shrink": string;
   readonly "sapphire-field__message": string;
@@ -13,7 +17,10 @@ declare const styles: {
   readonly "is-disabled": string;
   readonly "sapphire-field--label-placement-side": string;
   readonly "sapphire-field--label-alignment-top": string;
-  readonly "sapphire-fieldset": string;
+  readonly "sapphire-form-layout": string;
+  readonly "sapphire-form-layout--md": string;
+  readonly "sapphire-form-layout--sm": string;
+  readonly "sapphire-form-layout--has-width": string;
 };
 export = styles;
 

package/components/fieldGroup/fieldGroup.module.css

@@ -16,3 +16,7 @@
 .sapphire-field-group--md {
   row-gap: var(--sapphire-semantic-size-spacing-xs);
 }
+
+.sapphire-field-group--sm {
+  row-gap: var(--sapphire-semantic-size-spacing-2xs);
+}

package/components/fieldGroup/fieldGroup.module.css.d.ts

@@ -3,6 +3,7 @@ declare const styles: {
   readonly "sapphire-field-group--horizontal": string;
   readonly "sapphire-field-group--vertical": string;
   readonly "sapphire-field-group--md": string;
+  readonly "sapphire-field-group--sm": string;
 };
 export = styles;
 

package/components/label/label.module.css

@@ -9,6 +9,11 @@
   min-height: var(--sapphire-semantic-size-height-control-2xs);
 }
 
+.sapphire-label--sm {
+  font-size: var(--sapphire-semantic-size-font-label-sm);
+  min-height: var(--sapphire-semantic-size-height-control-2xs);
+}
+
 .sapphire-label__text {
   font-weight: var(--sapphire-semantic-font-weight-default-medium);
   color: var(--sapphire-semantic-color-foreground-primary);

package/components/label/label.module.css.d.ts

@@ -1,6 +1,7 @@
 declare const styles: {
   readonly "sapphire-label": string;
   readonly "sapphire-label--md": string;
+  readonly "sapphire-label--sm": string;
   readonly "sapphire-label__text": string;
   readonly "sapphire-label__required-indicator": string;
   readonly "sapphire-label__optional-indicator": string;

package/components/link/link.module.css

@@ -23,7 +23,6 @@
   color: var(--sapphire-semantic-color-foreground-action-link-default);
 
   text-decoration: underline;
-  text-decoration-thickness: var(--sapphire-semantic-size-border-sm);
 }
 
 /* Disabled state for all variants */

package/components/listbox/listbox.module.css

@@ -154,6 +154,12 @@ Hence a separate class for checkmark icon to be used in the alignment styles */
   );
 }
 
+.sapphire-listbox__icon svg {
+  width: var(--sapphire-listbox-icon-size);
+  height: var(--sapphire-listbox-icon-size);
+  flex-shrink: 0;
+}
+
 .sapphire-listbox__text-container {
   line-height: var(--sapphire-semantic-size-line-height-md);
   flex: 1;

package/components/modalLayout/modalLayout.module.css

@@ -31,7 +31,8 @@
   overflow-y: auto;
   overflow-x: hidden;
   flex-grow: 1;
-  padding: 0 var(--sapphire-semantic-size-spacing-container-horizontal-md);
+  padding: var(--sapphire-semantic-size-focus-ring)
+    var(--sapphire-semantic-size-spacing-container-horizontal-md);
 }
 
 .sapphire-modal-layout__body.sapphire-modal-layout__body--no-padding {

package/components/radio/radio.module.css

@@ -3,6 +3,7 @@
   font-family: var(--sapphire-semantic-font-name-default);
   max-width: 100%;
   position: relative;
+  cursor: pointer;
 }
 
 .sapphire-radio-container {
@@ -20,7 +21,12 @@
   width: 100%;
   opacity: 0.0001; /** Some of the screen readers may ignore element with opacity:0 */
   z-index: 1;
-  cursor: pointer;
+  cursor: inherit;
+}
+
+.sapphire-radio.is-readonly,
+.sapphire-radio:has(.sapphire-radio__input[readonly]) {
+  cursor: default;
 }
 
 .sapphire-radio__label {
@@ -47,10 +53,29 @@
 .sapphire-radio--md .sapphire-radio__label {
   font-size: var(--sapphire-semantic-size-font-control-md);
   line-height: var(--sapphire-semantic-size-height-control-2xs);
+  margin-left: var(--sapphire-semantic-size-spacing-xs);
+}
+
+.sapphire-radio--sm .sapphire-radio__label {
+  font-size: var(--sapphire-semantic-size-font-control-md);
+  line-height: var(--sapphire-semantic-size-height-control-2xs);
+  margin-left: var(--sapphire-semantic-size-spacing-xs);
 }
 
 /* The radio box */
 
+.sapphire-radio__box-wrapper {
+  display: flex;
+  align-items: center;
+  height: var(--sapphire-semantic-size-height-control-xs);
+  flex-shrink: 0;
+}
+
+.sapphire-radio--md .sapphire-radio__box-wrapper,
+.sapphire-radio--sm .sapphire-radio__box-wrapper {
+  height: var(--sapphire-semantic-size-height-control-2xs);
+}
+
 .sapphire-radio__box {
   box-sizing: border-box;
   background-color: var(--sapphire-semantic-color-background-field);
@@ -61,8 +86,6 @@
   border: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-field-default);
   position: relative;
-  margin-top: var(--sapphire-semantic-size-spacing-4xs);
-
   transition-property: background-color, border-color, border-width;
   transition-duration: var(--sapphire-semantic-time-fade-quick);
   transition-timing-function: var(--sapphire-semantic-transitions-fade);
@@ -73,6 +96,11 @@
   height: var(--sapphire-semantic-size-height-box-md);
 }
 
+.sapphire-radio--sm .sapphire-radio__box {
+  width: var(--sapphire-global-size-generic-35);
+  height: var(--sapphire-global-size-generic-35);
+}
+
 .sapphire-radio--checked .sapphire-radio__box {
   border-color: var(
     --sapphire-semantic-color-background-action-primary-default
@@ -97,6 +125,15 @@
   );
 }
 
+.sapphire-radio--sm.sapphire-radio--checked .sapphire-radio__box {
+  border-width: calc(
+    (
+        var(--sapphire-global-size-generic-35) -
+          var(--sapphire-global-size-generic-15)
+      ) / 2
+  );
+}
+
 .sapphire-radio--checked .sapphire-radio__box::after {
   display: block;
 }
@@ -105,25 +142,27 @@
 
 /* Hover when not checked */
 
-.sapphire-radio:not(:active):not(.is-active):not(
-    .sapphire-radio--checked
+.sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(
+    .is-disabled
   ).is-hover
   .sapphire-radio__box,
 .sapphire-radio:not(:active):not(.is-active):not(.sapphire-radio--checked):not(
     .js-hover
   ):hover
   .sapphire-radio__input:not(:disabled)
-  ~ .sapphire-radio__box {
+  ~ .sapphire-radio__box-wrapper
+  .sapphire-radio__box {
   border-color: var(--sapphire-semantic-color-border-field-hover);
 }
 
 /* Hover when checked */
 
-.sapphire-radio--checked:not(:active):not(.is-active).is-hover
+.sapphire-radio--checked:not(:active):not(.is-active):not(.is-disabled).is-hover
   .sapphire-radio__box,
 .sapphire-radio--checked:not(:active):not(.is-active):not(.js-hover):hover
   .sapphire-radio__input:not(:disabled)
-  ~ .sapphire-radio__box {
+  ~ .sapphire-radio__box-wrapper
+  .sapphire-radio__box {
   border-color: var(--sapphire-semantic-color-background-action-primary-hover);
 }
 
@@ -131,28 +170,35 @@
 
 /* Active when not checked */
 
-.sapphire-radio:not(.sapphire-radio--checked).is-active .sapphire-radio__box,
+.sapphire-radio:not(.sapphire-radio--checked):not(.is-disabled).is-active
+  .sapphire-radio__box,
 .sapphire-radio:not(.sapphire-radio--checked):active
   .sapphire-radio__input:not(:disabled)
-  ~ .sapphire-radio__box {
+  ~ .sapphire-radio__box-wrapper
+  .sapphire-radio__box {
   border-color: var(--sapphire-semantic-color-border-field-active);
 }
 
 /* Active when checked */
 
-.sapphire-radio--checked.is-active .sapphire-radio__box,
+.sapphire-radio--checked:not(.is-disabled).is-active .sapphire-radio__box,
 .sapphire-radio--checked:active
   .sapphire-radio__input:not(:disabled)
-  ~ .sapphire-radio__box {
+  ~ .sapphire-radio__box-wrapper
+  .sapphire-radio__box {
   border-color: var(--sapphire-semantic-color-background-action-primary-active);
 }
 
 /* FOCUS */
 
-.sapphire-radio.is-focus .sapphire-radio__input ~ .sapphire-radio__box,
+.sapphire-radio.is-focus
+  .sapphire-radio__input
+  ~ .sapphire-radio__box-wrapper
+  .sapphire-radio__box,
 .sapphire-radio:not(.js-focus)
   .sapphire-radio__input:focus-visible
-  ~ .sapphire-radio__box {
+  ~ .sapphire-radio__box-wrapper
+  .sapphire-radio__box {
   outline: var(--sapphire-semantic-size-focus-ring) solid
     var(--sapphire-semantic-color-focus-ring);
   outline-offset: var(--sapphire-semantic-size-focus-ring);
@@ -160,12 +206,18 @@
 
 /* DISABLED */
 
-.sapphire-radio__input:disabled {
+.sapphire-radio:has(.sapphire-radio__input:disabled),
+.sapphire-radio.is-disabled {
   cursor: not-allowed;
 }
 
-.sapphire-radio .sapphire-radio__input:disabled ~ .sapphire-radio__box,
-.sapphire-radio .sapphire-radio__input:disabled ~ .sapphire-radio__label {
+.sapphire-radio
+  .sapphire-radio__input:disabled
+  ~ .sapphire-radio__box-wrapper
+  .sapphire-radio__box,
+.sapphire-radio .sapphire-radio__input:disabled ~ .sapphire-radio__label,
+.sapphire-radio.is-disabled .sapphire-radio__box,
+.sapphire-radio.is-disabled .sapphire-radio__label {
   opacity: var(--sapphire-semantic-opacity-disabled);
 }
 
@@ -189,6 +241,15 @@
   line-height: var(--sapphire-semantic-size-line-height-sm);
   margin-left: calc(
     var(--sapphire-semantic-size-spacing-xs) +
-      var(--sapphire-semantic-size-height-box-lg)
+      var(--sapphire-semantic-size-height-box-md)
+  );
+}
+
+.sapphire-radio__note--sm {
+  font-size: var(--sapphire-semantic-size-font-label-sm);
+  line-height: var(--sapphire-semantic-size-line-height-sm);
+  margin-left: calc(
+    var(--sapphire-semantic-size-spacing-xs) +
+      var(--sapphire-global-size-generic-35)
   );
 }

package/components/radio/radio.module.css.d.ts

@@ -2,17 +2,22 @@ declare const styles: {
   readonly "sapphire-radio": string;
   readonly "sapphire-radio-container": string;
   readonly "sapphire-radio__input": string;
+  readonly "is-readonly": string;
   readonly "sapphire-radio__label": string;
   readonly "sapphire-radio--md": string;
+  readonly "sapphire-radio--sm": string;
+  readonly "sapphire-radio__box-wrapper": string;
   readonly "sapphire-radio__box": string;
   readonly "sapphire-radio--checked": string;
   readonly "is-active": string;
+  readonly "is-disabled": string;
   readonly "is-hover": string;
   readonly "js-hover": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
   readonly "sapphire-radio__note": string;
   readonly "sapphire-radio__note--md": string;
+  readonly "sapphire-radio__note--sm": string;
 };
 export = styles;