npm - @brightspace-ui/core - Versions diffs - 1.191.1 → 1.193.0 - Mend

@brightspace-ui/core 1.191.1 → 1.193.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/components/card/README.md +45 -26
package/components/card/card-footer-link.js +46 -73
package/components/card/demo/card.html +42 -28
package/components/colors/colors.js +0 -3
package/components/count-badge/README.md +190 -86
package/components/count-badge/count-badge-icon.js +5 -3
package/components/count-badge/count-badge-mixin.js +12 -3
package/components/count-badge/count-badge.js +5 -0
package/components/form/docs/form.md +2 -0
package/components/form/form-mixin.js +7 -1
package/components/form/form-native.js +1 -0
package/components/form/form.js +1 -0
package/components/html-block/html-block.js +3 -3
package/components/typography/typography.js +0 -2
package/custom-elements.json +73 -22
package/package.json +1 -2

package/components/card/README.md CHANGED Viewed

@@ -19,10 +19,12 @@ Used to surface pertinent information, cards make it easy for users to browse in
     <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
   </div>
   <div slot="footer">
-    <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2"></d2l-card-footer-link>
-    <d2l-tooltip for="discussionsLink1">Discussions</d2l-tooltip>
-    <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1"></d2l-card-footer-link>
-    <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
+    <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
+      <d2l-tooltip slot="tooltip" for="discussionsLink1">Discussions</d2l-tooltip>
+    </d2l-card-footer-link>
+    <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1">
+      <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
+    </d2l-card-footer-link>
   </div>
 </d2l-card>
 ```
@@ -90,10 +92,12 @@ Cards are composed of 3 sections. Each card will have a content section but is n
       <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
     </div>
     <div slot="footer">
-      <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2"></d2l-card-footer-link>
-      <d2l-tooltip for="discussionsLink1">Discussions</d2l-tooltip>
-      <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1"></d2l-card-footer-link>
-      <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
+      <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
+        <d2l-tooltip slot="tooltip" for="discussionsLink1">Discussions</d2l-tooltip>
+      </d2l-card-footer-link>
+      <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1">
+        <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
+      </d2l-card-footer-link>
     </div>
   </d2l-card>
 </div>
@@ -122,10 +126,12 @@ The `d2l-card` element is a container that provides specific layout using severa
     <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
   </div>
   <div slot="footer">
-    <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2"></d2l-card-footer-link>
-    <d2l-tooltip for="discussionsLink1">Discussions</d2l-tooltip>
-    <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1"></d2l-card-footer-link>
-    <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
+    <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
+      <d2l-tooltip slot="tooltip" for="discussionsLink1">Discussions</d2l-tooltip>
+    </d2l-card-footer-link>
+    <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1">
+      <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
+    </d2l-card-footer-link>
   </div>
 </d2l-card>
 ```
@@ -175,10 +181,12 @@ The `d2l-card-content-title` element is a helper for providing layout/style for
     <d2l-card-content-title>Biology</d2l-card-content-title>
   </div>
   <div slot="footer">
-    <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2"></d2l-card-footer-link>
-    <d2l-tooltip for="discussionsLink1">Discussions</d2l-tooltip>
-    <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1"></d2l-card-footer-link>
-    <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
+    <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
+      <d2l-tooltip slot="tooltip" for="discussionsLink1">Discussions</d2l-tooltip>
+    </d2l-card-footer-link>
+    <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1">
+      <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
+    </d2l-card-footer-link>
   </div>
 </d2l-card>
 ```
@@ -202,10 +210,12 @@ The `d2l-card-content-meta` element is a helper for providing layout/style for a
     <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
   </div>
   <div slot="footer">
-    <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2"></d2l-card-footer-link>
-    <d2l-tooltip for="discussionsLink1">Discussions</d2l-tooltip>
-    <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1"></d2l-card-footer-link>
-    <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
+    <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
+      <d2l-tooltip slot="tooltip" for="discussionsLink1">Discussions</d2l-tooltip>
+    </d2l-card-footer-link>
+    <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1">
+      <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
+    </d2l-card-footer-link>
   </div>
 </d2l-card>
 ```
@@ -229,15 +239,23 @@ The `d2l-card-footer-link` element is an icon link that can be placed in the `fo
     <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
   </div>
   <div slot="footer">
-    <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2"></d2l-card-footer-link>
-    <d2l-tooltip for="discussionsLink1">Discussions</d2l-tooltip>
-    <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1"></d2l-card-footer-link>
-    <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
+    <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
+      <d2l-tooltip slot="tooltip" for="discussionsLink1">Discussions</d2l-tooltip>
+    </d2l-card-footer-link>
+    <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1">
+      <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
+    </d2l-card-footer-link>
   </div>
 </d2l-card>
 ```
 <!-- docs: start hidden content -->
+### Slots
+| Slot | Type | Description |
+|--|--|--|
+| `tooltip` | required | The tooltip for the footer link. |
 ### Properties:
 | Property | Type | Description |
@@ -247,8 +265,9 @@ The `d2l-card-footer-link` element is an icon link that can be placed in the `fo
 | `download` | Boolean | Download a URL instead of navigating to it |
 | `href` | String | Location for the primary action/navigation |
 | `rel` | String | Relationship of the target object to the link object |
-| `secondary-text` | String | Text to display as a superscript on the icon |
-| `secondary-text-type` | String | Controls the style of the secondary text bubble; options are `notification` and `count` |
+| `secondary-count` | Number | Count to display as a superscript on the icon |
+| `secondary-count-type` | String | Controls the style of the secondary count bubble; options are `notification` and `count` |
+| `secondary-count-max-digits` | Number | Overrides the default maximum digits of the secondary count bubble (2 for `notification` and no limit for `count` type) |
 | `target` | String | Where to display the linked URL |
 See the [anchor element docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information on standard link attributes and their values.

package/components/card/card-footer-link.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import '../colors/colors.js';
+import '../count-badge/count-badge-icon.js';
 import '../icons/icon.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
@@ -7,6 +8,7 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
 /**
  * An icon link that can be placed in the `footer` slot.
+ * @slot tooltip - slot for the link tooltip
  */
 class CardFooterLink extends RtlMixin(LitElement) {
@@ -25,7 +27,7 @@ class CardFooterLink extends RtlMixin(LitElement) {
 			 */
 			hreflang: { type: String, reflect: true },
 			/**
-			 * REQUIRED: Preset icon key (e.g. "tier1:gear")
+			 * REQUIRED: Preset icon key (e.g. "tier1:gear"). Must be a tier 1 icon.
 			 */
 			icon: { type: String, reflect: true },
 			/**
@@ -33,13 +35,18 @@ class CardFooterLink extends RtlMixin(LitElement) {
 			 */
 			rel: { type: String, reflect: true },
 			/**
-			 * Secondary text to display as a superscript on the icon
+			 * Secondary count to display as a count bubble on the icon
 			 */
-			secondaryText: { type: String, attribute: 'secondary-text', reflect: true },
+			secondaryCount: { type: Number, attribute: 'secondary-count', reflect: true },
 			/**
-			 * Controls the style of the secondary text bubble; options are 'notification' and 'count'
+			 * Maximum digits to display in the secondary count. Defaults to no limit
 			 */
-			secondaryTextType: { type: String, attribute: 'secondary-text-type', reflect: true },
+			secondaryCountMaxDigits: { type: String, attribute: 'secondary-count-max-digits' },
+			/**
+			 * Controls the style of the secondary count bubble
+			 * @type {'count'|'notification'}
+			 */
+			secondaryCountType: { type: String, attribute: 'secondary-count-type', reflect: true },
 			/**
 			 * Where to display the linked URL
 			 */
@@ -51,8 +58,7 @@ class CardFooterLink extends RtlMixin(LitElement) {
 			/**
 			 * Specifies the media type in the form of a MIME type for the linked URL; purely advisory, with no built-in functionality
 			 */
-			type: { type: String, reflect: true },
-			_secondaryTextHidden: { type: Boolean }
+			type: { type: String, reflect: true }
 		};
 	}
@@ -73,64 +79,22 @@ class CardFooterLink extends RtlMixin(LitElement) {
 				margin-right: 0;
 				right: 0.15rem;
 			}
-			.d2l-card-footer-link-content {
-				display: inline-block;
-				line-height: 0;
-				padding: 0.6rem;
-				position: relative;
-				text-align: center;
-			}
 			a {
 				box-sizing: border-box;
 				display: inline-block;
 				height: 100%;
 				outline: none;
-				position: absolute;
 				width: 100%;
-				z-index: 1;
-			}
-			a[href]:focus + .d2l-card-footer-link-content > d2l-icon,
-			a[href]:hover + .d2l-card-footer-link-content > d2l-icon {
-				color: var(--d2l-color-celestine);
 			}
-			d2l-icon {
-				height: 0.9rem;
-				width: 0.9rem;
+			d2l-count-badge-icon {
+				text-align: initial;
 			}
-			.d2l-card-footer-link-secondary-text {
-				border-radius: 0.75rem;
-				box-shadow: 0 0 0 1px white;
-				box-sizing: content-box;
-				display: inline-block;
-				font-size: 0.55rem;
-				font-weight: 400;
-				line-height: 100%;
-				min-width: 0.5rem;
-				padding: 2px;
-				position: relative;
+			::slotted(d2l-tooltip) {
+				left: calc(-50% + 11px) !important;
 			}
-			.d2l-card-footer-link-secondary-text-container {
-				position: absolute;
-				right: 1rem;
-				top: 0;
-				width: 1px;
-			}
-			:host([dir="rtl"]) .d2l-card-footer-link-secondary-text-container {
-				left: 1rem;
-				right: auto;
-			}
-			:host([secondary-text-type="notification"]) .d2l-card-footer-link-secondary-text {
-				background-color: var(--d2l-color-carnelian-minus-1);
-				border: 2px solid var(--d2l-color-carnelian-minus-1);
-				color: white;
-			}
-			:host([secondary-text-type="count"]) .d2l-card-footer-link-secondary-text {
-				background-color: var(--d2l-color-gypsum);
-				border: 2px solid var(--d2l-color-gypsum);
-				color: var(--d2l-color-ferrite);
-			}
-			[hidden].d2l-card-footer-link-secondary-text {
-				display: none;
+			:host([dir="rtl"]) ::slotted(d2l-tooltip) {
+				left: 0;
+				right: calc(-50% + 11px) !important;
 			}
 		`];
 	}
@@ -138,39 +102,48 @@ class CardFooterLink extends RtlMixin(LitElement) {
 	constructor() {
 		super();
 		this.download = false;
-		this.secondaryTextType = 'notification';
-		this._secondaryTextHidden = true;
+		this.secondaryCountType = 'notification';
 	}
 	render() {
+		const noNumber = this.secondaryCount === undefined;
 		return html`
-			<a ?download="${this.download}"
+			<a @focus="${this._onFocus}"
+				@blur="${this._onBlur}"
+				?download="${this.download}"
 				href="${ifDefined(this.href)}"
 				hreflang="${ifDefined(this.hreflang)}"
 				rel="${ifDefined(this.rel)}"
 				target="${ifDefined(this.target)}"
 				type="${ifDefined(this.type)}">
 				<span class="d2l-offscreen">${this.text}</span>
+				<d2l-count-badge-icon
+					aria-hidden="true"
+					icon="${this.icon}"
+					max-digits="${ifDefined(this.secondaryCountMaxDigits ? this.secondaryCountMaxDigits : undefined)}"
+					number="${noNumber ? 0 : this.secondaryCount}"
+					?hide-zero="${noNumber}"
+					text="${this.text}"
+					type="${this._getType()}">
+				</d2l-count-badge-icon>
 			</a>
-			<div class="d2l-card-footer-link-content">
-				<d2l-icon icon="${this.icon}"></d2l-icon>
-				<div class="d2l-card-footer-link-secondary-text-container">
-					<div class="d2l-card-footer-link-secondary-text" aria-hidden="true" ?hidden="${this._secondaryTextHidden}">${this.secondaryText}</div>
-				</div>
-			</div>
+			<slot name="tooltip"></slot>
 		`;
 	}
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if (!changedProperties.has('secondaryText')) return;
-		this._secondaryTextHidden = !(this.secondaryText && this.secondaryText.length > 0);
+	_getType() {
+		if (this.secondaryCountType === 'count') {
+			return this.secondaryCountType;
+		}
+		return 'notification';
+	}
+	_onBlur() {
+		this.shadowRoot.querySelector('d2l-count-badge-icon').forceFocusRing = false;
 	}
-	focus() {
-		const elem = this.shadowRoot.querySelector('a');
-		if (!elem) return;
-		elem.focus();
+	_onFocus() {
+		this.shadowRoot.querySelector('d2l-count-badge-icon').forceFocusRing = true;
 	}
 }

package/components/card/demo/card.html CHANGED Viewed

@@ -104,14 +104,18 @@
 							<d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
 							<div slot="content"><div>Hydrology</div><d2l-card-content-meta>This is some extra meta data that will fill the content slot of the card.</d2l-card-content-meta></div>
 							<div slot="footer">
-								<d2l-card-footer-link id="googleDriveLink1" icon="tier1:google-drive" text="Google Drive" secondary-text="99+" href="https://www.google.ca/drive/"></d2l-card-footer-link>
-								<d2l-tooltip for="googleDriveLink1">Go to Google Drive</d2l-tooltip>
-								<d2l-card-footer-link id="rssFeedLink1" icon="tier1:rss" text="RSS Feed" secondary-text="1"></d2l-card-footer-link>
-								<d2l-tooltip for="rssFeedLink1">RSS Feed</d2l-tooltip>
-								<d2l-card-footer-link id="outcomesLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="5"></d2l-card-footer-link>
-								<d2l-tooltip for="outcomesLink1">Outcomes</d2l-tooltip>
-								<d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="3"></d2l-card-footer-link>
-								<d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 3 assignments due tomorrow.</d2l-tooltip>
+								<d2l-card-footer-link id="googleDriveLink1" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
+									<d2l-tooltip slot="tooltip" for="googleDriveLink1">Go to Google Drive</d2l-tooltip>
+								</d2l-card-footer-link>
+								<d2l-card-footer-link id="rssFeedLink1" icon="tier1:rss" text="RSS Feed" secondary-count="1">
+									<d2l-tooltip slot="tooltip" for="rssFeedLink1">RSS Feed</d2l-tooltip>
+								</d2l-card-footer-link>
+								<d2l-card-footer-link id="outcomesLink1" icon="tier1:outcomes" text="Outcomes" secondary-count="5">
+									<d2l-tooltip slot="tooltip" for="outcomesLink1">Outcomes</d2l-tooltip>
+								</d2l-card-footer-link>
+								<d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-count="3">
+									<d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 3 assignments due tomorrow.</d2l-tooltip>
+								</d2l-card-footer-link>
 							</div>
 						</d2l-card>
@@ -123,12 +127,15 @@
 							<d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
 							<div slot="content">Grade 2</div>
 							<div slot="footer">
-								<d2l-card-footer-link id="googleDriveLink2" icon="tier1:google-drive" text="Google Drive" secondary-text="99+" href="https://www.google.ca/drive/"></d2l-card-footer-link>
-								<d2l-tooltip for="googleDriveLink2">Go to Google Drive</d2l-tooltip>
-								<d2l-card-footer-link id="rssFeedLink2" icon="tier1:rss" text="RSS Feed" secondary-text="1"></d2l-card-footer-link>
-								<d2l-tooltip for="rssFeedLink2">RSS Feed</d2l-tooltip>
-								<d2l-card-footer-link id="outcomesLink2" icon="tier1:outcomes" text="Outcomes" secondary-text="5"></d2l-card-footer-link>
-								<d2l-tooltip for="outcomesLink2">Outcomes</d2l-tooltip>
+								<d2l-card-footer-link id="googleDriveLink2" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
+									<d2l-tooltip slot="tooltip" for="googleDriveLink2">Go to Google Drive</d2l-tooltip>
+								</d2l-card-footer-link>
+								<d2l-card-footer-link id="rssFeedLink2" icon="tier1:rss" text="RSS Feed" secondary-count="1">
+									<d2l-tooltip slot="tooltip" for="rssFeedLink2">RSS Feed</d2l-tooltip>
+								</d2l-card-footer-link>
+								<d2l-card-footer-link id="outcomesLink2" icon="tier1:outcomes" text="Outcomes" secondary-count="5">
+									<d2l-tooltip slot="tooltip" for="outcomesLink2">Outcomes</d2l-tooltip>
+								</d2l-card-footer-link>
 							</div>
 						</d2l-card>
@@ -192,14 +199,18 @@
 						<d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
 						<div slot="content"><div>Hydrology</div><d2l-card-content-meta>This is some extra meta data that will fill the content slot of the card.</d2l-card-content-meta></div>
 						<div slot="footer">
-							<d2l-card-footer-link id="googleDriveLink3" icon="tier1:google-drive" text="Google Drive" secondary-text="99+" href="https://www.google.ca/drive/"></d2l-card-footer-link>
-							<d2l-tooltip for="googleDriveLink3">Go to Google Drive</d2l-tooltip>
-							<d2l-card-footer-link id="rssFeedLink3" icon="tier1:rss" text="RSS Feed" secondary-text="1"></d2l-card-footer-link>
-							<d2l-tooltip for="rssFeedLink3">RSS Feed</d2l-tooltip>
-							<d2l-card-footer-link id="outcomesLink3" icon="tier1:outcomes" text="Outcomes" secondary-text="5"></d2l-card-footer-link>
-							<d2l-tooltip for="outcomesLink3">Outcomes</d2l-tooltip>
-							<d2l-card-footer-link id="assignmentsLink3" icon="tier1:assignments" text="Assignments" secondary-text="3"></d2l-card-footer-link>
-							<d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink3">You have 3 assignments due tomorrow.</d2l-tooltip>
+							<d2l-card-footer-link id="googleDriveLink3" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
+								<d2l-tooltip slot="tooltip" for="googleDriveLink3">Go to Google Drive</d2l-tooltip>
+							</d2l-card-footer-link>
+							<d2l-card-footer-link id="rssFeedLink3" icon="tier1:rss" text="RSS Feed" secondary-count="1">
+								<d2l-tooltip slot="tooltip" for="rssFeedLink3">RSS Feed</d2l-tooltip>
+							</d2l-card-footer-link>
+							<d2l-card-footer-link id="outcomesLink3" icon="tier1:outcomes" text="Outcomes" secondary-count="5">
+								<d2l-tooltip slot="tooltip" for="outcomesLink3">Outcomes</d2l-tooltip>
+							</d2l-card-footer-link>
+							<d2l-card-footer-link id="assignmentsLink3" icon="tier1:assignments" text="Assignments" secondary-count="3">
+								<d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink3">You have 3 assignments due tomorrow.</d2l-tooltip>
+							</d2l-card-footer-link>
 						</div>
 					</d2l-card>
@@ -221,12 +232,15 @@
 						<d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
 						<div slot="content">Grade 2</div>
 						<div slot="footer">
-							<d2l-card-footer-link id="googleDriveLink4" icon="tier1:google-drive" text="Google Drive" secondary-text-type="count" secondary-text="99+" href="https://www.google.ca/drive/"></d2l-card-footer-link>
-							<d2l-tooltip for="googleDriveLink4">Go to Google Drive</d2l-tooltip>
-							<d2l-card-footer-link id="rssFeedLink4" icon="tier1:rss" text="RSS Feed" secondary-text-type="count" secondary-text="1"></d2l-card-footer-link>
-							<d2l-tooltip for="rssFeedLink4">RSS Feed</d2l-tooltip>
-							<d2l-card-footer-link id="outcomesLink4" icon="tier1:outcomes" text="Outcomes" secondary-text-type="count" secondary-text="5"></d2l-card-footer-link>
-							<d2l-tooltip for="outcomesLink4">Outcomes</d2l-tooltip>
+							<d2l-card-footer-link id="googleDriveLink4" icon="tier1:google-drive" text="Google Drive" secondary-count-type="count" secondary-count="100" href="https://www.google.ca/drive/">
+								<d2l-tooltip slot="tooltip" for="googleDriveLink4">Go to Google Drive</d2l-tooltip>
+							</d2l-card-footer-link>
+							<d2l-card-footer-link id="rssFeedLink4" icon="tier1:rss" text="RSS Feed" secondary-count-type="count" secondary-count="1">
+								<d2l-tooltip slot="tooltip" for="rssFeedLink4">RSS Feed</d2l-tooltip>
+							</d2l-card-footer-link>
+							<d2l-card-footer-link id="outcomesLink4" icon="tier1:outcomes" text="Outcomes" secondary-count-type="count" secondary-count="5">
+								<d2l-tooltip slot="tooltip" for="outcomesLink4">Outcomes</d2l-tooltip>
+							</d2l-card-footer-link>
 						</div>
 					</d2l-card>

package/components/colors/colors.js CHANGED Viewed

@@ -1,5 +1,3 @@
-import '@webcomponents/shadycss/entrypoints/custom-style-interface.js';
 if (!document.head.querySelector('#d2l-colors')) {
 	const style = document.createElement('style');
 	style.id = 'd2l-colors';
@@ -94,5 +92,4 @@ if (!document.head.querySelector('#d2l-colors')) {
 		}
 	`;
 	document.head.appendChild(style);
-	window.ShadyCSS.CustomStyleInterface.addCustomStyle(style);
 }

package/components/count-badge/README.md CHANGED Viewed

@@ -1,86 +1,190 @@
-# Count Badge
-## d2l-count-badge
-The `d2l-count-badge` element is a web component to display a number count, either in a `"notification"` or `"count"` style.
-![Notification Badge](./screenshots/count-badge-notification-small.png?raw=true)
-![Count Badge](./screenshots/count-badge-count-large.png?raw=true)
-```html
-<script type="module">
-  import '@brightspace-ui/core/components/count-badge/count-badge.js';
-</script>
-<d2l-count-badge size="small" type="notification" text="100 new notifications" number="100"></d2l-count-badge>
-```
-**Properties:**
-| Property | Type | Description |
-|--|--|--|
-| `number` | Number, required | The number to display on the badge.  Must be a positive integer. |
-| `size`, default: `small` | String | The size of the badge. Valid options are `"small"` and `"large"`. |
-| `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
-| `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
-| `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
-| `text`, required | String | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
-| `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
-| `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
-| `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
-### Accessibility Properties
-To make your `d2l-count-badge` accessible, use the following properties when applicable:
-| Attribute | Description |
-|--|--|
-| `text`, required | Only the text will be read by screen-readers (not the number), so include the number in the text. |
-| `tab-stop` | A tab stop allows screen-reader users to easily tab to the badge. Otherwise, screen-reader users will need to arrow through to the badge. |
-| `announce-changes` | Use "announce-changes" if screen-reader users should be notified that the badge has been updated, such as a new notification. The "text" property will be read as soon as the screen-reader is idle. |
-| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
-## d2l-count-badge-icon
-The `d2l-count-badge-icon` element is a web component to display a number count, either in a `"notification"` or `"count"` style with an icon.
-![Count Badge with icon](./screenshots/count-badge-icon.png?raw=true)
-```html
-<script type="module">
-  import '@brightspace-ui/core/components/count-badge/count-badge-icon.js';
-</script>
-<d2l-count-badge-icon size="small" icon="tier1:gear" type="notification" text="100 new settings applied." number="100"></d2l-count-badge>
-```
-**Properties:**
-| Property | Type | Description |
-|--|--|--|
-| `number` | Number, required | The number to display on the badge.  Must be a positive integer. |
-| `icon` | String, required | [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
-| `size`, default: `small` | String | The size of the badge. Valid options are `"small"` and `"large"`. |
-| `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
-| `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
-| `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
-| `text`, required | String | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
-| `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
-| `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
-| `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
-### Accessibility Properties
-To make your `d2l-count-badge-icon` accessible, use the following properties when applicable:
-| Attribute | Description |
-|--|--|
-| `text`, required | Only the text will be read by screen-readers (not the number), so include the number in the text. |
-| `tab-stop` | A tab stop allows screen-reader users to easily tab to the badge. Otherwise, screen-reader users will need to arrow through to the badge. |
-| `announce-changes` | Use "announce-changes" if screen-reader users should be notified that the badge has been updated, such as a new notification. The "text" property will be read as soon as the screen-reader is idle. |
-| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
-## Future Enhancements
-Looking for an enhancement not listed here? Create a GitHub issue!
+# Count Badge
+Badges can be used to provide additional contextual information to users in regards to a task or action.
+<!-- docs: demo autoSize:false size:small -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/count-badge/count-badge.js';
+  import '@brightspace-ui/core/components/count-badge/count-badge-icon.js';
+</script>
+<d2l-count-badge size="small" type="notification" text="100 new notifications" number="100"></d2l-count-badge>
+<d2l-count-badge size="small" type="count" text="100 new notifications" number="100"></d2l-count-badge>
+<d2l-count-badge-icon size="small" icon="tier1:gear" type="notification" text="100 new settings applied." number="100" tab-stop></d2l-count-badge-icon>
+<d2l-count-badge-icon size="small" icon="tier1:gear" type="count" text="100 new settings applied." number="100" tab-stop></d2l-count-badge-icon>
+```
+## Count Badge: Basic [d2l-count-badge]
+The `d2l-count-badge` element is a web component to display a number count, depending on your use case different styling options are available.
+<!-- docs: start hidden content -->
+![Notification Badge](./screenshots/count-badge-notification-small.png?raw=true) -->
+![Count Badge](./screenshots/count-badge-count-large.png?raw=true)
+<!-- docs: end hidden content -->
+<!-- docs: demo live name:d2l-count-badge -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/count-badge/count-badge.js';
+</script>
+<d2l-count-badge size="small" type="notification" text="100 new notifications" number="100" has-tooltip tab-stop></d2l-count-badge>
+```
+### Accessibility Properties
+| Attribute | Description |
+|---|---|
+| `text`  | REQUIRED: Only the text will be read by screen-readers (not the number), so include the number in the text. |
+| `tab-stop` | A tab stop allows screen-reader users to easily tab to the badge. Otherwise, screen-reader users will need to arrow through to the badge. |
+| `announce-changes` | Use "announce-changes" if screen-reader users should be notified that the badge has been updated, such as a new notification. The "text" property will be read as soon as the screen-reader is idle. |
+| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
+<!-- docs: start hidden content -->
+### Properties
+| Property | Type | Description |
+|---|---|---|
+| `number` | Number, required | The number to display on the badge.  Must be a positive integer. |
+| `size`, default: `small` | String | The size of the badge. Valid options are `"small"` and `"large"`. |
+| `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
+| `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
+| `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
+| `text`, required | String | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
+| `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
+| `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
+| `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
+| `focus-ring`, default: `false` | Boolean | Optionally force a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
+<!-- docs: end hidden content -->
+## Count Badge: Icon [d2l-count-badge-icon]
+The `d2l-count-badge-icon` element is a web component to display a number count, either in a `"notification"` or `"count"` style with an icon.
+<!-- docs: start hidden content -->
+![Count Badge with icon](./screenshots/count-badge-icon.png?raw=true)
+<!-- docs: end hidden content -->
+<!-- docs: demo live name:d2l-count-badge-icon -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/count-badge/count-badge-icon.js';
+</script>
+<d2l-count-badge-icon size="small" icon="tier1:gear" type="notification" text="100 new settings applied." number="100" tab-stop has-tooltip></d2l-count-badge-icon>
+```
+### Accessibility Properties
+| Attribute | Description |
+|---|---|
+| `text` | REQUIRED: Only the text will be read by screen-readers (not the number), so include the number in the text. |
+| `tab-stop` | A tab stop allows screen-reader users to easily tab to the badge. Otherwise, screen-reader users will need to arrow through to the badge. |
+| `announce-changes` | Use "announce-changes" if screen-reader users should be notified that the badge has been updated, such as a new notification. The "text" property will be read as soon as the screen-reader is idle. |
+| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
+<!-- docs: start hidden content -->
+### Properties
+| Property | Type | Description |
+|--|--|--|
+| `number` | Number | Required: The number to display on the badge.  Must be a positive integer. |
+| `icon` | String | Required: [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
+| `size`, default: `small` | String | The size of the badge. Valid options are `"small"` and `"large"`. |
+| `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
+| `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
+| `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
+| `text`  | String | REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
+| `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
+| `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
+| `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
+| `focus-ring`, default: `false` | Boolean | Optionally force a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
+## Future Enhancements
+Looking for an enhancement not listed here? Create a GitHub issue!
+<!-- docs: end hidden content -->
+=======
+# Count Badge
+## d2l-count-badge
+The `d2l-count-badge` element is a web component to display a number count, either in a `"notification"` or `"count"` style.
+![Notification Badge](./screenshots/count-badge-notification-small.png?raw=true)
+![Count Badge](./screenshots/count-badge-count-large.png?raw=true)
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/count-badge/count-badge.js';
+</script>
+<d2l-count-badge size="small" type="notification" text="100 new notifications" number="100"></d2l-count-badge>
+```
+**Properties:**
+| Property | Type | Description |
+|--|--|--|
+| `number` | Number, required | The number to display on the badge.  Must be a positive integer. |
+| `size`, default: `small` | String | The size of the badge. Valid options are `"small"` and `"large"`. |
+| `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
+| `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
+| `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
+| `text`, required | String | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
+| `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
+| `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
+| `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
+| `focus-ring`, default: `false` | Boolean | Optionally force a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
+### Accessibility Properties
+To make your `d2l-count-badge` accessible, use the following properties when applicable:
+| Attribute | Description |
+|--|--|
+| `text`, required | Only the text will be read by screen-readers (not the number), so include the number in the text. |
+| `tab-stop` | A tab stop allows screen-reader users to easily tab to the badge. Otherwise, screen-reader users will need to arrow through to the badge. |
+| `announce-changes` | Use "announce-changes" if screen-reader users should be notified that the badge has been updated, such as a new notification. The "text" property will be read as soon as the screen-reader is idle. |
+| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
+## d2l-count-badge-icon
+The `d2l-count-badge-icon` element is a web component to display a number count, either in a `"notification"` or `"count"` style with an icon.
+![Count Badge with icon](./screenshots/count-badge-icon.png?raw=true)
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/count-badge/count-badge-icon.js';
+</script>
+<d2l-count-badge-icon size="small" icon="tier1:gear" type="notification" text="100 new settings applied." number="100"></d2l-count-badge>
+```
+**Properties:**
+| Property | Type | Description |
+|--|--|--|
+| `number` | Number, required | The number to display on the badge.  Must be a positive integer. |
+| `icon` | String, required | [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
+| `size`, default: `small` | String | The size of the badge. Valid options are `"small"` and `"large"`. |
+| `type`, default: `count` | String | The type of the badge. Valid options are `"notification"` and `"count"`. Notification badges are orange and count badges are grey. |
+| `max-digits`, default: `2` when `type="notification"` | Number | Optionally specify a digit limit, after which numbers are truncated. Defaults to two for `"notification"` type and no limit for `"count"` type.
+| `hide-zero`, default: `false` | Boolean | Optionally choose not to show the count badge when the number is zero. |
+| `text`, required | String | Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled. |
+| `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
+| `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
+| `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
+| `focus-ring`, default: `false` | Boolean | Optionally force a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
+### Accessibility Properties
+To make your `d2l-count-badge-icon` accessible, use the following properties when applicable:
+| Attribute | Description |
+|--|--|
+| `text`, required | Only the text will be read by screen-readers (not the number), so include the number in the text. |
+| `tab-stop` | A tab stop allows screen-reader users to easily tab to the badge. Otherwise, screen-reader users will need to arrow through to the badge. |
+| `announce-changes` | Use "announce-changes" if screen-reader users should be notified that the badge has been updated, such as a new notification. The "text" property will be read as soon as the screen-reader is idle. |
+| `has-tooltip` | The tooltip will be visible on hover/tab-stop, and read out by screen-readers. |
+## Future Enhancements
+Looking for an enhancement not listed here? Create a GitHub issue!

package/components/count-badge/count-badge-icon.js CHANGED Viewed

@@ -23,6 +23,7 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 	static get styles() {
 		return [countBadgeStyles, css`
 		:host(.focus-visible) d2l-icon,
+		:host([focus-ring]) d2l-icon,
 		d2l-icon.focus-visible {
 			box-shadow: 0 0 0 2px var(--d2l-color-celestine);
 			outline: none;
@@ -47,13 +48,13 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 			margin-top: -0.55rem;
 		}
-		:host([icon^="tier1:"]) {
+		:host([icon*="tier1:"]) {
 			--d2l-count-badge-icon-height: 18px;
 		}
-		:host([icon^="tier2:"]) {
+		:host([icon*="tier2:"]) {
 			--d2l-count-badge-icon-height: 24px;
 		}
-		:host([icon^="tier3:"]) {
+		:host([icon*="tier3:"]) {
 			--d2l-count-badge-icon-height: 30px;
 		}
@@ -76,6 +77,7 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
 	render() {
 		const numberPadding = this.size === 'small' ? '0.55rem' : '0.7rem';
 		const numberStyles = {
+			border: '2px solid white',
 			position: 'relative',
 			left: this.dir === 'rtl' ? 0 : 'var(--d2l-count-badge-icon-padding)',
 			right: this.dir === 'rtl' ? 'var(--d2l-count-badge-icon-padding)' : 0,

package/components/count-badge/count-badge-mixin.js CHANGED Viewed

@@ -19,7 +19,6 @@ export const countBadgeStyles = [offscreenStyles, css`
 }
 .d2l-count-badge-number {
-	border: 2px solid white;
 	font-weight: bold;
 }
@@ -62,6 +61,15 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(R
 				type: Boolean,
 				attribute: 'announce-changes'
 			},
+			/**
+			 * Optionally choose to force the focus ring around the badge. Defaults to false.
+			 * @type {boolean}
+			 */
+			forceFocusRing: {
+				type: Boolean,
+				attribute: 'focus-ring',
+				reflect: true
+			},
 			/**
 			 * Optionally add a tooltip on the badge. Defaults to false.
 			 * @type {boolean}
@@ -87,7 +95,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(R
 				attribute: 'max-digits'
 			},
 			/**
-			 * The number to be displayed on the badge. Must be a positive integer.
+			 * REQUIRED: The number to be displayed on the badge. Must be a positive integer.
 			 * @type {number}
 			 */
 			number: {
@@ -112,7 +120,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(R
 				attribute: 'tab-stop'
 			},
 			/**
-			 * * Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.
+			 * REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.
 			 * @type {string}
 			 */
 			text: {
@@ -133,6 +141,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(R
 	constructor() {
 		super();
 		this.announceChanges = false;
+		this.forceFocusRing = false;
 		this.hasTooltip = false;
 		this.hideZero = false;
 		this.size = 'small';

package/components/count-badge/count-badge.js CHANGED Viewed

@@ -9,10 +9,15 @@ class CountBadge extends CountBadgeMixin(LitElement) {
 	static get styles() {
 		return [countBadgeStyles, css`
 		:host(.focus-visible) .d2l-count-badge-wrapper,
+		:host([focus-ring]) .d2l-count-badge-wrapper,
 		.d2l-count-badge-wrapper.focus-visible {
 			box-shadow: 0 0 0 2px var(--d2l-color-celestine);
 		}
+		.d2l-count-badge-wrapper {
+			border: 2px solid transparent;
+		}
 		:host([size="small"]) .d2l-count-badge-wrapper {
 			border-radius: 0.65rem;
 			outline: none;

package/components/form/docs/form.md CHANGED Viewed

@@ -112,6 +112,7 @@ If you're looking to emulate native form element submission, `d2l-form-native` m
 ### Events
 - `d2l-form-submit`: Dispatched when the form is submitted. The form data can be obtained from the `detail`'s `formData` property.
 - `d2l-form-invalid`: Dispatched when the form fails validation. The error map can be obtained from the `detail`'s `errors` property.
+- `d2l-form-dirty`: Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not.
 <!-- docs: end hidden content -->
 ### Methods
@@ -234,6 +235,7 @@ If you're looking to submit form data via your own API calls or nest multiple fo
 ### Events
 - `submit`: Dispatched when the form is submitted. Cancelling this event will prevent form submission.
 - `formdata`: Dispatched after the entry list representing the form's data is constructed. This happens when the form is submitted just prior to submission. The form data can be obtained from the `detail`'s `formData` property.
+- `d2l-form-dirty`: Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not.
 <!-- docs: end hidden content -->
 ### Methods

package/components/form/form-mixin.js CHANGED Viewed

@@ -100,13 +100,19 @@ export const FormMixin = superclass => class extends LocalizeCoreElement(supercl
 		e.stopPropagation();
 		this._updateErrors(e.target, e.detail.errors);
 	}
 	async _onFormElementChange(e) {
 		const ele = e.target;
+		if ((isNativeFormElement(ele) || isCustomFormElement(ele)) && e.type !== 'focusout') {
+			this._dirty = true;
+			this.dispatchEvent(new CustomEvent('d2l-form-dirty'));
+		}
 		if (!isNativeFormElement(ele)) {
 			return;
 		}
 		e.stopPropagation();
-		this._dirty = true;
 		const errors = await this._validateFormElement(ele, e.type === 'focusout');
 		this._updateErrors(ele, errors);
 	}

package/components/form/form-native.js CHANGED Viewed

@@ -8,6 +8,7 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
  * These interactive controls are submitted using a native HTML form submission.
  * @slot - The native and custom form elements that participate in validation and submission
  * @fires submit - Dispatched when the form is submitted. Cancelling this event will prevent form submission.
+ * @fires d2l-form-dirty - Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not.
  */
 class FormNative extends FormMixin(LitElement) {

package/components/form/form.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { FormMixin } from './form-mixin.js';
  * A component that can be used to build sections containing interactive controls that are validated and submitted as a group.
  * Values of these interactive controls are aggregated but the user is responsible for handling submission via the @d2l-form-submit event.
  * @slot - The native and custom form elements that participate in validation and submission
+ * @fires d2l-form-dirty - Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not.
  */
 class Form extends FormMixin(LitElement) {

package/components/html-block/html-block.js CHANGED Viewed

@@ -70,13 +70,13 @@ export const htmlBlockContentStyles = css`
 	a:visited,
 	a:link,
 	a:active {
-		color: var(--d2l-color-celestine);
+		color: var(--d2l-color-celestine, #006fbf);
 		cursor: pointer;
 		text-decoration: none;
 	}
 	a:hover,
 	a:focus {
-		color: var(--d2l-color-celestine-minus-1);
+		color: var(--d2l-color-celestine-minus-1, #004489);
 		outline-width: 0;
 		text-decoration: underline;
 	}
@@ -85,7 +85,7 @@ export const htmlBlockContentStyles = css`
 		a:visited,
 		a:link,
 		a:active {
-			color: var(--d2l-color-ferrite);
+			color: var(--d2l-color-ferrite, #494c4e);
 		}
 	}
 	mjx-assistive-mml math {

package/components/typography/typography.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import '@webcomponents/shadycss/entrypoints/custom-style-interface.js';
 import '../colors/colors.js';
 export const importUrl = 'https://s.brightspace.com/lib/fonts/0.5.0/assets/';
@@ -144,5 +143,4 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
 		}
 	`;
 	document.head.appendChild(style);
-	window.ShadyCSS.CustomStyleInterface.addCustomStyle(style);
 }

package/custom-elements.json CHANGED Viewed

@@ -717,7 +717,7 @@
         },
         {
           "name": "icon",
-          "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\")",
+          "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\"). Must be a tier 1 icon.",
           "type": "string"
         },
         {
@@ -726,8 +726,13 @@
           "type": "string"
         },
         {
-          "name": "secondary-text",
-          "description": "Secondary text to display as a superscript on the icon",
+          "name": "secondary-count",
+          "description": "Secondary count to display as a count bubble on the icon",
+          "type": "number"
+        },
+        {
+          "name": "secondary-count-max-digits",
+          "description": "Maximum digits to display in the secondary count. Defaults to no limit",
           "type": "string"
         },
         {
@@ -752,9 +757,9 @@
           "default": "false"
         },
         {
-          "name": "secondary-text-type",
-          "description": "Controls the style of the secondary text bubble; options are 'notification' and 'count'",
-          "type": "string",
+          "name": "secondary-count-type",
+          "description": "Controls the style of the secondary count bubble",
+          "type": "'count'|'notification'",
           "default": "\"notification\""
         }
       ],
@@ -774,7 +779,7 @@
         {
           "name": "icon",
           "attribute": "icon",
-          "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\")",
+          "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\"). Must be a tier 1 icon.",
           "type": "string"
         },
         {
@@ -784,9 +789,15 @@
           "type": "string"
         },
         {
-          "name": "secondaryText",
-          "attribute": "secondary-text",
-          "description": "Secondary text to display as a superscript on the icon",
+          "name": "secondaryCount",
+          "attribute": "secondary-count",
+          "description": "Secondary count to display as a count bubble on the icon",
+          "type": "number"
+        },
+        {
+          "name": "secondaryCountMaxDigits",
+          "attribute": "secondary-count-max-digits",
+          "description": "Maximum digits to display in the secondary count. Defaults to no limit",
           "type": "string"
         },
         {
@@ -815,12 +826,18 @@
           "default": "false"
         },
         {
-          "name": "secondaryTextType",
-          "attribute": "secondary-text-type",
-          "description": "Controls the style of the secondary text bubble; options are 'notification' and 'count'",
-          "type": "string",
+          "name": "secondaryCountType",
+          "attribute": "secondary-count-type",
+          "description": "Controls the style of the secondary count bubble",
+          "type": "'count'|'notification'",
           "default": "\"notification\""
         }
+      ],
+      "slots": [
+        {
+          "name": "tooltip",
+          "description": "slot for the link tooltip"
+        }
       ]
     },
     {
@@ -1020,7 +1037,7 @@
         },
         {
           "name": "number",
-          "description": "The number to be displayed on the badge. Must be a positive integer.",
+          "description": "REQUIRED: The number to be displayed on the badge. Must be a positive integer.",
           "type": "number"
         },
         {
@@ -1029,6 +1046,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "focus-ring",
+          "description": "Optionally choose to force the focus ring around the badge. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "has-tooltip",
           "description": "Optionally add a tooltip on the badge. Defaults to false.",
@@ -1055,7 +1078,7 @@
         },
         {
           "name": "text",
-          "description": "* Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
+          "description": "REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
           "type": "string",
           "default": "\"\""
         },
@@ -1082,7 +1105,7 @@
         {
           "name": "number",
           "attribute": "number",
-          "description": "The number to be displayed on the badge. Must be a positive integer.",
+          "description": "REQUIRED: The number to be displayed on the badge. Must be a positive integer.",
           "type": "number"
         },
         {
@@ -1092,6 +1115,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "forceFocusRing",
+          "attribute": "focus-ring",
+          "description": "Optionally choose to force the focus ring around the badge. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "hasTooltip",
           "attribute": "has-tooltip",
@@ -1123,7 +1153,7 @@
         {
           "name": "text",
           "attribute": "text",
-          "description": "* Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
+          "description": "REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
           "type": "string",
           "default": "\"\""
         },
@@ -1147,7 +1177,7 @@
         },
         {
           "name": "number",
-          "description": "The number to be displayed on the badge. Must be a positive integer.",
+          "description": "REQUIRED: The number to be displayed on the badge. Must be a positive integer.",
           "type": "number"
         },
         {
@@ -1156,6 +1186,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "focus-ring",
+          "description": "Optionally choose to force the focus ring around the badge. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "has-tooltip",
           "description": "Optionally add a tooltip on the badge. Defaults to false.",
@@ -1182,7 +1218,7 @@
         },
         {
           "name": "text",
-          "description": "* Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
+          "description": "REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
           "type": "string",
           "default": "\"\""
         },
@@ -1203,7 +1239,7 @@
         {
           "name": "number",
           "attribute": "number",
-          "description": "The number to be displayed on the badge. Must be a positive integer.",
+          "description": "REQUIRED: The number to be displayed on the badge. Must be a positive integer.",
           "type": "number"
         },
         {
@@ -1213,6 +1249,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "forceFocusRing",
+          "attribute": "focus-ring",
+          "description": "Optionally choose to force the focus ring around the badge. Defaults to false.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "hasTooltip",
           "attribute": "has-tooltip",
@@ -1244,7 +1287,7 @@
         {
           "name": "text",
           "attribute": "text",
-          "description": "* Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
+          "description": "REQUIRED: Descriptive text for the badge which will act as an accessible label and tooltip text when tooltips are enabled.",
           "type": "string",
           "default": "\"\""
         },
@@ -3092,6 +3135,10 @@
           "name": "submit",
           "description": "Dispatched when the form is submitted. Cancelling this event will prevent form submission."
         },
+        {
+          "name": "d2l-form-dirty",
+          "description": "Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not."
+        },
         {
           "name": "formdata",
           "description": "Dispatched after the entry list representing the form's data is constructed. This happens when the form is submitted just prior to submission. The form data can be obtained from the `detail`'s `formData` property."
@@ -3137,6 +3184,10 @@
         }
       ],
       "events": [
+        {
+          "name": "d2l-form-dirty",
+          "description": "Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not."
+        },
         {
           "name": "d2l-form-invalid",
           "description": "Dispatched when the form fails validation. The error map can be obtained from the `detail`'s `errors` property."

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.191.1",
+  "version": "1.193.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "repository": "https://github.com/BrightspaceUI/core.git",
   "publishConfig": {
@@ -63,7 +63,6 @@
     "@brightspace-ui/intl": "^3",
     "@formatjs/intl-pluralrules": "^1",
     "@open-wc/dedupe-mixin": "^1",
-    "@webcomponents/shadycss": "^1",
     "focus-visible": "^5",
     "ifrau": "^0.39",
     "intl-messageformat": "^7",