@danske/sapphire-css 16.3.0 → 26.1.3

package/components/radio/radio.module.css

@@ -1,5 +1,4 @@
 .sapphire-radio {
-  align-items: center;
   display: inline-flex;
   font-family: var(--sapphire-radio-font-label-name);
   max-width: 100%;
@@ -21,8 +20,8 @@
 
 .sapphire-radio__label {
   margin-left: var(--sapphire-radio-size-spacing-label);
-  font-size: var(--sapphire-radio-size-font);
-  line-height: var(--sapphire-radio-size-height-label);
+  font-size: var(--sapphire-radio-size-font-l);
+  line-height: var(--sapphire-radio-size-height-label-l);
   color: var(--sapphire-radio-color-label);
 
   /* The below is meant to address a font rendering quirk in OSX where the text
@@ -40,6 +39,11 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sapphire-radio--medium .sapphire-radio__label {
+  font-size: var(--sapphire-radio-size-font-m);
+  line-height: var(--sapphire-radio-size-height-label-m);
+}
+
 /* The radio box */
 
 .sapphire-radio__box {
@@ -47,24 +51,41 @@
   background-color: var(
     --sapphire-radio-color-background-box-unchecked-default
   );
-  width: var(--sapphire-radio-size-width-box);
-  height: var(--sapphire-radio-size-height-box);
+  width: var(--sapphire-radio-size-width-box-l);
+  height: var(--sapphire-radio-size-height-box-l);
   flex-shrink: 0;
   border-radius: 50%;
   border: var(--sapphire-radio-size-width-border-unchecked) solid
     var(--sapphire-radio-color-border-box-unchecked-default);
   position: relative;
+  margin-top: var(--sapphire-radio-size-spacing-box);
 
   transition-property: background-color, border-color, border-width;
   transition-duration: var(--sapphire-radio-time-transition);
   transition-timing-function: ease-in-out;
 }
 
+.sapphire-radio--medium .sapphire-radio__box {
+  width: var(--sapphire-radio-size-width-box-m);
+  height: var(--sapphire-radio-size-height-box-m);
+}
+
 .sapphire-radio--checked .sapphire-radio__box {
   border-color: var(--sapphire-radio-color-background-box-checked-default);
   border-width: calc(
-    (var(--sapphire-radio-size-height-box) - var(--sapphire-radio-size-circle)) /
-      2
+    (
+        var(--sapphire-radio-size-height-box-l) -
+          var(--sapphire-radio-size-circle-l)
+      ) / 2
+  );
+}
+
+.sapphire-radio--medium.sapphire-radio--checked .sapphire-radio__box {
+  border-width: calc(
+    (
+        var(--sapphire-radio-size-height-box-m) -
+          var(--sapphire-radio-size-circle-m)
+      ) / 2
   );
 }
 
@@ -111,7 +132,11 @@
   cursor: not-allowed;
 }
 
-.sapphire-radio__input:disabled ~ .sapphire-radio__box,
-.sapphire-radio__input:disabled ~ .sapphire-radio__label {
+.sapphire-radio:not(.sapphire-radio--no-disabled)
+  .sapphire-radio__input:disabled
+  ~ .sapphire-radio__box,
+.sapphire-radio:not(.sapphire-radio--no-disabled)
+  .sapphire-radio__input:disabled
+  ~ .sapphire-radio__label {
   opacity: var(--sapphire-radio-opacity-disabled);
 }

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

@@ -2,6 +2,7 @@ declare const styles: {
   readonly "sapphire-radio": string;
   readonly "sapphire-radio__input": string;
   readonly "sapphire-radio__label": string;
+  readonly "sapphire-radio--medium": string;
   readonly "sapphire-radio__box": string;
   readonly "sapphire-radio--checked": string;
   readonly "is-active": string;
@@ -9,6 +10,7 @@ declare const styles: {
   readonly "js-hover": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
+  readonly "sapphire-radio--no-disabled": string;
 };
 export = styles;
 

package/components/searchField/searchField.module.css

@@ -15,39 +15,36 @@
    */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
-  /*
-  showing border with box-shadow, since the width changes between focused and
-  non-focused state. Using border will cause content to jump, due to resize.
-  Using outline will render border and focus ring outside the component's
-  boundary, which can lead to issues where it's clipped or overlapped with
-  the adjacent element.
-  */
-  box-shadow: inset 0 0 0 var(--sapphire-search-field-size-width-border)
-    var(--sapphire-search-field-color-border-default);
   display: inline-flex;
   align-items: center;
   gap: var(--sapphire-search-field-size-spacing-control-gap);
-  border-radius: var(--sapphire-search-field-size-radius);
+  border-radius: var(--sapphire-search-field-size-radius-l);
   cursor: text;
   color: var(--sapphire-search-field-color-content-input);
-  font-size: var(--sapphire-search-field-size-font-content);
-  height: var(--sapphire-search-field-size-height-field);
-  background-color: var(--sapphire-search-field-color-background);
+  font-size: var(--sapphire-search-field-size-font-l);
+  height: var(--sapphire-search-field-size-height-field-l);
+  background-color: var(--sapphire-search-field-color-background-default);
+}
+
+.sapphire-search-field--surface-secondary {
+  background-color: var(
+    --sapphire-search-field-color-background-surface-secondary
+  );
 }
 
 .sapphire-search-field .sapphire-search-field__input:last-child {
-  padding-right: var(--sapphire-search-field-size-spacing-control-horizontal);
+  padding-right: var(--sapphire-search-field-size-spacing-control-horizontal-l);
 }
 
 .sapphire-search-field__input {
   all: unset;
   flex: 1;
   height: 100%;
+  min-width: 0;
   font-weight: var(--sapphire-search-field-size-font-weight-input);
   caret-color: var(--sapphire-search-field-color-caret);
   position: relative;
-  padding-left: calc(var(--sapphire-search-field-size-height-field));
+  padding-left: var(--sapphire-search-field-size-height-field-l);
 }
 
 /**
@@ -91,10 +88,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: var(--sapphire-search-field-size-height-field);
-  width: var(--sapphire-search-field-size-height-field);
+  height: var(--sapphire-search-field-size-height-field-l);
+  width: var(--sapphire-search-field-size-height-field-l);
   color: var(--sapphire-search-field-color-content-button-default);
   cursor: default;
+  flex-shrink: 0;
 
   transition: transform var(--sapphire-search-field-time-transition);
 }
@@ -144,5 +142,31 @@
   color: var(--sapphire-search-field-color-content-icon);
   display: inline-flex; /* Not to take more height than the icon */
   position: absolute;
-  margin-left: var(--sapphire-search-field-size-spacing-control-horizontal);
+  margin-left: var(--sapphire-search-field-size-spacing-control-horizontal-l);
+}
+
+/**
+ * Medium Size
+ */
+.sapphire-search-field--medium {
+  font-size: var(--sapphire-search-field-size-font-m);
+  height: var(--sapphire-search-field-size-height-field-m);
+  border-radius: var(--sapphire-search-field-size-radius-l);
+}
+
+.sapphire-search-field--medium .sapphire-search-field__input {
+  padding-left: var(--sapphire-search-field-size-height-field-m);
+}
+
+.sapphire-search-field--medium .sapphire-search-field__button {
+  height: var(--sapphire-search-field-size-height-field-m);
+  width: var(--sapphire-search-field-size-height-field-m);
+}
+
+.sapphire-search-field--medium .sapphire-search-field__input:last-child {
+  padding-right: var(--sapphire-search-field-size-spacing-control-horizontal-m);
+}
+
+.sapphire-search-field--medium .sapphire-search-field__icon {
+  margin-left: var(--sapphire-search-field-size-spacing-control-horizontal-m);
 }

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

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "sapphire-search-field": string;
+  readonly "sapphire-search-field--surface-secondary": string;
   readonly "sapphire-search-field__input": string;
   readonly "is-focus": string;
   readonly "is-disabled": string;
@@ -9,6 +10,7 @@ declare const styles: {
   readonly "is-active": string;
   readonly "sapphire-search-field__input--empty": string;
   readonly "sapphire-search-field__icon": string;
+  readonly "sapphire-search-field--medium": string;
 };
 export = styles;
 

package/components/segmentedControl/segmentedControl.module.css

@@ -3,7 +3,7 @@
   border-radius: var(--sapphire-segmented-control-size-radius);
   padding: var(--sapphire-segmented-control-size-spacing-tray);
   display: inline-block;
-  height: var(--sapphire-segmented-control-size-height-medium);
+  height: var(--sapphire-segmented-control-size-height-m);
   box-sizing: border-box;
 }
 
@@ -21,7 +21,7 @@
   height: 100%;
   display: block;
   background-color: var(--sapphire-segmented-control-color-glider);
-  box-shadow: var(--sapphire-global-shadow-small);
+  box-shadow: var(--sapphire-segmented-control-shadow-glider);
   box-sizing: border-box;
   z-index: 1;
   border-radius: var(--sapphire-segmented-control-size-radius);
@@ -36,7 +36,7 @@
 .sapphire-segmented-control__button {
   font-family: var(--sapphire-segmented-control-font-name);
   font-weight: var(--sapphire-segmented-control-font-weight);
-  font-size: var(--sapphire-segmented-control-size-font-medium);
+  font-size: var(--sapphire-segmented-control-size-font-m);
   /* The below is meant to address a font rendering quirk in OSX where the text
      * looks bolder than intended due to subpixel rendering. This quirk generally
      * occurs for bold fonts on dark backgrounds but depending on the font, it
@@ -105,19 +105,19 @@
 
 /* Sizes */
 .sapphire-segmented-control--large {
-  height: var(--sapphire-segmented-control-size-height-large);
+  height: var(--sapphire-segmented-control-size-height-l);
 }
 
 .sapphire-segmented-control--large .sapphire-segmented-control__button {
-  font-size: var(--sapphire-segmented-control-size-font-large);
+  font-size: var(--sapphire-segmented-control-size-font-l);
 }
 
 .sapphire-segmented-control--small {
-  height: var(--sapphire-segmented-control-size-height-small);
+  height: var(--sapphire-segmented-control-size-height-s);
 }
 
 .sapphire-segmented-control--small .sapphire-segmented-control__button {
-  font-size: var(--sapphire-segmented-control-size-font-small);
+  font-size: var(--sapphire-segmented-control-size-font-s);
 }
 
 /* Radio-specific */

package/components/select/select.module.css

@@ -1,10 +1,9 @@
 .sapphire-select {
-  font-family: var(--sapphire-select-font-name);
+  position: relative;
+  display: inline-block;
   color: var(--sapphire-select-color-content);
   width: var(--sapphire-select-size-width-control);
-  display: inline-block;
-  position: relative;
-
+  font-family: var(--sapphire-select-font-name);
   /* The below is meant to address a font rendering quirk in OSX where the text
    * looks bolder than intended due to subpixel rendering. This quirk generally
    * occurs for bold fonts on dark backgrounds but depending on the font, it
@@ -20,18 +19,13 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.sapphire-select__button-container {
-  position: relative;
-  width: 100%;
-}
-
 .sapphire-select__button {
   display: flex;
   align-items: center;
-  height: var(--sapphire-select-size-height-field-default);
+  height: var(--sapphire-select-size-height-field-l);
   box-sizing: border-box;
   cursor: pointer;
-  padding: 0 var(--sapphire-select-size-spacing-control-horizontal);
+  padding: 0 var(--sapphire-select-size-spacing-control-horizontal-l);
   border: none;
   background-color: var(--sapphire-select-color-background-field);
   width: 100%;
@@ -44,24 +38,15 @@
   border-radius: var(--sapphire-select-size-radius-field);
 }
 
-.sapphire-select__label-container {
-  display: flex;
-  align-items: center;
-  gap: var(--sapphire-select-size-spacing-label-horizontal-default);
-  min-height: var(--sapphire-select-size-height-label);
-  margin-bottom: var(--sapphire-select-size-spacing-label-vertical-default);
-}
-
-.sapphire-select__label-text {
-  font-size: var(--sapphire-select-size-font-label-default);
-  font-weight: var(--sapphire-select-size-font-weight-label-default);
-  line-height: var(--sapphire-select-size-line-height-label-default);
+.sapphire-select--medium .sapphire-select__button {
+  height: var(--sapphire-select-size-height-field-m);
+  padding: 0 var(--sapphire-select-size-spacing-control-horizontal-m);
 }
 
 .sapphire-select__value {
   flex: 1 0 0;
   min-width: 0;
-  font-size: var(--sapphire-select-size-font-content-default);
+  font-size: var(--sapphire-select-size-font-content-l);
   width: 100%;
   font-weight: var(--sapphire-select-size-font-weight-item);
   overflow: hidden;
@@ -69,6 +54,10 @@
   white-space: nowrap;
 }
 
+.sapphire-select--medium .sapphire-select__value {
+  font-size: var(--sapphire-select-size-font-content-m);
+}
+
 .sapphire-select__placeholder {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -78,26 +67,21 @@
 
 .sapphire-select__icon-container {
   line-height: 0;
+  width: var(--sapphire-select-size-width-icon-l);
+  height: var(--sapphire-select-size-height-icon-l);
 }
 
-.sapphire-select__avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sapphire-select-size-width-avatar);
-  height: var(--sapphire-select-size-height-avatar);
-  flex: 0 0 auto;
-  background-color: var(--sapphire-select-color-background-avatar);
-  border-radius: 50%;
-  overflow: hidden;
-  font-weight: var(--sapphire-select-size-font-weight-item);
-  color: var(--sapphire-select-color-content);
+.sapphire-select--medium .sapphire-select__icon-container {
+  width: var(--sapphire-select-size-width-icon-m);
+  height: var(--sapphire-select-size-height-icon-m);
 }
 
 /*
- * Search input
+ * Search input. If visually-hidden styles are not inline,
+ * data-hidden="true" can be added when the input is visually hidden,
+ * for the default styles to not interfere with visually-hidden styles.
  */
-.sapphire-select__search-input {
+.sapphire-select__search-input:not([data-hidden='true']) {
   all: inherit;
 }
 .sapphire-select__search-input::placeholder {
@@ -115,34 +99,17 @@
   z-index: 1;
 }
 
-/**
- * Note
- */
-
-.sapphire-select__note {
-  color: var(--sapphire-select-color-note-default);
-  font-size: var(--sapphire-select-size-font-note-default);
-  line-height: var(--sapphire-select-size-line-height-note-default);
-  margin-top: var(--sapphire-select-size-spacing-note-vertical-default);
-}
-
 /**
  * Error
  */
-
 .sapphire-select--error:not(.is-disabled) .sapphire-select__button {
   box-shadow: inset 0px 0px 0px 1px
     var(--sapphire-select-color-border-field-error);
 }
 
-.sapphire-select--error .sapphire-select__note {
-  color: var(--sapphire-select-color-note-error);
-}
-
 /*
  * Focus
  */
-
 .sapphire-select:not(.is-disabled).is-focus .sapphire-select__button {
   box-shadow: inset 0px 0px 0px var(--sapphire-select-size-focus-ring)
     var(--sapphire-select-color-focus-ring);
@@ -153,14 +120,6 @@
     var(--sapphire-select-color-border-field-error);
 }
 
-/**
- * Disabled
- */
-.sapphire-select.is-disabled {
-  opacity: var(--sapphire-select-opacity-disabled);
-  cursor: not-allowed;
-}
-
 .sapphire-select.is-disabled .sapphire-select__button {
   cursor: not-allowed;
 }

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

@@ -1,16 +1,12 @@
 declare const styles: {
   readonly "sapphire-select": string;
-  readonly "sapphire-select__button-container": string;
   readonly "sapphire-select__button": string;
-  readonly "sapphire-select__label-container": string;
-  readonly "sapphire-select__label-text": string;
+  readonly "sapphire-select--medium": string;
   readonly "sapphire-select__value": string;
   readonly "sapphire-select__placeholder": string;
   readonly "sapphire-select__icon-container": string;
-  readonly "sapphire-select__avatar": string;
   readonly "sapphire-select__search-input": string;
   readonly "sapphire-select__native-select": string;
-  readonly "sapphire-select__note": string;
   readonly "sapphire-select--error": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;

package/components/spinner/spinner.module.css

@@ -0,0 +1,64 @@
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  80% {
+    transform: rotate(360deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.sapphire-spinner {
+  width: var(--sapphire-spinner-size-m);
+  height: var(--sapphire-spinner-size-m);
+
+  animation: rotate var(--sapphire-spinner-time-transition)
+    cubic-bezier(0.25, 0.1, 0.25, 1);
+  animation-iteration-count: infinite;
+}
+
+.sapphire-spinner__track {
+  fill: var(--sapphire-spinner-color-default);
+}
+
+.sapphire-spinner__accent {
+  fill: var(--sapphire-spinner-color-accent);
+}
+
+/*
+ * Sizes
+ */
+
+.sapphire-spinner--xxxs {
+  width: var(--sapphire-spinner-size-xxxs);
+  height: var(--sapphire-spinner-size-xxxs);
+}
+
+.sapphire-spinner--xxs {
+  width: var(--sapphire-spinner-size-xxs);
+  height: var(--sapphire-spinner-size-xxs);
+}
+
+.sapphire-spinner--xs {
+  width: var(--sapphire-spinner-size-xs);
+  height: var(--sapphire-spinner-size-xs);
+}
+
+.sapphire-spinner--s {
+  width: var(--sapphire-spinner-size-s);
+  height: var(--sapphire-spinner-size-s);
+}
+
+.sapphire-spinner--l {
+  width: var(--sapphire-spinner-size-l);
+  height: var(--sapphire-spinner-size-l);
+}
+
+.sapphire-spinner--xl {
+  width: var(--sapphire-spinner-size-xl);
+  height: var(--sapphire-spinner-size-xl);
+}

package/components/surface/surface.module.css

@@ -1,6 +1,6 @@
 .sapphire-surface {
   font-family: var(--sapphire-surface-font-name);
-  background-color: var(--sapphire-surface-color-background);
+  background-color: var(--sapphire-surface-color-background-default);
   color: var(--sapphire-surface-color-content);
 
   /* The below is meant to address a font rendering quirk in OSX where the text
@@ -17,3 +17,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.sapphire-surface--secondary {
+  background-color: var(--sapphire-surface-color-background-secondary);
+}

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

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "sapphire-surface": string;
+  readonly "sapphire-surface--secondary": string;
 };
 export = styles;
 

package/components/switch/switch.module.css

@@ -6,11 +6,13 @@
   display: inline-flex;
   align-items: center;
   position: relative;
-  min-height: var(--sapphire-switch-size-height);
   max-width: 100%;
-  gap: var(--sapphire-switch-size-spacing-label);
+  gap: var(--sapphire-switch-size-spacing-label-l);
 }
 
+.sapphire-switch--medium {
+  gap: var(--sapphire-switch-size-spacing-label-m);
+}
 /**
  * hidden html input
  */
@@ -34,11 +36,11 @@
 .sapphire-switch-label {
   display: flex;
   align-items: center;
-  gap: var(--sapphire-switch-size-spacing-label);
+  gap: var(--sapphire-switch-size-spacing-label-l);
   font-family: var(--sapphire-switch-font-label-name);
   font-weight: var(--sapphire-switch-font-label-weight);
-  font-size: var(--sapphire-switch-size-font);
-  line-height: var(--sapphire-switch-size-line-height);
+  font-size: var(--sapphire-switch-size-font-l);
+  line-height: var(--sapphire-switch-size-height-l);
   color: var(--sapphire-switch-color-label);
 
   /* The below is meant to address a font rendering quirk in OSX where the text
@@ -56,6 +58,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sapphire-switch--medium .sapphire-switch-label {
+  gap: var(--sapphire-switch-size-spacing-label-m);
+  font-size: var(--sapphire-switch-size-font-m);
+  line-height: var(--sapphire-switch-size-height-m);
+}
+
 /**
  * knob track
  */
@@ -63,17 +71,10 @@
   background: var(--sapphire-switch-color-background-off-default);
   box-sizing: border-box;
   position: relative;
-  width: var(--sapphire-switch-size-width);
+  width: var(--sapphire-switch-size-width-l);
   transition: background var(--sapphire-switch-time-transition) ease-in-out;
-  height: var(--sapphire-switch-size-height);
-  border-radius: calc(var(--sapphire-switch-size-height) / 2);
-}
-.sapphire-switch-track::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translateY(-50%) translateX(-50%);
+  height: var(--sapphire-switch-size-height-l);
+  border-radius: calc(var(--sapphire-switch-size-height-l) / 2);
 }
 .sapphire-switch-input:checked ~ .sapphire-switch-track {
   background-color: var(--sapphire-switch-color-background-on-default);
@@ -97,25 +98,11 @@
 /* focus */
 .sapphire-switch:not(.js-focus)
   .sapphire-switch-input:focus-visible
-  ~ .sapphire-switch-track::before,
-.sapphire-switch.is-focus .sapphire-switch-track::before {
-  width: calc(
-    var(--sapphire-switch-size-width) + 2 *
-      var(--sapphire-switch-size-focus-ring-outer-border) + 2 *
-      var(--sapphire-switch-size-focus-ring-inner-border)
-  );
-  height: calc(
-    var(--sapphire-switch-size-height) + 2 *
-      var(--sapphire-switch-size-focus-ring-outer-border) + 2 *
-      var(--sapphire-switch-size-focus-ring-inner-border)
-  );
-  border: var(--sapphire-switch-size-focus-ring-outer-border) solid
-    var(--sapphire-switch-color-focus-ring-outer-border);
-  border-radius: 1000px; /* percentage value does not work here */
-  box-sizing: border-box;
-  box-shadow: inset 0px 0px 0px
-    var(--sapphire-switch-size-focus-ring-inner-border)
-    var(--sapphire-switch-color-focus-ring-inner-border);
+  ~ .sapphire-switch-track,
+.sapphire-switch.is-focus .sapphire-switch-track {
+  outline: var(--sapphire-switch-size-focus-ring-border) solid
+    var(--sapphire-switch-color-focus-ring);
+  outline-offset: var(--sapphire-switch-size-focus-ring-offset);
 }
 /* active (checked) */
 .sapphire-switch:active
@@ -137,7 +124,7 @@
 }
 /* disabled */
 .sapphire-switch-input:disabled {
-  cursor: default;
+  cursor: not-allowed;
 }
 
 .sapphire-switch-input:disabled ~ .sapphire-switch-track,
@@ -151,20 +138,33 @@
 .sapphire-switch-track::after {
   content: '';
   position: absolute;
-  width: var(--sapphire-switch-size-knob);
-  height: var(--sapphire-switch-size-knob);
-  border: solid
-    calc(
-      (var(--sapphire-switch-size-height) - var(--sapphire-switch-size-knob)) /
-        2
-    )
-    transparent;
+  box-sizing: border-box;
+
+  /* a padding would be simpler and achieve the same UI but we need a shadow
+   * around the edges of the knob */
+  height: calc(100% - (2 * var(--sapphire-switch-size-spacing-knob)));
+  margin: var(--sapphire-switch-size-spacing-knob);
+
+  aspect-ratio: 1/1;
   border-radius: 50%;
   background-color: var(--sapphire-switch-color-background-knob);
   background-clip: content-box;
   left: 0;
   transition: left var(--sapphire-switch-time-transition) ease-in-out;
+  box-shadow: var(--sapphire-switch-shadow-knob);
 }
 .sapphire-switch-input:checked ~ .sapphire-switch-track::after {
-  left: calc(100% - var(--sapphire-switch-size-height));
+  left: calc(100% - var(--sapphire-switch-size-height-l));
+}
+
+.sapphire-switch--medium .sapphire-switch-track {
+  width: var(--sapphire-switch-size-width-m);
+  height: var(--sapphire-switch-size-height-m);
+  border-radius: calc(var(--sapphire-switch-size-height-m) / 2);
+}
+
+.sapphire-switch--medium
+  .sapphire-switch-input:checked
+  ~ .sapphire-switch-track::after {
+  left: calc(100% - var(--sapphire-switch-size-height-m));
 }

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

@@ -1,5 +1,6 @@
 declare const styles: {
   readonly "sapphire-switch": string;
+  readonly "sapphire-switch--medium": string;
   readonly "sapphire-switch-input": string;
   readonly "sapphire-switch-label": string;
   readonly "sapphire-switch-track": string;