Merge remote-tracking branch 'origin/main' into feat/checkup-list-css…

…-class

.release-please-manifest.json

@@ -1,4 +1,4 @@
 {
   "last-release-sha": "fed492ab6cb4e807cffcb07e26bf25ab585f1c6b",
-  ".": "1.8.0"
+  ".": "1.9.0"
 }

CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.9.0](https://github.com/sbb-design-systems/lyne-components/compare/v1.8.0...v1.9.0) (2024-08-29)
+
+
+### Features
+
+* **sbb-autocomplete:** introduce size s ([#3020](https://github.com/sbb-design-systems/lyne-components/issues/3020)) ([aa55e7f](https://github.com/sbb-design-systems/lyne-components/commit/aa55e7fc01f44735ff96a04ceace94c34ddf5ed1))
+* **sbb-stepper:** add size 's' ([#3026](https://github.com/sbb-design-systems/lyne-components/issues/3026)) ([6c965c5](https://github.com/sbb-design-systems/lyne-components/commit/6c965c503bda51c3f646eb1400fdf4620883870f))
+* **sbb-time-input:** add size 's' ([#3018](https://github.com/sbb-design-systems/lyne-components/issues/3018)) ([375bdad](https://github.com/sbb-design-systems/lyne-components/commit/375bdad9f8413ce00cbc1f50c6a815bb0d6e5016))
+
+
+### Bug Fixes
+
+* **sbb-container:** remove relative positioning for non-image case ([#3024](https://github.com/sbb-design-systems/lyne-components/issues/3024)) ([d0d928f](https://github.com/sbb-design-systems/lyne-components/commit/d0d928f8107b3e799185357f675fd2c27498bca4))
+* **sbb-datepicker-toggle:** fix datepicker toggle empty state synchronization ([#3032](https://github.com/sbb-design-systems/lyne-components/issues/3032)) ([cae910b](https://github.com/sbb-design-systems/lyne-components/commit/cae910b1e93b19e680c98967af4646617c1d9f1d))
+* **sbb-overlay:** fix padding block ([#3028](https://github.com/sbb-design-systems/lyne-components/issues/3028)) ([6b95be6](https://github.com/sbb-design-systems/lyne-components/commit/6b95be6871d5b18f50d1011ac0c9ad5ab608f384))
+* **sbb-select:** fix display value in SSR context ([#3027](https://github.com/sbb-design-systems/lyne-components/issues/3027)) ([f733b38](https://github.com/sbb-design-systems/lyne-components/commit/f733b38e2aa3f4fe5eef73749d6611f748f3f17e))
+* **sbb-toggle:** avoid console error on checked option click ([#3034](https://github.com/sbb-design-systems/lyne-components/issues/3034)) ([94fa2b6](https://github.com/sbb-design-systems/lyne-components/commit/94fa2b64a2691cea45322dd521da74eb4e29b7e1))
+* **step-list:** fix border radius of step list elements ([#3036](https://github.com/sbb-design-systems/lyne-components/issues/3036)) ([cf26d07](https://github.com/sbb-design-systems/lyne-components/commit/cf26d0703f15e84cd79da9d8ddac597ac8650b15))
+
 ## [1.8.0](https://github.com/sbb-design-systems/lyne-components/compare/v1.7.0...v1.8.0) (2024-08-22)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -73,8 +73,8 @@
     "lit": "3.2.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.4.0",
-    "@commitlint/config-conventional": "19.2.2",
+    "@commitlint/cli": "19.4.1",
+    "@commitlint/config-conventional": "19.4.1",
     "@custom-elements-manifest/analyzer": "0.10.3",
     "@custom-elements-manifest/to-markdown": "0.1.0",
     "@eslint/eslintrc": "3.1.0",
@@ -84,7 +84,7 @@
     "@lit/react": "1.0.5",
     "@open-wc/lit-helpers": "0.7.0",
     "@open-wc/testing": "4.0.0",
-    "@sbb-esta/lyne-design-tokens": "1.1.1",
+    "@sbb-esta/lyne-design-tokens": "1.2.0",
     "@storybook/addon-a11y": "8.2.9",
     "@storybook/addon-actions": "8.2.9",
     "@storybook/addon-essentials": "8.2.9",
@@ -118,7 +118,7 @@
     "eslint": "9.9.1",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.3",
-    "eslint-plugin-import-x": "4.1.0",
+    "eslint-plugin-import-x": "4.1.1",
     "eslint-plugin-lit": "1.14.0",
     "eslint-plugin-react": "7.35.0",
     "eslint-plugin-storybook": "0.8.0",

src/elements/clock/clock.scss

@@ -36,7 +36,8 @@
 }
 
 .sbb-clock__hand-minutes {
-  transition: transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);
+  transition: transform var(--sbb-disable-animation-zero-time, 0.2s)
+    cubic-bezier(0.4, 2.08, 0.55, 0.44);
 
   @supports not (aspect-ratio: 1 / 1) {
     transform-origin: 50% 49.625%;

src/elements/core/styles/mixins/lists.scss

@@ -180,6 +180,7 @@
   @include base-marker-list;
 
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
+  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
   --sbb-list-marker-vertical-gap: var(--sbb-spacing-fixed-1x);
 
   &:where(.sbb-text-s) {
@@ -195,7 +196,6 @@
   > li {
     counter-increment: steps;
     background-color: var(--sbb-color-milk);
-    border-radius: var(--sbb-border-radius-4x);
     padding-block: calc(
         var(--sbb-step-list-padding-block) + var(--sbb-list-text-to-marker-block-offset)
       )
@@ -207,6 +207,16 @@
       var(--sbb-list-marker-padding-inline);
     min-height: calc(var(--sbb-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block));
 
+    &:first-of-type {
+      border-start-start-radius: var(--sbb-step-list-border-radius);
+      border-start-end-radius: var(--sbb-step-list-border-radius);
+    }
+
+    &:last-of-type {
+      border-end-start-radius: var(--sbb-step-list-border-radius);
+      border-end-end-radius: var(--sbb-step-list-border-radius);
+    }
+
     &::before {
       content: counter(steps);
       display: flex;

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

@@ -13,6 +13,7 @@
   --sbb-step-label-prefix-border-style: solid;
   --sbb-step-label-prefix-border-color: var(--sbb-color-cloud);
   --sbb-step-label-prefix-background-color: var(--sbb-color-white);
+  --sbb-step-label-gap: var(--sbb-spacing-fixed-4x);
 
   position: relative;
   min-width: 0;
@@ -57,6 +58,20 @@
   }
 }
 
+:host([data-size='s']) {
+  --sbb-step-label-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-step-label-prefix-size: var(--sbb-size-element-xxxs);
+
+  &::before {
+    // The `--sbb-font-size-text-m` is beign used here to align the bubble's inner text to
+    // the label text which includes the `sbb.text-m--bold` mixin.
+    inset-block-start: calc(
+      var(--sbb-font-size-text-m) * (var(--sbb-typo-line-height-body-text) / 2) +
+        (var(--sbb-border-width-1x) / 2)
+    );
+  }
+}
+
 :host([disabled]) {
   --sbb-step-label-color: var(--sbb-color-granite);
   --sbb-step-label-prefix-border-style: dashed;
@@ -100,8 +115,12 @@
   cursor: var(--sbb-step-label-cursor);
   position: relative;
   display: flex;
-  gap: var(--sbb-spacing-fixed-4x);
+  gap: var(--sbb-step-label-gap);
   color: var(--sbb-step-label-color);
+
+  :host([data-size='s']) & {
+    @include sbb.text-m--bold;
+  }
 }
 
 .sbb-step-label__prefix {

src/elements/stepper/stepper/__snapshots__/stepper.snapshot.spec.snap.js

@@ -6,13 +6,15 @@ snapshots["sbb-stepper renders DOM"] =
   data-disable-animation=""
   orientation="horizontal"
   selected-index="0"
+  size="m"
 >
   <sbb-step-label
     aria-controls="sbb-step-0"
     data-action=""
     data-button=""
     data-orientation="horizontal"
     data-selected=""
+    data-size="m"
     dir="ltr"
     id="sbb-step-label-0"
     role="tab"
@@ -36,6 +38,7 @@ snapshots["sbb-stepper renders DOM"] =
     data-action=""
     data-button=""
     data-orientation="horizontal"
+    data-size="m"
     dir="ltr"
     id="sbb-step-label-1"
     role="tab"
@@ -59,6 +62,7 @@ snapshots["sbb-stepper renders DOM"] =
     data-button=""
     data-disabled=""
     data-orientation="horizontal"
+    data-size="m"
     dir="ltr"
     disabled=""
     id="sbb-step-label-2"

src/elements/stepper/stepper/readme.md

@@ -110,6 +110,7 @@ Use an `aria-label` attribute to describe the purpose of the stepper. The `sbb-s
 | `orientation`    | `orientation`     | public  | `SbbOrientation`                 | `'horizontal'` | Steps orientation, either horizontal or vertical.                                 |
 | `selected`       | -                 | public  | `SbbStepElement \| undefined`    |                | The currently selected step.                                                      |
 | `selectedIndex`  | `selected-index`  | public  | `number \| undefined`            |                | The currently selected step index.                                                |
+| `size`           | `size`            | public  | `'s' \| 'm'`                     | `'m'`          | Size variant, either s or m.                                                      |
 | `steps`          | -                 | public  | `SbbStepElement[]`               |                | The steps of the stepper.                                                         |
 
 ## Methods

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

@@ -397,4 +397,15 @@ describe('sbb-stepper', () => {
     expect(stepLabelThree).to.have.attribute('data-selected');
     expect(stepLabelThree.step).to.have.attribute('data-selected');
   });
+
+  it('proxy size to step children', async () => {
+    const stepLabels = Array.from(element.querySelectorAll<SbbStepLabelElement>('sbb-step-label')!);
+
+    expect(stepLabels.every((l) => l.getAttribute('data-size') === element.size)).to.be.true;
+
+    element.size = 's';
+    await waitForLitRender(element);
+
+    expect(stepLabels.every((l) => l.getAttribute('data-size') === element.size)).to.be.true;
+  });
 });

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 s 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, false, undefined, 's'));
+        }),
+      );
     }
   });
 });

src/elements/teaser-hero/teaser-hero.scss

@@ -10,7 +10,7 @@
   // which appears in normalize css of several frameworks.
   outline: none !important;
 
-  --sbb-teaser-hero-brightness-hover: 1.075;
+  --sbb-teaser-hero-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-hero-chip-inset: var(--sbb-spacing-responsive-xxxs) auto auto
     var(--sbb-spacing-responsive-xxxs);
 

src/elements/teaser-product/teaser-product/teaser-product.scss

@@ -1,7 +1,7 @@
 @use '../../core/styles/index' as sbb;
 
 :host {
-  --sbb-teaser-product-brightness-hover: 1.075;
+  --sbb-teaser-product-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-product-animation-duration: var(
     --sbb-disable-animation-zero-time,
     var(--sbb-animation-duration-4x)

src/elements/teaser/teaser.scss

@@ -17,7 +17,7 @@
   --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
   --sbb-teaser-width: fit-content;
   --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
-  --sbb-teaser-brightness-hover: 1.075;
+  --sbb-teaser-brightness-hover: var(--sbb-hover-image-brightness);
   --sbb-teaser-animation-duration: var(
     --sbb-disable-animation-zero-time,
     var(--sbb-animation-duration-4x)