wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/components/dropdown-multiselect/vds-basic-dropdown-multiselect.stories.js

@@ -22,6 +22,10 @@ export default {
             options: ["click", "hover"],
             control: { type: "select" }
         },
+        position: {
+            options: ["top", "bottom", "left", "right", "top-start", "top-end", "bottom-start", "bottom-end"],
+            control: { type: "select" }
+        },
     },
 };
 const styles = `
@@ -52,6 +56,7 @@ const codeTemplate = (args) => {
         match-width="${args.matchWidth}"
         auto-position="${args.autoPosition}"
         backdrop="${args.backdrop}"
+        position="${args.position}"
     >
         <vds-dropdown-group-header class="content-item" size="${args.size}">Fruits</vds-dropdown-group-header>
         <vds-dropdown-item class="content-item" value="apple" label="Apple" has-checkmark="true" size="${args.size}"></vds-dropdown-item>
@@ -85,7 +90,8 @@ BasicUsage.args = {
     maxHeight: "",
     matchWidth: true,
     autoPosition: false,
-    backdrop: true
+    backdrop: true,
+    position: "bottom"
 };
 const codeTemplateDisplayLimit = (args) => {
     return `
@@ -99,6 +105,7 @@ const codeTemplateDisplayLimit = (args) => {
         display-selection-limit-text="${args.displaySelectionLimitText}"
         match-width="${args.matchWidth}"
         auto-position="${args.autoPosition}"
+        position="${args.position}"
     >
         <vds-dropdown-group-header class="content-item">Fruits</vds-dropdown-group-header>
         <vds-dropdown-item class="content-item" value="apple" label="Apple" has-checkmark="true"></vds-dropdown-item>
@@ -119,7 +126,8 @@ DisplayLimit.args = {
     displaySelectionLimit: 4,
     displaySelectionLimitText: "Items selected",
     matchWidth: true,
-    autoPosition: false
+    autoPosition: false,
+    position: "bottom"
 };
 const codeTemplateMaxContentLimit = (args) => {
     const meals = [
@@ -187,6 +195,7 @@ const codeTemplateMaxContentLimit = (args) => {
         match-width="${args.matchWidth}"
         max-height="${args.maxHeight}"
         auto-position="${args.autoPosition}"
+        position="${args.position}"
     >
         ${htmlItems}
     </vds-basic-dropdown-multiselect>
@@ -199,7 +208,8 @@ MaxContent.args = {
     informativeIcon: undefined,
     matchWidth: true,
     maxHeight: "300px",
-    autoPosition: false
+    autoPosition: false,
+    position: "bottom"
 };
 const codeCheckboxTemplate = (args) => {
     return `
@@ -219,6 +229,7 @@ const codeCheckboxTemplate = (args) => {
         show-clear-button="${args.showClearButton}"
         match-width="${args.matchWidth}"
         auto-position="${args.autoPosition}"
+        position="${args.position}"
     >
         <vds-dropdown-group-header class="content-item" size="${args.size}">Weekdays</vds-dropdown-group-header>
         <vds-dropdown-item class="content-item" value="monday" label="Monday" size="${args.size}" has-checkmark="true" checkmark-variant="checkbox"></vds-dropdown-item>
@@ -247,6 +258,6 @@ CheckboxUsage.args = {
     displaySelectionLimitText: "days selected",
     showClearButton: true,
     matchWidth: true,
-    autoPosition: false
+    autoPosition: false,
+    position: "bottom"
 };
-//# sourceMappingURL=vds-basic-dropdown-multiselect.stories.js.map

package/dist/collection/components/field/vds-field.css

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,23 +909,9 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
-/* This mixing can be used to implement font styling. 
- * to do so, you need to import the scss file and used @include font-style(title, medium);
- * This will implement styling according to the $volt-font-styles map
- */
 :host {
   display: block;
+  --vds-field-helper-text-align: start;
 }
 :host .vds__field__container {
   display: flex;
@@ -920,6 +922,7 @@
 :host .vds__field__container .vds__field--helper-text {
   display: block;
   color: var(--color-text-medium);
+  text-align: var(--vds-field-helper-text-align);
 }
 :host .vds__field__container .vds__field--error-message {
   display: block;

package/dist/collection/components/field/vds-field.js

@@ -1,26 +1,154 @@
 import { Host, h } from "@stencil/core";
 import { combineClasses } from "../../utils/combine-classes";
+/**
+ * @component vds-field
+ * @description A layout wrapper component for form controls. It composes a label (`vds-label`),
+ * a slotted form control (e.g. `vds-basic-input`, `vds-textarea`, a native `<select>`, etc.),
+ * an optional helper text, and an optional error message into a single consistently spaced column.
+ *
+ * The component is intentionally agnostic about its slotted content — any form control can be
+ * projected into the default slot. In practice it is consumed internally by higher-level
+ * components such as `vds-input` (volt-extended-components) and `vds-textarea`, which pass their
+ * own child element as the slotted control and forward their props to `vds-field`.
+ *
+ * @slot default - The form control to render inside the field (e.g. `vds-basic-input`, `<select>`, `<textarea>`).
+ *
+ * ---
+ *
+ * @example
+ * <!-- Basic usage with a native input -->
+ * <vds-field label="Username">
+ *   <input type="text" placeholder="Enter your username" />
+ * </vds-field>
+ *
+ * @example
+ * <!-- With helper text -->
+ * <vds-field label="Email" helper-text="We will never share your email address.">
+ *   <input type="email" placeholder="you@example.com" />
+ * </vds-field>
+ *
+ * @example
+ * <!-- With error message (replaces helper text visually) -->
+ * <vds-field label="Password" error-message="Password must be at least 8 characters.">
+ *   <input type="password" />
+ * </vds-field>
+ *
+ * @example
+ * <!-- Required field -->
+ * <vds-field label="Full name" is-required="true">
+ *   <input type="text" />
+ * </vds-field>
+ *
+ * @example
+ * <!-- Disabled state — disables pointer events on the whole field -->
+ * <vds-field label="Read-only value" is-disabled="true" helper-text="This field cannot be edited.">
+ *   <input type="text" value="John Doe" disabled />
+ * </vds-field>
+ *
+ * @example
+ * <!-- Size variants: "small" | "medium" (default) | "large" -->
+ * <vds-field label="Small field" size="small" helper-text="Small size helper text.">
+ *   <input type="text" />
+ * </vds-field>
+ * <vds-field label="Large field" size="large" helper-text="Large size helper text.">
+ *   <input type="text" />
+ * </vds-field>
+ *
+ * @example
+ * <!-- Colored helper text using a Volt color token -->
+ * <vds-field
+ *   label="Status"
+ *   helper-text="Everything looks good."
+ *   helper-text-color="healthy-main"
+ * >
+ *   <input type="text" value="Active" />
+ * </vds-field>
+ *
+ * @example
+ * <!-- Align helper text to the right via the CSS custom property -->
+ * <style>
+ *   vds-field.right-aligned {
+ *     --vds-field-helper-text-align: right;
+ *   }
+ * </style>
+ * <vds-field class="right-aligned" label="Character count" helper-text="42 / 100">
+ *   <input type="text" />
+ * </vds-field>
+ *
+ * @example
+ * <!-- Real-world pattern: used internally by vds-input (volt-extended-components).
+ *      vds-input renders vds-field and projects vds-basic-input into the default slot. -->
+ * <vds-field
+ *   label="Search"
+ *   helper-text="Enter a keyword to search."
+ *   is-required="true"
+ *   size="medium"
+ * >
+ *   <vds-basic-input type="text" placeholder="e.g. dashboard" size="medium"></vds-basic-input>
+ * </vds-field>
+ *
+ * @example
+ * <!-- Slotting any arbitrary control (native select) -->
+ * <vds-field label="Country" helper-text="Select your country of residence.">
+ *   <select>
+ *     <option value="us">United States</option>
+ *     <option value="mx">Mexico</option>
+ *     <option value="ca">Canada</option>
+ *   </select>
+ * </vds-field>
+ *
+ * ---
+ *
+ * @cssvar --vds-field-helper-text-align {string} Controls the `text-align` of the helper text.
+ *   Defaults to `start`. Override to `right`, `center`, or `end` as needed.
+ */
 export class VdsField {
     constructor() {
-        /** Toggles the required sign in the field */
+        /**
+         * Toggles the required indicator in the field label
+         * @type {boolean}
+         * @default false
+         */
         this.isRequired = false;
-        /** Sets the field in disabled state */
+        /**
+         * Sets the field in disabled state
+         * @type {boolean}
+         * @default false
+         */
         this.isDisabled = false;
-        /** Sets the field's size */
+        /**
+         * Sets the field's size
+         * @type {"small" | "medium" | "large"}
+         * @default "medium"
+         */
         this.size = "medium";
     }
+    /**
+     * Renders the field label if provided
+     * @private
+     * @returns {HTMLStencilElement | null} The label element or null
+     */
     getLabel() {
         if (!this.label)
             return null;
         return (h("vds-label", { labelValue: this.label, required: this.isRequired, size: this.size }));
     }
+    /**
+     * Renders the helper text if provided
+     * @private
+     * @returns {HTMLStencilElement | null} The helper text element or null
+     */
     getHelperText() {
         if (!this.helperText)
             return null;
         return (h("span", { class: `vds__field--helper-text ${this.helperTextColor ? `vds__field--helper-text-${this.helperTextColor}` : ""}` }, this.helperText));
     }
+    /**
+     * Renders the component
+     * @returns {HTMLStencilElement} The rendered component
+     */
     render() {
-        return (h(Host, { key: 'e6e75aacdedc9e72c78438550a4425eefe1db6df', class: this.isDisabled ? "vds-field--disabled" : "" }, h("div", { key: '000b2c6af8c98128169997eb49359e19014bcafb', class: combineClasses("vds__field__container", `vds__field__container--size-${this.size}`, `${this.isDisabled ? "vds__field__container--disabled" : ""}`) }, this.getLabel(), h("slot", { key: '0719275acb47039cabcbb8632cb922c97d3684bf' }), this.getHelperText(), this.errorMessage && h("span", { key: 'd6e8a9075892b2a5ce95c28ec389a1b5f5c41c66', class: "vds__field--error-message" }, this.errorMessage))));
+        return (h(Host, { key: '3f2eed5ad942f6721b5fa9ab514f5d34b9df3233', class: this.isDisabled ? "vds-field--disabled" : "" }, h("div", { key: '09ac80d200019003cd39492df7f546116da62d8b', class: combineClasses("vds__field__container", `vds__field__container--size-${this.size}`, `${this.isDisabled ? "vds__field__container--disabled" : ""}`) }, this.getLabel(), h("slot", { key: '25d8443ab38b9e091f3710f621bc5bba8e936501' }), this.getHelperText(), this.errorMessage && h("span", { key: '9bb69da4d4d102101dc45db35eb3f3a78e14f5bc', class: "vds__field--error-message" }, this.errorMessage))));
     }
     static get is() { return "vds-field"; }
     static get encapsulation() { return "shadow"; }
@@ -47,8 +175,11 @@ export class VdsField {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the field's label"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the field's label text"
                 },
                 "getter": false,
                 "setter": false,
@@ -66,8 +197,14 @@ export class VdsField {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Toggles the required sign in the field"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Toggles the required indicator in the field label"
                 },
                 "getter": false,
                 "setter": false,
@@ -86,7 +223,13 @@ export class VdsField {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{boolean}"
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
                     "text": "Sets the field in disabled state"
                 },
                 "getter": false,
@@ -106,8 +249,11 @@ export class VdsField {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the field's helper text"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the field's helper text displayed below the input"
                 },
                 "getter": false,
                 "setter": false,
@@ -119,20 +265,24 @@ export class VdsField {
                 "mutable": true,
                 "complexType": {
                     "original": "Colors",
-                    "resolved": "ThemeColors | \"static-brand-50\" | \"static-brand-100\" | \"static-brand-200\" | \"static-brand-300\" | \"static-brand-400\" | \"static-brand-500\" | \"static-brand-main\" | \"static-brand-600\" | \"static-brand-700\" | \"static-brand-800\" | \"static-brand-900\" | \"static-brand-950\" | \"static-brand-1000\" | \"static-brand-1000-medium\" | \"static-brand-1000-low\" | \"static-brand-1000-lower\" | \"static-brand-1000-lowest\" | \"static-green-50\" | \"static-green-100\" | \"static-green-200\" | \"static-green-300\" | \"static-green-400\" | \"static-green-500\" | \"static-green-main\" | \"static-green-600\" | \"static-green-700\" | \"static-green-800\" | \"static-green-900\" | \"static-green-950\" | \"static-grey-50\" | \"static-grey-100\" | \"static-grey-200\" | \"static-grey-300\" | \"static-grey-400\" | \"static-grey-500\" | \"static-grey-main\" | \"static-grey-600\" | \"static-grey-700\" | \"static-grey-800\" | \"static-grey-900\" | \"static-grey-950\" | \"static-neutral-50\" | \"static-neutral-100\" | \"static-neutral-200\" | \"static-neutral-300\" | \"static-neutral-400\" | \"static-neutral-500\" | \"static-neutral-main\" | \"static-neutral-600\" | \"static-neutral-700\" | \"static-neutral-800\" | \"static-neutral-900\" | \"static-neutral-950\" | \"static-neutral-400-medium\" | \"static-neutral-400-low\" | \"static-neutral-400-lower\" | \"static-neutral-800-medium\" | \"static-neutral-800-low\" | \"static-orange-50\" | \"static-orange-100\" | \"static-orange-200\" | \"static-orange-300\" | \"static-orange-400\" | \"static-orange-500\" | \"static-orange-main\" | \"static-orange-600\" | \"static-orange-700\" | \"static-orange-800\" | \"static-orange-900\" | \"static-orange-950\" | \"static-red-50\" | \"static-red-100\" | \"static-red-200\" | \"static-red-300\" | \"static-red-400\" | \"static-red-500\" | \"static-red-main\" | \"static-red-600\" | \"static-red-700\" | \"static-red-800\" | \"static-red-900\" | \"static-red-950\" | \"static-yellow-50\" | \"static-yellow-100\" | \"static-yellow-200\" | \"static-yellow-300\" | \"static-yellow-400\" | \"static-yellow-500\" | \"static-yellow-main\" | \"static-yellow-600\" | \"static-yellow-700\" | \"static-yellow-800\" | \"static-yellow-900\" | \"static-yellow-950\" | \"static-white\" | \"static-white-medium\" | \"static-white-low\" | \"static-white-lower\" | \"static-white-lowest\" | \"static-black\" | \"static-black-medium\" | \"static-black-low\" | \"static-black-lower\" | \"static-black-lowest\"",
+                    "resolved": "\"box-shadow-color-01\" | \"box-shadow-color-02\" | \"color-background-brand-default\" | \"color-background-brand-hover\" | \"color-background-brand-press\" | \"color-background-caution-default\" | \"color-background-caution-lowest-default\" | \"color-background-caution-lowest-hover\" | \"color-background-caution-lowest-press\" | \"color-background-danger-default\" | \"color-background-danger-high-default\" | \"color-background-danger-high-hover\" | \"color-background-danger-high-press\" | \"color-background-danger-lowest-default\" | \"color-background-danger-lowest-hover\" | \"color-background-danger-lowest-press\" | \"color-background-disabled\" | \"color-background-general-default\" | \"color-background-general-lowest-default\" | \"color-background-general-lowest-hover\" | \"color-background-general-lowest-press\" | \"color-background-healthy-default\" | \"color-background-healthy-lowest-default\" | \"color-background-healthy-lowest-hover\" | \"color-background-healthy-lowest-press\" | \"color-background-information-default\" | \"color-background-information-lowest-default\" | \"color-background-information-lowest-hover\" | \"color-background-information-lowest-press\" | \"color-background-neutral-default\" | \"color-background-neutral-hover\" | \"color-background-neutral-lowest-default\" | \"color-background-neutral-lowest-hover\" | \"color-background-neutral-lowest-press\" | \"color-background-neutral-press\" | \"color-background-warning-default\" | \"color-background-warning-lowest-default\" | \"color-background-warning-lowest-hover\" | \"color-background-warning-lowest-press\" | \"color-border-brand\" | \"color-border-brand-hover\" | \"color-border-caution\" | \"color-border-danger\" | \"color-border-disabled\" | \"color-border-focus-1\" | \"color-border-focus-2\" | \"color-border-general\" | \"color-border-healthy\" | \"color-border-high\" | \"color-border-information\" | \"color-border-low\" | \"color-border-lower\" | \"color-border-lowest\" | \"color-border-medium\" | \"color-border-warning\" | \"color-border-white-high\" | \"color-border-white-low\" | \"color-border-white-lower\" | \"color-border-white-lowest\" | \"color-border-white-medium\" | \"color-icon-brand-default\" | \"color-icon-brand-hover\" | \"color-icon-brand-press\" | \"color-icon-caution\" | \"color-icon-danger\" | \"color-icon-disabled\" | \"color-icon-general\" | \"color-icon-healthy\" | \"color-icon-high\" | \"color-icon-information\" | \"color-icon-low\" | \"color-icon-medium\" | \"color-icon-warning\" | \"color-icon-white-high\" | \"color-icon-white-low\" | \"color-icon-white-medium\" | \"color-interaction-backdrop\" | \"color-interaction-black-low\" | \"color-interaction-black-lower\" | \"color-interaction-black-lowest\" | \"color-interaction-black-medium\" | \"color-interaction-brand-low\" | \"color-interaction-brand-lower\" | \"color-interaction-brand-lowest\" | \"color-interaction-brand-medium\" | \"color-interaction-danger-low\" | \"color-interaction-danger-lower\" | \"color-interaction-danger-lowest\" | \"color-interaction-danger-medium\" | \"color-interaction-white-low\" | \"color-interaction-white-lower\" | \"color-interaction-white-lowest\" | \"color-interaction-white-medium\" | \"color-link-default\" | \"color-link-hover\" | \"color-link-press\" | \"color-text-brand\" | \"color-text-caution-high\" | \"color-text-caution-medium\" | \"color-text-danger-high\" | \"color-text-danger-medium\" | \"color-text-disabled\" | \"color-text-general-high\" | \"color-text-general-medium\" | \"color-text-healthy-high\" | \"color-text-healthy-medium\" | \"color-text-high\" | \"color-text-information-high\" | \"color-text-information-medium\" | \"color-text-low\" | \"color-text-medium\" | \"color-text-warning-high\" | \"color-text-warning-medium\" | \"color-text-white-high\" | \"color-text-white-low\" | \"color-text-white-medium\" | \"static-black\" | \"static-black-low\" | \"static-black-lower\" | \"static-black-lowest\" | \"static-black-medium\" | \"static-brand-100\" | \"static-brand-1000\" | \"static-brand-1000-low\" | \"static-brand-1000-lower\" | \"static-brand-1000-lowest\" | \"static-brand-1000-medium\" | \"static-brand-200\" | \"static-brand-300\" | \"static-brand-400\" | \"static-brand-50\" | \"static-brand-500\" | \"static-brand-600\" | \"static-brand-700\" | \"static-brand-800\" | \"static-brand-900\" | \"static-brand-950\" | \"static-brand-main\" | \"static-green-100\" | \"static-green-200\" | \"static-green-300\" | \"static-green-400\" | \"static-green-50\" | \"static-green-500\" | \"static-green-600\" | \"static-green-700\" | \"static-green-800\" | \"static-green-900\" | \"static-green-950\" | \"static-green-main\" | \"static-grey-100\" | \"static-grey-200\" | \"static-grey-300\" | \"static-grey-400\" | \"static-grey-50\" | \"static-grey-500\" | \"static-grey-600\" | \"static-grey-700\" | \"static-grey-800\" | \"static-grey-900\" | \"static-grey-950\" | \"static-grey-main\" | \"static-neutral-100\" | \"static-neutral-200\" | \"static-neutral-300\" | \"static-neutral-400\" | \"static-neutral-400-low\" | \"static-neutral-400-lower\" | \"static-neutral-400-medium\" | \"static-neutral-50\" | \"static-neutral-500\" | \"static-neutral-600\" | \"static-neutral-700\" | \"static-neutral-800\" | \"static-neutral-800-low\" | \"static-neutral-800-medium\" | \"static-neutral-900\" | \"static-neutral-950\" | \"static-neutral-main\" | \"static-orange-100\" | \"static-orange-200\" | \"static-orange-300\" | \"static-orange-400\" | \"static-orange-50\" | \"static-orange-500\" | \"static-orange-600\" | \"static-orange-700\" | \"static-orange-800\" | \"static-orange-900\" | \"static-orange-950\" | \"static-orange-main\" | \"static-red-100\" | \"static-red-200\" | \"static-red-300\" | \"static-red-400\" | \"static-red-50\" | \"static-red-500\" | \"static-red-600\" | \"static-red-700\" | \"static-red-800\" | \"static-red-900\" | \"static-red-950\" | \"static-red-main\" | \"static-white\" | \"static-white-low\" | \"static-white-lower\" | \"static-white-lowest\" | \"static-white-medium\" | \"static-yellow-100\" | \"static-yellow-200\" | \"static-yellow-300\" | \"static-yellow-400\" | \"static-yellow-50\" | \"static-yellow-500\" | \"static-yellow-600\" | \"static-yellow-700\" | \"static-yellow-800\" | \"static-yellow-900\" | \"static-yellow-950\" | \"static-yellow-main\" | \"surface-elevation-01\" | \"surface-elevation-02\" | \"surface-elevation-03\" | \"surface-elevation-04\" | \"surface-high\" | \"surface-higher\" | \"surface-low\" | \"surface-lower\" | \"surface-medium\" | \"surface-neutral-default\" | \"surface-neutral-hover\" | \"surface-neutral-press\" | \"surface-overlay-default\" | \"surface-overlay-hover\" | \"surface-overlay-press\"",
                     "references": {
                         "Colors": {
                             "location": "import",
                             "path": "../../definitions/colors",
-                            "id": "src/definitions/colors.ts::Colors"
+                            "id": "src/definitions/colors.ts::Colors",
+                            "referenceLocation": "Colors"
                         }
                     }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the field's helper text color"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{Colors}"
+                        }],
+                    "text": "Sets the helper text color"
                 },
                 "getter": false,
                 "setter": false,
@@ -150,8 +300,11 @@ export class VdsField {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Sets the field's error message"
+                    "tags": [{
+                            "name": "type",
+                            "text": "{string}"
+                        }],
+                    "text": "Sets the field's error message displayed below the input"
                 },
                 "getter": false,
                 "setter": false,
@@ -169,7 +322,13 @@ export class VdsField {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "type",
+                            "text": "{\"small\" | \"medium\" | \"large\"}"
+                        }, {
+                            "name": "default",
+                            "text": "\"medium\""
+                        }],
                     "text": "Sets the field's size"
                 },
                 "getter": false,
@@ -181,4 +340,3 @@ export class VdsField {
         };
     }
 }
-//# sourceMappingURL=vds-field.js.map

package/dist/collection/components/field/vds-field.stories.js

@@ -59,4 +59,71 @@ BasicUsage.args = {
     isRequired: false,
     isDisabled: false
 };
-//# sourceMappingURL=vds-field.stories.js.map
+const stylesHelperTextAlign = `
+    .align-demo {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        padding: 20px;
+    }
+    .align-demo__label {
+        color: var(--color-text-medium);
+        margin: 0 0 8px;
+    }
+    .content {
+        height: 2.25rem;
+        background: var(--surface-overlay-hover);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .field-align-right {
+        --vds-field-helper-text-align: right;
+    }
+`;
+const codeTemplateHelperTextAlign = () => {
+    return `
+<style>${stylesHelperTextAlign}</style>
+<div class="align-demo">
+
+  <div>
+    <p class="vds-font-body-small align-demo__label">Default (start)</p>
+    <vds-field
+        label="Full name"
+        helper-text="Enter your first and last name."
+        size="medium"
+    >
+        <div class="content"></div>
+    </vds-field>
+  </div>
+
+  <div>
+    <p class="vds-font-body-small align-demo__label">Right-aligned helper text via --vds-field-helper-text-align: right</p>
+    <vds-field
+        class="field-align-right"
+        label="Bio"
+        helper-text="120 / 240"
+        size="medium"
+    >
+        <div class="content"></div>
+    </vds-field>
+  </div>
+
+  <div>
+    <p class="vds-font-body-small align-demo__label">Right-aligned with error message</p>
+    <vds-field
+        class="field-align-right"
+        label="Username"
+        error-message="Username is already taken."
+        helper-text="Choose a unique username."
+        size="medium"
+    >
+        <div class="content"></div>
+    </vds-field>
+  </div>
+
+</div>
+`;
+};
+export const HelperTextAlignment = codeTemplateHelperTextAlign.bind({});
+HelperTextAlignment.args = {};

package/dist/collection/components/footer/vds-footer.css

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,21 +909,6 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
-/* This mixing can be used to implement font styling. 
- * to do so, you need to import the scss file and used @include font-style(title, medium);
- * This will implement styling according to the $volt-font-styles map
- */
 :host {
   display: block;
 }