@brightspace-ui/core 3.69.0 → 3.71.0

package/components/inputs/demo/input-text.html

@@ -132,9 +132,9 @@
 			<h2>Inline Help</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-text label="Name">
+					<d2l-input-text label="Alphabet" pattern="[a-z]*" pattern-failure-text="Must be a lowercase letter from a to z">
 						<div slot="inline-help">
-							Help text <b>right here</b>!
+							Enter only lowercase letters from the alphabet.
 						</div>
 					</d2l-input-text>
 				</template>

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

@@ -81,6 +81,7 @@ The `<d2l-input-text>` element is a simple wrapper around the native `<input typ
 | `name` | String | Name of the input |
 | `novalidate` | Boolean | Disables the built-in validation |
 | `pattern` | String | Regular expression pattern to validate the value |
+| `pattern-failure-text` | String | Text to display when input fails validation against the pattern. If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`. |
 | `prevent-submit` | Boolean | Prevents pressing ENTER from submitting forms |
 | `readonly` | Boolean | Makes the input read-only |
 | `required` | Boolean | Indicates that a value is required |

package/components/inputs/input-text.js

@@ -102,12 +102,12 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 			 */
 			minlength: { type: Number },
 			/**
-			 * Regular expression pattern to validate the value
+			 * ADVANCED: Regular expression pattern to validate the value
 			 * @type {string}
 			 */
 			pattern: { type: String },
 			/**
-			 * Text to display when input fails validation against the pattern
+			 * ADVANCED: Text to display when input fails validation against the pattern.  If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`.
 			 */
 			patternFailureText: { type: String, attribute: 'pattern-failure-text' },
 			/**
@@ -332,6 +332,8 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 			} else if (this.type === 'url') {
 				return this.localize('components.form-element.input.url.typeMismatch');
 			}
+		} else if (this.validity.patternMismatch && (typeof this.patternFailureText === 'string')) {
+			return this.patternFailureText;
 		}
 		return super.validationMessage;
 	}

package/components/inputs/sass/checkbox.scss

@@ -1,4 +1,4 @@
-@import "../../colors/colors.scss";
+@use "../../colors/colors.scss";
 
 @mixin d2l-input-checkbox() {
 	-webkit-appearance: none;
@@ -21,13 +21,13 @@
 	}
 	&,
 	&:hover:disabled {
-		background-color: $d2l-color-regolith;
-		border-color: $d2l-color-galena;
+		background-color: colors.$d2l-color-regolith;
+		border-color: colors.$d2l-color-galena;
 		border-width: 1px;
 	}
 	&:hover,
 	&:focus {
-		border-color: $d2l-color-celestine;
+		border-color: colors.$d2l-color-celestine;
 		border-width: 2px;
 		outline-width: 0;
 	}

package/components/inputs/sass/radio.scss

@@ -1,4 +1,4 @@
-@import "../../colors/colors.scss";
+@use "../../colors/colors.scss";
 
 @mixin d2l-input-radio() {
 	-webkit-appearance: none;
@@ -21,18 +21,18 @@
 	}
 	&,
 	&:hover:disabled {
-		background-color: $d2l-color-regolith;
-		border-color: $d2l-color-galena;
+		background-color: colors.$d2l-color-regolith;
+		border-color: colors.$d2l-color-galena;
 		border-width: 1px;
 	}
 	&:hover,
 	&:focus {
-		border-color: $d2l-color-celestine;
+		border-color: colors.$d2l-color-celestine;
 		border-width: 2px;
 		outline-width: 0;
 	}
 	&[aria-invalid="true"] {
-		border-color: $d2l-color-cinnabar;
+		border-color: colors.$d2l-color-cinnabar;
 	}
 	&:disabled {
 		opacity: 0.5;

package/components/inputs/sass/select.scss

@@ -1,4 +1,4 @@
-@import "../../colors/colors.scss";
+@use "../../colors/colors.scss";
 
 @mixin d2l-input-select() {
 	-webkit-appearance: none;
@@ -11,7 +11,7 @@
 	border-radius: 0.3rem;
 	border-style: solid;
 	box-sizing: border-box;
-	color: $d2l-color-ferrite;
+	color: colors.$d2l-color-ferrite;
 	display: inline-block;
 	font-family: inherit;
 	font-size: 0.8rem;
@@ -25,7 +25,7 @@
 	&,
 	&:hover:disabled {
 		background-color: #ffffff;
-		border-color: $d2l-color-galena;
+		border-color: colors.$d2l-color-galena;
 		border-width: 1px;
 		box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */
 		padding: 0.4rem 0.75rem;
@@ -44,7 +44,7 @@
 	}
 	&:hover,
 	&:focus {
-		border-color: $d2l-color-celestine;
+		border-color: colors.$d2l-color-celestine;
 		border-width: 2px;
 		outline-style: none; /* Safari */
 		outline-width: 0;
@@ -56,7 +56,7 @@
 		background-position: center right 17px, center right calc(1px + 11px + 17px);
 		background-repeat: no-repeat, no-repeat;
 		background-size: 11px 7px, 0.8rem 0.8rem;
-		border-color: $d2l-color-cinnabar;
+		border-color: colors.$d2l-color-cinnabar;
 	}
 	&:disabled {
 		opacity: 0.5;
@@ -65,7 +65,7 @@
 	&:focus::-ms-value,
 	&:hover::-ms-value {
 		background-color: transparent;
-		color: $d2l-color-ferrite;
+		color: colors.$d2l-color-ferrite;
 	}
 	/* IE11 to hide the native chevron */
 	&::-ms-expand {

package/components/inputs/sass/text.scss

@@ -1,4 +1,4 @@
-@import "../../colors/colors.scss";
+@use "../../colors/colors.scss";
 
 @mixin d2l-input-text(
 		$include-pseudo-classes: true,
@@ -12,7 +12,7 @@
 	border-width: 1px;
 	box-shadow: inset 0 2px 0 0 rgba(177, 185, 190, 0.2), /* corundum */;
 	box-sizing: border-box;
-	color: $d2l-color-ferrite;
+	color: colors.$d2l-color-ferrite;
 	display: inline-block;
 	font-family: inherit;
 	font-size: 0.8rem;
@@ -27,26 +27,26 @@
 	width: 100%;
 	&::placeholder,
 	&::-ms-input-placeholder {
-		color: $d2l-color-galena;
+		color: colors.$d2l-color-galena;
 		font-size: 0.8rem;
 		font-weight: 400;
 		opacity: 1; /* Firefox has non-1 default */
 	}
 	&:hover,
 	&:focus {
-		border-color: $d2l-color-celestine;
+		border-color: colors.$d2l-color-celestine;
 		border-width: 2px;
 		outline-style: none;
 		outline-width: 0;
 		padding: $padding-focus;
 	}
 	&[aria-invalid="true"] {
-		border-color: $d2l-color-cinnabar;
+		border-color: colors.$d2l-color-cinnabar;
 	}
 	&,
 	&:hover:disabled,
 	&[aria-invalid="true"]:disabled {
-		border-color: $d2l-color-galena;
+		border-color: colors.$d2l-color-galena;
 		border-width: 1px;
 		padding: $padding;
 	}

package/components/inputs/sass/textarea.scss

@@ -1,14 +1,14 @@
-@import "../../colors/colors.scss";
-@import "./text.scss";
+@use "../../colors/colors.scss";
+@use "./text.scss";
 
 @mixin d2l-input-textarea() {
-	@include d2l-input-text(
+	overflow: auto;
+	@include text.d2l-input-text(
 		$include-pseudo-classes: false,
 		$line-height: normal,
 		$padding: 0.5rem 0.75rem,
 		$padding-focus: calc(0.5rem - 1px) calc(0.75rem - 1px)
 	);
-	overflow: auto;
 	&[aria-invalid="true"] {
 		background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICA8cGF0aCBmaWxsPSIjY2QyMDI2IiBkPSJNMTcuNzkgMTUuMTFsLTctMTRhMiAyIDAgMCAwLTMuNTggMGwtNyAxNGExLjk3NSAxLjk3NSAwIDAgMCAuMDkgMS45NEEyIDIgMCAwIDAgMiAxOGgxNGExLjk5NCAxLjk5NCAwIDAgMCAxLjctLjk1IDEuOTY3IDEuOTY3IDAgMCAwIC4wOS0xLjk0ek05IDE2YTEuNSAxLjUgMCAxIDEgMS41LTEuNUExLjUgMS41IDAgMCAxIDkgMTZ6bS45OC00LjgwNmExIDEgMCAwIDEtMS45NiAwbC0uOTktNUExIDEgMCAwIDEgOC4wMSA1aDEuOTgzYTEgMSAwIDAgMSAuOTggMS4xOTR6Ii8+Cjwvc3ZnPgo=");
 		background-position: top 12px right 18px;

package/components/link/link.scss

@@ -1,27 +1,27 @@
-@import "../colors/colors.scss";
+@use "../colors/colors.scss";
 
 @mixin d2l-link() {
 	&,
 	&:visited,
 	&:link,
 	&:active {
-		color: $d2l-color-celestine;
+		color: colors.$d2l-color-celestine;
 		cursor: pointer;
 		text-decoration: none;
 	}
 	&:hover {
-		color: $d2l-color-celestine-minus-1;
+		color: colors.$d2l-color-celestine-minus-1;
 		text-decoration: underline;
 	}
 	&:focus-visible {
 		border-radius: 2px;
-		outline: 2px solid $d2l-color-celestine;
+		outline: 2px solid colors.$d2l-color-celestine;
 		outline-offset: 1px;
 		text-decoration: underline;
 	}
 	.d2l-focus-visible-not-supported &:focus {
 		border-radius: 2px;
-		outline: 2px solid $d2l-color-celestine;
+		outline: 2px solid colors.$d2l-color-celestine;
 		outline-offset: 1px;
 		text-decoration: underline;
 	}
@@ -36,7 +36,7 @@
 	}
 	@media print {
 		&, &:visited, &:link, &:active {
-			color: $d2l-color-ferrite;
+			color: colors.$d2l-color-ferrite;
 		}
 	}
 }

package/components/typography/typography.scss

@@ -1,8 +1,8 @@
-@import "../colors/colors.scss";
+@use "../colors/colors.scss";
 
 @mixin d2l-typography {
 
-	color: $d2l-color-ferrite;
+	color: colors.$d2l-color-ferrite;
 	display: block;
 	font-family: "Lato", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 	font-size: 0.95rem;
@@ -108,7 +108,7 @@
 }
 
 @mixin d2l-body-small {
-	color: $d2l-color-tungsten;
+	color: colors.$d2l-color-tungsten;
 	font-size: 0.7rem;
 	font-weight: 400;
 	line-height: 1rem;

package/custom-elements.json

@@ -6847,12 +6847,12 @@
         },
         {
           "name": "pattern",
-          "description": "Regular expression pattern to validate the value",
+          "description": "ADVANCED: Regular expression pattern to validate the value",
           "type": "string"
         },
         {
           "name": "pattern-failure-text",
-          "description": "Text to display when input fails validation against the pattern",
+          "description": "ADVANCED: Text to display when input fails validation against the pattern.  If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`.",
           "type": "string"
         },
         {
@@ -7013,13 +7013,13 @@
         {
           "name": "pattern",
           "attribute": "pattern",
-          "description": "Regular expression pattern to validate the value",
+          "description": "ADVANCED: Regular expression pattern to validate the value",
           "type": "string"
         },
         {
           "name": "patternFailureText",
           "attribute": "pattern-failure-text",
-          "description": "Text to display when input fails validation against the pattern",
+          "description": "ADVANCED: Text to display when input fails validation against the pattern.  If a list of characters is included in the message, use `LocalizeMixin`'s `localizeCharacter`.",
           "type": "string"
         },
         {

package/mixins/localize/README.md

@@ -152,6 +152,39 @@ this.localizeHTML('octopus', {
 });
 ```
 
+### Common Resources
+
+Some localization resources are common and shared across D2L applications. To use these resources, set the `loadCommon` option:
+
+```javascript
+static get localizeConfig() {
+  return {
+    loadCommon: true
+  };
+}
+```
+
+#### localizeCharacter
+
+The localized value of the following characters can be accessed using `localizeCharacter(char)`:
+* `'` (apostrophe)
+* `&` (ampersand)
+* `*` (asterisk)
+* `\` (backslash)
+* `:` (colon)
+* `,` (comma)
+* `>` (greater-than sign)
+* `<` (less-than sign)
+* `#` (number sign)
+* `%` (percent sign)
+* `|` (pipe)
+* `?` (question mark)
+* `"` (quotation mark)
+
+```javascript
+this.localizeCharacter('&'); // -> 'ampersand' in en-US
+```
+
 ## Off-Stack Language Overrides
 
 To enable OSLO, map the project's localization resources to a language collection in Brightspace by defining `osloCollection` in `localizeConfig`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.69.0",
+  "version": "3.71.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -11,7 +11,7 @@
     "build:clean": "node ./cli/clean.js",
     "build:icons": "node ./cli/icon-generator.js",
     "build:illustrations": "node ./cli/empty-state-illustration-generator.js",
-    "build:sass": "node-sass --output-style expanded ./test/sass.scss > ./test/sass.output.css",
+    "build:sass": "sass ./test/sass.scss > ./test/sass.output.css",
     "build:wca": "wca analyze \"{components,templates}/**/*.js\" --format json --outFile custom-elements.json",
     "build": "npm run build:clean && npm run build:icons && npm run build:illustrations && npm run build:sass && npm run build:wca",
     "build-static": "rollup -c ./rollup/rollup.config.js",
@@ -59,10 +59,10 @@
     "eslint-config-brightspace": "^1.2.1",
     "glob-all": "^3",
     "messageformat-validator": "^2",
-    "node-sass": "^9",
     "rollup": "^4",
     "rollup-plugin-copy": "^3",
     "rollup-plugin-delete": "^2",
+    "sass": "^1",
     "sinon": "^19",
     "stylelint": "^16",
     "web-component-analyzer": "^2"