@brightspace-ui/core 1.197.2 → 1.197.3

package/components/filter/README.md

@@ -1,9 +1,12 @@
 # Filtering
 
-**NOTE: This component is a work-in-progress and not ready for consumer use yet.**
-
 Filter components are often used in conjuction with [tables](../../components/table) and allow users to select a subset of the presented data based on a set of parameters. Filter dimensions provide methods for entering parameters for a wide range of data types.
 
+<!-- docs: start hidden content -->
+Filter with multiple dimensions:
+![Filter with multiple dimensions](./screenshots/filter-multi-dim.png?raw=true)
+<!-- docs: end hidden content -->
+
 <!-- docs: demo align:start autoSize:false size:large -->
 ```html
 <script type="module">
@@ -47,10 +50,6 @@ Filter components are often used in conjuction with [tables](../../components/ta
 
 The `d2l-filter` component allows a user to filter on one or more dimensions of data from a single dropdown.
 
-<!-- docs: start hidden content -->
-<!-- ![Filter](./screenshots/filter.png?raw=true) -->
-<!-- docs: end hidden content -->
-
 <!-- docs: demo live name:d2l-filter autoSize:false align:start size:large -->
 ```html
 <script type="module">
@@ -96,6 +95,11 @@ The `d2l-filter` component allows a user to filter on one or more dimensions of
 ### Single Vs Multi Dimensional
 A filter can be a single dimension (like picking from a list of courses) or offer multiple dimensions (filter by role, or department, or something else). Single-dimension filters can be used side-by-side to promote filters that are more commonly used, while tucking less-used filters into a multi-dimensional filter.
 
+<!-- docs: start hidden content -->
+Filter with a single dimension:
+![Filters with single dimension](./screenshots/filter.png?raw=true)
+<!-- docs: end hidden content -->
+
 <!-- docs: demo code autoSize:false align:start size:large -->
 ```html
 <script type="module">
@@ -173,6 +177,11 @@ The filter will announce changes to filter selections, search results, and when
 
 The `d2l-filter-dimension-set` component is the main dimension type that will work for most use cases.  Used alongside the [d2l-filter-dimension-set-value](#filter-dimension%3A-set-value-%5Bd2l-filter-dimension-set-value%5D), this will give you a selectable list of filter values.
 
+<!-- docs: start hidden content -->
+Set dimension on mobile:
+![Set dimension on mobile](./screenshots/filter-mobile.png?raw=true)
+<!-- docs: end hidden content -->
+
 <!-- docs: demo live name:d2l-filter-dimension-set align:start autoSize:false size:large -->
 ```html
 <script type="module">

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

@@ -135,6 +135,14 @@ class HtmlBlock extends LitElement {
 		`];
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this._templateObserver) return;
+
+		const template = this.querySelector('template');
+		if (template) this._templateObserver.observe(template.content, { attributes: true, childList: true, subtree: true });
+	}
+
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._templateObserver) this._templateObserver.disconnect();

package/package.json

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