@brightspace-ui/core 3.119.1 → 3.121.0

package/components/demo/demo-snippet.js

@@ -192,7 +192,13 @@ class DemoSnippet extends LitElement {
 		text = text.replace(/^[\t]*<template>[\n]*/, '').replace(/[\n]*[\t]*<\/template>$/, '');
 
 		// fix script whitespace (for some reason brower keeps <script> indent but not the rest)
-		let lines = text.replace(/\t/g, '  ').replace(/<\/script>/g, '\n</script>').replace(/<script>/g, '<script>\n').replace(/<script type="module">/g, '<script type="module">\n').split('\n');
+		let lines = text
+			.replace(/\t/g, '  ')
+			.replace(/<\/script>/g, '\n</script>')
+			.replace(/<script>/g, '<script>\n')
+			.replace(/<script type="module">/g, '<script type="module">\n')
+			.replace(/<script data-demo-hide(.+?)<\/script>/gis, '')
+			.split('\n');
 		let scriptIndent = 0;
 		lines = lines.map((l) => {
 			if (l.indexOf('<script') > -1) {

package/components/form/form-helper.js

@@ -1,5 +1,6 @@
 
 import { cssEscape } from '../../helpers/dom.js';
+import { getFlag } from '../../helpers/flags.js';
 
 const formElements = {
 	button: true,
@@ -152,6 +153,12 @@ const _hasFormData = (node, submitter) => {
 			return false;
 		}
 	}
+	if (tagName === 'd2l-input-checkbox') {
+		const useFormElementMixin = getFlag('input-checkbox-form-element', true);
+		if (!useFormElementMixin || !node.checked) {
+			return false;
+		}
+	}
 	if (tagName === 'object' || tagName === 'output') {
 		return false;
 	}

package/components/inputs/input-checkbox.js

@@ -3,6 +3,7 @@ import '../tooltip/tooltip.js';
 import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -68,7 +69,7 @@ export const checkboxStyles = css`
  * @slot supporting - Supporting information which will appear below and be aligned with the checkbox.
  * @fires change - Dispatched when the checkbox's state changes
  */
-class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitElement))) {
+class InputCheckbox extends FormElementMixin(InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitElement)))) {
 
 	static get properties() {
 		return {
@@ -111,11 +112,6 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 			 * @type {boolean}
 			 */
 			labelHidden: { attribute: 'label-hidden', reflect: true, type: Boolean },
-			/**
-			 * Name of the input
-			 * @type {string}
-			 */
-			name: { type: String },
 			/**
 			 * ACCESSIBILITY: ADVANCED: Sets "tabindex="-1"" on the checkbox. Note that an alternative method of focusing is necessary to implement if using this property.
 			 * @type {boolean}
@@ -257,6 +253,13 @@ class InputCheckbox extends InputInlineHelpMixin(FocusMixin(SkeletonMixin(LitEle
 		`;
 	}
 
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('value')) {
+			this.setFormValue(this.value); // d2l-form handles not using value when unchecked
+		}
+	}
+
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
 		if (changedProperties.has('ariaLabel') && this.ariaLabel !== undefined) {

package/custom-elements.json

@@ -5254,12 +5254,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "name",
-          "description": "Name of the input",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "not-tabbable",
           "description": "ACCESSIBILITY: ADVANCED: Sets \"tabindex=\"-1\"\" on the checkbox. Note that an alternative method of focusing is necessary to implement if using this property.",
@@ -5272,6 +5266,12 @@
           "type": "string",
           "default": "\"on\""
         },
+        {
+          "name": "name",
+          "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "skeleton",
           "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
@@ -5326,13 +5326,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "name",
-          "attribute": "name",
-          "description": "Name of the input",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "notTabbable",
           "attribute": "not-tabbable",
@@ -5347,6 +5340,13 @@
           "type": "string",
           "default": "\"on\""
         },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
+          "type": "string",
+          "default": "\"\""
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",

package/helpers/flags.js

@@ -1 +1,16 @@
-export const getFlag = (key, defaultValue) => window.D2L?.LP?.Web?.UI?.Flags.Flag(key, defaultValue) ?? defaultValue;
+const flagOverrides = new Map();
+
+export function getFlag(key, defaultValue) {
+	if (flagOverrides.has(key)) {
+		return flagOverrides.get(key);
+	}
+	return window.D2L?.LP?.Web?.UI?.Flags.Flag(key, defaultValue) ?? defaultValue;
+}
+
+export function mockFlag(key, value) {
+	flagOverrides.set(key, value);
+}
+
+export function resetFlag(key) {
+	flagOverrides.delete(key);
+}

package/package.json

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