feat(sbb-stepper): add size 's'

src/elements/stepper/step-label/step-label.scss

@@ -57,6 +57,10 @@
   }
 }
 
+:host([data-size='s']) {
+  --sbb-step-label-prefix-size: var(--sbb-size-element-xxxs);
+}
+
 :host([disabled]) {
   --sbb-step-label-color: var(--sbb-color-granite);
   --sbb-step-label-prefix-border-style: dashed;
@@ -102,6 +106,10 @@
   display: flex;
   gap: var(--sbb-spacing-fixed-4x);
   color: var(--sbb-step-label-color);
+
+  :host([data-size='s']) & {
+    @include sbb.text-m--bold;
+  }
 }
 
 .sbb-step-label__prefix {

src/elements/stepper/stepper/stepper.stories.ts

@@ -47,16 +47,25 @@ const horizontalFrom: InputType = {
   options: ['unset', 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'],
 };
 
+const size: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['s', 'm'],
+};
+
 const defaultArgTypes: ArgTypes = {
   linear,
   orientation,
   'horizontal-from': horizontalFrom,
+  size,
 };
 
 const defaultArgs: Args = {
   linear: false,
   orientation: 'horizontal',
   'horizontal-from': 'unset',
+  size: size.options![1],
 };
 
 const codeStyle: Args = {
@@ -356,6 +365,12 @@ export const Vertical: StoryObj = {
   args: { ...defaultArgs, orientation: orientation.options![1] },
 };
 
+export const SizeS: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![0] },
+};
+
 export const HorizontalFromSmall: StoryObj = {
   render: Template,
   argTypes: defaultArgTypes,

src/elements/stepper/stepper/stepper.ts

@@ -48,6 +48,9 @@ export class SbbStepperElement extends SbbHydrationMixin(LitElement) {
   @property({ reflect: true })
   public orientation: SbbOrientation = 'horizontal';
 
+  /** Size variant, either l or m. */
+  @property({ reflect: true }) public size: 's' | 'm' = 'm';
+
   /** The currently selected step. */
   @property({ attribute: false })
   public set selected(step: SbbStepElement) {
@@ -200,6 +203,7 @@ export class SbbStepperElement extends SbbHydrationMixin(LitElement) {
         label.configure(i + 1, array.length, this._loaded);
       });
     this._select(this.selected || this._enabledSteps[0]);
+    this._proxySize();
   }
 
   private _updateLabels(): void {
@@ -271,6 +275,17 @@ export class SbbStepperElement extends SbbHydrationMixin(LitElement) {
     if (changedProperties.has('linear') && this._loaded) {
       this._configureLinearMode();
     }
+
+    if (changedProperties.has('size')) {
+      this._proxySize();
+      this._setMarkerSize();
+    }
+  }
+
+  private _proxySize(): void {
+    this.steps.forEach((step) => {
+      step.label?.setAttribute('data-size', this.size);
+    });
   }
 
   private _handleKeyDown(evt: KeyboardEvent): void {

src/elements/stepper/stepper/stepper.visual.spec.ts

@@ -25,12 +25,14 @@ describe(`sbb-stepper`, () => {
     orientation?: string,
     longLabel?: boolean,
     horizontalFrom?: string,
+    size: 's' | 'm' = 'm',
   ): TemplateResult => html`
     <sbb-stepper
       selected-index="0"
       ?linear=${linear}
       orientation=${orientation || nothing}
       horizontal-from=${horizontalFrom || nothing}
+      size=${size}
     >
       <sbb-step-label icon-name="pen-small">Step 1</sbb-step-label>
       <sbb-step>
@@ -87,6 +89,13 @@ describe(`sbb-stepper`, () => {
           await setup.withFixture(template(false, orientation, true));
         }),
       );
+
+      it(
+        `orientation=${orientation} size=s`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(template(false, orientation, true, undefined, 's'));
+        }),
+      );
     }
   });
 });