@brightspace-ui/core 3.1.0 → 3.1.2

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-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-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/components/table/demo/table-test.js

@@ -60,7 +60,6 @@ class TestTable extends RtlMixin(DemoPassthroughMixin(TableWrapper, 'd2l-table-w
 				padding-block: 0;
 			}
 			.d2l-table > * > tr > :has(d2l-table-col-sort-button) d2l-button-icon {
-				margin-bottom: 4px;
 				vertical-align: top;
 			}
 		`];

package/components/table/table-col-sort-button.js

@@ -35,8 +35,7 @@ export class TableColSortButton extends FocusMixin(LitElement) {
 		return css`
 			:host {
 				--d2l-table-col-sort-button-additional-padding-inline-end: 0px; /* stylelint-disable-line length-zero-no-unit */
-				--d2l-table-col-sort-button-margin-inline-end: var(--d2l-table-cell-col-sort-button-size-offset, 4px);
-				--d2l-table-col-sort-button-width: calc(100% - 2 * var(--d2l-table-cell-col-sort-button-size-offset));
+				--d2l-table-col-sort-button-width: calc(100% - var(--d2l-table-cell-col-sort-button-size-offset, 4px));
 			}
 			:host([nosort]) {
 				--d2l-table-col-sort-button-additional-padding-inline-end: calc(0.6rem + 18px);
@@ -53,8 +52,8 @@ export class TableColSortButton extends FocusMixin(LitElement) {
 				font-size: inherit;
 				letter-spacing: inherit;
 				line-height: 0.9rem;
-				margin: var(--d2l-table-cell-col-sort-button-size-offset, 4px);
-				margin-inline-end: var(--d2l-table-col-sort-button-margin-inline-end);
+				margin-block: 0 var(--d2l-table-cell-col-sort-button-size-offset, 4px);
+				margin-inline: 0 var(--d2l-table-cell-col-sort-button-size-offset, 4px);
 				padding: calc(var(--d2l-table-cell-padding) - var(--d2l-table-cell-col-sort-button-size-offset, 4px));
 				padding-inline-end: calc(var(--d2l-table-cell-padding) - var(--d2l-table-cell-col-sort-button-size-offset, 4px) + var(--d2l-table-col-sort-button-additional-padding-inline-end));
 				text-decoration: none;

package/components/table/table-wrapper.js

@@ -94,22 +94,13 @@ export const tableStyles = css`
 	}
 	d2l-table-col-sort-button:not(:only-child) {
 		--d2l-table-col-sort-button-additional-padding-inline-end: 0px; /* stylelint-disable-line length-zero-no-unit */
-		display: inline-flex;
-		margin-inline-start: calc(-1 * var(--d2l-table-cell-col-sort-button-size-offset));
-		margin-top: calc(-1 * var(--d2l-table-cell-col-sort-button-size-offset));
-	}
-	d2l-table-col-sort-button:not(:last-child) {
-		--d2l-table-col-sort-button-margin-inline-end: 0;
 	}
 
 	/* TODO: once we only support browsers that support :has the section below can be removed up until @supports */
 	.d2l-table th.d2l-table-header-col-sortable {
-		height: var(--d2l-table-cell-overall-height);
-		padding: 0;
-	}
-	.d2l-table th.d2l-table-header-col-sortable.d2l-table-header-col-sortable-siblings {
 		height: calc(var(--d2l-table-cell-overall-height) - var(--d2l-table-cell-col-sort-button-size-offset));
-		padding-top: var(--d2l-table-cell-col-sort-button-size-offset);
+		padding-block: var(--d2l-table-cell-col-sort-button-size-offset) 0;
+		padding-inline: var(--d2l-table-cell-col-sort-button-size-offset) 0;
 	}
 	.d2l-table th.d2l-table-header-col-sortable-siblings d2l-table-col-sort-button {
 		--d2l-table-col-sort-button-width: unset;
@@ -118,14 +109,10 @@ export const tableStyles = css`
 		padding-inline-end: calc(0.6rem + 18px);
 	}
 	@supports selector(:has(a, b)) {
-		.d2l-table th:has(d2l-table-col-sort-button) {
-			height: var(--d2l-table-cell-overall-height);
-			padding: 0;
-		}
-		.d2l-table th:has(d2l-table-col-sort-button:not(:only-child)) {
+		.d2l-table > * > tr > th:has(d2l-table-col-sort-button) {
 			height: calc(var(--d2l-table-cell-overall-height) - var(--d2l-table-cell-col-sort-button-size-offset));
-			padding-inline-start: var(--d2l-table-cell-col-sort-button-size-offset);
-			padding-top: var(--d2l-table-cell-col-sort-button-size-offset);
+			padding-block: var(--d2l-table-cell-col-sort-button-size-offset) 0;
+			padding-inline: var(--d2l-table-cell-col-sort-button-size-offset) 0;
 		}
 		.d2l-table th:has(d2l-table-col-sort-button:not(:only-child)) d2l-table-col-sort-button {
 			--d2l-table-col-sort-button-width: unset;

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."
         }
       ]
     },
@@ -7044,6 +7048,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 +7280,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 +7701,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.0",
+  "version": "3.1.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",