@brightspace-ui/core 3.192.1 → 3.194.0

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

@@ -55,11 +55,12 @@ input.addEventListener('change', (e) => {
 * `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
+## Accessibility
 
-To make your usage of `d2l-input-color` accessible, use the following properties when applicable:
+At its core, the color input is a button, so it relies on standard button semantics and adheres to [W3C's Button Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button) to ensure a smooth experience for all assistive technologies, but there are a few interesting details to note:
 
-| Attribute | Description |
-|---|---|
-| `label` | **REQUIRED** when type is `custom`. [Acts as a primary label for the button](https://www.w3.org/WAI/tutorials/forms/labels/). Visible unless `label-hidden` is also used. |
-| `label-hidden` | Use if label should be visually hidden. |
+ * `label` is required if `type` is `custom`, since it acts as a primary label for the button
+   * However, if `type` is set to `background` or `foreground` a simple default will be used if `label` is left empty
+ * `label-hidden` can be used to hide the label when there is sufficient visual context for sighted users; the label will remain available to screen reader users who may lack the visual context
+ * `associated-value` allows you to set a hex color against which the input's color contrast will be measured, which ensures end users will get appropriate warnings if they choose inaccessible color combinations
+ * The color input remains focusable even when `disabled` or in `read-only` mode, so that users can access the tooltip giving the current value

package/components/inputs/input-color.js

@@ -91,7 +91,7 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
 	static get properties() {
 		return {
 			/**
-			 * Value of an associated color as a HEX which will be used for color contrast analysis
+			 * ACCESSIBILITY: Value of an associated color as a HEX which will be used for color contrast analysis
 			 * @type {string}
 			 */
 			associatedValue: { attribute: 'associated-value', type: String },
@@ -106,7 +106,7 @@ class InputColor extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(F
 			 */
 			disallowNone: { attribute: 'disallow-none', type: Boolean },
 			/**
-			 * REQUIRED: Label for the input, comes with a default value for background & foreground types.
+			 * ACCESSIBILITY: REQUIRED: Label for the input, comes with a default value for background & foreground types.
 			 * @type {string}
 			 */
 			label: {

package/components/list/list-item-mixin.js

@@ -98,7 +98,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			 */
 			noPrimaryAction: { type: Boolean, attribute: 'no-primary-action' },
 			/**
-			 * How much padding to render list items with
+			 * How much padding to render in standard/normal list items
 			 * @type {'normal'|'none'}
 			 */
 			paddingType: { type: String, attribute: 'padding-type' },
@@ -107,6 +107,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			 * @type {boolean}
 			 */
 			tileHeader: { type: Boolean, reflect: true, attribute: 'tile-header' },
+			/**
+			 * How much padding to render in tile list items
+			 * @type {'normal'|'none'}
+			 * @default "normal"
+			 */
+			tilePaddingType: { type: String, attribute: 'tile-padding-type' },
 			_addButtonText: { state: true },
 			_displayKeyboardTooltip: { type: Boolean },
 			_hasColorSlot: { type: Boolean, reflect: true, attribute: '_has-color-slot' },
@@ -451,6 +457,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				height: 100%;
 				padding: 0.6rem;
 			}
+			:host([layout="tile"][tile-padding-type="none"]) .d2l-list-item-content {
+				padding: 0;
+			}
 
 			:host([layout="tile"]) [slot="content"] ::slotted([slot="illustration"]),
 			:host([layout="tile"]) .d2l-list-item-illustration > * {
@@ -464,11 +473,21 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				max-height: unset;
 				max-width: calc(100% + 1.1rem);
 			}
+			:host([layout="tile"][tile-padding-type="none"]) [slot="content"] ::slotted([slot="illustration"]),
+			:host([layout="tile"][tile-padding-type="none"]) .d2l-list-item-illustration > * {
+				margin-block: 0;
+				margin-inline: 0;
+			}
+
 			:host([layout="tile"][tile-header]) [slot="content"] ::slotted([slot="illustration"]),
 			:host([layout="tile"][tile-header]) .d2l-list-item-illustration > * {
 				border-radius: 0;
 				margin-block: -0.6rem 0.6rem;
 			}
+			:host([layout="tile"][tile-header][tile-padding-type="none"]) [slot="content"] ::slotted([slot="illustration"]),
+			:host([layout="tile"][tile-header][tile-padding-type="none"]) .d2l-list-item-illustration > * {
+				margin-block: 0;
+			}
 
 			:host([layout="tile"]) [slot="content"] ::slotted(d2l-icon[slot="illustration"]),
 			:host([layout="tile"]) .d2l-list-item-illustration > d2l-icon[slot="illustration"] {
@@ -482,6 +501,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				border-bottom: 1px solid var(--d2l-color-mica);
 				width: calc(100% + 1.1rem);
 			}
+			:host([layout="tile"][tile-padding-type="none"]) [slot="content"] ::slotted(div[slot="illustration"]),
+			:host([layout="tile"][tile-padding-type="none"]) .d2l-list-item-illustration > div[slot="illustration"],
+			:host([layout="tile"][tile-padding-type="none"]) [slot="content"] ::slotted(d2l-icon[slot="illustration"]),
+			:host([layout="tile"][tile-padding-type="none"]) .d2l-list-item-illustration > d2l-icon[slot="illustration"] {
+				width: 100%;
+			}
 
 			:host([layout="tile"]:not([selection-disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"],
 			:host([layout="tile"]) [slot="outside-control-container"] {
@@ -601,6 +626,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this.noPrimaryAction = false;
 		this.paddingType = 'normal';
 		this.tileHeader = false;
+		this.tilePaddingType = 'normal';
 		this._addButtonTopId = getUniqueId();
 		this._contentId = getUniqueId();
 		this._displayKeyboardTooltip = false;

package/custom-elements.json

@@ -5476,12 +5476,12 @@
       "attributes": [
         {
           "name": "label",
-          "description": "REQUIRED: Label for the input, comes with a default value for background & foreground types.",
+          "description": "ACCESSIBILITY: REQUIRED: Label for the input, comes with a default value for background & foreground types.",
           "type": "string"
         },
         {
           "name": "associated-value",
-          "description": "Value of an associated color as a HEX which will be used for color contrast analysis",
+          "description": "ACCESSIBILITY: Value of an associated color as a HEX which will be used for color contrast analysis",
           "type": "string"
         },
         {
@@ -5534,13 +5534,13 @@
         {
           "name": "label",
           "attribute": "label",
-          "description": "REQUIRED: Label for the input, comes with a default value for background & foreground types.",
+          "description": "ACCESSIBILITY: REQUIRED: Label for the input, comes with a default value for background & foreground types.",
           "type": "string"
         },
         {
           "name": "associatedValue",
           "attribute": "associated-value",
-          "description": "Value of an associated color as a HEX which will be used for color contrast analysis",
+          "description": "ACCESSIBILITY: Value of an associated color as a HEX which will be used for color contrast analysis",
           "type": "string"
         },
         {
@@ -8937,7 +8937,7 @@
         },
         {
           "name": "padding-type",
-          "description": "How much padding to render list items with",
+          "description": "How much padding to render in standard/normal list items",
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
@@ -8947,6 +8947,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "tile-padding-type",
+          "description": "How much padding to render in tile list items",
+          "type": "'normal'|'none'",
+          "default": "\"\\\"normal\\\"\""
+        },
         {
           "name": "selection-disabled-tooltip",
           "description": "**Selection:** Tooltip text when selection is disabled",
@@ -9067,7 +9073,7 @@
         {
           "name": "paddingType",
           "attribute": "padding-type",
-          "description": "How much padding to render list items with",
+          "description": "How much padding to render in standard/normal list items",
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
@@ -9078,6 +9084,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "tilePaddingType",
+          "attribute": "tile-padding-type",
+          "description": "How much padding to render in tile list items",
+          "type": "'normal'|'none'",
+          "default": "\"\\\"normal\\\"\""
+        },
         {
           "name": "selectionDisabledTooltip",
           "attribute": "selection-disabled-tooltip",
@@ -9327,7 +9340,7 @@
         },
         {
           "name": "padding-type",
-          "description": "How much padding to render list items with",
+          "description": "How much padding to render in standard/normal list items",
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
@@ -9337,6 +9350,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "tile-padding-type",
+          "description": "How much padding to render in tile list items",
+          "type": "'normal'|'none'",
+          "default": "\"\\\"normal\\\"\""
+        },
         {
           "name": "selection-disabled-tooltip",
           "description": "**Selection:** Tooltip text when selection is disabled",
@@ -9464,7 +9483,7 @@
         {
           "name": "paddingType",
           "attribute": "padding-type",
-          "description": "How much padding to render list items with",
+          "description": "How much padding to render in standard/normal list items",
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
@@ -9475,6 +9494,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "tilePaddingType",
+          "attribute": "tile-padding-type",
+          "description": "How much padding to render in tile list items",
+          "type": "'normal'|'none'",
+          "default": "\"\\\"normal\\\"\""
+        },
         {
           "name": "selectionDisabledTooltip",
           "attribute": "selection-disabled-tooltip",
@@ -9854,7 +9880,7 @@
         },
         {
           "name": "padding-type",
-          "description": "How much padding to render list items with",
+          "description": "How much padding to render in standard/normal list items",
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
@@ -9864,6 +9890,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "tile-padding-type",
+          "description": "How much padding to render in tile list items",
+          "type": "'normal'|'none'",
+          "default": "\"\\\"normal\\\"\""
+        },
         {
           "name": "selection-disabled-tooltip",
           "description": "**Selection:** Tooltip text when selection is disabled",
@@ -10003,7 +10035,7 @@
         {
           "name": "paddingType",
           "attribute": "padding-type",
-          "description": "How much padding to render list items with",
+          "description": "How much padding to render in standard/normal list items",
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
@@ -10014,6 +10046,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "tilePaddingType",
+          "attribute": "tile-padding-type",
+          "description": "How much padding to render in tile list items",
+          "type": "'normal'|'none'",
+          "default": "\"\\\"normal\\\"\""
+        },
         {
           "name": "selectionDisabledTooltip",
           "attribute": "selection-disabled-tooltip",
@@ -10197,7 +10236,7 @@
         },
         {
           "name": "padding-type",
-          "description": "How much padding to render list items with",
+          "description": "How much padding to render in standard/normal list items",
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
@@ -10207,6 +10246,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "tile-padding-type",
+          "description": "How much padding to render in tile list items",
+          "type": "'normal'|'none'",
+          "default": "\"\\\"normal\\\"\""
+        },
         {
           "name": "selection-disabled-tooltip",
           "description": "**Selection:** Tooltip text when selection is disabled",
@@ -10339,7 +10384,7 @@
         {
           "name": "paddingType",
           "attribute": "padding-type",
-          "description": "How much padding to render list items with",
+          "description": "How much padding to render in standard/normal list items",
           "type": "'normal'|'none'",
           "default": "\"normal\""
         },
@@ -10350,6 +10395,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "tilePaddingType",
+          "attribute": "tile-padding-type",
+          "description": "How much padding to render in tile list items",
+          "type": "'normal'|'none'",
+          "default": "\"\\\"normal\\\"\""
+        },
         {
           "name": "selectionDisabledTooltip",
           "attribute": "selection-disabled-tooltip",

package/helpers/mathjax.js

@@ -1,5 +1,3 @@
-import { getFlag } from './flags.js';
-
 /* When updating MathJax, update mathjaxBaseUrl to use the new version
  * and verify that the font mappings included in mathjaxFontMappings
  * match what's present in the MathJax-src repo.
@@ -40,16 +38,10 @@ class HtmlBlockMathRenderer {
 
 	async render(elem, options) {
 		if (!options.contextValues) return elem;
-		let context = options.contextValues.get(mathjaxContextKey);
-
-		if (getFlag('shield-12649-mathjax-default-context', true)) {
-			context = context || {
-				renderLatex: false,
-				outputScale: 1
-			};
-		} else {
-			if (context === undefined) return elem;
-		}
+		const context = options.contextValues.get(mathjaxContextKey) || {
+			renderLatex: false,
+			outputScale: 1
+		};
 
 		if (!elem.querySelector('math') && !(context.renderLatex && /\$\$|\\\(|\\\[|\\begin{|\\ref{|\\eqref{/.test(elem.innerHTML))) return elem;
 

package/package.json

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