@brightspace-ui/core 2.31.0 → 2.31.3

package/components/button/button-subtle.js

@@ -119,7 +119,6 @@ class ButtonSubtle extends ButtonMixin(RtlMixin(LitElement)) {
 
 				.d2l-button-subtle-content {
 					color: var(--d2l-color-celestine);
-					vertical-align: middle;
 				}
 				button:hover:not([disabled]) .d2l-button-subtle-content,
 				button:focus:not([disabled]) .d2l-button-subtle-content,

package/components/filter/README.md

@@ -239,47 +239,54 @@ A tag-list allowing the user to see (and remove) the currently applied filters.
   import '@brightspace-ui/core/components/filter/filter-tags.js';
 </script>
 <style>
-	d2l-filter-tags {
-		max-width: calc(100% - 300px);
-	}
-
-	@media(max-width: 600px) {
-      d2l-filter-tags {
+  .filter-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+  d2l-filter-tags {
+    align-self: center;
+    position: relative;
+    width: 100%;
+  }
+
+  @media(max-width: 600px) {
+      .filter-wrapper {
         display: block;
         max-width: 100%;
       }
 	}
 </style>
-
-<d2l-filter-tags filter-ids="core-filter core-filter-2"></d2l-filter-tags>
-
-<d2l-filter id="core-filter">
-  <d2l-filter-dimension-set key="1" text="Dim 1">
-    <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
-  </d2l-filter-dimension-set>
-  <d2l-filter-dimension-set key="2" text="Dim 2">
-    <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
-  </d2l-filter-dimension-set>
-</d2l-filter>
-
-<d2l-filter id="core-filter-2">
-  <d2l-filter-dimension-set key="1" text="Dim 1" value-only-active-filter-text>
-    <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
-  </d2l-filter-dimension-set>
-  <d2l-filter-dimension-set key="2" text="Dim 2" value-only-active-filter-text>
-    <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
-  </d2l-filter-dimension-set>
-</d2l-filter>
+<div class="filter-wrapper">
+  <d2l-filter-tags filter-ids="core-filter core-filter-2"></d2l-filter-tags>
+
+  <d2l-filter id="core-filter">
+    <d2l-filter-dimension-set key="1" text="Dim 1">
+      <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+    <d2l-filter-dimension-set key="2" text="Dim 2">
+      <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+  </d2l-filter>
+
+  <d2l-filter id="core-filter-2">
+    <d2l-filter-dimension-set key="1" text="Dim 1" value-only-active-filter-text>
+      <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+    <d2l-filter-dimension-set key="2" text="Dim 2" value-only-active-filter-text>
+      <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+  </d2l-filter>
+</div>
 ```
 
 <!-- docs: start hidden content -->

package/components/filter/demo/filter-tags.html

@@ -11,6 +11,11 @@
 			import '../filter-dimension-set-value.js';
 			import '../filter-tags.js';
 		</script>
+		<style>
+			d2l-demo-snippet {
+				max-width: 1400px;
+			}
+		</style>
 	</head>
 	<body unresolved class="d2l-typography">
 
@@ -23,14 +28,14 @@
 			<d2l-filter id="core-filter">
 				<d2l-filter-dimension-set key="1" text="Dim 1">
 					<d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
-					<d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value selected text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
 					<d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
 					<d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
 				</d2l-filter-dimension-set>
 				<d2l-filter-dimension-set key="2" text="Dim 2">
-					<d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
-					<d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
-					<d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value selected text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value selected text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
 				</d2l-filter-dimension-set>
 			</d2l-filter>
 

package/components/filter/filter-tags.js

@@ -34,7 +34,6 @@ class FilterTags extends RtlMixin(LocalizeCoreElement(LitElement)) {
 		return [bodyCompactStyles, css`
 			:host {
 				display: inline-block;
-				width: 100%;
 			}
 			:host([hidden]) {
 				display: none;

package/components/tag-list/tag-list.js

@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
 import { announce } from '../../helpers/announce.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { getOffsetParent } from '../../helpers/dom.js';
 import { InteractiveMixin } from '../../mixins/interactive-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
@@ -133,7 +134,8 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		});
 		this._clearButtonResizeObserver.observe(clearButton);
 
-		const container = this.shadowRoot.querySelector('.tag-list-outer-container');
+		let container = getOffsetParent(this);
+		if (!container || container.tagName === 'BODY') container = this.shadowRoot.querySelector('.tag-list-outer-container');
 		this._resizeObserver = new ResizeObserver((e) => requestAnimationFrame(() => this._handleResize(e)));
 		this._resizeObserver.observe(container);
 

package/components/tooltip/tooltip-help.js

@@ -48,7 +48,7 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 			#d2l-tooltip-help-text {
 				background: none;
 				border: none;
-				cursor: text;
+				cursor: inherit;
 				padding: 0;
 				text-decoration-line: underline;
 				text-decoration-style: dashed;
@@ -72,6 +72,9 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 				line-height: inherit;
 				margin: inherit;
 			}
+			d2l-tooltip {
+				cursor: text;
+			}
 		`];
 	}
 

package/package.json

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