refactor: convert input field style variants to table (#4906)

* convert input field style variants to table

* remove border style from variant examples

* fix cross-reference

* update text alignment variants

---------

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>

Author: sissbruecker

articles/components/_input-field-common-features.adoc

@@ -29,7 +29,7 @@ Visible labels are strongly recommended for all input fields. In cases where the
 ====
 Helpers are used to provide additional information that the user may need to enter in the field, such as format requirements or explanations of the field's purpose below the field.
 
-A style variant is available for rendering the helper <<#helper-above-field,above the field>>.
+A <<styling#style-variants,style variant>> is available for rendering the helper above the field.
 
 In addition to plain text, helpers can contain components and HTML elements. However, complex and interactive content is likely to have accessibility issues.
 ====
@@ -220,53 +220,55 @@ Note: add component-specific live examples after each of these includes.
 ////
 
 
-// tag::styles-intro[]
+// tag::styles-start[]
 [.collapsible-list]
 == Style Variants
 
 The following style variants can be applied:
-// end::styles-intro[]
 
+[cols="1,3,1"]
+|===
+| Variant | Description | Supported by
+
+// end::styles-start[]
 
 // tag::text-alignment[]
-[#text-alignment]
-.Text Alignment
-[%collapsible]
-====
-Three different text alignments are supported: `left`, which is the default; `center`; and `right`.
+|`align-left`
+|Aligns the text to the left side of the field (default)
+|Aura, Lumo
 
-Right-alignment is recommended for numerical values when presented in vertical groups. This tends to aid interpretation and comparison of values.
-====
-// end::text-alignment[]
+|`align-center`
+|Centers the text within the field
+|Lumo
+
+|`align-right`
+|Aligns the text to the right side of the field. Recommended for numerical values when presented in vertical groups.
+|Aura, Lumo
 
+|`align-start`
+|Aligns the text to the start side of the field, taking into account the current text direction (left for LTR, right for RTL)
+|Aura
+
+|`align-end`
+|Aligns the text to the end side of the field, taking into account the current text direction (right for LTR, left for RTL)
+|Aura
+
+// end::text-alignment[]
 
 // tag::small-variant[]
-[#small-variant]
-.Small Variant
-[%collapsible]
-====
-The small variant can be used to make individual fields more compact. The default size of fields can be customized with <<{articles}/components/themes/lumo/lumo-style-properties#,style properties>>.
-====
-// end::small-variant[]
+|`small`
+|Renders a more compact field
+|Lumo
 
+// end::small-variant[]
 
 // tag::helper-above-field[]
-[#helper-above-field]
-.Helper Above Field
-[%collapsible]
-====
-The helper can be rendered above the field, and below the label.
-====
-// end::helper-above-field[]
+|`helper-above-field`
+|Renders the helper above the field, and below the label
+|Aura, Lumo
 
+// end::helper-above-field[]
 
-// tag::borders[]
-[#borders]
-.Borders
-[%collapsible]
-====
-Borders can be applied to the field surface by providing a value (e.g., `1px`) to the `--vaadin-input-field-border-width` CSS property. This can be applied globally to all input fields using the `html` selector, or to individual component instances. Borders are required to achieve https://www.w3.org/TR/WCAG21/#non-text-contrast[WCAG 2.1 level AA] conformant color contrast with the default Lumo styling of fields.
-
-You can override the default border color with the `--vaadin-input-field-border-color` property.
-====
-// end::borders[]
+// tag::styles-end[]
+|===
+// end::styles-end[]

articles/components/checkbox/styling.adoc

@@ -7,17 +7,7 @@ order: 50
 ---
 = Checkbox Styling
 
-include::{articles}/components/_input-field-common-features.adoc[tags=styles-intro]
-
-[cols="1,3,1"]
-|===
-| Variant | Description | Supported by
-
-|`helper-above-field`
-|Positions the helper text above the checkbox group field
-|Aura, Lumo
-
-|===
+include::{articles}/components/_input-field-common-features.adoc[tags=styles-start;helper-above-field;styles-end]
 
 
 [.example]

articles/components/combo-box/index.adoc

@@ -479,7 +479,7 @@ endif::[]
 
 // Style Variants
 
-include::{articles}/components/_input-field-common-features.adoc[tags=styles-intro;text-alignment;small-variant;helper-above-field;borders]
+include::{articles}/components/_input-field-common-features.adoc[tags=styles-start;text-alignment;small-variant;helper-above-field;styles-end]
 
 [.example]
 --

articles/components/date-picker/index.adoc

@@ -312,7 +312,7 @@ endif::[]
 
 // Style Variants
 
-include::{articles}/components/_input-field-common-features.adoc[tags=styles-intro;text-alignment;small-variant;helper-above-field;borders]
+include::{articles}/components/_input-field-common-features.adoc[tags=styles-start;text-alignment;small-variant;helper-above-field;styles-end]
 
 [.example]
 --

articles/components/date-time-picker/index.adoc

@@ -401,7 +401,7 @@ endif::[]
 
 // Style Variants
 
-include::{articles}/components/_input-field-common-features.adoc[tags=styles-intro;text-alignment;small-variant;helper-above-field;borders]
+include::{articles}/components/_input-field-common-features.adoc[tags=styles-start;text-alignment;small-variant;helper-above-field;styles-end]
 
 [.example]
 --

articles/components/email-field/index.adoc

@@ -155,7 +155,7 @@ endif::[]
 
 // Style Variants
 
-include::{articles}/components/_input-field-common-features.adoc[tags=styles-intro;text-alignment;small-variant;helper-above-field;borders]
+include::{articles}/components/_input-field-common-features.adoc[tags=styles-start;text-alignment;small-variant;helper-above-field;styles-end]
 
 [.example]
 --

articles/components/number-field/index.adoc

@@ -276,7 +276,7 @@ endif::[]
 
 // Style Variants
 
-include::{articles}/components/_input-field-common-features.adoc[tags=styles-intro;text-alignment;small-variant;helper-above-field;borders]
+include::{articles}/components/_input-field-common-features.adoc[tags=styles-start;text-alignment;small-variant;helper-above-field;styles-end]
 
 [.example]
 --

articles/components/password-field/index.adoc

@@ -168,7 +168,7 @@ endif::[]
 
 // Style Variants
 
-include::{articles}/components/_input-field-common-features.adoc[tags=styles-intro;text-alignment;small-variant;helper-above-field;borders]
+include::{articles}/components/_input-field-common-features.adoc[tags=styles-start;text-alignment;small-variant;helper-above-field;styles-end]
 
 [.example]
 --

articles/components/radio-button/index.adoc

@@ -236,7 +236,7 @@ endif::[]
 
 // Style Variants
 
-include::{articles}/components/_input-field-common-features.adoc[tags=styles-intro;helper-above-field;borders]
+include::{articles}/components/_input-field-common-features.adoc[tags=styles-start;helper-above-field;styles-end]
 
 [.example]
 --

articles/components/select/index.adoc

@@ -231,7 +231,7 @@ endif::[]
 
 // Style Variants
 
-include::{articles}/components/_input-field-common-features.adoc[tags=styles-intro;text-alignment;small-variant;helper-above-field;borders]
+include::{articles}/components/_input-field-common-features.adoc[tags=styles-start;text-alignment;small-variant;helper-above-field;styles-end]
 
 [.example]
 --