@brightspace-ui/core 3.1.1 → 3.1.3

package/components/inputs/docs/input-checkbox.md

@@ -72,6 +72,10 @@ checkbox.addEventListener('change', (e) => {
   console.log(checkbox.checked);
 });
 ```
+
+### Slots
+
+* `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties

package/components/inputs/docs/input-color.md

@@ -48,6 +48,10 @@ input.addEventListener('change', (e) => {
   console.log(input.value);
 });
 ```
+
+### Slots
+
+* `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties

package/components/inputs/docs/input-date-time.md

@@ -59,6 +59,10 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
 ### Events
 
 * `change`: dispatched when a date is selected or typed. `value` reflects the selected value and is in ISO 8601 calendar date format (`YYYY-MM-DD`).
+
+### Slots
+
+* `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties
@@ -110,6 +114,10 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
 ### Events
 
 * `change`: dispatched when a start or end date is selected or typed. `start-value` reflects the value of the first input, `end-value` reflects the value of the second input, and both are in ISO 8601 calendar date format (`YYYY-MM-DD`).
+
+### Slots
+
+* `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties
@@ -157,6 +165,10 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
 ### Events
 
 * `change`: dispatched when a time is selected or typed. `value` reflects the selected value and is in ISO 8601 time format (`hh:mm:ss`).
+
+### Slots
+
+* `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties
@@ -204,6 +216,10 @@ Note: All `*value` properties should be in ISO 8601 time format (`hh:mm:ss`) and
 | `start-opened` | Boolean | Indicates if the start dropdown is open |
 | `start-value` | String, default `''` | Value of the first time input |
 | `time-interval` | String, default: `thirty` | Number of minutes between times shown in dropdown. Valid values include `five`, `ten`, `fifteen`, `twenty`, `thirty`, and `sixty`. |
+
+### Slots
+
+* `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties
@@ -252,6 +268,10 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
 ### Events
 
 * `change`: dispatched when there is a change in selected date or selected time (when date is already selected). `value` reflects the selected value and is in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`).
+
+### Slots
+
+* `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties
@@ -301,6 +321,10 @@ Note: All `*value` properties should be in ISO 8601 combined date and time forma
 ### Events
 
 * `change`: dispatched when a start or end date is selected or typed. `start-value` reflects the value of the first input, `end-value` reflects the value of the second input, and both are in ISO 8601 combined date and time format (`YYYY-MM-DDTHH:mm:ss.sssZ`) and in UTC time.
+
+### Slots
+
+* `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties

package/components/inputs/docs/input-numeric.md

@@ -69,6 +69,10 @@ numberInput.addEventListener('change', (e) => {
   console.log(numberInput.value);
 });
 ```
+
+### Slots
+
+* `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties
@@ -138,6 +142,10 @@ numberInput.addEventListener('change', (e) => {
   console.log(numberInput.value);
 });
 ```
+
+### Slots
+
+* `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties

package/components/inputs/docs/input-search.md

@@ -76,6 +76,10 @@ search.addEventListener('d2l-input-search-searched', (e) => {
 ```
 
 When the input is cleared, the same event will be fired with an empty value.
+
+### Slots
+
+* `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties

package/components/inputs/docs/input-text.md

@@ -120,6 +120,7 @@ input.addEventListener('input', (e) => {
 
 * `left`: Slot within the input on the left side. Useful for an `icon` or `button-icon`.
 * `right`: Slot within the input on the right side. Useful for an `icon` or `button-icon`.
+* `inline-help`: Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
 <!-- docs: end hidden content -->
 
 ### Accessibility Properties

package/components/inputs/input-checkbox.js

@@ -61,6 +61,7 @@ export const checkboxStyles = css`
 /**
  * A component that can be used to show a checkbox and optional visible label.
  * @slot - Checkbox information (e.g., text)
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when the checkbox's state changes
  */
 class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(RtlMixin(LitElement)))) {

package/components/inputs/input-color.js

@@ -81,6 +81,7 @@ const SWATCH_TRANSPARENT = `<svg xmlns="http://www.w3.org/2000/svg" width="24" h
 
 /**
  * This component allows for inputting a HEX color value.
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when an alteration to the value is committed by the user.
  */
 class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(FormElementMixin(LocalizeCoreElement(LitElement))))) {

package/components/inputs/input-text.js

@@ -23,6 +23,7 @@ import { styleMap } from 'lit/directives/style-map.js';
  * @slot left - Slot within the input on the left side. Useful for an "icon" or "button-icon".
  * @slot right - Slot within the input on the right side. Useful for an "icon" or "button-icon".
  * @slot after - Slot beside the input on the right side. Useful for an "icon" or "button-icon".
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user
  * @fires input - Dispatched immediately after changes by the user
  */

package/components/inputs/input-textarea.js

@@ -17,6 +17,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 /**
  * A wrapper around the native `<textarea>` element that provides auto-grow and validation behaviours intended for inputting unformatted multi-line text.
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user
  * @fires input - Dispatched immediately after changes by the user
  */

package/components/inputs/input-time.js

@@ -117,6 +117,7 @@ function initIntervals(size, enforceTimeIntervals) {
 
 /**
  * A component that consists of a text input field for typing a time and an attached dropdown for time selection. It displays the "value" if one is specified, or a placeholder if not, and reflects the selected value when one is selected in the dropdown or entered in the text input.
+ * @slot inline-help - Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label.
  * @fires change - Dispatched when there is a change to selected time. `value` corresponds to the selected value and is formatted in ISO 8601 time format (`hh:mm:ss`).
  */
 class InputTime extends InputInlineHelpMixin(FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(RtlMixin(LitElement)))))) {

package/custom-elements.json

@@ -4936,6 +4936,10 @@
         {
           "name": "",
           "description": "Checkbox information (e.g., text)"
+        },
+        {
+          "name": "inline-help",
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
         }
       ]
     },
@@ -5081,6 +5085,12 @@
           "name": "change",
           "description": "Dispatched when an alteration to the value is committed by the user."
         }
+      ],
+      "slots": [
+        {
+          "name": "inline-help",
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
+        }
       ]
     },
     {
@@ -7044,6 +7054,10 @@
         {
           "name": "after",
           "description": "Slot beside the input on the right side. Useful for an \"icon\" or \"button-icon\"."
+        },
+        {
+          "name": "inline-help",
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
         }
       ]
     },
@@ -7272,6 +7286,12 @@
           "name": "input",
           "description": "Dispatched immediately after changes by the user"
         }
+      ],
+      "slots": [
+        {
+          "name": "inline-help",
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
+        }
       ]
     },
     {
@@ -7687,6 +7707,12 @@
           "name": "change",
           "description": "Dispatched when there is a change to selected time. `value` corresponds to the selected value and is formatted in ISO 8601 time format (`hh:mm:ss`)."
         }
+      ],
+      "slots": [
+        {
+          "name": "inline-help",
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
+        }
       ]
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",