refactor: remove obsolete host-component-properties mixin (#2574)

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;

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;
+}

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: (

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 {

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]) {

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]) {

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]) {

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;

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])';
 

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;

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;
 }

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']) {

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']) {

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;

src/components/checkbox/checkbox-group/checkbox-group.scss

@@ -1,21 +1,22 @@
 @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;
 }
 
 $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']) {

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);

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;

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 {

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);

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);

src/components/core/styles/_index.scss

@@ -21,5 +21,4 @@
 @forward './mixins/typo';
 
 // Internals
-@forward './core/component-utilities';
 @forward './mixins/dev_and_debug';

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;

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;

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);

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;
 

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;
 }