🐛 fix(field): horizontal padding right and label text alignment (#1260)

* Create PR for #1259

* fix(field): remove padding and align label

* chore(): update base images

* chore: trigger build

* chore(): update base images

* chore: trigger build

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>
Co-authored-by: hirsch88 <hirsch88@users.noreply.github.com>

Author: github-actions[bot]

.changeset/proud-houses-promise.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+The horizontal form field now lacks right padding, and the label is aligned to the right.

CHANGELOG_NEXT.md

@@ -1101,7 +1101,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [10.17.2](https://github.com/baloise/design-system/compare/v10.17.1...v10.17.2) (2022-08-11)
 
-
 ### Features
 
 * **nav desktop:** updated dependencies ([7b517a9](https://github.com/baloise/design-system/commit/7b517a950d3823b5c9134bef3dee036c031ffc99))

CHANGELOG_v12.md

@@ -303,7 +303,6 @@ Follow the migration guide [Migration from 11.x to 12.x](https://baloise-design-
 * update @baloise/web-app-utils to solve safari 13 issues ([43c5b13](https://github.com/baloise/design-system/commit/43c5b132b4089346a132dbbda34c15b86860735a))
 * update web-app-utils ([c1dc7e3](https://github.com/baloise/design-system/commit/c1dc7e35250293a9f55fabbcb2ff33507e13b7f7))
 
-
 ### Performance Improvements
 
 * reduce web-app-utils imports ([7c3a21f](https://github.com/baloise/design-system/commit/7c3a21f3d995c3096c0ef23498936ddd6d9b9e3b))

packages/components/src/components/bal-field/bal-field.sass

@@ -23,6 +23,9 @@
 +block(field-message)
   line-height: var(--bal-line-height-normal)
 
++block(field-hidden)
+  +hide-element
+
 +block(field-control)
   display: flex
   align-items: center
@@ -57,8 +60,9 @@
     min-width: var(--bal-field-label-horizontal-width)
     max-width: var(--bal-field-label-horizontal-width)
     justify-content: end
+    text-align: right
     margin-bottom: 0
-  
+
   .bal-field-control
     flex: 1
     padding-bottom: 0
@@ -75,5 +79,5 @@
     .bal-hint
       top: 0
 
-  .bal-field-hint ~ .bal-field-message 
-    margin-left: calc(var(--bal-field-label-horizontal-width) + (var(--bal-field-label-column-gap) * 2) + 1.125rem)
+  .bal-field-hint ~ .bal-field-message
+    margin-left: calc(var(--bal-field-label-horizontal-width) + (var(--bal-field-label-column-gap) * 2) + 1.125rem)

packages/components/src/components/bal-field/bal-field.tsx

@@ -203,7 +203,7 @@ export class Field implements ComponentInterface, BalMutationObserver {
         }}
       >
         <slot></slot>
-        <span class="hidden">{/* Empty slot element to keep the order of the children */}</span>
+        <span class="bal-field-hidden">{/* Empty slot element to keep the order of the children */}</span>
       </Host>
     )
   }