From f09cbaf5f80f6915e815944aefb35bed282b3a02 Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Mon, 15 Apr 2024 13:53:09 +0200 Subject: [PATCH] refactor: remove obsolete host-component-properties mixin (#2574) --- src/components/_index.scss | 4 ++-- src/components/accordion/accordion.scss | 9 +++++--- src/components/action-group/action-group.scss | 9 +++++--- .../alert/alert-group/alert-group.scss | 7 +++--- src/components/alert/alert/alert.scss | 7 +++--- src/components/autocomplete/autocomplete.scss | 7 +++--- .../breadcrumb-group/breadcrumb-group.scss | 7 +++--- .../breadcrumb/breadcrumb/breadcrumb.scss | 5 ++--- .../button/common/button-common.scss | 5 ++--- .../button/mini-button/mini-button.scss | 7 +++--- src/components/calendar/calendar.scss | 7 +++--- .../card/card-badge/card-badge.scss | 7 +++--- src/components/card/card/card.scss | 7 +++--- src/components/card/common/card-action.scss | 7 +++--- .../checkbox-group/checkbox-group.scss | 9 ++++---- .../checkbox/checkbox/checkbox.scss | 5 ++--- src/components/chip/chip.scss | 5 ++--- src/components/clock/clock.scss | 7 +++--- .../container/container/container.scss | 9 +++++--- .../container/sticky-bar/sticky-bar.scss | 5 +++-- src/components/core/styles/_index.scss | 1 - .../core/styles/core/component-utilities.scss | 22 ------------------- .../datepicker-next-day.scss | 5 ++--- .../datepicker-previous-day.scss | 5 ++--- .../datepicker-toggle/datepicker-toggle.scss | 5 ++--- .../dialog/dialog-actions/dialog-actions.scss | 3 +++ .../dialog/dialog-content/dialog-content.scss | 3 +++ .../dialog/dialog-title/dialog-title.scss | 3 +++ src/components/dialog/dialog/dialog.scss | 6 ++--- src/components/divider/divider.scss | 7 +++--- .../expansion-panel-content.scss | 7 +++--- .../expansion-panel-header.scss | 7 +++--- .../expansion-panel/expansion-panel.scss | 7 +++--- .../file-selector/file-selector.scss | 6 ++--- src/components/footer/footer.scss | 7 +++--- src/components/form-error/form-error.scss | 5 ++--- .../form-field-clear/form-field-clear.scss | 7 +++--- .../form-field/form-field/form-field.scss | 5 ++--- .../header/common/header-action.scss | 5 ++--- src/components/header/header/header.scss | 7 +++--- src/components/icon/icon.scss | 5 ++--- src/components/image/image.scss | 7 +++--- .../journey-header/journey-header.scss | 7 +++--- .../journey-summary/journey-summary.scss | 9 +++++--- src/components/link-list/link-list.scss | 7 +++--- src/components/link/common/link.scss | 5 ++--- .../loading-indicator/loading-indicator.scss | 5 ++--- src/components/logo/logo.scss | 6 ++--- .../map-container/map-container.scss | 7 +++--- src/components/menu/common/menu-action.scss | 7 +++--- src/components/menu/menu/menu.scss | 5 ++--- src/components/message/message.scss | 7 +++--- .../navigation/common/navigation-action.scss | 13 ++++++----- .../navigation-list/navigation-list.scss | 9 +++++--- .../navigation-marker/navigation-marker.scss | 7 +++--- .../navigation-section.scss | 5 ++--- .../navigation/navigation/navigation.scss | 6 ++--- src/components/notification/notification.scss | 7 +++--- src/components/option/optgroup/optgroup.scss | 7 +++--- src/components/option/option/option.scss | 7 +++--- src/components/overlay/overlay.scss | 6 ++--- .../pearl-chain-time/pearl-chain-time.scss | 7 +++--- .../pearl-chain-vertical-item.scss | 5 ++--- .../pearl-chain-vertical.scss | 7 +++--- src/components/pearl-chain/pearl-chain.scss | 13 +++++------ .../popover-trigger/popover-trigger.scss | 5 ++--- src/components/popover/popover/popover.scss | 7 +++--- .../radio-button-group.scss | 7 +++--- .../radio-button/radio-button.scss | 7 +++--- src/components/select/select.scss | 7 +++--- .../selection-panel/selection-panel.scss | 5 ++--- src/components/signet/signet.scss | 7 +++--- .../skiplink-list/skiplink-list.scss | 7 +++--- src/components/slider/slider.scss | 5 ++--- src/components/status/status.scss | 7 +++--- src/components/tabs/tab-group/tab-group.scss | 9 +++++--- src/components/tabs/tab-title/tab-title.scss | 5 ++--- src/components/tag/tag-group/tag-group.scss | 9 +++++--- src/components/tag/tag/tag.scss | 5 ++--- src/components/teaser-hero/teaser-hero.scss | 7 +++--- src/components/teaser-paid/teaser-paid.scss | 7 +++--- src/components/teaser/teaser.scss | 5 ++--- .../timetable-duration.scss | 7 ++++++ .../timetable-occupancy.scss | 5 ++--- .../timetable-row/timetable-row.scss | 7 +++--- src/components/title/title.scss | 6 ++--- src/components/toast/toast.scss | 7 +++--- src/components/toggle-check/toggle-check.scss | 5 ++--- .../toggle/toggle-option/toggle-option.scss | 5 ++--- src/components/toggle/toggle/toggle.scss | 7 +++--- .../train-blocked-passage.scss | 7 +++--- .../train-formation/train-formation.scss | 7 +++--- .../train/train-wagon/train-wagon.scss | 7 +++--- src/components/train/train/train.scss | 7 +++--- .../visual-checkbox/visual-checkbox.scss | 7 +++--- .../boilerplate/component.scss | 7 +++--- 96 files changed, 337 insertions(+), 299 deletions(-) delete mode 100644 src/components/core/styles/core/component-utilities.scss diff --git a/src/components/_index.scss b/src/components/_index.scss index 29dfc8eba8..e74ea44dca 100644 --- a/src/components/_index.scss +++ b/src/components/_index.scss @@ -1,2 +1,2 @@ -@forward 'core/styles' hide development-style, host-component-properties, link-base, - link-focus-visible, link-hover, link-active, link-consolidation; +@forward 'core/styles' hide development-style, link-base, link-focus-visible, link-hover, + link-active, link-consolidation; diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss index 41276173c2..16846248ac 100644 --- a/src/components/accordion/accordion.scss +++ b/src/components/accordion/accordion.scss @@ -1,5 +1,8 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + +:host { + display: block; +} diff --git a/src/components/action-group/action-group.scss b/src/components/action-group/action-group.scss index de866b487e..f537a57e1e 100644 --- a/src/components/action-group/action-group.scss +++ b/src/components/action-group/action-group.scss @@ -1,8 +1,11 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + +:host { + display: block; +} $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'; $vertical-orientations: ( diff --git a/src/components/alert/alert-group/alert-group.scss b/src/components/alert/alert-group/alert-group.scss index 21975601a4..dc48aaa76d 100644 --- a/src/components/alert/alert-group/alert-group.scss +++ b/src/components/alert/alert-group/alert-group.scss @@ -1,12 +1,13 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-alert-group-gap: var(--sbb-spacing-fixed-3x); --sbb-alert-group-border-radius: var(--sbb-border-radius-4x); + + display: block; } .sbb-alert-group { diff --git a/src/components/alert/alert/alert.scss b/src/components/alert/alert/alert.scss index 491afe8516..6933ec76a7 100644 --- a/src/components/alert/alert/alert.scss +++ b/src/components/alert/alert/alert.scss @@ -6,9 +6,8 @@ $open-anim-rows-to: 1fr; $open-anim-opacity-from: 0; $open-anim-opacity-to: 1; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark); @@ -31,6 +30,8 @@ $open-anim-opacity-to: 1; outline: var(--sbb-border-width-1x) solid CanvasText; border-radius: var(--sbb-alert-border-radius); } + + display: block; } :host([disable-animation]) { diff --git a/src/components/autocomplete/autocomplete.scss b/src/components/autocomplete/autocomplete.scss index 1ee74e2307..219254c648 100644 --- a/src/components/autocomplete/autocomplete.scss +++ b/src/components/autocomplete/autocomplete.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; // Fixes the gap between the origin and the overlay by creating conjunction // corners based on the origin element border radius @@ -15,6 +14,8 @@ --sbb-autocomplete-z-index, var(--sbb-overlay-default-z-index) ); + + display: block; } :host([negative]) { diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss index 5d2c3bfb7f..8800db08d8 100644 --- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss +++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss @@ -1,12 +1,13 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-breadcrumb-group-wrap: nowrap; --sbb-breadcrumb-group-visibility: hidden; + + display: block; } :host([data-loaded]) { diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.scss b/src/components/breadcrumb/breadcrumb/breadcrumb.scss index 273494497c..8309830d9b 100644 --- a/src/components/breadcrumb/breadcrumb/breadcrumb.scss +++ b/src/components/breadcrumb/breadcrumb/breadcrumb.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { display: flex; diff --git a/src/components/button/common/button-common.scss b/src/components/button/common/button-common.scss index 589f70a868..0fa1093eb7 100644 --- a/src/components/button/common/button-common.scss +++ b/src/components/button/common/button-common.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=unnamed])'; diff --git a/src/components/button/mini-button/mini-button.scss b/src/components/button/mini-button/mini-button.scss index 8a4bf04e83..89cca710cf 100644 --- a/src/components/button/mini-button/mini-button.scss +++ b/src/components/button/mini-button/mini-button.scss @@ -1,10 +1,11 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { + display: block; + // Use !important here to not interfere with Firefox focus ring definition // which appears in normalize css of several frameworks. outline: none !important; diff --git a/src/components/calendar/calendar.scss b/src/components/calendar/calendar.scss index da0207e7ac..a536ad0ef6 100644 --- a/src/components/calendar/calendar.scss +++ b/src/components/calendar/calendar.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-calendar-cell-size: #{sbb.px-to-rem-build(40)}; @@ -33,6 +32,8 @@ --sbb-calendar-control-view-change-height: #{sbb.px-to-rem-build(48)}; } + display: block; + // We add width definition to host, to make overwriting easy for consumers. width: max-content; } diff --git a/src/components/card/card-badge/card-badge.scss b/src/components/card/card-badge/card-badge.scss index df6b2ff05b..ab6714a590 100644 --- a/src/components/card/card-badge/card-badge.scss +++ b/src/components/card/card-badge/card-badge.scss @@ -1,11 +1,12 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-card-badge-gap: var(--sbb-spacing-fixed-2x); + + display: block; } :host([color='white']) { diff --git a/src/components/card/card/card.scss b/src/components/card/card/card.scss index cc3124a52a..665bef8c98 100644 --- a/src/components/card/card/card.scss +++ b/src/components/card/card/card.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; // # Stacking of action // To support content with actions that should be accessible, we have to stack the action and content like following: @@ -11,6 +10,8 @@ :host { @include sbb.card-variables; + + display: block; } :host([color='milk']) { diff --git a/src/components/card/common/card-action.scss b/src/components/card/common/card-action.scss index 1329c9d56b..bc9da7d11a 100644 --- a/src/components/card/common/card-action.scss +++ b/src/components/card/common/card-action.scss @@ -1,10 +1,11 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { + display: block; + // Use !important here to not interfere with Firefox focus ring definition // which appears in normalize css of several frameworks. outline: none !important; diff --git a/src/components/checkbox/checkbox-group/checkbox-group.scss b/src/components/checkbox/checkbox-group/checkbox-group.scss index ea7a0f20b8..42af7b6b2c 100644 --- a/src/components/checkbox/checkbox-group/checkbox-group.scss +++ b/src/components/checkbox/checkbox-group/checkbox-group.scss @@ -1,9 +1,5 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; - @mixin horizontal-orientation { --sbb-checkbox-group-orientation: row; --sbb-checkbox-group-checkbox-width: auto; @@ -11,11 +7,16 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + :host { @include horizontal-orientation; --sbb-checkbox-group-width: max-content; --sbb-checkbox-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x); + + display: block; } :host([orientation='vertical']) { diff --git a/src/components/checkbox/checkbox/checkbox.scss b/src/components/checkbox/checkbox/checkbox.scss index 329010a37b..46e6702eb6 100644 --- a/src/components/checkbox/checkbox/checkbox.scss +++ b/src/components/checkbox/checkbox/checkbox.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-checkbox-dimension: var(--sbb-size-icon-ui-small); diff --git a/src/components/chip/chip.scss b/src/components/chip/chip.scss index 183d5974a0..fb37c26383 100644 --- a/src/components/chip/chip.scss +++ b/src/components/chip/chip.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { display: inline-block; diff --git a/src/components/clock/clock.scss b/src/components/clock/clock.scss index a3b8e2d183..37b21c7ec9 100644 --- a/src/components/clock/clock.scss +++ b/src/components/clock/clock.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-clock-hours-animation-start-angle: 0deg; @@ -11,6 +10,8 @@ --sbb-clock-seconds-animation-duration: 0s; --sbb-clock-animation-play-state: paused; --sbb-clock-seconds-hand-color: var(--sbb-color-red); + + display: block; } .sbb-clock { diff --git a/src/components/container/container/container.scss b/src/components/container/container/container.scss index a87a868913..ee480f12f0 100644 --- a/src/components/container/container/container.scss +++ b/src/components/container/container/container.scss @@ -1,8 +1,11 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + +:host { + display: block; +} :host([color='white']) { --sbb-container-background-color: var(--sbb-color-white); diff --git a/src/components/container/sticky-bar/sticky-bar.scss b/src/components/container/sticky-bar/sticky-bar.scss index d6ce6108bb..7ca31327fd 100644 --- a/src/components/container/sticky-bar/sticky-bar.scss +++ b/src/components/container/sticky-bar/sticky-bar.scss @@ -1,10 +1,11 @@ @use '../../core/styles' as sbb; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + $intersector-overlapping: 1px; :host { - @include sbb.box-sizing; - --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs); --sbb-sticky-bar-fade-in-animation-duration: var(--sbb-animation-duration-5x); --sbb-sticky-bar-fade-out-animation-duration: var(--sbb-animation-duration-2x); diff --git a/src/components/core/styles/_index.scss b/src/components/core/styles/_index.scss index d441e58de0..7897221dca 100644 --- a/src/components/core/styles/_index.scss +++ b/src/components/core/styles/_index.scss @@ -21,5 +21,4 @@ @forward './mixins/typo'; // Internals -@forward './core/component-utilities'; @forward './mixins/dev_and_debug'; diff --git a/src/components/core/styles/core/component-utilities.scss b/src/components/core/styles/core/component-utilities.scss deleted file mode 100644 index 8e1056ff1a..0000000000 --- a/src/components/core/styles/core/component-utilities.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use '../mixins/helpers'; - -// ***************************************************************************** -// -// Each component needs to use the host-component-properties mixin -// to provide a streamlined component experience / developer experience. -// -// ***************************************************************************** - -@mixin host-component-properties { - @include helpers.box-sizing; - - :host { - display: block; - padding: 0; - margin: 0; - background: transparent; - border: 0; - -moz-appearance: none; - -webkit-appearance: none; - } -} diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.scss b/src/components/datepicker/datepicker-next-day/datepicker-next-day.scss index 4b750898fb..6d4d5a654a 100644 --- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.scss +++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { display: flex; diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.scss b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.scss index 02101f88bd..c3c9f7ccb6 100644 --- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.scss +++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { display: flex; diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.scss b/src/components/datepicker/datepicker-toggle/datepicker-toggle.scss index 486a427571..28be7eab08 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.scss +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-datepicker-control-radius: var(--sbb-border-radius-4x); diff --git a/src/components/dialog/dialog-actions/dialog-actions.scss b/src/components/dialog/dialog-actions/dialog-actions.scss index d2a90cf00a..ea9d259c88 100644 --- a/src/components/dialog/dialog-actions/dialog-actions.scss +++ b/src/components/dialog/dialog-actions/dialog-actions.scss @@ -1,5 +1,8 @@ @use '../../core/styles' as sbb; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + :host { display: contents; diff --git a/src/components/dialog/dialog-content/dialog-content.scss b/src/components/dialog/dialog-content/dialog-content.scss index e2d6459b94..a40376fb2f 100644 --- a/src/components/dialog/dialog-content/dialog-content.scss +++ b/src/components/dialog/dialog-content/dialog-content.scss @@ -1,5 +1,8 @@ @use '../../core/styles' as sbb; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + :host { display: contents; } diff --git a/src/components/dialog/dialog-title/dialog-title.scss b/src/components/dialog/dialog-title/dialog-title.scss index 11cebe24c8..a71da6504f 100644 --- a/src/components/dialog/dialog-title/dialog-title.scss +++ b/src/components/dialog/dialog-title/dialog-title.scss @@ -1,5 +1,8 @@ @use '../../core/styles' as sbb; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + :host { --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s) 0; diff --git a/src/components/dialog/dialog/dialog.scss b/src/components/dialog/dialog/dialog.scss index 1f276fa9d7..ab2c1fe622 100644 --- a/src/components/dialog/dialog/dialog.scss +++ b/src/components/dialog/dialog/dialog.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { @include sbb.scrollbar-variables; @@ -28,6 +27,7 @@ var(--sbb-dialog-animation-easing); --sbb-dialog-actions-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud); + display: block; position: fixed; inset: var(--sbb-dialog-inset); z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-default-z-index)); diff --git a/src/components/divider/divider.scss b/src/components/divider/divider.scss index b3c904b171..cdece11213 100644 --- a/src/components/divider/divider.scss +++ b/src/components/divider/divider.scss @@ -1,12 +1,13 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-divider-color: var(--sbb-color-cloud); --sbb-divider-border-width: var(--sbb-border-width-1x); + + display: block; } :host([orientation='vertical']) { diff --git a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss index 58cf5ef9cb..0aa89537f2 100644 --- a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss +++ b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.scss @@ -1,14 +1,15 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-expansion-panel-content-padding-inline: var(--sbb-spacing-fixed-6x); --sbb-expansion-panel-content-padding-inline-start: var( --sbb-expansion-panel-content-padding-inline ); + + display: block; } :host([data-icon-space]) { diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss index 1d37910735..1a99abdbf3 100644 --- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss +++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-expansion-panel-header-cursor: pointer; @@ -14,6 +13,8 @@ @include sbb.if-forced-colors { --sbb-expansion-panel-header-text-color: ButtonText; } + + display: block; } :host([disabled]) { diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.scss b/src/components/expansion-panel/expansion-panel/expansion-panel.scss index 44bcbcc288..2f55406ee6 100644 --- a/src/components/expansion-panel/expansion-panel/expansion-panel.scss +++ b/src/components/expansion-panel/expansion-panel/expansion-panel.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-expansion-panel-animation-duration: var(--sbb-animation-duration-4x); @@ -27,6 +26,8 @@ // Vars which will be used by child components --sbb-expansion-panel-title-gap: var(--sbb-spacing-fixed-4x); --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium); + + display: block; } :host([disabled]) { diff --git a/src/components/file-selector/file-selector.scss b/src/components/file-selector/file-selector.scss index b694b6c002..d274007d3a 100644 --- a/src/components/file-selector/file-selector.scss +++ b/src/components/file-selector/file-selector.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-file-selector-color: var(--sbb-color-black); @@ -12,6 +11,7 @@ --sbb-file-selector-transition-duration: var(--sbb-animation-duration-2x); --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing); + display: block; width: #{sbb.px-to-rem-build(320)}; } diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss index b30921764c..2edfc54751 100644 --- a/src/components/footer/footer.scss +++ b/src/components/footer/footer.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive); @@ -14,6 +13,8 @@ @include sbb.mq($from: small) { --sbb-footer-clock-width: #{sbb.px-to-rem-build(112)}; } + + display: block; } :host([negative]) { diff --git a/src/components/form-error/form-error.scss b/src/components/form-error/form-error.scss index c43ad339ec..7f8d699f8f 100644 --- a/src/components/form-error/form-error.scss +++ b/src/components/form-error/form-error.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-form-error-color: var(--sbb-color-red125); diff --git a/src/components/form-field/form-field-clear/form-field-clear.scss b/src/components/form-field/form-field-clear/form-field-clear.scss index bf7dad4273..a9a859d44b 100644 --- a/src/components/form-field/form-field-clear/form-field-clear.scss +++ b/src/components/form-field/form-field-clear/form-field-clear.scss @@ -1,10 +1,11 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { + display: block; + // Use !important here to not interfere with Firefox focus ring definition // which appears in normalize css of several frameworks. outline: none !important; diff --git a/src/components/form-field/form-field/form-field.scss b/src/components/form-field/form-field/form-field.scss index f3e133e378..85c43a6795 100644 --- a/src/components/form-field/form-field/form-field.scss +++ b/src/components/form-field/form-field/form-field.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-form-field-background-color: var(--sbb-color-white); diff --git a/src/components/header/common/header-action.scss b/src/components/header/common/header-action.scss index 4fbb3dfdf6..5381e3405f 100644 --- a/src/components/header/common/header-action.scss +++ b/src/components/header/common/header-action.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-header-action-padding-inline: var(--sbb-spacing-fixed-5x); diff --git a/src/components/header/header/header.scss b/src/components/header/header/header.scss index 3bbd21163e..77eb6ea5a4 100644 --- a/src/components/header/header/header.scss +++ b/src/components/header/header/header.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { // Overwrites logo in slotted and default case @@ -15,6 +14,8 @@ --sbb-logo-height: #{sbb.px-to-rem-build(20)}; } + display: block; + // Setting the height here reserves the space for the header which will else be lost with fixed position. height: var(--sbb-header-height); } diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss index 840719a169..ade5bf970a 100644 --- a/src/components/icon/icon.scss +++ b/src/components/icon/icon.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { display: inline-block; diff --git a/src/components/image/image.scss b/src/components/image/image.scss index e8139bac4d..0189465a37 100644 --- a/src/components/image/image.scss +++ b/src/components/image/image.scss @@ -1,11 +1,12 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --image-border-radius: var(--sbb-border-radius-4x); + + display: block; } .image__figure { diff --git a/src/components/journey-header/journey-header.scss b/src/components/journey-header/journey-header.scss index e9e443fc5c..f03a52ef53 100644 --- a/src/components/journey-header/journey-header.scss +++ b/src/components/journey-header/journey-header.scss @@ -1,11 +1,12 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-journey-header-gap: var(--sbb-spacing-fixed-1x); + + display: block; } :host([id]) { diff --git a/src/components/journey-summary/journey-summary.scss b/src/components/journey-summary/journey-summary.scss index 38c5277bb3..08407d8958 100644 --- a/src/components/journey-summary/journey-summary.scss +++ b/src/components/journey-summary/journey-summary.scss @@ -1,8 +1,11 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + +:host { + display: block; +} .sbb-journey-summary { @include sbb.text-s--regular; diff --git a/src/components/link-list/link-list.scss b/src/components/link-list/link-list.scss index b646d1df97..7c2f882fea 100644 --- a/src/components/link-list/link-list.scss +++ b/src/components/link-list/link-list.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; @mixin horizontal-orientation { --sbb-link-list-flex-flow: row wrap; @@ -16,6 +15,8 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'; :host { --sbb-link-list-flex-flow: column nowrap; + + display: block; } :host([orientation='horizontal']) { diff --git a/src/components/link/common/link.scss b/src/components/link/common/link.scss index 14ed7e3a1d..2c5f20c2e6 100644 --- a/src/components/link/common/link.scss +++ b/src/components/link/common/link.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { // Use !important here to not interfere with Firefox focus ring definition diff --git a/src/components/loading-indicator/loading-indicator.scss b/src/components/loading-indicator/loading-indicator.scss index 27303a7792..5d9254e296 100644 --- a/src/components/loading-indicator/loading-indicator.scss +++ b/src/components/loading-indicator/loading-indicator.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-loading-indicator-color: var(--sbb-color-red); diff --git a/src/components/logo/logo.scss b/src/components/logo/logo.scss index 126fde4d9d..f652883b40 100644 --- a/src/components/logo/logo.scss +++ b/src/components/logo/logo.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-logo-panel-color: var(--sbb-color-red); @@ -21,6 +20,7 @@ --sbb-logo-word-mark-color: ButtonText !important; } + display: block; height: var(--sbb-logo-height); } diff --git a/src/components/map-container/map-container.scss b/src/components/map-container/map-container.scss index 5b485fdca1..a13e61cd48 100644 --- a/src/components/map-container/map-container.scss +++ b/src/components/map-container/map-container.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-map-container-map-height-zero: #{sbb.px-to-rem-build(295)}; @@ -24,6 +23,8 @@ @include sbb.mq($from: wide) { --sbb-map-container-sidebar-width: #{sbb.px-to-rem-build(480)}; } + + display: block; } .sbb-map-container { diff --git a/src/components/menu/common/menu-action.scss b/src/components/menu/common/menu-action.scss index 9c13563e08..e6134d0fcf 100644 --- a/src/components/menu/common/menu-action.scss +++ b/src/components/menu/common/menu-action.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { // Use !important here to not interfere with Firefox focus ring definition @@ -15,6 +14,8 @@ --sbb-menu-action-cursor: pointer; --sbb-menu-action-color: var(--sbb-color-white); --sbb-menu-action-forced-color-border-color: CanvasText; + + display: block; } :host(:hover:not([disabled])) { diff --git a/src/components/menu/menu/menu.scss b/src/components/menu/menu/menu.scss index 516a46a824..e95c6ac595 100644 --- a/src/components/menu/menu/menu.scss +++ b/src/components/menu/menu/menu.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-menu-position-x: 0; diff --git a/src/components/message/message.scss b/src/components/message/message.scss index 3102980d44..62c14cf321 100644 --- a/src/components/message/message.scss +++ b/src/components/message/message.scss @@ -1,14 +1,15 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-message-subtitle-color: var(--sbb-color-granite); --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s); --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0; --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0; + + display: block; } .sbb-message__container { diff --git a/src/components/navigation/common/navigation-action.scss b/src/components/navigation/common/navigation-action.scss index b450a9a978..3edc2c96a2 100644 --- a/src/components/navigation/common/navigation-action.scss +++ b/src/components/navigation/common/navigation-action.scss @@ -1,16 +1,17 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { + --sbb-navigation-action-color: var(--sbb-color-cloud); + --sbb-navigation-action-icon-display: none; + + display: block; + // Use !important here to not interfere with Firefox focus ring definition // which appears in normalize css of several frameworks. outline: none !important; - - --sbb-navigation-action-color: var(--sbb-color-cloud); - --sbb-navigation-action-icon-display: none; } :host([data-section-action][data-action-active].sbb-active) { diff --git a/src/components/navigation/navigation-list/navigation-list.scss b/src/components/navigation/navigation-list/navigation-list.scss index b7b61d27f8..fc76e71e1b 100644 --- a/src/components/navigation/navigation-list/navigation-list.scss +++ b/src/components/navigation/navigation-list/navigation-list.scss @@ -1,8 +1,11 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + +:host { + display: block; +} .sbb-navigation-list__content { @include sbb.list-reset; diff --git a/src/components/navigation/navigation-marker/navigation-marker.scss b/src/components/navigation/navigation-marker/navigation-marker.scss index 28f0d9ccbf..e1cdb45f6e 100644 --- a/src/components/navigation/navigation-marker/navigation-marker.scss +++ b/src/components/navigation/navigation-marker/navigation-marker.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs); @@ -17,6 +16,8 @@ 1em * var(--sbb-navigation-marker-typo-line-height) / 2 - var(--sbb-navigation-marker-border) / 2 ); + + display: block; } :host([size='s']) { diff --git a/src/components/navigation/navigation-section/navigation-section.scss b/src/components/navigation/navigation-section/navigation-section.scss index 5d35b176fc..f59a421ae3 100644 --- a/src/components/navigation/navigation-section/navigation-section.scss +++ b/src/components/navigation/navigation-section/navigation-section.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-navigation-section-display: none; diff --git a/src/components/navigation/navigation/navigation.scss b/src/components/navigation/navigation/navigation.scss index 4011790e47..011e8743ba 100644 --- a/src/components/navigation/navigation/navigation.scss +++ b/src/components/navigation/navigation/navigation.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; @mixin transition($properties...) { transition: { @@ -31,6 +30,7 @@ --sbb-navigation-width: 100%; --sbb-navigation-height: 100vh; + display: block; position: fixed; inset: var(--sbb-navigation-inset); z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-default-z-index)); diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss index f378f14a90..6f82326efc 100644 --- a/src/components/notification/notification.scss +++ b/src/components/notification/notification.scss @@ -2,9 +2,8 @@ @use 'sass:color'; @use 'node_modules/@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables.scss' as sbb-tokens; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-notification-opacity: 0; @@ -35,6 +34,8 @@ // As the notification has always a light background, we have to fix the focus outline color // to default color for cases where the notification is used in a negative context. --sbb-focus-outline-color: var(--sbb-focus-outline-color-default); + + display: block; } :host(:is([data-state='opened'], [data-state='opening'])) { diff --git a/src/components/option/optgroup/optgroup.scss b/src/components/option/optgroup/optgroup.scss index 3a36af0454..f322973695 100644 --- a/src/components/option/optgroup/optgroup.scss +++ b/src/components/option/optgroup/optgroup.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-optgroup-divider-display: block; @@ -11,6 +10,8 @@ --sbb-optgroup-label-padding-inline: var(--sbb-spacing-fixed-4x); --sbb-optgroup-label-font-size: var(--sbb-typo-scale-0-75x); --sbb-optgroup-label-color: var(--sbb-color-metal); + + display: block; } :host(:first-child) { diff --git a/src/components/option/option/option.scss b/src/components/option/option/option.scss index cfa64df344..06bb282543 100644 --- a/src/components/option/option/option.scss +++ b/src/components/option/option/option.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-option-color: var(--sbb-color-charcoal); @@ -18,6 +17,8 @@ --sbb-option-cursor: pointer; --sbb-option-border-radius: var(--sbb-border-radius-4x); --sbb-option-icon-color: var(--sbb-color-metal); + + display: block; } :host([data-negative]) { diff --git a/src/components/overlay/overlay.scss b/src/components/overlay/overlay.scss index 354ec44a32..450cf199a5 100644 --- a/src/components/overlay/overlay.scss +++ b/src/components/overlay/overlay.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { @include sbb.scrollbar-variables; @@ -19,6 +18,7 @@ --sbb-overlay-content-transition: transform var(--sbb-overlay-animation-duration) var(--sbb-overlay-animation-easing); + display: block; position: fixed; inset: var(--sbb-overlay-inset); z-index: var(--sbb-overlay-z-index, var(--sbb-overlay-default-z-index)); diff --git a/src/components/pearl-chain-time/pearl-chain-time.scss b/src/components/pearl-chain-time/pearl-chain-time.scss index 866bffa5ae..06235f6136 100644 --- a/src/components/pearl-chain-time/pearl-chain-time.scss +++ b/src/components/pearl-chain-time/pearl-chain-time.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-pearl-chain-time-height: auto; @@ -14,6 +13,8 @@ @include sbb.mq($from: medium) { --sbb-pearl-chain-time-height: #{sbb.px-to-rem-build(28)}; } + + display: block; } .sbb-pearl-chain__time { diff --git a/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.scss b/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.scss index fd6974fcc1..2e681dce64 100644 --- a/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.scss +++ b/src/components/pearl-chain-vertical-item/pearl-chain-vertical-item.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { @include sbb.pearl-chain-bullet-variables; diff --git a/src/components/pearl-chain-vertical/pearl-chain-vertical.scss b/src/components/pearl-chain-vertical/pearl-chain-vertical.scss index 96bcb6f4ad..f3547d701e 100644 --- a/src/components/pearl-chain-vertical/pearl-chain-vertical.scss +++ b/src/components/pearl-chain-vertical/pearl-chain-vertical.scss @@ -1,11 +1,12 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-pearl-chain-vertical-width: 100%; + + display: block; } .sbb-pearl-chain-vertical { diff --git a/src/components/pearl-chain/pearl-chain.scss b/src/components/pearl-chain/pearl-chain.scss index 9b193a893a..31b8c261d5 100644 --- a/src/components/pearl-chain/pearl-chain.scss +++ b/src/components/pearl-chain/pearl-chain.scss @@ -14,21 +14,20 @@ } } -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { - @include sbb.pearl-chain-bullet-variables; - - display: block; - --sbb-pearl-chain-height: var(--sbb-border-width-2x); --sbb-pearl-chain-spacing-small: var(--sbb-spacing-fixed-1x); --sbb-pearl-chain-color: var(--sbb-pearl-chain-bullet-color); --sbb-pearl-chain-color-disruption: var(--sbb-pearl-chain-bullet-color-disruption); --sbb-pearl-chain-color-past: var(--sbb-pearl-chain-bullet-color-past); --sbb-pearl-chain-leg-width: 100%; + + @include sbb.pearl-chain-bullet-variables; + + display: block; } .sbb-pearl-chain { diff --git a/src/components/popover/popover-trigger/popover-trigger.scss b/src/components/popover/popover-trigger/popover-trigger.scss index 66b95d514c..acceb3537c 100644 --- a/src/components/popover/popover-trigger/popover-trigger.scss +++ b/src/components/popover/popover-trigger/popover-trigger.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-popover-color: inherit; diff --git a/src/components/popover/popover/popover.scss b/src/components/popover/popover/popover.scss index 06552332ac..597f5fe68b 100644 --- a/src/components/popover/popover/popover.scss +++ b/src/components/popover/popover/popover.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-popover-position: absolute; @@ -23,6 +22,8 @@ // As the popover has always a white background, we have to fix the focus outline color // to default color for cases where the popover is used in a negative context. --sbb-focus-outline-color: var(--sbb-focus-outline-color-default); + + display: block; } :host([disable-animation]) { diff --git a/src/components/radio-button/radio-button-group/radio-button-group.scss b/src/components/radio-button/radio-button-group/radio-button-group.scss index 3018ddd027..243e7cd27d 100644 --- a/src/components/radio-button/radio-button-group/radio-button-group.scss +++ b/src/components/radio-button/radio-button-group/radio-button-group.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; @mixin horizontal-orientation { --sbb-radio-button-group-orientation: row; @@ -15,6 +14,8 @@ $breakpoints: 'zero', 'micro', 'small', 'medium', 'large', 'wide', 'ultra'; --sbb-radio-button-group-width: max-content; --sbb-radio-button-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x); + + display: block; } :host([orientation='vertical']) { diff --git a/src/components/radio-button/radio-button/radio-button.scss b/src/components/radio-button/radio-button/radio-button.scss index bfd1a4ae94..0a8a37b0e3 100644 --- a/src/components/radio-button/radio-button/radio-button.scss +++ b/src/components/radio-button/radio-button/radio-button.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-radio-button-label-color: var(--sbb-color-charcoal); @@ -26,6 +25,8 @@ (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 ); + display: block; + // Use !important here to not interfere with Firefox focus ring definition // which appears in normalize css of several frameworks. outline: none !important; diff --git a/src/components/select/select.scss b/src/components/select/select.scss index e263475426..c6eff20dd2 100644 --- a/src/components/select/select.scss +++ b/src/components/select/select.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; // Fixes the gap between the origin and the overlay by creating conjunction // corners based on the origin element border radius @@ -15,6 +14,8 @@ --sbb-select-z-index, var(--sbb-overlay-default-z-index) ); + + display: block; } :host([negative]) { diff --git a/src/components/selection-panel/selection-panel.scss b/src/components/selection-panel/selection-panel.scss index 9d4ce5c12b..2f95653b53 100644 --- a/src/components/selection-panel/selection-panel.scss +++ b/src/components/selection-panel/selection-panel.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; // Open/Close animation vars $open-anim-rows-from: 0fr; diff --git a/src/components/signet/signet.scss b/src/components/signet/signet.scss index 9f154d4034..bd7071e46a 100644 --- a/src/components/signet/signet.scss +++ b/src/components/signet/signet.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-signet-background-color: var(--sbb-color-red); @@ -14,6 +13,8 @@ --sbb-signet-background-color: ButtonText !important; --sbb-signet-icon-color: Canvas !important; } + + display: block; } :host([protective-room='minimal']) { diff --git a/src/components/skiplink-list/skiplink-list.scss b/src/components/skiplink-list/skiplink-list.scss index 1e3ba4563b..40ae6893ab 100644 --- a/src/components/skiplink-list/skiplink-list.scss +++ b/src/components/skiplink-list/skiplink-list.scss @@ -1,14 +1,15 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-skiplink-list-height: 0; --sbb-skiplink-list-overflow: hidden; --sbb-skiplink-list-background: transparent; --sbb-skiplink-list-border: unset; + + display: block; } .sbb-skiplink-list__wrapper { diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss index 9cb88057cf..ce2e725f47 100644 --- a/src/components/slider/slider.scss +++ b/src/components/slider/slider.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-slider-line-height: #{sbb.px-to-rem-build(4)}; diff --git a/src/components/status/status.scss b/src/components/status/status.scss index a0326bbc75..9dc3914e25 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; $has-title: ':is([data-slot-names~=title], [title-content])'; @@ -11,6 +10,8 @@ $has-title: ':is([data-slot-names~=title], [title-content])'; --sbb-status-icon-color: var(--sbb-color-iron); --sbb-status-text-color: var(--sbb-color-iron); --_sbb-status-icon-font-size: var(--sbb-font-size-text-s); + + display: block; } :host([type='error']) { diff --git a/src/components/tabs/tab-group/tab-group.scss b/src/components/tabs/tab-group/tab-group.scss index 5d590c9f77..3eaeed343d 100644 --- a/src/components/tabs/tab-group/tab-group.scss +++ b/src/components/tabs/tab-group/tab-group.scss @@ -1,8 +1,11 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + +:host { + display: block; +} .tab-group { display: flex; diff --git a/src/components/tabs/tab-title/tab-title.scss b/src/components/tabs/tab-title/tab-title.scss index fbbe98366b..98015ba314 100644 --- a/src/components/tabs/tab-title/tab-title.scss +++ b/src/components/tabs/tab-title/tab-title.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-tab-title-height: var(--sbb-spacing-fixed-12x); diff --git a/src/components/tag/tag-group/tag-group.scss b/src/components/tag/tag-group/tag-group.scss index 057acb38ef..228343020c 100644 --- a/src/components/tag/tag-group/tag-group.scss +++ b/src/components/tag/tag-group/tag-group.scss @@ -1,8 +1,11 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + +:host { + display: block; +} .sbb-tag-group__list { @include sbb.list-reset; diff --git a/src/components/tag/tag/tag.scss b/src/components/tag/tag/tag.scss index 4e683758ef..b8bc0a8ce9 100644 --- a/src/components/tag/tag/tag.scss +++ b/src/components/tag/tag/tag.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-tag-border-radius: var(--sbb-border-radius-infinity); diff --git a/src/components/teaser-hero/teaser-hero.scss b/src/components/teaser-hero/teaser-hero.scss index 8ec9963891..949e327ecf 100644 --- a/src/components/teaser-hero/teaser-hero.scss +++ b/src/components/teaser-hero/teaser-hero.scss @@ -1,10 +1,11 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { + display: block; + // Use !important here to not interfere with Firefox focus ring definition // which appears in normalize css of several frameworks. outline: none !important; diff --git a/src/components/teaser-paid/teaser-paid.scss b/src/components/teaser-paid/teaser-paid.scss index 9fa678c9be..bc91b7b9fd 100644 --- a/src/components/teaser-paid/teaser-paid.scss +++ b/src/components/teaser-paid/teaser-paid.scss @@ -1,10 +1,11 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { + display: block; + // Use !important here to not interfere with Firefox focus ring definition // which appears in normalize css of several frameworks. outline: none !important; diff --git a/src/components/teaser/teaser.scss b/src/components/teaser/teaser.scss index daecc89e9c..850bd2f4f2 100644 --- a/src/components/teaser/teaser.scss +++ b/src/components/teaser/teaser.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { display: inline-block; diff --git a/src/components/timetable-duration/timetable-duration.scss b/src/components/timetable-duration/timetable-duration.scss index 5cf87f7937..0af58416ea 100644 --- a/src/components/timetable-duration/timetable-duration.scss +++ b/src/components/timetable-duration/timetable-duration.scss @@ -1,5 +1,12 @@ @use '../core/styles' as sbb; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; + +:host { + display: inline-block; +} + .duration { @include sbb.text-s--regular; diff --git a/src/components/timetable-occupancy/timetable-occupancy.scss b/src/components/timetable-occupancy/timetable-occupancy.scss index 153e7da5fb..24eb4e44d6 100644 --- a/src/components/timetable-occupancy/timetable-occupancy.scss +++ b/src/components/timetable-occupancy/timetable-occupancy.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-timetable-occupancy-color: var(--sbb-color-charcoal); diff --git a/src/components/timetable-row/timetable-row.scss b/src/components/timetable-row/timetable-row.scss index 90350aadce..9a0d4b0966 100644 --- a/src/components/timetable-row/timetable-row.scss +++ b/src/components/timetable-row/timetable-row.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-timetable-row-gap: var(--sbb-spacing-fixed-2x); @@ -10,6 +9,8 @@ --sbb-timetable-row-height-header: #{sbb.px-to-rem-build(20)}; --sbb-timetable-row-height-footer: #{sbb.px-to-rem-build(16)}; --sbb-timetable-row-skeleton-pulse-duration: 1800ms; + + display: block; } :host([disable-animation]) { diff --git a/src/components/title/title.scss b/src/components/title/title.scss index 9c631fcac2..15a341ae80 100644 --- a/src/components/title/title.scss +++ b/src/components/title/title.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-title-text-color-normal: var( @@ -12,6 +11,7 @@ --sbb-title-margin-block-start: 0; --sbb-title-margin-block-end: 0; + display: block; margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end); } diff --git a/src/components/toast/toast.scss b/src/components/toast/toast.scss index e40017fe4d..526e57bbbb 100644 --- a/src/components/toast/toast.scss +++ b/src/components/toast/toast.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-toast-max-width: #{sbb.px-to-rem-build(400)}; @@ -20,6 +19,8 @@ --sbb-toast-container-position: fixed; --sbb-toast-horizontal-position: initial; --sbb-toast-vertical-position: initial; + + display: block; } :host([disable-animation]) { diff --git a/src/components/toggle-check/toggle-check.scss b/src/components/toggle-check/toggle-check.scss index e2d4149a98..e9f0f3b753 100644 --- a/src/components/toggle-check/toggle-check.scss +++ b/src/components/toggle-check/toggle-check.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { display: inline-block; diff --git a/src/components/toggle/toggle-option/toggle-option.scss b/src/components/toggle/toggle-option/toggle-option.scss index 06d48a320a..27c70fb6db 100644 --- a/src/components/toggle/toggle-option/toggle-option.scss +++ b/src/components/toggle/toggle-option/toggle-option.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-toggle-option-cursor: pointer; diff --git a/src/components/toggle/toggle/toggle.scss b/src/components/toggle/toggle/toggle.scss index d6c43eb9b7..e8082fc028 100644 --- a/src/components/toggle/toggle/toggle.scss +++ b/src/components/toggle/toggle/toggle.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-toggle-width: fit-content; @@ -25,6 +24,8 @@ --sbb-toggle-selected-option-border-color: Highlight; --sbb-toggle-border-width: var(--sbb-border-width-2x); } + + display: block; } :host([even]) { diff --git a/src/components/train/train-blocked-passage/train-blocked-passage.scss b/src/components/train/train-blocked-passage/train-blocked-passage.scss index 63a640824c..23990caae5 100644 --- a/src/components/train/train-blocked-passage/train-blocked-passage.scss +++ b/src/components/train/train-blocked-passage/train-blocked-passage.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-train-blocked-passage-height: var(--sbb-train-formation-wagon-height); @@ -17,6 +16,8 @@ --sbb-train-blocked-passage-background-color: CanvasText; --sbb-train-blocked-passage-bar-color: Canvas; } + + display: block; } .sbb-train-blocked-passage { diff --git a/src/components/train/train-formation/train-formation.scss b/src/components/train/train-formation/train-formation.scss index 1c84b4587f..62ddf7a844 100644 --- a/src/components/train/train-formation/train-formation.scss +++ b/src/components/train/train-formation/train-formation.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-train-formation-inline-padding: var(--sbb-spacing-fixed-4x); @@ -14,6 +13,8 @@ @include sbb.if-forced-colors { --sbb-train-formation-sector-line-color: CanvasText; } + + display: block; } :host([hide-wagon-label]) { diff --git a/src/components/train/train-wagon/train-wagon.scss b/src/components/train/train-wagon/train-wagon.scss index 5eeb6866c2..87cc1d9580 100644 --- a/src/components/train/train-wagon/train-wagon.scss +++ b/src/components/train/train-wagon/train-wagon.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-train-wagon-width: var(--sbb-train-formation-wagon-width); @@ -19,6 +18,8 @@ @include sbb.if-forced-colors { --sbb-train-wagon-shape-color-closed: CanvasText; } + + display: block; } .sbb-train-wagon { diff --git a/src/components/train/train/train.scss b/src/components/train/train/train.scss index 575a55017c..a65007945f 100644 --- a/src/components/train/train/train.scss +++ b/src/components/train/train/train.scss @@ -1,8 +1,7 @@ @use '../../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-train-direction-spacing: var(--sbb-spacing-fixed-4x); @@ -26,6 +25,8 @@ @include sbb.if-forced-colors { --sbb-train-direction-line-color: CanvasText; } + + display: block; } .sbb-train { diff --git a/src/components/visual-checkbox/visual-checkbox.scss b/src/components/visual-checkbox/visual-checkbox.scss index 01d8d725ac..fd46080f42 100644 --- a/src/components/visual-checkbox/visual-checkbox.scss +++ b/src/components/visual-checkbox/visual-checkbox.scss @@ -1,8 +1,7 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small); @@ -17,6 +16,8 @@ --sbb-visual-checkbox-selection-color: Canvas; --sbb-visual-checkbox-border-width: 0; } + + display: block; } :host([negative]) { diff --git a/tools/generate-component/boilerplate/component.scss b/tools/generate-component/boilerplate/component.scss index 1ce72075b9..ef56aad152 100644 --- a/tools/generate-component/boilerplate/component.scss +++ b/tools/generate-component/boilerplate/component.scss @@ -1,11 +1,12 @@ @use '../core/styles' as sbb; -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; +// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component. +@include sbb.box-sizing; :host { --__name__-some-color-var: var(--color-black); + + display: block; } .__name__ {