@brightspace-ui/core 1.188.1 → 1.189.0

package/custom-elements.json

@@ -4045,11 +4045,6 @@
       "path": "./components/inputs/input-date-time.js",
       "description": "A component that consists of a \"<d2l-input-date>\" and a \"<d2l-input-time>\" component. The time input only appears once a date is selected. This component displays the \"value\" if one is specified, and reflects the selected value when one is selected or entered.",
       "attributes": [
-        {
-          "name": "label",
-          "description": "REQUIRED: Accessible label for the input fieldset that wraps the date and time inputs",
-          "type": "string"
-        },
         {
           "name": "max-value",
           "description": "Maximum valid date/time that could be selected by a user",
@@ -4101,6 +4096,16 @@
           "type": "string",
           "default": "\"startOfDay\""
         },
+        {
+          "name": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
         {
           "name": "skeleton",
           "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
@@ -4109,12 +4114,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "label",
-          "attribute": "label",
-          "description": "REQUIRED: Accessible label for the input fieldset that wraps the date and time inputs",
-          "type": "string"
-        },
         {
           "name": "maxValue",
           "attribute": "max-value",
@@ -4175,6 +4174,23 @@
           "type": "string",
           "default": "\"startOfDay\""
         },
+        {
+          "name": "labelledBy",
+          "attribute": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -4187,6 +4203,9 @@
         {
           "name": "change",
           "description": "Dispatched when there is a change to selected date or selected time. \"value\" corresponds to the selected value and is formatted in ISO 8601 combined date and time format (\"YYYY-MM-DDTHH:mm:ss.sssZ\")."
+        },
+        {
+          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -4195,11 +4214,6 @@
       "path": "./components/inputs/input-date.js",
       "description": "A component that consists of a text input field for typing a date and an attached calendar (d2l-calendar) dropdown. It displays the \"value\" if one is specified, or a placeholder if not, and reflects the selected value when one is selected in the calendar or entered in the text input.",
       "attributes": [
-        {
-          "name": "label",
-          "description": "REQUIRED: Accessible label for the input",
-          "type": "string"
-        },
         {
           "name": "max-value",
           "description": "Maximum valid date that could be selected by a user",
@@ -4246,6 +4260,16 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
         {
           "name": "skeleton",
           "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
@@ -4254,12 +4278,6 @@
         }
       ],
       "properties": [
-        {
-          "name": "label",
-          "attribute": "label",
-          "description": "REQUIRED: Accessible label for the input",
-          "type": "string"
-        },
         {
           "name": "maxValue",
           "attribute": "max-value",
@@ -4314,6 +4332,23 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "labelledBy",
+          "attribute": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -4326,6 +4361,9 @@
         {
           "name": "change",
           "description": "Dispatched when there is a change to selected date. \"value\" corresponds to the selected value and is formatted in ISO 8601 calendar date format (\"YYYY-MM-DD\")."
+        },
+        {
+          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -4409,11 +4447,6 @@
           "description": "Hide the alert icon when input is invalid",
           "type": "boolean"
         },
-        {
-          "name": "label",
-          "description": "Label for the input",
-          "type": "string"
-        },
         {
           "name": "max",
           "description": "Maximum value allowed",
@@ -4496,6 +4529,16 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
         {
           "name": "skeleton",
           "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
@@ -4516,12 +4559,6 @@
           "description": "Hide the alert icon when input is invalid",
           "type": "boolean"
         },
-        {
-          "name": "label",
-          "attribute": "label",
-          "description": "Label for the input",
-          "type": "string"
-        },
         {
           "name": "max",
           "attribute": "max",
@@ -4626,6 +4663,23 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "labelledBy",
+          "attribute": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -4638,6 +4692,9 @@
         {
           "name": "change",
           "description": "Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value."
+        },
+        {
+          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -4665,11 +4722,6 @@
           "description": "Restricts the maximum width of the input box without impacting the width of the label.",
           "type": "string"
         },
-        {
-          "name": "label",
-          "description": "REQUIRED: Label for the input",
-          "type": "string"
-        },
         {
           "name": "max-fraction-digits",
           "description": "Maximum number of decimal values to show (rounds value up or down).",
@@ -4719,6 +4771,16 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
         {
           "name": "skeleton",
           "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
@@ -4733,12 +4795,6 @@
           "description": "Restricts the maximum width of the input box without impacting the width of the label.",
           "type": "string"
         },
-        {
-          "name": "label",
-          "attribute": "label",
-          "description": "REQUIRED: Label for the input",
-          "type": "string"
-        },
         {
           "name": "maxFractionDigits",
           "attribute": "max-fraction-digits",
@@ -4797,6 +4853,23 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "labelledBy",
+          "attribute": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -4809,6 +4882,9 @@
         {
           "name": "change",
           "description": "Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value."
+        },
+        {
+          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -4955,11 +5031,6 @@
           "description": "Restricts the maximum width of the input box without impacting the width of the label.",
           "type": "string"
         },
-        {
-          "name": "label",
-          "description": "REQUIRED: Label for the input",
-          "type": "string"
-        },
         {
           "name": "live",
           "description": "Set the priority with which screen readers should treat updates to the input's live text region",
@@ -5068,6 +5139,16 @@
           "type": "'text'|'email'|'number'|'password'|'search'|'tel'|'url'",
           "default": "\"text\""
         },
+        {
+          "name": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
         {
           "name": "skeleton",
           "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
@@ -5112,12 +5193,6 @@
           "description": "Restricts the maximum width of the input box without impacting the width of the label.",
           "type": "string"
         },
-        {
-          "name": "label",
-          "attribute": "label",
-          "description": "REQUIRED: Label for the input",
-          "type": "string"
-        },
         {
           "name": "live",
           "attribute": "live",
@@ -5246,6 +5321,23 @@
           "type": "'text'|'email'|'number'|'password'|'search'|'tel'|'url'",
           "default": "\"text\""
         },
+        {
+          "name": "labelledBy",
+          "attribute": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -5262,6 +5354,9 @@
         {
           "name": "input",
           "description": "Dispatched immediately after changes by the user"
+        },
+        {
+          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -5294,11 +5389,6 @@
           "description": "Additional information communicated in the aria-describedby on the input",
           "type": "string"
         },
-        {
-          "name": "label",
-          "description": "REQUIRED: Label for the input",
-          "type": "string"
-        },
         {
           "name": "maxlength",
           "description": "Imposes an upper character limit",
@@ -5360,6 +5450,16 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
         {
           "name": "skeleton",
           "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
@@ -5380,12 +5480,6 @@
           "description": "Additional information communicated in the aria-describedby on the input",
           "type": "string"
         },
-        {
-          "name": "label",
-          "attribute": "label",
-          "description": "REQUIRED: Label for the input",
-          "type": "string"
-        },
         {
           "name": "maxlength",
           "attribute": "maxlength",
@@ -5458,6 +5552,23 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "labelledBy",
+          "attribute": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -5474,6 +5585,9 @@
         {
           "name": "input",
           "description": "Dispatched immediately after changes by the user"
+        },
+        {
+          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -5704,11 +5818,6 @@
           "description": "Default value of input. Accepts times formatted as \"hh:mm:ss\", and the keywords \"startOfDay\" and \"endOfDay\".",
           "type": "string"
         },
-        {
-          "name": "label",
-          "description": "REQUIRED: Accessible label for the input",
-          "type": "string"
-        },
         {
           "name": "max-height",
           "description": "Overrides max-height of the time dropdown menu",
@@ -5755,6 +5864,16 @@
           "type": "'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'",
           "default": "\"thirty\""
         },
+        {
+          "name": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
         {
           "name": "skeleton",
           "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
@@ -5769,12 +5888,6 @@
           "description": "Default value of input. Accepts times formatted as \"hh:mm:ss\", and the keywords \"startOfDay\" and \"endOfDay\".",
           "type": "string"
         },
-        {
-          "name": "label",
-          "attribute": "label",
-          "description": "REQUIRED: Accessible label for the input",
-          "type": "string"
-        },
         {
           "name": "maxHeight",
           "attribute": "max-height",
@@ -5829,6 +5942,23 @@
           "type": "'five'|'ten'|'fifteen'|'twenty'|'thirty'|'sixty'",
           "default": "\"thirty\""
         },
+        {
+          "name": "labelledBy",
+          "attribute": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",
@@ -5841,6 +5971,9 @@
         {
           "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\")."
+        },
+        {
+          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -5977,6 +6110,173 @@
         }
       ]
     },
+    {
+      "name": "d2l-demo-list-item-custom",
+      "path": "./components/list/demo/list-item-custom.js",
+      "attributes": [
+        {
+          "name": "breakpoints",
+          "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
+          "type": "array",
+          "default": "[842,636,580,0]"
+        },
+        {
+          "name": "slim",
+          "description": "Whether to render the list-item with reduced whitespace.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "draggable",
+          "description": "**Drag & drop:** Whether the item is draggable",
+          "type": "boolean"
+        },
+        {
+          "name": "drag-handle-text",
+          "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
+          "type": "string"
+        },
+        {
+          "name": "drop-text",
+          "description": "**Drag & drop:** Text to drag and drop",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean"
+        },
+        {
+          "name": "key",
+          "description": "Value to identify item if selectable",
+          "type": "string"
+        },
+        {
+          "name": "selectable",
+          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "selected",
+          "description": "**Selection:** Whether the item is selected",
+          "type": "boolean"
+        },
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "breakpoints",
+          "attribute": "breakpoints",
+          "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
+          "type": "array",
+          "default": "[842,636,580,0]"
+        },
+        {
+          "name": "slim",
+          "attribute": "slim",
+          "description": "Whether to render the list-item with reduced whitespace.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "draggable",
+          "attribute": "draggable",
+          "description": "**Drag & drop:** Whether the item is draggable",
+          "type": "boolean"
+        },
+        {
+          "name": "dragHandleText",
+          "attribute": "drag-handle-text",
+          "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
+          "type": "string"
+        },
+        {
+          "name": "dropText",
+          "attribute": "drop-text",
+          "description": "**Drag & drop:** Text to drag and drop",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "**Selection:** Disables the input",
+          "type": "boolean"
+        },
+        {
+          "name": "key",
+          "attribute": "key",
+          "description": "Value to identify item if selectable",
+          "type": "string"
+        },
+        {
+          "name": "selectable",
+          "attribute": "selectable",
+          "description": "**Selection:** Indicates a input should be rendered for selecting the item",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "**Selection:** Whether the item is selected",
+          "type": "boolean"
+        },
+        {
+          "name": "selectionInfo"
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "labelledBy",
+          "attribute": "labelled-by",
+          "description": "The id of element that provides the label for this element",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "REQUIRED: Explicitly defined label for the element",
+          "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-list-item-position-change"
+        },
+        {
+          "name": "d2l-list-item-selected"
+        },
+        {
+          "name": "d2l-labelled-mixin-label-elem-change"
+        }
+      ]
+    },
     {
       "name": "d2l-list-header",
       "path": "./components/list/list-header.js",
@@ -6064,7 +6364,7 @@
         },
         {
           "name": "label",
-          "description": "Explicitly defined label used to provide context for accessibility",
+          "description": "REQUIRED: Explicitly defined label for the element",
           "type": "string"
         }
       ],
@@ -6144,8 +6444,13 @@
         {
           "name": "label",
           "attribute": "label",
-          "description": "Explicitly defined label used to provide context for accessibility",
+          "description": "REQUIRED: Explicitly defined label for the element",
           "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
         }
       ],
       "events": [
@@ -6377,7 +6682,7 @@
         },
         {
           "name": "label",
-          "description": "Explicitly defined label used to provide context for accessibility",
+          "description": "REQUIRED: Explicitly defined label for the element",
           "type": "string"
         }
       ],
@@ -6469,8 +6774,13 @@
         {
           "name": "label",
           "attribute": "label",
-          "description": "Explicitly defined label used to provide context for accessibility",
+          "description": "REQUIRED: Explicitly defined label for the element",
           "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
         }
       ],
       "events": [
@@ -6569,6 +6879,9 @@
         {
           "name": "d2l-list-selection-change",
           "description": "Dispatched when the selection state changes"
+        },
+        {
+          "name": "d2l-selection-provider-connected"
         }
       ],
       "slots": [
@@ -7672,7 +7985,7 @@
         },
         {
           "name": "label",
-          "description": "Explicitly defined label used to provide context for accessibility",
+          "description": "REQUIRED: Explicitly defined label for the element",
           "type": "string"
         }
       ],
@@ -7718,8 +8031,13 @@
         {
           "name": "label",
           "attribute": "label",
-          "description": "Explicitly defined label used to provide context for accessibility",
+          "description": "REQUIRED: Explicitly defined label for the element",
           "type": "string"
+        },
+        {
+          "name": "labelRequired",
+          "type": "boolean",
+          "default": "true"
         }
       ],
       "events": [
@@ -7850,6 +8168,11 @@
           "type": "boolean",
           "default": "false"
         }
+      ],
+      "events": [
+        {
+          "name": "d2l-selection-provider-connected"
+        }
       ]
     },
     {