@danske/sapphire-css 51.0.0 → 52.2.0

package/build/themes/cjs/default-dark.js

@@ -8,6 +8,9 @@ var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-token
 var theme = {
     themeClassName: tokens_module_css_1["default"]['sapphire-theme-default-dark'],
     themeSecondaryModifierClassName: tokens_module_css_1["default"]['sapphire-theme--secondary'],
-    themeContrastModifierClassName: tokens_module_css_1["default"]['sapphire-theme--contrast']
+    themeContrastModifierClassName: tokens_module_css_1["default"]['sapphire-theme--contrast'],
+    themeScaleSmModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-sm'],
+    themeScaleMdModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-md'],
+    themeScaleAutoModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-auto']
 };
 exports["default"] = theme;

package/build/themes/cjs/default.js

@@ -9,6 +9,9 @@ var theme = {
     themeClassName: tokens_module_css_1["default"]['sapphire-theme-default'],
     themeSecondaryModifierClassName: tokens_module_css_1["default"]['sapphire-theme--secondary'],
     themeTertiaryModifierClassName: tokens_module_css_1["default"]['sapphire-theme--tertiary'],
-    themeContrastModifierClassName: tokens_module_css_1["default"]['sapphire-theme--contrast']
+    themeContrastModifierClassName: tokens_module_css_1["default"]['sapphire-theme--contrast'],
+    themeScaleSmModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-sm'],
+    themeScaleMdModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-md'],
+    themeScaleAutoModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-auto']
 };
 exports["default"] = theme;

package/build/themes/cjs/index.d.ts

@@ -4,4 +4,7 @@ export interface Theme {
     themeSecondaryModifierClassName?: string;
     themeTertiaryModifierClassName?: string;
     themeContrastModifierClassName?: string;
+    themeScaleSmModifierClassName?: string;
+    themeScaleMdModifierClassName?: string;
+    themeScaleAutoModifierClassName?: string;
 }

package/build/themes/cjs/realkredit.js

@@ -6,6 +6,9 @@ exports.__esModule = true;
 require("@danske/sapphire-design-tokens/build/themes/realkredit/assets/fonts/realkredit/fontFace.css");
 var tokens_module_css_1 = __importDefault(require("@danske/sapphire-design-tokens/build/themes/realkredit/css/tokens.module.css"));
 var theme = {
-    themeClassName: tokens_module_css_1["default"]['sapphire-theme-realkredit']
+    themeClassName: tokens_module_css_1["default"]['sapphire-theme-realkredit'],
+    themeScaleSmModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-sm'],
+    themeScaleMdModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-md'],
+    themeScaleAutoModifierClassName: tokens_module_css_1["default"]['sapphire-theme--scale-auto']
 };
 exports["default"] = theme;

package/build/themes/esm/default-dark.js

@@ -3,6 +3,9 @@ import styles from '@danske/sapphire-design-tokens/build/themes/default-dark/css
 var theme = {
     themeClassName: styles['sapphire-theme-default-dark'],
     themeSecondaryModifierClassName: styles['sapphire-theme--secondary'],
-    themeContrastModifierClassName: styles['sapphire-theme--contrast']
+    themeContrastModifierClassName: styles['sapphire-theme--contrast'],
+    themeScaleSmModifierClassName: styles['sapphire-theme--scale-sm'],
+    themeScaleMdModifierClassName: styles['sapphire-theme--scale-md'],
+    themeScaleAutoModifierClassName: styles['sapphire-theme--scale-auto']
 };
 export default theme;

package/build/themes/esm/default.js

@@ -4,6 +4,9 @@ var theme = {
     themeClassName: styles['sapphire-theme-default'],
     themeSecondaryModifierClassName: styles['sapphire-theme--secondary'],
     themeTertiaryModifierClassName: styles['sapphire-theme--tertiary'],
-    themeContrastModifierClassName: styles['sapphire-theme--contrast']
+    themeContrastModifierClassName: styles['sapphire-theme--contrast'],
+    themeScaleSmModifierClassName: styles['sapphire-theme--scale-sm'],
+    themeScaleMdModifierClassName: styles['sapphire-theme--scale-md'],
+    themeScaleAutoModifierClassName: styles['sapphire-theme--scale-auto']
 };
 export default theme;

package/build/themes/esm/index.d.ts

@@ -4,4 +4,7 @@ export interface Theme {
     themeSecondaryModifierClassName?: string;
     themeTertiaryModifierClassName?: string;
     themeContrastModifierClassName?: string;
+    themeScaleSmModifierClassName?: string;
+    themeScaleMdModifierClassName?: string;
+    themeScaleAutoModifierClassName?: string;
 }

package/build/themes/esm/realkredit.js

@@ -1,6 +1,9 @@
 import '@danske/sapphire-design-tokens/build/themes/realkredit/assets/fonts/realkredit/fontFace.css';
 import styles from '@danske/sapphire-design-tokens/build/themes/realkredit/css/tokens.module.css';
 var theme = {
-    themeClassName: styles['sapphire-theme-realkredit']
+    themeClassName: styles['sapphire-theme-realkredit'],
+    themeScaleSmModifierClassName: styles['sapphire-theme--scale-sm'],
+    themeScaleMdModifierClassName: styles['sapphire-theme--scale-md'],
+    themeScaleAutoModifierClassName: styles['sapphire-theme--scale-auto']
 };
 export default theme;

package/components/alert/alert.module.css

@@ -3,11 +3,10 @@
   margin: 0;
   display: grid;
   column-gap: var(--sapphire-semantic-size-spacing-2xs);
-  row-gap: var(--sapphire-semantic-size-spacing-sm);
+  row-gap: var(--sapphire-semantic-size-spacing-2xs);
   grid-template-columns: var(--sapphire-semantic-size-icon-sm) 1fr;
   padding: var(--sapphire-semantic-size-spacing-md);
   border-radius: var(--sapphire-semantic-size-radius-lg);
-
   color: var(--sapphire-semantic-color-foreground-primary);
 
   /* Default variant "info" */
@@ -49,6 +48,7 @@
 .sapphire-alert--warning {
   background-color: var(--sapphire-semantic-color-background-warning-subtle);
 }
+
 .sapphire-alert--warning .sapphire-alert__icon {
   color: var(--sapphire-semantic-color-foreground-on-warning-subtle);
 }
@@ -63,6 +63,7 @@
 .sapphire-alert--positive {
   background-color: var(--sapphire-semantic-color-background-positive-subtle);
 }
+
 .sapphire-alert--positive .sapphire-alert__icon {
   color: var(--sapphire-semantic-color-foreground-on-positive-subtle);
 }

package/components/avatar/avatar.module.css

@@ -1,5 +1,6 @@
 .sapphire-avatar {
   display: inline-flex;
+  flex-shrink: 0;
   flex-direction: column;
   justify-content: center;
   align-items: center;

package/components/button/button.module.css

@@ -66,7 +66,6 @@
    * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
    */
   margin: 0;
-  width: 100%;
   padding: 0 var(--sapphire-semantic-size-spacing-xs);
   max-width: calc(10 * var(--sapphire-semantic-size-height-control-md));
   overflow: hidden;
@@ -87,6 +86,7 @@
 
 .sapphire-button--stretch-left-align .sapphire-button__content {
   text-align: start;
+  width: 100%;
 }
 
 a.sapphire-button {

package/components/calendar/calendar.module.css

@@ -27,6 +27,13 @@
   );
 }
 
+.sapphire-calendar__table-container--sm {
+  --sapphire-calendar-cell-size: var(--sapphire-global-size-generic-80);
+  --sapphire-calendar-control-size: var(
+    --sapphire-semantic-size-height-control-sm
+  );
+}
+
 .sapphire-calendar__header {
   display: flex;
   align-items: center;
@@ -58,7 +65,9 @@
 }
 
 .sapphire-calendar__table-container--md .sapphire-calendar__header-title,
-.sapphire-calendar__table-container--md
+.sapphire-calendar__table-container--md .sapphire-calendar__header-title button,
+.sapphire-calendar__table-container--sm .sapphire-calendar__header-title,
+.sapphire-calendar__table-container--sm
   .sapphire-calendar__header-title
   button {
   font-size: var(--sapphire-semantic-size-font-body-sm) !important;
@@ -107,6 +116,12 @@
   padding: 0;
 }
 
+.sapphire-calendar__table-container--sm .sapphire-calendar__table-head-cell {
+  height: var(--sapphire-semantic-size-height-control-xs);
+  /* 2px gap between the weekday labels and the first row of days */
+  padding-bottom: var(--sapphire-semantic-size-spacing-4xs);
+}
+
 .sapphire-calendar__table-body-cell {
   height: var(--sapphire-calendar-control-size);
   text-align: center;
@@ -126,7 +141,11 @@
   padding-right: var(--sapphire-semantic-size-spacing-lg);
 }
 
-.sapphire-calendar__table-container--md .sapphire-calendar__custom-ranges {
+.sapphire-calendar__table-container--md ~ .sapphire-calendar__custom-ranges {
+  padding-right: var(--sapphire-semantic-size-spacing-4xs);
+}
+
+.sapphire-calendar__table-container--sm ~ .sapphire-calendar__custom-ranges {
   padding-right: var(--sapphire-semantic-size-spacing-4xs);
 }
 
@@ -137,6 +156,10 @@
   font-size: var(--sapphire-semantic-size-font-body-sm);
 }
 
+.sapphire-calendar__table-container--sm .sapphire-calendar__day-of-week {
+  font-size: var(--sapphire-semantic-size-font-body-xs);
+}
+
 .sapphire-calendar__week-number {
   display: block;
   text-decoration: none;
@@ -146,6 +169,10 @@
   width: var(--sapphire-calendar-cell-size);
 }
 
+.sapphire-calendar__table-container--sm .sapphire-calendar__week-number {
+  font-size: var(--sapphire-semantic-size-font-body-xs);
+}
+
 .sapphire-calendar__button {
   all: unset;
   display: flex;
@@ -181,6 +208,9 @@
 }
 
 .sapphire-calendar__table-container--md
+  .sapphire-calendar__button
+  .sapphire-calendar__button-text,
+.sapphire-calendar__table-container--sm
   .sapphire-calendar__button
   .sapphire-calendar__button-text {
   font-size: var(--sapphire-semantic-size-font-body-sm);
@@ -201,6 +231,7 @@
     var(--sapphire-calendar-cell-size) - 2 *
       var(--sapphire-semantic-size-focus-ring)
   );
+  flex-shrink: 0;
   padding: 0;
 }
 
@@ -210,13 +241,18 @@
   cursor: not-allowed;
 }
 
+/* Raise the focused button so its focus ring is not covered by the
+   neighbouring cell's range background. */
+.sapphire-calendar__button.is-focus,
+.sapphire-calendar__button:not(.js-focus):focus-visible {
+  z-index: 2;
+}
+
 .sapphire-calendar__button.is-focus .sapphire-calendar__button-text,
 .sapphire-calendar__button:not(.js-focus):focus-visible
   .sapphire-calendar__button-text {
   outline: var(--sapphire-semantic-size-focus-ring) solid
     var(--sapphire-semantic-color-focus-ring);
-  outline-offset: var(--sapphire-semantic-size-focus-ring);
-  z-index: 2;
   background: var(--sapphire-semantic-color-background-action-tertiary-default);
   transition-duration: var(--sapphire-semantic-time-fade-quick);
 }
@@ -400,6 +436,7 @@
   ):focus-visible
   .sapphire-calendar__button-text {
   background: var(--sapphire-semantic-color-background-action-select-default);
+  outline-offset: var(--sapphire-semantic-size-focus-ring);
 }
 
 .sapphire-calendar__button.sapphire-calendar__button--range-selection.sapphire-calendar__button--selection-start,
@@ -430,6 +467,11 @@
   bottom: var(--sapphire-semantic-size-spacing-2xs);
 }
 
+.sapphire-calendar__table-container--sm
+  .sapphire-calendar__button.sapphire-calendar__button--current::after {
+  bottom: var(--sapphire-semantic-size-spacing-3xs);
+}
+
 .sapphire-calendar__button.sapphire-calendar__button--selected:not(
     .sapphire-calendar__button--range-selection
   ).sapphire-calendar__button--current::after,

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

@@ -2,6 +2,7 @@ declare const styles: {
   readonly "sapphire-calendar": string;
   readonly "sapphire-calendar__table-container": string;
   readonly "sapphire-calendar__table-container--md": string;
+  readonly "sapphire-calendar__table-container--sm": string;
   readonly "sapphire-calendar__header": string;
   readonly "sapphire-calendar__header--left": string;
   readonly "sapphire-calendar__header-next-month": string;

package/components/checkbox/checkbox.module.css

@@ -26,7 +26,11 @@
   opacity: 0.0001;
   z-index: 1;
 
-  cursor: pointer;
+  cursor: inherit;
+}
+
+.sapphire-checkbox.is-readonly {
+  cursor: default;
 }
 .sapphire-checkbox__label {
   /* The below is meant to address a font rendering quirk in OSX where the text
@@ -72,6 +76,12 @@
   margin-left: var(--sapphire-semantic-size-spacing-xs);
 }
 
+.sapphire-checkbox--sm .sapphire-checkbox__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-checkbox__note,
 .sapphire-checkbox__error-text {
   display: block;
@@ -104,8 +114,29 @@
   );
 }
 
+.sapphire-checkbox__note--sm,
+.sapphire-checkbox__error-text--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)
+  );
+}
+
 /* The checkbox box */
 
+.sapphire-checkbox__box-wrapper {
+  display: flex;
+  align-items: center;
+  height: var(--sapphire-semantic-size-height-control-xs);
+}
+
+.sapphire-checkbox--md .sapphire-checkbox__box-wrapper,
+.sapphire-checkbox--sm .sapphire-checkbox__box-wrapper {
+  height: var(--sapphire-semantic-size-height-control-2xs);
+}
+
 .sapphire-checkbox__box {
   box-sizing: border-box;
   position: relative;
@@ -115,14 +146,17 @@
   border: var(--sapphire-semantic-size-border-sm) solid
     var(--sapphire-semantic-color-border-field-default);
   background: var(--sapphire-semantic-color-background-field);
-  transition: all var(--sapphire-semantic-time-fade-quick)
-    var(--sapphire-semantic-transitions-fade);
+  transition-property: background, border-color, box-shadow, color;
+  transition-duration: var(--sapphire-semantic-time-fade-quick);
+  transition-timing-function: var(--sapphire-semantic-transitions-fade);
   flex-shrink: 0;
   display: inline-flex;
   justify-content: center;
   align-items: center;
 }
 
+/* We should use flex to align the checkbox with the label instead of hardcoding margins */
+
 .sapphire-checkbox__box:has(~ .sapphire-checkbox__label:not(:empty)) {
   margin-top: var(--sapphire-semantic-size-spacing-4xs);
 }
@@ -132,6 +166,11 @@
   height: var(--sapphire-semantic-size-height-box-md);
 }
 
+.sapphire-checkbox--sm .sapphire-checkbox__box {
+  width: var(--sapphire-global-size-generic-35);
+  height: var(--sapphire-global-size-generic-35);
+}
+
 .sapphire-checkbox__box-icon {
   display: inherit;
   line-height: 0;
@@ -146,6 +185,11 @@
   width: var(--sapphire-semantic-size-height-box-md);
 }
 
+.sapphire-checkbox--sm .sapphire-checkbox__box-icon {
+  height: var(--sapphire-semantic-size-height-box-md);
+  width: var(--sapphire-semantic-size-height-box-md);
+}
+
 .sapphire-checkbox--error .sapphire-checkbox__box {
   border-color: var(--sapphire-semantic-color-border-negative-default);
 }
@@ -298,4 +342,5 @@
 .sapphire-checkbox.is-disabled,
 .sapphire-checkbox:has(:disabled) {
   opacity: var(--sapphire-semantic-opacity-disabled);
+  cursor: not-allowed;
 }

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

@@ -2,14 +2,19 @@ declare const styles: {
   readonly "sapphire-checkbox-container": string;
   readonly "sapphire-checkbox": string;
   readonly "sapphire-checkbox__input": string;
+  readonly "is-readonly": string;
   readonly "sapphire-checkbox__label": string;
   readonly "sapphire-checkbox__required-indicator": string;
   readonly "sapphire-checkbox__optional-indicator": string;
   readonly "sapphire-checkbox--md": string;
+  readonly "sapphire-checkbox--sm": string;
   readonly "sapphire-checkbox__note": string;
   readonly "sapphire-checkbox__error-text": string;
   readonly "sapphire-checkbox__note--md": string;
   readonly "sapphire-checkbox__error-text--md": string;
+  readonly "sapphire-checkbox__note--sm": string;
+  readonly "sapphire-checkbox__error-text--sm": string;
+  readonly "sapphire-checkbox__box-wrapper": string;
   readonly "sapphire-checkbox__box": string;
   readonly "sapphire-checkbox__box-icon": string;
   readonly "sapphire-checkbox--error": string;

package/components/danskeProgressBar/danskeProgressBar.module.css

@@ -0,0 +1,178 @@
+/* DanskeProgressBar 3D scene */
+.sapphire-danske-progress-bar {
+  /*
+   * Set --sapphire-danske-progress-bar-height (px) or --sapphire-danske-progress-bar-width (px)
+   * to control the size. If both are set, height takes precedence.
+   * All geometry is derived from a single face height:
+   *   faceWidth      = faceHeight × PHI × √(2+PHI)  ≈ faceHeight × 3.07768
+   *   halfDepth      = faceWidth  / 2
+   *   containerWidth = faceWidth  × √2               ≈ faceWidth  × 1.41421
+   *
+   * The nested var() fallback derives face height from width when only width is given.
+   * When neither variable is set the inner literal (40px × ratio) cancels with the
+   * outer division, yielding the 40px default without any extra magic numbers.
+   */
+  --_face-height: var(
+    --sapphire-danske-progress-bar-height,
+    calc(
+      var(--sapphire-danske-progress-bar-width, calc(40px * 3.07768 * 1.41421)) /
+        (3.07768 * 1.41421)
+    )
+  );
+  --_face-width: calc(var(--_face-height) * 3.07768);
+  --_half-depth: calc(var(--_face-width) / 2);
+
+  /* Width is set to faceWidth × √2 (max projected width during rotation).
+     Flexbox centres the narrower scene div horizontally so the 3D faces always
+     have room to rotate without overflowing the element's layout bounds. */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: calc(var(--_face-width) * 1.41421);
+  height: var(--_face-height);
+}
+
+@property --_angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: -31.7175deg;
+}
+
+/*
+ * 2D outline: a pseudo-element whose width tracks the orthographic projection of
+ * the rotating box — W × (|cos θ| + |sin θ|). Fixed layout width + scaleX keeps
+ * the border on a GPU-composited layer, avoiding sub-pixel rasterization changes.
+ * NOTE: Title-Case math functions prevent Dart Sass from evaluating them at build
+ * time when compiling Angular stylesheets.
+ * Hidden and replaced by 3D face borders in the @supports not block below.
+ */
+.sapphire-danske-progress-bar::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  z-index: 1;
+  width: calc(var(--_face-width) * 1.41421);
+  transform: translateX(-50%)
+    scaleX(calc((Abs(Cos(var(--_angle))) + Abs(Sin(var(--_angle)))) / 1.41421));
+  height: 100%;
+  border: max(1px, calc(var(--_face-width) / 100)) solid
+    var(--sapphire-semantic-color-background-spinner-primary);
+  box-sizing: border-box;
+  animation: sapphire-danske-progress-bar-rotate 2000ms
+    cubic-bezier(0.5, 0, 0, 1) infinite;
+  will-change: transform;
+  pointer-events: none;
+}
+
+.sapphire-danske-progress-bar__box {
+  position: relative;
+  width: var(--_face-width);
+  height: var(--_face-height);
+  transform-style: preserve-3d;
+  transform: rotateY(var(--_angle));
+  animation: sapphire-danske-progress-bar-rotate 2000ms
+    cubic-bezier(0.5, 0, 0, 1) infinite;
+}
+
+@keyframes sapphire-danske-progress-bar-rotate {
+  from {
+    --_angle: -31.7175deg;
+  }
+  to {
+    --_angle: 148.2825deg;
+  }
+}
+
+/*
+ * Faces are rendered via pseudo-elements to avoid extra markup.
+ * __box::before/::after are the front/back (signature colour) faces.
+ * __box-inner::before/::after are the left/right (white) side faces.
+ * All borders are absent here — the 2D outline above handles the stroke.
+ */
+.sapphire-danske-progress-bar__box::before,
+.sapphire-danske-progress-bar__box::after,
+.sapphire-danske-progress-bar__box-inner::before,
+.sapphire-danske-progress-bar__box-inner::after {
+  content: '';
+  position: absolute;
+  backface-visibility: hidden;
+  width: var(--_face-width);
+  height: var(--_face-height);
+}
+
+/* Front and back faces use the signature colour */
+.sapphire-danske-progress-bar__box::before,
+.sapphire-danske-progress-bar__box::after {
+  background: var(--sapphire-semantic-color-background-signature);
+}
+
+.sapphire-danske-progress-bar__box::before {
+  transform: translateZ(var(--_half-depth));
+}
+
+.sapphire-danske-progress-bar__box::after {
+  transform: translateZ(calc(var(--_half-depth) * -1)) rotateY(180deg);
+}
+
+/* Left and right faces are white (catching the "light") */
+.sapphire-danske-progress-bar__box-inner {
+  position: absolute;
+  width: var(--_face-width);
+  height: var(--_face-height);
+  transform-style: preserve-3d; /* allows pseudo-elements to participate in the 3D scene */
+}
+
+.sapphire-danske-progress-bar__box-inner::before,
+.sapphire-danske-progress-bar__box-inner::after {
+  background: #ffffff; /* Intentionally hard coded, as it's a part of the logo. */
+}
+
+.sapphire-danske-progress-bar__box-inner::before {
+  transform: translateX(calc(var(--_half-depth) * -1)) rotateY(-90deg);
+}
+
+.sapphire-danske-progress-bar__box-inner::after {
+  transform: translateX(var(--_half-depth)) rotateY(90deg);
+}
+
+/* Suppress the 2D outline when the --no-outline modifier is present on the root. */
+.sapphire-danske-progress-bar--no-outline::after {
+  display: none;
+}
+
+/*
+ * Fallback for browsers without CSS math functions (abs, cos, sin) — primarily
+ * browsers older than Chrome 117 / Firefox 128 / Safari 16.4.
+ * The 2D outline is hidden (its scaleX formula requires trig functions) and
+ * replaced by traditional 3D borders on the face pseudo-elements. Left/right
+ * borders may flicker slightly as they foreshorten during rotation — this is an
+ * accepted trade-off for the degraded experience.
+ */
+@supports not (width: Abs(1px)) {
+  .sapphire-danske-progress-bar::after {
+    display: none;
+  }
+
+  .sapphire-danske-progress-bar__box::before,
+  .sapphire-danske-progress-bar__box::after,
+  .sapphire-danske-progress-bar__box-inner::before,
+  .sapphire-danske-progress-bar__box-inner::after {
+    box-sizing: border-box;
+    border: max(1px, calc(var(--_face-width) / 100)) solid
+      var(--sapphire-semantic-color-background-signature);
+  }
+
+  .sapphire-danske-progress-bar--no-outline
+    .sapphire-danske-progress-bar__box::before,
+  .sapphire-danske-progress-bar--no-outline
+    .sapphire-danske-progress-bar__box::after,
+  .sapphire-danske-progress-bar--no-outline
+    .sapphire-danske-progress-bar__box-inner::before,
+  .sapphire-danske-progress-bar--no-outline
+    .sapphire-danske-progress-bar__box-inner::after {
+    border: none;
+    box-sizing: content-box;
+  }
+}

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

@@ -0,0 +1,9 @@
+declare const styles: {
+  readonly "sapphire-danske-progress-bar": string;
+  readonly "sapphire-danske-progress-bar-rotate": string;
+  readonly "sapphire-danske-progress-bar__box": string;
+  readonly "sapphire-danske-progress-bar__box-inner": string;
+  readonly "sapphire-danske-progress-bar--no-outline": string;
+};
+export = styles;
+

package/components/dateField/dateField.module.css

@@ -53,7 +53,7 @@
 }
 
 .sapphire-date-field--no-calendar {
-  padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-lg);
+  padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
 }
 
 .sapphire-date-field--no-clear-button {
@@ -133,6 +133,35 @@
   font-size: var(--sapphire-semantic-size-font-control-md);
 }
 
+/**
+ * Small size
+ */
+.sapphire-date-field--sm {
+  --sapphire-dateField-icon-size: var(--sapphire-semantic-size-icon-sm);
+
+  height: var(--sapphire-semantic-size-height-control-sm);
+  padding: 0 var(--sapphire-semantic-size-spacing-control-horizontal-sm);
+  gap: var(--sapphire-semantic-size-spacing-2xs);
+  border-radius: var(--sapphire-semantic-size-radius-sm);
+}
+
+.sapphire-date-field--no-calendar.sapphire-date-field--sm {
+  padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-md);
+}
+
+.sapphire-date-field--align-right.sapphire-date-field--no-calendar.sapphire-date-field--sm {
+  padding-left: var(--sapphire-semantic-size-spacing-control-horizontal-sm);
+  padding-right: var(--sapphire-semantic-size-spacing-control-horizontal-md);
+}
+
+.sapphire-date-field--sm .sapphire-date-field__input-group {
+  gap: var(--sapphire-semantic-size-spacing-4xs);
+}
+
+.sapphire-date-field--sm .sapphire-date-field__input {
+  font-size: var(--sapphire-semantic-size-font-control-sm);
+}
+
 /**
  * Disabled
  */

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

@@ -10,6 +10,7 @@ declare const styles: {
   readonly "sapphire-date-field__input--align-right": string;
   readonly "sapphire-date-field__range-separator": string;
   readonly "sapphire-date-field--md": string;
+  readonly "sapphire-date-field--sm": string;
   readonly "is-disabled": string;
   readonly "sapphire-date-field__segment": string;
   readonly "is-focus": string;