feat(sbb-sidebar): initial implementation

src/elements/button/common/button-common.ts

@@ -18,11 +18,11 @@ export type SbbButtonCommonElement = SbbButtonCommonElementMixinType & SbbAction
 export type SbbButtonSize = 'l' | 'm' | 's';
 
 export declare class SbbButtonCommonElementMixinType
-  implements SbbNegativeMixinType, Partial<SbbDisabledMixinType>, Partial<SbbIconNameMixinType>
+  extends SbbIconNameMixinType
+  implements SbbNegativeMixinType, Partial<SbbDisabledMixinType>
 {
   public accessor size: SbbButtonSize;
   public accessor disabled: boolean;
-  public accessor iconName: string;
   public accessor negative: boolean;
 }
 

src/elements/core/a11y/focus.ts

@@ -73,6 +73,7 @@ export function getFirstFocusableElement(
   return focusableElements.length ? focusableElements[0] : null;
 }
 
+// TODO: Convert to Controller and handle disconnectedCallback here with hostDisconnected().
 export class SbbFocusHandler {
   private _controller = new AbortController();
 

src/elements/core/controllers/inert-controller.ts

@@ -1,28 +1,20 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
 
-import type { SbbOpenCloseBaseElement } from '../base-elements/open-close-base-element.js';
-
 const IGNORED_ELEMENTS = ['script', 'head', 'template', 'style'];
 const inertElements = new Set<HTMLElement>();
 const inertOverlays = new Set<HTMLElement>();
 
 export class SbbInertController implements ReactiveController {
   public constructor(
-    private _host: ReactiveControllerHost & SbbOpenCloseBaseElement,
+    private _host: ReactiveControllerHost & HTMLElement,
     private _inertElements = inertElements,
     private _inertOverlays = inertOverlays,
   ) {
     this._host.addController?.(this);
   }
 
-  public hostConnected(): void {
-    if (this._host.isOpen) {
-      this.activate();
-    }
-  }
-
   public hostDisconnected(): void {
-    if (this._inertOverlays.has(this._host)) {
+    if (this.isInert()) {
       this.deactivate();
     }
   }
@@ -64,6 +56,11 @@ export class SbbInertController implements ReactiveController {
     }
   }
 
+  /** Whether the assigned host is currently inert */
+  public isInert(): boolean {
+    return this._inertOverlays.has(this._host);
+  }
+
   private _currentOverlay(): HTMLElement | null {
     return [...this._inertOverlays].pop() ?? null;
   }

src/elements/core/decorators/force-type.ts

@@ -6,7 +6,9 @@ import type { Interface, PropertyDecorator } from './base.js';
  * Decorator that forces the value of a property or getter/setter
  * to the defined type.
  */
-export const forceType = <C extends Interface<ReactiveElement>, V>(): PropertyDecorator => {
+export const forceType = <C extends Interface<ReactiveElement>, V>(
+  convert?: (v: unknown) => V,
+): PropertyDecorator => {
   return (
     target: ClassAccessorDecoratorTarget<C, V> | ((value: V) => void),
     context: ClassAccessorDecoratorContext<C, V> | ClassSetterDecoratorContext<C, V>,
@@ -16,13 +18,15 @@ export const forceType = <C extends Interface<ReactiveElement>, V>(): PropertyDe
     const type = (globalThis.litPropertyMetadata.get(metadata)?.get(name)?.type ?? String) as (
       v: unknown,
     ) => V;
-    let convert = type;
-    if ((type as unknown) === String) {
+
+    convert ??= type;
+
+    if ((convert as unknown) === String) {
       // In case of String, we want to handle null/undefined differently
       // from the native behavior in that we want to treat these values
       // as empty strings.
       convert = (v) => (v == null ? '' : String(v)) as V;
-    } else if ((type as unknown) === Number) {
+    } else if ((convert as unknown) === Number) {
       // In case of Number, we want to handle null differently
       // from the native behavior in that we want to treat null as NaN.
       convert = (v) => (v == null ? NaN : Number(v)) as V;
@@ -32,13 +36,13 @@ export const forceType = <C extends Interface<ReactiveElement>, V>(): PropertyDe
         set(this: C, value) {
           (target as ClassAccessorDecoratorTarget<C, V>).set.call(
             this as unknown as C,
-            convert(value) as V,
+            convert!(value) as V,
           );
         },
       } satisfies ClassAccessorDecoratorResult<C, V>;
     } else if (kind === 'setter') {
       return function (value: unknown) {
-        (target as (value: unknown) => void).call(this, convert(value));
+        (target as (value: unknown) => void).call(this, convert!(value));
       } satisfies (this: C, value: V) => void;
     }
 

src/elements/core/i18n/i18n.ts

@@ -444,6 +444,13 @@ export const i18nCloseNavigation: Record<string, string> = {
   it: 'Chiudere la navigazione',
 };
 
+export const i18nCloseSidebar: Record<string, string> = {
+  de: 'Seitenleiste schliessen',
+  en: 'Close sidebar',
+  fr: 'Fermer la barre latérale',
+  it: 'Chiudere la barra laterale',
+};
+
 export const i18nClosePopover: Record<string, string> = {
   de: 'Hinweis schliessen',
   en: 'Close note',

src/elements/core/mixins.ts

@@ -1,3 +1,4 @@
+export * from './mixins/animation-complete-mixin.js';
 export * from './mixins/constructor.js';
 export * from './mixins/disabled-mixin.js';
 export * from './mixins/form-associated-checkbox-mixin.js';

src/elements/core/mixins/animation-complete-mixin.ts

@@ -0,0 +1,80 @@
+import type { LitElement } from 'lit';
+
+import type { AbstractConstructor } from './constructor.js';
+
+export declare class SbbAnimationCompleteMixinType {
+  public isAnimating: boolean;
+  public get animationComplete(): Promise<void> | null;
+  protected startAnimation(): void;
+  protected stopAnimation(): void;
+}
+
+/**
+ * Enhances the component with a Promise which resolves whenever an animation ends.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const SbbAnimationCompleteMixin = <T extends AbstractConstructor<LitElement>>(
+  superClass: T,
+): AbstractConstructor<SbbAnimationCompleteMixinType> & T => {
+  abstract class SbbAnimationCompleteElement
+    extends superClass
+    implements Partial<SbbAnimationCompleteMixinType>
+  {
+    /**
+     * Whether the component is currently animating.
+     */
+    public isAnimating = false;
+
+    /**
+     * Returns a promise which completes whenever an animation ends.
+     * When a new animation starts, a new Promise is returned.
+     */
+    public get animationComplete(): Promise<void> {
+      return this._animationPromise;
+    }
+    private _animationPromise: Promise<void> = Promise.resolve();
+
+    public override disconnectedCallback(): void {
+      super.disconnectedCallback();
+      this.stopAnimation();
+    }
+
+    protected startAnimation(): void {
+      if (!this.isAnimating) {
+        this._animationPromise = this._enqueueAnimation();
+      }
+    }
+
+    /**
+     * Overriding stopAnimation() breaks functionality.
+     */
+    protected stopAnimation(): void {}
+
+    private async _enqueueAnimation(): Promise<void> {
+      this.isAnimating = true;
+      const stopAnimation = this.stopAnimation;
+
+      const result = new Promise<void>((r) => {
+        this.stopAnimation = () => {
+          stopAnimation();
+          this.isAnimating = false;
+          r();
+        };
+      });
+      try {
+        // Ensure any previous update has resolved before updating.
+        await this._animationPromise;
+      } catch (e) {
+        // Refire any previous errors async so they do not disrupt the update
+        // cycle. Errors are re-fired so developers have a chance to observe
+        // them, and this can be done by implementing
+        // `window.onunhandledrejection`.
+        Promise.reject(e);
+      }
+      return result;
+    }
+  }
+
+  return SbbAnimationCompleteElement as unknown as AbstractConstructor<SbbAnimationCompleteMixinType> &
+    T;
+};

src/elements/core/styles/core.scss

@@ -327,3 +327,84 @@ sbb-train-formation[view='top'] sbb-train-wagon {
   --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
   --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
 }
+
+// Skip animation for the container, content and sidebars when a sidebar requests it
+// (during initialization or if animation is disabled, but only during transition)
+sbb-sidebar-container:has(> sbb-sidebar[data-skip-animation]) {
+  --sbb-sidebar-container-animation-duration: 0s;
+}
+
+// Controls the start margin of the sbb-sidebar-content.
+// Whenever the sidebar with position start is in a closed state in over mode (or forced over mode),
+// or if there is no sidebar with position start, then override the margin with 0.
+// Direct child selector is mandatory to enable nested sidebars.
+sbb-sidebar-container:is(
+    :has(
+      > sbb-sidebar:not([position='end']):is(
+          [data-state='closing'],
+          [data-state='closed'],
+          [mode='over'],
+          [data-mode-over-forced]
+        )
+    ),
+    :not(:has(> sbb-sidebar:not([position='end'])))
+  )
+  > sbb-sidebar-content {
+  --sbb-sidebar-content__margin-inline-start: 0;
+}
+
+// Controls the end margin of the sbb-sidebar-content.
+// Whenever the sidebar with position end is in a closed state in over mode (or forced over mode),
+// or if there is no sidebar with position end, then override the margin with 0.
+// Direct child selector is mandatory to enable nested sidebars.
+sbb-sidebar-container:is(
+    :has(
+      > sbb-sidebar[position='end']:is(
+          [data-state='closing'],
+          [data-state='closed'],
+          [mode='over'],
+          [data-mode-over-forced]
+        )
+    ),
+    :not(:has(> sbb-sidebar[position='end']))
+  )
+  > sbb-sidebar-content {
+  --sbb-sidebar-content__margin-inline-end: 0;
+}
+
+// Toggles visibility of backdrop if there is an affected sidebar inside the container.
+sbb-sidebar-container:has(
+    > sbb-sidebar:is([mode='over'], [data-mode-over-forced]):is(
+        [data-state='opening'],
+        [data-state='opened']
+      )
+  ) {
+  --sbb-sidebar-container__backdrop-visibility: visible;
+  --sbb-sidebar-container-backdrop-opacity: 0.4;
+}
+
+// Move the current-page-border to the right side if the sidebar is right positioned
+sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
+  --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
+}
+
+// Set the border radius at the left top side if the sidebar is right positioned
+sbb-icon-sidebar-content + sbb-icon-sidebar {
+  border-start-end-radius: 0;
+  border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
+}
+
+// If there is no close button, avoid reserving any space for the button in the sidebar title
+sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
+  position: absolute;
+}
+
+// If there is a title, remove top spacing for the content
+sbb-sidebar:has(sbb-sidebar-title) {
+  --sbb-sidebar__padding-block-start: 0;
+}
+
+// Move container below header
+sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
+  margin-block-start: var(--sbb-header-height);
+}

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

@@ -30,6 +30,20 @@
   --sbb-link-color-active: var(--sbb-color-silver);
 }
 
+// To display a current active page, e.g. if the CSS class sbb-active is set
+@mixin block-link-variables--active {
+  --sbb-link-color-normal: var(--sbb-color-black);
+  --sbb-link-text-decoration: underline;
+  --sbb-link-text-decoration-color: currentcolor;
+}
+
+// To display a current active page, e.g. if the CSS class sbb-active is set
+@mixin block-link-variables--active-negative {
+  --sbb-link-color-normal: var(--sbb-color-cement);
+  --sbb-link-text-decoration: underline;
+  --sbb-link-text-decoration-color: currentcolor;
+}
+
 @mixin link-variables {
   @include link-common-variables;
 

src/elements/dialog/dialog-title/dialog-title.scss

@@ -6,6 +6,10 @@
   display: contents;
 }
 
+:host([negative]) {
+  @include sbb.title--negative;
+}
+
 :host([data-overflows]) {
   --sbb-dialog-title-padding-block: var(--sbb-spacing-responsive-s);
 }

src/elements/dialog/dialog-title/dialog-title.ts

@@ -9,6 +9,7 @@ import { forceType } from '../../core/decorators.js';
 import type { Breakpoint } from '../../core/dom.js';
 import { EventEmitter } from '../../core/eventing.js';
 import { i18nCloseDialog, i18nGoBack } from '../../core/i18n.js';
+import { SbbNegativeMixin } from '../../core/mixins.js';
 import { SbbTitleBase } from '../../title.js';
 
 import style from './dialog-title.scss?lit&inline';
@@ -23,7 +24,7 @@ import '../../button/transparent-button.js';
  */
 export
 @customElement('sbb-dialog-title')
-class SbbDialogTitleElement extends SbbTitleBase {
+class SbbDialogTitleElement extends SbbNegativeMixin(SbbTitleBase) {
   public static override styles: CSSResultGroup = [SbbTitleBase.styles, style];
   public static readonly events: Record<string, string> = {
     backClick: 'requestBackAction',

src/elements/dialog/dialog-title/readme.md

@@ -61,6 +61,6 @@ If a back button is displayed it emits a `requestBackAction` event on click.
 
 ## Slots
 
-| Name | Description                                |
-| ---- | ------------------------------------------ |
-|      | Use the unnamed slot to display the title. |
+| Name | Description                                             |
+| ---- | ------------------------------------------------------- |
+|      | Use the unnamed slot to place the content of the title. |

src/elements/header/common/header-action.scss

@@ -48,7 +48,7 @@
 }
 
 @include sbb.hover-mq($hover: true) {
-  :host(:hover:not(:active, [data-active], [aria-expanded='true'])) {
+  :host(:hover:not(:active, [data-active])) {
     --sbb-header-action-background-color: var(--sbb-color-milk);
     --sbb-header-action-translate-y: #{sbb.px-to-rem-build(-1)};
     --sbb-header-action-background-inset: calc(var(--sbb-border-width-2x) * -1);