@jack-henry/jh-elements 2.0.0-beta.12 → 2.0.0-beta.13

package/custom-elements.json

@@ -1651,7 +1651,7 @@
         },
         {
           "name": "--jh-input-field-color-background",
-          "description": "The input field background-color. Defaults to `--jh-color-container-primary-enabled`."
+          "description": "The input field background-color when in an editable state. This property does not apply when the component is set to `readonly`. Defaults to `--jh-color-container-primary-enabled`."
         },
         {
           "name": "--jh-input-field-color-border-enabled",
@@ -2137,7 +2137,7 @@
         },
         {
           "name": "--jh-input-field-color-background",
-          "description": "The input field background-color. Defaults to `--jh-color-container-primary-enabled`."
+          "description": "The input field background-color when in an editable state. This property does not apply when the component is set to `readonly`. Defaults to `--jh-color-container-primary-enabled`."
         },
         {
           "name": "--jh-input-field-color-border-enabled",
@@ -2581,7 +2581,7 @@
         },
         {
           "name": "--jh-input-field-color-background",
-          "description": "The input field background-color. Defaults to `--jh-color-container-primary-enabled`."
+          "description": "The input field background-color when in an editable state. This property does not apply when the component is set to `readonly`. Defaults to `--jh-color-container-primary-enabled`."
         },
         {
           "name": "--jh-input-field-color-border-enabled",
@@ -3025,7 +3025,7 @@
         },
         {
           "name": "--jh-input-field-color-background",
-          "description": "The input field background-color. Defaults to `--jh-color-container-primary-enabled`."
+          "description": "The input field background-color when in an editable state. This property does not apply when the component is set to `readonly`. Defaults to `--jh-color-container-primary-enabled`."
         },
         {
           "name": "--jh-input-field-color-border-enabled",
@@ -3152,12 +3152,13 @@
         {
           "name": "auto-grow",
           "description": "Enables the input height to grow automatically to accommodate user input. `auto-grow` will also remove the input's native resize capability.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "cols",
           "description": "Sets the width of the input field.",
-          "type": "?string"
+          "type": "?number"
         },
         {
           "name": "no-resize",
@@ -3168,7 +3169,7 @@
         {
           "name": "rows",
           "description": "Sets the height of the input field.",
-          "type": "?string"
+          "type": "?number"
         },
         {
           "name": "wrap",
@@ -3306,13 +3307,14 @@
           "name": "autoGrow",
           "attribute": "auto-grow",
           "description": "Enables the input height to grow automatically to accommodate user input. `auto-grow` will also remove the input's native resize capability.",
-          "type": "boolean"
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "cols",
           "attribute": "cols",
           "description": "Sets the width of the input field.",
-          "type": "?string"
+          "type": "?number"
         },
         {
           "name": "noResize",
@@ -3325,7 +3327,7 @@
           "name": "rows",
           "attribute": "rows",
           "description": "Sets the height of the input field.",
-          "type": "?string"
+          "type": "?number"
         },
         {
           "name": "wrap",
@@ -3529,7 +3531,7 @@
         },
         {
           "name": "--jh-input-field-color-background",
-          "description": "The input field background-color. Defaults to `--jh-color-container-primary-enabled`."
+          "description": "The input field background-color when in an editable state. This property does not apply when the component is set to `readonly`. Defaults to `--jh-color-container-primary-enabled`."
         },
         {
           "name": "--jh-input-field-color-border-enabled",
@@ -3973,7 +3975,7 @@
         },
         {
           "name": "--jh-input-field-color-background",
-          "description": "The input field background-color. Defaults to `--jh-color-container-primary-enabled`."
+          "description": "The input field background-color when in an editable state. This property does not apply when the component is set to `readonly`. Defaults to `--jh-color-container-primary-enabled`."
         },
         {
           "name": "--jh-input-field-color-border-enabled",
@@ -4416,7 +4418,7 @@
         },
         {
           "name": "--jh-input-field-color-background",
-          "description": "The input field background-color. Defaults to `--jh-color-container-primary-enabled`."
+          "description": "The input field background-color when in an editable state. This property does not apply when the component is set to `readonly`. Defaults to `--jh-color-container-primary-enabled`."
         },
         {
           "name": "--jh-input-field-color-border-enabled",
@@ -5251,7 +5253,7 @@
         {
           "name": "disabled",
           "description": "Disables the radio group and prevents all user interactions. May cause the group to be ignored by assistive technologies (AT).",
-          "type": "?Boolean",
+          "type": "boolean",
           "default": "false"
         },
         {
@@ -5320,7 +5322,7 @@
           "name": "disabled",
           "attribute": "disabled",
           "description": "Disables the radio group and prevents all user interactions. May cause the group to be ignored by assistive technologies (AT).",
-          "type": "?Boolean",
+          "type": "boolean",
           "default": "false"
         },
         {
@@ -5628,218 +5630,854 @@
       ]
     },
     {
-      "name": "jh-switch",
-      "path": "./components/switch/switch.js",
+      "name": "jh-select",
+      "path": "./components/select/select.js",
+      "description": "Select",
       "attributes": [
         {
-          "name": "accessible-disabled",
-          "description": "Sets an `aria-disabled` to signify to screen readers that the disabled switch should remain perceivable while disabled.",
-          "type": "'true'|'false'"
+          "name": "menu-position",
+          "description": "Sets the position of the dropdown menu relative to the input field. The menu automatically flips when there is insufficient space unless `flip-disabled` is set.",
+          "type": "string",
+          "default": "\"bottom\""
+        },
+        {
+          "name": "flip-disabled",
+          "description": "Prevents the dropdown menu from automatically flipping its position when there is insufficient viewport space.",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "accessible-label",
-          "description": "Sets an `aria-label` to assist screen reader users when no visible label is present.",
+          "description": "Sets an `aria-label` on the input field to assist screen reader users when no visible label is present.",
           "type": "?string"
         },
         {
-          "name": "checked",
-          "description": "Sets the selected or 'checked' state on the switch",
-          "type": "?boolean",
-          "default": "false"
+          "name": "accessible-label-clear-button",
+          "description": "Sets an aria-label on the clear button to assist screen reader users. Indicates that activating the button will clear the input field.",
+          "type": "?string"
+        },
+        {
+          "name": "autocomplete",
+          "description": "Determines whether the browser can provide assistance in filling out the input value and what type of information is expected.\nThis property will override any autocomplete attribute present on the input's parent form element.\n\n[Visit MDN for information on supported autocomplete values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)",
+          "type": "?string"
         },
         {
           "name": "disabled",
-          "description": "Disables the switch and prevents all user interactions. May cause switch to be ignored by assistive technologies(AT). See `accessible-disabled` if switch should remain perceivable to AT.",
-          "type": "?boolean",
+          "description": "Disables the input and prevents all user interactions. May cause the input to be ignored by assistive technologies (AT).",
+          "type": "boolean",
           "default": "false"
         },
         {
-          "name": "helper-text",
-          "description": "Provides additional context or guidance for using the switch. For `helper-text` to be displayed, the `label` property must also be set.",
+          "name": "enterkeyhint",
+          "description": "Specifies which action label or icon to present for the enter key on virtual keyboards.\n\n[Visit MDN for information on supported enterkeyhint values](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
           "type": "?string"
         },
         {
-          "name": "label",
-          "description": "Describes the intent of the switch.",
+          "name": "error-text",
+          "description": "Text to be displayed when input has failed validation and `invalid` is true.",
           "type": "?string"
-        }
-      ],
-      "properties": [
-        {
-          "name": "accessibleDisabled",
-          "attribute": "accessible-disabled",
-          "description": "Sets an `aria-disabled` to signify to screen readers that the disabled switch should remain perceivable while disabled.",
-          "type": "'true'|'false'"
         },
         {
-          "name": "accessibleLabel",
-          "attribute": "accessible-label",
-          "description": "Sets an `aria-label` to assist screen reader users when no visible label is present.",
+          "name": "helper-text",
+          "description": "Provides additional context or guidance for using the input. For `helper-text` to be displayed, the `label` property must also be set.",
           "type": "?string"
         },
         {
-          "name": "checked",
-          "attribute": "checked",
-          "description": "Sets the selected or 'checked' state on the switch",
-          "type": "?boolean",
+          "name": "hide-left-slot",
+          "description": "Hides the left slot from input.",
+          "type": "boolean",
           "default": "false"
         },
         {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Disables the switch and prevents all user interactions. May cause switch to be ignored by assistive technologies(AT). See `accessible-disabled` if switch should remain perceivable to AT.",
-          "type": "?boolean",
+          "name": "hide-right-slot",
+          "description": "Hides the right slot from input.",
+          "type": "boolean",
           "default": "false"
         },
         {
-          "name": "helperText",
-          "attribute": "helper-text",
-          "description": "Provides additional context or guidance for using the switch. For `helper-text` to be displayed, the `label` property must also be set.",
+          "name": "input-mask",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
           "type": "?string"
         },
         {
-          "name": "label",
-          "attribute": "label",
-          "description": "Describes the intent of the switch.",
+          "name": "inputmode",
+          "description": "Indicates expected input value type and allows for browsers to display appropriate virtual keyboard.\n\n[Visit MDN for information on supported inputmode values](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)",
           "type": "?string"
-        }
-      ],
-      "events": [
-        {
-          "name": "jh-change",
-          "description": "Dispatched when the state of the switch has changed."
-        }
-      ],
-      "cssProperties": [
-        {
-          "name": "--jh-switch-opacity-disabled",
-          "description": "The switch opacity when disabled. Defaults to `--jh-opacity-disabled`."
-        },
-        {
-          "name": "--jh-switch-thumb-color-background",
-          "description": "The thumb background-color. Defaults to `--jh-color-container-primary-enabled`."
-        },
-        {
-          "name": "--jh-switch-color-focus",
-          "description": "The switch outline when it receives keyboard focus. Defaults to `--jh-border-focus-color`."
         },
         {
-          "name": "--jh-switch-helper-color-text",
-          "description": "The helper-text text color. Defaults to `--jh-color-content-secondary-enabled`."
+          "name": "invalid",
+          "description": "Sets an `aria-invalid` attribute on input to indicate the value supplied was invalid. Also displays `error-text` and error state styling when set.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "--jh-switch-label-color-text",
-          "description": "The label text color. Defaults to `--jh-color-content-primary-enabled`."
+          "name": "label",
+          "description": "Identifies what data should be entered into the input field.",
+          "type": "?string"
         },
         {
-          "name": "--jh-switch-track-color-background-unselected-enabled",
-          "description": "The track color when unselected. Defaults to `--jh-color-control-enabled`."
+          "name": "maxlength",
+          "description": "Sets the maximum number of characters a user can enter into the field.",
+          "type": "?string"
         },
         {
-          "name": "--jh-switch-track-color-background-unselected-focus",
-          "description": "The track color when unselected and focused. Defaults to `--jh-color-control-hover`."
+          "name": "minlength",
+          "description": "Sets the minimum number of characters a user can enter into the field.",
+          "type": "?string"
         },
         {
-          "name": "--jh-switch-track-color-background-unselected-hover",
-          "description": "The track color when unselected and hovered. Defaults to `--jh-color-control-hover`."
+          "name": "name",
+          "description": "Sets a name for the input control.",
+          "type": "?string"
         },
         {
-          "name": "--jh-switch-track-color-background-unselected-active",
-          "description": "The track color when unselected and active. Defaults to `--jh-color-control-active`."
+          "name": "readonly",
+          "description": "Prevents users from changing the input value. Removes all slotted content.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "--jh-switch-track-color-background-unselected-disabled",
-          "description": "The track color when unselected and disabled. Defaults to `--jh-color-control-enabled`."
+          "name": "required",
+          "description": "Indicates a value is required.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "--jh-switch-track-color-background-selected-enabled",
-          "description": "The track color when selected. Defaults to `--jh-color-content-brand-enabled`."
+          "name": "show-char-count",
+          "description": "Displays a character counter at the bottom right corner below the input field.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "--jh-switch-track-color-background-selected-focus",
-          "description": "The track color when selected and focused. Defaults to `--jh-color-content-brand-hover`."
+          "name": "show-clear-button",
+          "description": "Displays a clear button in the input field when it contains a value and is focused or hovered. Deletes input value when activated.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "--jh-switch-track-color-background-selected-hover",
-          "description": "The track color when selected and hovered. Defaults to `--jh-color-content-brand-hover`."
+          "name": "show-indicator",
+          "description": "Adds a visual indicator next to the label. Indicates that a value is optional(by default) or required if the `required` property is also set.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "--jh-switch-track-color-background-selected-active",
-          "description": "The track color when selected and active. Defaults to `--jh-color-content-brand-active`."
+          "name": "size",
+          "description": "Sets the size of the input.",
+          "type": "'small'|'medium'|'large'",
+          "default": "\"medium\""
         },
         {
-          "name": "--jh-switch-track-color-background-selected-disabled",
-          "description": "The track color when selected and disabled. Defaults to `--jh-color-content-brand-enabled`."
-        }
-      ]
-    },
-    {
-      "name": "jh-table-cell",
-      "path": "./components/table-data-cell/table-data-cell.js",
-      "description": "Table Cell",
-      "attributes": [
-        {
-          "name": "horizontal-align",
-          "description": "Sets the horizontal alignment of the content.",
-          "type": "'left' | 'center' | 'right'",
-          "default": "\"left\""
+          "name": "value",
+          "description": "Sets the value of the input.",
+          "type": "?string"
         }
       ],
       "properties": [
         {
-          "name": "horizontalAlign",
-          "attribute": "horizontal-align",
-          "description": "Sets the horizontal alignment of the content.",
-          "type": "'left' | 'center' | 'right'",
-          "default": "\"left\""
-        }
-      ],
-      "slots": [
-        {
-          "name": "default",
-          "description": "Use to insert content."
-        }
-      ],
-      "cssProperties": [
-        {
-          "name": "--jh-table-data-cell-color-text",
-          "description": "The cell text color. Defaults to `--jh-color-content-primary-enabled`."
+          "name": "menuPosition",
+          "attribute": "menu-position",
+          "description": "Sets the position of the dropdown menu relative to the input field. The menu automatically flips when there is insufficient space unless `flip-disabled` is set.",
+          "type": "string",
+          "default": "\"bottom\""
         },
         {
-          "name": "--jh-table-data-cell-color-background",
-          "description": "The cell background color. Defaults to `--jh-color-container-primary-enabled`."
+          "name": "options",
+          "description": "Sets the list of options to display in the dropdown menu. Accepts an array of flat options or grouped options. See documentation for the expected data format.",
+          "type": "Array",
+          "default": "[]"
         },
         {
-          "name": "--jh-table-data-cell-color-border-top",
-          "description": "The cell border top color. Defaults to `transparent`."
+          "name": "flipDisabled",
+          "attribute": "flip-disabled",
+          "description": "Prevents the dropdown menu from automatically flipping its position when there is insufficient viewport space.",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "--jh-table-data-cell-color-border-right",
-          "description": "The cell border right color. Defaults to `transparent`."
+          "name": "accessibleLabel",
+          "attribute": "accessible-label",
+          "description": "Sets an `aria-label` on the input field to assist screen reader users when no visible label is present.",
+          "type": "?string"
         },
         {
-          "name": "--jh-table-data-cell-color-border-left",
-          "description": "The cell border left color. Defaults to `transparent`."
+          "name": "accessibleLabelClearButton",
+          "attribute": "accessible-label-clear-button",
+          "description": "Sets an aria-label on the clear button to assist screen reader users. Indicates that activating the button will clear the input field.",
+          "type": "?string"
         },
         {
-          "name": "--jh-table-data-cell-color-border-bottom",
-          "description": "The cell border bottom color. Defaults to `--jh-border-decorative-color`."
+          "name": "autocomplete",
+          "attribute": "autocomplete",
+          "description": "Determines whether the browser can provide assistance in filling out the input value and what type of information is expected.\nThis property will override any autocomplete attribute present on the input's parent form element.\n\n[Visit MDN for information on supported autocomplete values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)",
+          "type": "?string"
         },
         {
-          "name": "--jh-table-data-cell-border-top-width",
-          "description": "The cell border top width. Defaults to `--jh-border-decorative-width`."
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the input and prevents all user interactions. May cause the input to be ignored by assistive technologies (AT).",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "--jh-table-data-cell-border-right-width",
-          "description": "The cell border right width. Defaults to `--jh-border-decorative-width`."
+          "name": "enterkeyhint",
+          "attribute": "enterkeyhint",
+          "description": "Specifies which action label or icon to present for the enter key on virtual keyboards.\n\n[Visit MDN for information on supported enterkeyhint values](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
+          "type": "?string"
         },
         {
-          "name": "--jh-table-data-cell-border-left-width",
-          "description": "The cell border left width. Defaults to `--jh-border-decorative-width`."
+          "name": "errorText",
+          "attribute": "error-text",
+          "description": "Text to be displayed when input has failed validation and `invalid` is true.",
+          "type": "?string"
         },
         {
-          "name": "--jh-table-data-cell-border-bottom-width",
-          "description": "The cell border bottom width. Defaults to `--jh-border-decorative-width`."
+          "name": "helperText",
+          "attribute": "helper-text",
+          "description": "Provides additional context or guidance for using the input. For `helper-text` to be displayed, the `label` property must also be set.",
+          "type": "?string"
+        },
+        {
+          "name": "hideLeftSlot",
+          "attribute": "hide-left-slot",
+          "description": "Hides the left slot from input.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "hideRightSlot",
+          "attribute": "hide-right-slot",
+          "description": "Hides the right slot from input.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "inputMask",
+          "attribute": "input-mask",
+          "description": "Formats user entered data on input based on fixed lengths. This property does not support dynamic formatting or pasted values. See the input mask documentation above for implementation details.",
+          "type": "?string"
+        },
+        {
+          "name": "inputmode",
+          "attribute": "inputmode",
+          "description": "Indicates expected input value type and allows for browsers to display appropriate virtual keyboard.\n\n[Visit MDN for information on supported inputmode values](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)",
+          "type": "?string"
+        },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Sets an `aria-invalid` attribute on input to indicate the value supplied was invalid. Also displays `error-text` and error state styling when set.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Identifies what data should be entered into the input field.",
+          "type": "?string"
+        },
+        {
+          "name": "maxlength",
+          "attribute": "maxlength",
+          "description": "Sets the maximum number of characters a user can enter into the field.",
+          "type": "?string"
+        },
+        {
+          "name": "minlength",
+          "attribute": "minlength",
+          "description": "Sets the minimum number of characters a user can enter into the field.",
+          "type": "?string"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "Sets a name for the input control.",
+          "type": "?string"
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "description": "Prevents users from changing the input value. Removes all slotted content.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Indicates a value is required.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "showCharCount",
+          "attribute": "show-char-count",
+          "description": "Displays a character counter at the bottom right corner below the input field.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "showClearButton",
+          "attribute": "show-clear-button",
+          "description": "Displays a clear button in the input field when it contains a value and is focused or hovered. Deletes input value when activated.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "showIndicator",
+          "attribute": "show-indicator",
+          "description": "Adds a visual indicator next to the label. Indicates that a value is optional(by default) or required if the `required` property is also set.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "size",
+          "attribute": "size",
+          "description": "Sets the size of the input.",
+          "type": "'small'|'medium'|'large'",
+          "default": "\"medium\""
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Sets the value of the input.",
+          "type": "?string"
+        }
+      ],
+      "events": [
+        {
+          "name": "jh-change",
+          "description": "Dispatched when the selected value changes."
+        },
+        {
+          "name": "jh-select",
+          "description": "Dispatched when text is selected. Event payload contains the selected text, the starting index of the selection, and the ending index of the selection. These values can be accessed via `e.detail.selected`, `e.detail.selectionStart`, and `e.detail.selectionEnd`."
+        },
+        {
+          "name": "jh-input",
+          "description": "Dispatched when the value of the input has changed. Event payload includes the value of the input and can be accessed via `e.detail.value`. Payload also includes the raw/unformatted value when an input mask is applied and can be accessed via `e.detail.rawValue`."
+        },
+        {
+          "name": "jh-maxlength",
+          "description": "Dispatched when the `maxlength` property is set and it's value is reached."
+        },
+        {
+          "name": "jh-input:clear-button-click",
+          "description": "Dispatched when the clear button is activated. Event payload contains the previous value of the input field before it was cleared and can be accessed via `e.detail.previousValue`."
+        }
+      ],
+      "slots": [
+        {
+          "name": "jh-select-trigger-left",
+          "description": "Use to insert an element such as an icon on the left side of the select input field."
+        },
+        {
+          "name": "jh-select-trigger-open",
+          "description": "Use to replace the default chevron icon displayed when the select menu is open."
+        },
+        {
+          "name": "jh-select-trigger-closed",
+          "description": "Use to replace the default chevron icon displayed when the select menu is closed."
+        },
+        {
+          "name": "jh-input-left",
+          "description": "Use to insert an element on the left side of the input field, such as an icon or button."
+        },
+        {
+          "name": "jh-input-right",
+          "description": "Use to insert an element on the right side of the input field, such as an icon or button."
+        },
+        {
+          "name": "jh-input-clear-button",
+          "description": "Use to insert an icon within the clear button."
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--jh-select-input-field-border-radius",
+          "description": "The input field border radius. Defaults to `--jh-border-radius-100`."
+        },
+        {
+          "name": "--jh-select-input-field-color-background",
+          "description": "The input field background-color. Defaults to `--jh-color-container-primary-enabled`."
+        },
+        {
+          "name": "--jh-select-icon-color-fill",
+          "description": "The select icons color. Defaults to `--jh-color-content-secondary-enabled`."
+        },
+        {
+          "name": "--jh-select-menu-z-index",
+          "description": "The menu z-index. Defaults to `--jh-z-index-positive-1000`."
+        },
+        {
+          "name": "--jh-select-menu-border-radius",
+          "description": "The menu border-radius. Defaults to `--jh-border-radius-200`."
+        },
+        {
+          "name": "--jh-select-menu-shadow",
+          "description": "The menu box-shadow. Defaults to `--jh-shadow-high`."
+        },
+        {
+          "name": "--jh-select-menu-color-background",
+          "description": "The menu container background-color. Defaults to `--jh-color-container-primary-enabled`."
+        },
+        {
+          "name": "--jh-select-menu-space-padding",
+          "description": "The menu container padding. Defaults to `--jh-dimension-200 0`."
+        },
+        {
+          "name": "--jh-select-menu-size-max-width",
+          "description": "The menu maximum width. Defaults to `none`."
+        },
+        {
+          "name": "--jh-select-menu-size-min-width",
+          "description": "The menu minimum width. Defaults to `none`."
+        },
+        {
+          "name": "--jh-select-menu-size-max-height",
+          "description": "The menu maximum height. Defaults to `480px`."
+        },
+        {
+          "name": "--jh-select-input-field-color-border-error",
+          "description": "The input field border-color when invalid. Defaults to `--jh-border-error-color`."
+        },
+        {
+          "name": "--jh-select-label-color-text",
+          "description": "The label text color. Defaults to `--jh-color-content-primary-enabled`."
+        },
+        {
+          "name": "--jh-select-helper-color-text",
+          "description": "The helper-text text color. Defaults to `jh-color-content-secondary-enabled`."
+        },
+        {
+          "name": "--jh-select-required-color-text",
+          "description": "The required indicator color. Defaults to `jh-color-content-negative-enabled`."
+        },
+        {
+          "name": "--jh-select-optional-color-text",
+          "description": "The optional indicator text color. Defaults to `jh-color-content-primary-enabled`."
+        },
+        {
+          "name": "--jh-select-value-color-text",
+          "description": "The value text color. Defaults to `jh-color-content-primary-enabled`."
+        },
+        {
+          "name": "--jh-select-input-field-color-border-enabled",
+          "description": "The input field border-color. Defaults to `--jh-border-control-color`."
+        },
+        {
+          "name": "--jh-select-input-field-color-border-focus",
+          "description": "The input field border-color when in focus. Defaults to `--jh-color-content-brand-hover`."
+        },
+        {
+          "name": "--jh-select-input-color-focus",
+          "description": "The input field outline when it receives keyboard focus. Defaults to `--jh-border-focus-color`."
+        },
+        {
+          "name": "--jh-select-input-field-color-border-hover",
+          "description": "The input field border-color when hovered. Defaults to `--jh-color-content-brand-hover`."
+        },
+        {
+          "name": "--jh-select-input-field-color-border-active",
+          "description": "The input field border-color when active. Defaults to `--jh-color-content-brand-active`."
+        },
+        {
+          "name": "--jh-select-input-field-color-border-disabled",
+          "description": "The input field border-color when disabled. Defaults to `--jh-border-control-color`."
+        },
+        {
+          "name": "--jh-select-opacity-disabled",
+          "description": "The select opacity when disabled. Defaults to `--jh-opacity-disabled`."
+        },
+        {
+          "name": "--jh-select-error-color-text",
+          "description": "The error message text color. Defaults to `jh-color-content-negative-enabled`."
+        },
+        {
+          "name": "--jh-select-item-size-height",
+          "description": "The list item height. Defaults to `auto`."
+        },
+        {
+          "name": "--jh-select-item-space-padding-right",
+          "description": "The list item right padding. Defaults to `--jh-dimension-600`."
+        },
+        {
+          "name": "--jh-select-item-space-padding-left",
+          "description": "The list item left padding. Defaults to `--jh-dimension-600`."
+        },
+        {
+          "name": "--jh-select-item-color-text",
+          "description": "The list item text color. Defaults to `--jh-color-content-primary-enabled`."
+        },
+        {
+          "name": "--jh-select-item-color-background",
+          "description": "The list item background color. Defaults to `transparent`."
+        },
+        {
+          "name": "--jh-select-item-color-background-focus",
+          "description": "The list item background color when focused. Defaults to `--jh-color-container-primary-hover`."
+        },
+        {
+          "name": "--jh-select-item-color-focus",
+          "description": "The list item outline color when focused. Defaults to `--jh-border-focus-color`."
+        },
+        {
+          "name": "--jh-select-item-color-background-hover",
+          "description": "The list item background color when hovered. Defaults to `--jh-color-container-primary-hover`."
+        },
+        {
+          "name": "--jh-select-item-color-background-active",
+          "description": "The list item background color when active. Defaults to `--jh-color-container-primary-active`."
+        },
+        {
+          "name": "--jh-select-item-color-background-selected",
+          "description": "The list item background color when selected. Defaults to `--jh-color-container-primary-selected`."
+        },
+        {
+          "name": "--jh-select-item-color-border-selected",
+          "description": "The list item border color when selected. Defaults to `--jh-border-selected-color`."
+        },
+        {
+          "name": "--jh-select-item-space-padding-left-indent",
+          "description": "The additional left padding for grouped list items. Defaults to `--jh-dimension-200`."
+        },
+        {
+          "name": "--jh-input-label-color-text",
+          "description": "The label text color. Defaults to `--jh-color-content-primary-enabled`."
+        },
+        {
+          "name": "--jh-input-field-color-background",
+          "description": "The input field background-color. Defaults to `--jh-color-container-primary-enabled`."
+        },
+        {
+          "name": "--jh-input-field-color-border-enabled",
+          "description": "The input field border-color. Defaults to `--jh-border-control-color`."
+        },
+        {
+          "name": "--jh-input-field-border-radius",
+          "description": "The input field border radius. Defaults to `--jh-border-radius-100`."
+        },
+        {
+          "name": "--jh-input-color-focus",
+          "description": "The input field outline when it receives keyboard focus. Defaults to `--jh-border-focus-color`."
+        },
+        {
+          "name": "--jh-input-field-color-border-focus",
+          "description": "The input field border-color when in focus. Defaults to `--jh-color-content-brand-hover`."
+        },
+        {
+          "name": "--jh-input-field-color-border-hover",
+          "description": "The input field border-color when hovered. Defaults to `--jh-color-content-brand-hover`."
+        },
+        {
+          "name": "--jh-input-field-color-border-active",
+          "description": "The input field border-color when active. Defaults to `--jh-color-content-brand-active`."
+        },
+        {
+          "name": "--jh-input-field-color-border-disabled",
+          "description": "The input field border-color when disabled. Defaults to `--jh-border-control-color`."
+        },
+        {
+          "name": "--jh-input-opacity-disabled",
+          "description": "The input opacity when disabled. Defaults to `--jh-opacity-disabled`."
+        },
+        {
+          "name": "--jh-input-field-color-border-error",
+          "description": "The input field border-color when invalid. Defaults to `--jh-border-error-color`."
+        },
+        {
+          "name": "--jh-input-clear-border-radius",
+          "description": "The clear button border radius. Defaults to `--jh-border-radius-100`."
+        },
+        {
+          "name": "--jh-input-clear-color-background-enabled",
+          "description": "The clear button background-color. Defaults to `transparent`."
+        },
+        {
+          "name": "--jh-input-clear-color-border-enabled",
+          "description": "The clear button border-color. Defaults to `transparent`."
+        },
+        {
+          "name": "--jh-input-clear-icon-color-fill-enabled",
+          "description": "The clear button icon fill color. Defaults to `--jh-color-content-brand-enabled`."
+        },
+        {
+          "name": "--jh-input-clear-color-background-focus",
+          "description": "The clear button background-color when in focus. Defaults to `--jh-color-content-brand-hover`."
+        },
+        {
+          "name": "--jh-input-clear-color-border-focus",
+          "description": "The clear button border-color when in focus. Defaults to `transparent`."
+        },
+        {
+          "name": "--jh-input-clear-color-focus",
+          "description": "The clear button outline when it receives keyboard focus. Defaults to `--jh-border-focus-color`."
+        },
+        {
+          "name": "--jh-input-clear-icon-color-fill-focus",
+          "description": "The clear button icon fill color when in focus. Defaults to `--jh-color-content-on-brand-hover`."
+        },
+        {
+          "name": "--jh-input-clear-color-background-hover",
+          "description": "The clear button background-color when hovered. Defaults to `--jh-color-content-brand-hover`."
+        },
+        {
+          "name": "--jh-input-clear-color-border-hover",
+          "description": "The clear button border-color when hovered. Defaults to `transparent`."
+        },
+        {
+          "name": "--jh-input-clear-icon-color-fill-hover",
+          "description": "The clear button icon fill color when hovered. Defaults to `--jh-color-content-on-brand-hover`."
+        },
+        {
+          "name": "--jh-input-clear-color-background-active",
+          "description": "The clear button background-color when active. Defaults to `--jh-color-content-brand-active`."
+        },
+        {
+          "name": "--jh-input-clear-color-border-active",
+          "description": "The clear button border-color when active. Defaults to `transparent`."
+        },
+        {
+          "name": "--jh-input-clear-icon-color-fill-active",
+          "description": "The clear button icon fill color when active. Defaults to `--jh-color-content-on-brand-active`."
+        },
+        {
+          "name": "--jh-input-required-color-text",
+          "description": "The required indicator color. Defaults to `jh-color-content-negative-enabled`."
+        },
+        {
+          "name": "--jh-input-optional-color-text",
+          "description": "The optional indicator text color. Defaults to `jh-color-content-primary-enabled`."
+        },
+        {
+          "name": "--jh-input-helper-color-text",
+          "description": "The helper-text text color. Defaults to `jh-color-content-secondary-enabled`."
+        },
+        {
+          "name": "--jh-input-counter-color-text",
+          "description": "The character counter text color. Defaults to `--jh-color-content-secondary-enabled`."
+        },
+        {
+          "name": "--jh-input-value-color-text",
+          "description": "The value text color. Defaults to `jh-color-content-primary-enabled`."
+        },
+        {
+          "name": "--jh-input-error-color-text",
+          "description": "The error message text color. Defaults to `jh-color-content-negative-enabled`."
+        }
+      ]
+    },
+    {
+      "name": "jh-switch",
+      "path": "./components/switch/switch.js",
+      "attributes": [
+        {
+          "name": "accessible-disabled",
+          "description": "Sets an `aria-disabled` to signify to screen readers that the disabled switch should remain perceivable while disabled.",
+          "type": "'true'|'false'"
+        },
+        {
+          "name": "accessible-label",
+          "description": "Sets an `aria-label` to assist screen reader users when no visible label is present.",
+          "type": "?string"
+        },
+        {
+          "name": "checked",
+          "description": "Sets the selected or 'checked' state on the switch",
+          "type": "?boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the switch and prevents all user interactions. May cause switch to be ignored by assistive technologies(AT). See `accessible-disabled` if switch should remain perceivable to AT.",
+          "type": "?boolean",
+          "default": "false"
+        },
+        {
+          "name": "helper-text",
+          "description": "Provides additional context or guidance for using the switch. For `helper-text` to be displayed, the `label` property must also be set.",
+          "type": "?string"
+        },
+        {
+          "name": "label",
+          "description": "Describes the intent of the switch.",
+          "type": "?string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "accessibleDisabled",
+          "attribute": "accessible-disabled",
+          "description": "Sets an `aria-disabled` to signify to screen readers that the disabled switch should remain perceivable while disabled.",
+          "type": "'true'|'false'"
+        },
+        {
+          "name": "accessibleLabel",
+          "attribute": "accessible-label",
+          "description": "Sets an `aria-label` to assist screen reader users when no visible label is present.",
+          "type": "?string"
+        },
+        {
+          "name": "checked",
+          "attribute": "checked",
+          "description": "Sets the selected or 'checked' state on the switch",
+          "type": "?boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the switch and prevents all user interactions. May cause switch to be ignored by assistive technologies(AT). See `accessible-disabled` if switch should remain perceivable to AT.",
+          "type": "?boolean",
+          "default": "false"
+        },
+        {
+          "name": "helperText",
+          "attribute": "helper-text",
+          "description": "Provides additional context or guidance for using the switch. For `helper-text` to be displayed, the `label` property must also be set.",
+          "type": "?string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Describes the intent of the switch.",
+          "type": "?string"
+        }
+      ],
+      "events": [
+        {
+          "name": "jh-change",
+          "description": "Dispatched when the state of the switch has changed."
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--jh-switch-opacity-disabled",
+          "description": "The switch opacity when disabled. Defaults to `--jh-opacity-disabled`."
+        },
+        {
+          "name": "--jh-switch-thumb-color-background",
+          "description": "The thumb background-color. Defaults to `--jh-color-container-primary-enabled`."
+        },
+        {
+          "name": "--jh-switch-color-focus",
+          "description": "The switch outline when it receives keyboard focus. Defaults to `--jh-border-focus-color`."
+        },
+        {
+          "name": "--jh-switch-helper-color-text",
+          "description": "The helper-text text color. Defaults to `--jh-color-content-secondary-enabled`."
+        },
+        {
+          "name": "--jh-switch-label-color-text",
+          "description": "The label text color. Defaults to `--jh-color-content-primary-enabled`."
+        },
+        {
+          "name": "--jh-switch-track-color-background-unselected-enabled",
+          "description": "The track color when unselected. Defaults to `--jh-color-control-enabled`."
+        },
+        {
+          "name": "--jh-switch-track-color-background-unselected-focus",
+          "description": "The track color when unselected and focused. Defaults to `--jh-color-control-hover`."
+        },
+        {
+          "name": "--jh-switch-track-color-background-unselected-hover",
+          "description": "The track color when unselected and hovered. Defaults to `--jh-color-control-hover`."
+        },
+        {
+          "name": "--jh-switch-track-color-background-unselected-active",
+          "description": "The track color when unselected and active. Defaults to `--jh-color-control-active`."
+        },
+        {
+          "name": "--jh-switch-track-color-background-unselected-disabled",
+          "description": "The track color when unselected and disabled. Defaults to `--jh-color-control-enabled`."
+        },
+        {
+          "name": "--jh-switch-track-color-background-selected-enabled",
+          "description": "The track color when selected. Defaults to `--jh-color-content-brand-enabled`."
+        },
+        {
+          "name": "--jh-switch-track-color-background-selected-focus",
+          "description": "The track color when selected and focused. Defaults to `--jh-color-content-brand-hover`."
+        },
+        {
+          "name": "--jh-switch-track-color-background-selected-hover",
+          "description": "The track color when selected and hovered. Defaults to `--jh-color-content-brand-hover`."
+        },
+        {
+          "name": "--jh-switch-track-color-background-selected-active",
+          "description": "The track color when selected and active. Defaults to `--jh-color-content-brand-active`."
+        },
+        {
+          "name": "--jh-switch-track-color-background-selected-disabled",
+          "description": "The track color when selected and disabled. Defaults to `--jh-color-content-brand-enabled`."
+        }
+      ]
+    },
+    {
+      "name": "jh-table-cell",
+      "path": "./components/table-data-cell/table-data-cell.js",
+      "description": "Table Cell",
+      "attributes": [
+        {
+          "name": "horizontal-align",
+          "description": "Sets the horizontal alignment of the content.",
+          "type": "'left' | 'center' | 'right'",
+          "default": "\"left\""
+        }
+      ],
+      "properties": [
+        {
+          "name": "horizontalAlign",
+          "attribute": "horizontal-align",
+          "description": "Sets the horizontal alignment of the content.",
+          "type": "'left' | 'center' | 'right'",
+          "default": "\"left\""
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "description": "Use to insert content."
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--jh-table-data-cell-color-text",
+          "description": "The cell text color. Defaults to `--jh-color-content-primary-enabled`."
+        },
+        {
+          "name": "--jh-table-data-cell-color-background",
+          "description": "The cell background color. Defaults to `--jh-color-container-primary-enabled`."
+        },
+        {
+          "name": "--jh-table-data-cell-color-border-top",
+          "description": "The cell border top color. Defaults to `transparent`."
+        },
+        {
+          "name": "--jh-table-data-cell-color-border-right",
+          "description": "The cell border right color. Defaults to `transparent`."
+        },
+        {
+          "name": "--jh-table-data-cell-color-border-left",
+          "description": "The cell border left color. Defaults to `transparent`."
+        },
+        {
+          "name": "--jh-table-data-cell-color-border-bottom",
+          "description": "The cell border bottom color. Defaults to `--jh-border-decorative-color`."
+        },
+        {
+          "name": "--jh-table-data-cell-border-top-width",
+          "description": "The cell border top width. Defaults to `--jh-border-decorative-width`."
+        },
+        {
+          "name": "--jh-table-data-cell-border-right-width",
+          "description": "The cell border right width. Defaults to `--jh-border-decorative-width`."
+        },
+        {
+          "name": "--jh-table-data-cell-border-left-width",
+          "description": "The cell border left width. Defaults to `--jh-border-decorative-width`."
+        },
+        {
+          "name": "--jh-table-data-cell-border-bottom-width",
+          "description": "The cell border bottom width. Defaults to `--jh-border-decorative-width`."
         },
         {
           "name": "--jh-table-data-cell-border-top-style",
@@ -6757,12 +7395,6 @@
           "type": "number",
           "default": "5000"
         },
-        {
-          "name": "appearance",
-          "description": "Sets the background color of the toast to convey message connotation.",
-          "type": "'positive'|'neutral'|'negative'",
-          "default": "\"neutral\""
-        },
         {
           "name": "dismiss-button-accessible-label",
           "description": "Adds an aria-label to the dismiss button to assist screen readers.",
@@ -6789,13 +7421,6 @@
           "type": "number",
           "default": "5000"
         },
-        {
-          "name": "appearance",
-          "attribute": "appearance",
-          "description": "Sets the background color of the toast to convey message connotation.",
-          "type": "'positive'|'neutral'|'negative'",
-          "default": "\"neutral\""
-        },
         {
           "name": "dismissButtonAccessibleLabel",
           "attribute": "dismiss-button-accessible-label",