@brightspace-ui/core 1.196.0 → 1.197.0

package/components/list/list-item-generic-layout.js

@@ -207,6 +207,7 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 	_focusNextCell(num, forward = true) {
 		let cell = null;
 		let focusable = null;
+
 		do {
 			cell = this.shadowRoot.querySelector(`[data-cell-num="${num}"]`);
 			if (cell) {
@@ -215,26 +216,31 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			if (focusable) focusable.focus();
 			forward ? ++num : --num;
 		} while (cell && !focusable);
+
+		if (!cell) {
+			// wrap to first/last item
+			if (forward) this._focusNextCell(1);
+			else this._focusLastItem();
+		}
+
 		return focusable;
 	}
 
 	_focusNextRow(previous = false, num = 1) {
-		let listItem = previous ?
-			getPreviousAncestorSibling(this, (node) => node.role === 'rowgroup') :
-			getNextAncestorSibling(this, (node) => node.role === 'rowgroup');
-		if (!listItem || !listItem.shadowRoot) return;
-		while (num > 1) {
-			const nextItem = previous ? listItem.previousElementSibling : listItem.nextElementSibling;
-			if (!nextItem) {
-				break; //we ran out of items
-			}
-			listItem = nextItem;
-			--num;
+
+		let listItem = findComposedAncestor(this, node => node.role === 'rowgroup');
+
+		while (num > 0) {
+			const tempListItem = (previous ? this._getPreviousFlattenedListItem(listItem) : this._getNextFlattenedListItem(listItem));
+			if (tempListItem) listItem = tempListItem;
+			else break;
+			num--;
 		}
-		const row = listItem.shadowRoot.querySelector('[role="gridrow"]');
-		if (!row) return;
 
-		row._focusCellItem(this._cellNum, this._cellFocusedItem);
+		if (!listItem) return;
+		const listItemRow = listItem.shadowRoot.querySelector('[role="gridrow"]');
+		listItemRow._focusCellItem(this._cellNum, this._cellFocusedItem);
+
 	}
 
 	_focusNextWithinCell(node, num = 1) {
@@ -280,6 +286,38 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 		return position;
 	}
 
+	_getNextFlattenedListItem(listItem) {
+
+		// check for nested list first; this check needs to account for standard list-items as well as custom
+		const nestedList = listItem.querySelector('[slot="nested"]') || listItem.shadowRoot.querySelector('d2l-list');
+		if (nestedList) {
+			const nestedListItem = [...nestedList.children].find(node => node.role === 'rowgroup');
+			if (nestedListItem) return nestedListItem;
+		}
+
+		const getNextListItem = listItem => {
+
+			// check for sibling list-item
+			let nextElement = listItem.nextElementSibling;
+			while (nextElement) {
+				if (nextElement.role === 'rowgroup') return nextElement;
+				nextElement = nextElement.nextElementSibling;
+			}
+
+			// no sibling list-item was found so check for sibling of parent list-item if nested, recursively if necessary
+			const list = findComposedAncestor(listItem, node => node.tagName === 'D2L-LIST');
+			if (list.slot !== 'nested' && !(list.parentNode.tagName === 'SLOT' && list.parentNode.name === 'nested')) return;
+
+			const parentListItem = findComposedAncestor(list, node => node.role === 'rowgroup');
+			return getNextListItem(parentListItem);
+
+		};
+
+		// check for sibling list-item or ancestors sibling list-items
+		return getNextListItem(listItem);
+
+	}
+
 	_getNextSiblingInCell(node) {
 		const cell = findComposedAncestor(node, (parent) => parent.classList && parent.classList.contains('d2l-cell'));
 		if (!cell || cell.name === node.slot) return null;
@@ -289,6 +327,39 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 		return isComposedAncestor(cell, sibling) ? sibling : null;
 	}
 
+	_getPreviousFlattenedListItem(listItem) {
+
+		let previousElement = listItem.previousElementSibling;
+
+		// try to get the previous list-item in the current list sub-tree including nested
+		while (previousElement) {
+			if (previousElement.role === 'rowgroup') {
+
+				// this check needs to account for standard list-items as well as custom
+				const nestedList = previousElement.querySelector('[slot="nested"]') || previousElement.shadowRoot.querySelector('d2l-list');
+				if (nestedList) {
+					const nestedListItems = [...nestedList.children].filter(node => node.role === 'rowgroup');
+					if (nestedListItems && nestedListItems.length > 0) {
+						return nestedListItems[nestedListItems.length - 1];
+					}
+				}
+				return previousElement;
+
+			}
+			previousElement = previousElement.previousElementSibling;
+		}
+
+		// no previous list-item was found in the current list sub-tree so get the parent list item if currently in nested
+		const list = findComposedAncestor(listItem, node => node.tagName === 'D2L-LIST');
+
+		// this check needs to account for standard list-items as well as custom
+		if (list.slot === 'nested' || (list.parentNode.tagName === 'SLOT' && list.parentNode.name === 'nested')) {
+			const parentListItem = findComposedAncestor(list, node => node.role === 'rowgroup');
+			return parentListItem;
+		}
+
+	}
+
 	_getPrevSiblingInCell(node) {
 		const cell = findComposedAncestor(node, (parent) => parent.classList && parent.classList.contains('d2l-cell'));
 		if (!cell || cell.name === node.slot) return null;

package/components/list/list.js

@@ -1,12 +1,16 @@
 import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { SelectionInfo, SelectionMixin } from '../selection/selection-mixin.js';
 
+const keyCodes = {
+	TAB: 9
+};
+
 export const listSelectionStates = SelectionInfo.states;
 
 /**
  * A container for a styled list of items ("d2l-list-item"). It provides the appropriate "list" semantics as well as options for displaying separators, etc.
  * @slot - List content (e.g., `listitem`s)
- * @fires d2l-list-selection-change - Dispatched when the selection state changes
  */
 class List extends SelectionMixin(LitElement) {
 
@@ -54,6 +58,7 @@ class List extends SelectionMixin(LitElement) {
 			// batch the changes from select-all and nested lists
 			if (this._listItemChanges.length === 0) {
 				setTimeout(() => {
+					/** Dispatched once for a set of selection state changes (ex. select-all); event detail includes an array of objects where each object contains the `key` and `selected` state for each changed item */
 					this.dispatchEvent(new CustomEvent('d2l-list-selection-changes', {
 						detail: this._listItemChanges
 					}));
@@ -63,6 +68,7 @@ class List extends SelectionMixin(LitElement) {
 			this._listItemChanges.push(e.detail);
 
 			setTimeout(() => {
+				/** Dispatched when the selection state changes */
 				this.dispatchEvent(new CustomEvent('d2l-list-selection-change', {
 					bubbles: true,
 					composed: true,
@@ -78,7 +84,7 @@ class List extends SelectionMixin(LitElement) {
 		return html`
 			<div role="${role}" class="d2l-list-container">
 				<slot name="header"></slot>
-				<slot></slot>
+				<slot @keydown="${this._handleKeyDown}"></slot>
 			</div>
 		`;
 	}
@@ -91,6 +97,17 @@ class List extends SelectionMixin(LitElement) {
 		return this._getItems().indexOf(item);
 	}
 
+	getSelectedListItems(includeNested) {
+		let selectedItems = [];
+		this._getItems().forEach(item => {
+			if (item.selected) selectedItems.push(item);
+			if (includeNested && item._selectionProvider) {
+				selectedItems = [...selectedItems, ...item._selectionProvider.getSelectedListItems(includeNested)];
+			}
+		});
+		return selectedItems;
+	}
+
 	getSelectionInfo(includeNested) {
 		const selectionInfo = super.getSelectionInfo();
 		if (!includeNested) return selectionInfo;
@@ -114,6 +131,14 @@ class List extends SelectionMixin(LitElement) {
 		});
 	}
 
+	_handleKeyDown(e) {
+		if (!this.grid || this.slot === 'nested' || e.keyCode !== keyCodes.TAB) return;
+		e.preventDefault();
+		const focusable = (e.shiftKey ? getPreviousFocusable(this.shadowRoot.querySelector('slot:not([name])'))
+			: getNextFocusable(this, false, true, true));
+		if (focusable) focusable.focus();
+	}
+
 }
 
 customElements.define('d2l-list', List);

package/components/loading-spinner/README.md

@@ -48,7 +48,7 @@ A loading spinner indicates that something is happening and we don't know how lo
 | `color` | String | Color of the animated bar (default is `--d2l-color-celestine`) |
 | `size` | Number, default: `50` | Height and width (`px`) of the spinner |
 
-## Future Enhancements
+## Future Improvements
 
 - Ability to "freeze" the spinner at a specified frame to make visual diff testing easier
 

package/components/meter/README.md

@@ -137,8 +137,4 @@ All `meter` components have a `foreground-light` style that ensures accessibl
 * `text` (String): Context information about what the meter is about.
 	* `\{\%\}` in the string will be replaced with percentage value
 	* `{x/y}` in the string will be replaced with fraction with the proper language support
-
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
-<!-- docs: end hidden content -->
+<!-- docs: end hidden content -->

package/components/offscreen/README.md

@@ -42,9 +42,3 @@ class MyElement extends LitElement {
   }
 }
 ```
-
-<!-- docs: start hidden content -->
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
-<!-- docs: end hidden content -->

package/components/selection/selection-input.js

@@ -89,10 +89,12 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 				'd2l-input-radio': true,
 				'd2l-selection-input-radio': true,
 				'd2l-skeletize': true,
-				'd2l-hovering': this.hovering
+				'd2l-hovering': this.hovering,
+				'd2l-disabled': this.disabled
 			};
 			return html`
 				<div
+					aria-disabled="${ifDefined(this.disabled)}"
 					aria-label="${this.label}"
 					aria-checked="${this.selected ? 'true' : 'false'}"
 					class="${classMap(radioClasses)}"
@@ -100,7 +102,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 					@keydown="${this._handleRadioKeyDown}"
 					@keyup="${this._handleRadioKeyUp}"
 					role="radio"
-					tabindex="0"></div>
+					tabindex="${ifDefined(this.disabled ? undefined : 0)}"></div>
 			`;
 		} else {
 			return html`

package/components/selection/selection-mixin.js

@@ -60,6 +60,7 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
 		this.addEventListener('d2l-selection-observer-subscribe', this._handleSelectionObserverSubscribe);
 		this.addEventListener('d2l-selection-input-subscribe', this._handleSelectionInputSubscribe);
 		requestAnimationFrame(() => {
+			/** @ignore */
 			this.dispatchEvent(new CustomEvent('d2l-selection-provider-connected', { bubbles: true, composed: true }));
 		});
 

package/components/status-indicator/README.md

@@ -5,7 +5,7 @@ Status Indicators are used to communicate the status of an item. They are non-in
 ![screenshot of status-indicator component](./screenshots/default-indicator.png)
 <!-- docs: end hidden content -->
 
-<!-- docs: demo -->
+<!-- docs: demo display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
@@ -224,9 +224,3 @@ The text label should be kept short; one or two words at most. If more informati
 
 </div>
 ```
-<!-- docs: start hidden content -->
-
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
-<!-- docs: end hidden content -->

package/components/switch/README.md

@@ -26,7 +26,7 @@ A switch is used to toggle between two states, on and off, just like a light swi
 <!-- docs: end donts -->
 <!-- docs: end best practices -->
 
-## Switch [d2l-switch]	
+## Switch [d2l-switch]
 The `d2l-switch` element is a generic switch with on/off semantics.
 <!-- docs: start hidden content -->
 ![Switch](./screenshots/switch.png?raw=true)
@@ -95,8 +95,4 @@ The `d2l-switch-visibility` element is a variant of the generic switch configure
 ### Events
 
 - `change`: dispatched when the `on` property is updated
-
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
 <!-- docs: end hidden content -->

package/components/switch/switch-mixin.js

@@ -234,6 +234,7 @@ export const SwitchMixin = superclass => class extends RtlMixin(FocusVisiblePoly
 	_toggleState() {
 		if (this.disabled) return;
 		this.on = !this.on;
+		/** Dispatched when the `on` property is updated */
 		this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
 	}
 };

package/components/tabs/README.md

@@ -107,7 +107,4 @@ Selecting a tab in the tab bar causes the relevant tab panel to be displayed. Ta
 
 ### Events
 - `d2l-tab-panel-selected`: dispatched when a tab is selected
-## Future Enhancements
-
-Looking for an enhancement not listed here? Create a GitHub issue!
 <!-- docs: end hidden content -->

package/components/tooltip/README.md

@@ -75,7 +75,7 @@ The `d2l-tooltip` component is used to display additional information when users
   import '@brightspace-ui/core/components/tooltip/tooltip.js';
 </script>
 
-<d2l-input-text placeholder="Hover for Error" id="tooltip-error" aria-invalid="true" style="max-width:250px;"></d2l-input-text>
+<d2l-input-text placeholder="Hover for Error" id="tooltip-error" aria-invalid="true" label="Text Input" label-hidden style="max-width:250px;"></d2l-input-text>
 <d2l-tooltip for="tooltip-error" state="error">
 	Your error message will display here
 </d2l-tooltip>

package/custom-elements.json

@@ -327,7 +327,7 @@
       "slots": [
         {
           "name": "",
-          "description": "breadcrumb items"
+          "description": "Breadcrumb items"
         }
       ]
     },
@@ -1087,6 +1087,12 @@
           "description": "The type of the badge. Defaults to \"count\".",
           "type": "'count'|'notification'",
           "default": "\"count\""
+        },
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -1163,6 +1169,13 @@
           "description": "The type of the badge. Defaults to \"count\".",
           "type": "'count'|'notification'",
           "default": "\"count\""
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
         }
       ]
     },
@@ -1227,6 +1240,12 @@
           "description": "The type of the badge. Defaults to \"count\".",
           "type": "'count'|'notification'",
           "default": "\"count\""
+        },
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -1297,6 +1316,13 @@
           "description": "The type of the badge. Defaults to \"count\".",
           "type": "'count'|'notification'",
           "default": "\"count\""
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
         }
       ]
     },
@@ -1460,13 +1486,13 @@
         }
       ],
       "events": [
-        {
-          "name": "d2l-dialog-open",
-          "description": "Dispatched when the dialog is opened"
-        },
         {
           "name": "d2l-dialog-close",
           "description": "Dispatched with the action value when the dialog is closed for any reason"
+        },
+        {
+          "name": "d2l-dialog-open",
+          "description": "Dispatched when the dialog is opened"
         }
       ],
       "slots": [
@@ -1531,13 +1557,13 @@
         }
       ],
       "events": [
-        {
-          "name": "d2l-dialog-open",
-          "description": "Dispatched when the dialog is opened"
-        },
         {
           "name": "d2l-dialog-close",
           "description": "Dispatched with the action value when the dialog is closed for any reason"
+        },
+        {
+          "name": "d2l-dialog-open",
+          "description": "Dispatched when the dialog is opened"
         }
       ],
       "slots": [
@@ -1619,13 +1645,13 @@
         }
       ],
       "events": [
-        {
-          "name": "d2l-dialog-open",
-          "description": "Dispatched when the dialog is opened"
-        },
         {
           "name": "d2l-dialog-close",
           "description": "Dispatched with the action value when the dialog is closed for any reason"
+        },
+        {
+          "name": "d2l-dialog-open",
+          "description": "Dispatched when the dialog is opened"
         }
       ],
       "slots": [
@@ -2015,13 +2041,13 @@
           "name": "d2l-dropdown-close",
           "description": "Dispatched when the dropdown is closed"
         },
-        {
-          "name": "d2l-dropdown-focus-enter",
-          "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
-        },
         {
           "name": "d2l-dropdown-position",
           "description": "Dispatched when the dropdown position finishes adjusting"
+        },
+        {
+          "name": "d2l-dropdown-focus-enter",
+          "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
         }
       ],
       "slots": [
@@ -2352,13 +2378,13 @@
           "name": "d2l-dropdown-close",
           "description": "Dispatched when the dropdown is closed"
         },
-        {
-          "name": "d2l-dropdown-focus-enter",
-          "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
-        },
         {
           "name": "d2l-dropdown-position",
           "description": "Dispatched when the dropdown position finishes adjusting"
+        },
+        {
+          "name": "d2l-dropdown-focus-enter",
+          "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
         }
       ],
       "slots": [
@@ -2689,13 +2715,13 @@
           "name": "d2l-dropdown-close",
           "description": "Dispatched when the dropdown is closed"
         },
-        {
-          "name": "d2l-dropdown-focus-enter",
-          "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
-        },
         {
           "name": "d2l-dropdown-position",
           "description": "Dispatched when the dropdown position finishes adjusting"
+        },
+        {
+          "name": "d2l-dropdown-focus-enter",
+          "description": "Dispatched when user focus enters the dropdown content (trap-focus option only)"
         }
       ],
       "slots": [
@@ -4253,9 +4279,6 @@
         {
           "name": "change",
           "description": "Dispatched when there is a change to selected date or selected time. \"value\" corresponds to the selected value and is formatted in ISO 8601 combined date and time format (\"YYYY-MM-DDTHH:mm:ss.sssZ\")."
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -4411,9 +4434,6 @@
         {
           "name": "change",
           "description": "Dispatched when there is a change to selected date. \"value\" corresponds to the selected value and is formatted in ISO 8601 calendar date format (\"YYYY-MM-DD\")."
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -4742,9 +4762,6 @@
         {
           "name": "change",
           "description": "Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value."
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -4932,9 +4949,6 @@
         {
           "name": "change",
           "description": "Dispatched when an alteration to the value is committed (typically after focus is lost) by the user. The `value` attribute reflects a JavaScript Number which is parsed from the formatted input value."
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -5404,9 +5418,6 @@
         {
           "name": "input",
           "description": "Dispatched immediately after changes by the user"
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -5635,9 +5646,6 @@
         {
           "name": "input",
           "description": "Dispatched immediately after changes by the user"
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -6021,9 +6029,6 @@
         {
           "name": "change",
           "description": "Dispatched when there is a change to selected time. \"value\" corresponds to the selected value and is formatted in ISO 8601 time format (\"hh:mm:ss\")."
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -6323,9 +6328,6 @@
         },
         {
           "name": "d2l-list-item-selected"
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -6519,9 +6521,6 @@
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -6851,9 +6850,6 @@
         {
           "name": "d2l-list-item-selected",
           "description": "Dispatched when the component item is selected"
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ],
       "slots": [
@@ -6933,14 +6929,12 @@
       ],
       "events": [
         {
-          "name": "d2l-list-selection-change",
-          "description": "Dispatched when the selection state changes"
-        },
-        {
-          "name": "d2l-list-selection-changes"
+          "name": "d2l-list-selection-changes",
+          "description": "Dispatched once for a set of selection state changes (ex. select-all); event detail includes an array of objects where each object contains the `key` and `selected` state for each changed item"
         },
         {
-          "name": "d2l-selection-provider-connected"
+          "name": "d2l-list-selection-change",
+          "description": "Dispatched when the selection state changes"
         }
       ],
       "slots": [
@@ -8106,9 +8100,6 @@
         },
         {
           "name": "d2l-selection-input-subscribe"
-        },
-        {
-          "name": "d2l-labelled-mixin-label-elem-change"
         }
       ]
     },
@@ -8227,11 +8218,6 @@
           "type": "boolean",
           "default": "false"
         }
-      ],
-      "events": [
-        {
-          "name": "d2l-selection-provider-connected"
-        }
       ]
     },
     {
@@ -8568,7 +8554,8 @@
       ],
       "events": [
         {
-          "name": "change"
+          "name": "change",
+          "description": "Dispatched when the `on` property is updated"
         }
       ]
     },
@@ -8655,7 +8642,8 @@
       ],
       "events": [
         {
-          "name": "change"
+          "name": "change",
+          "description": "Dispatched when the `on` property is updated"
         }
       ]
     },

package/generated/icons/tier3/rubric-graded.js

@@ -1,5 +1,6 @@
 // auto-generated
 export const val = `<svg height="30" width="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
   <path fill="#494c4e" d="M17.641,17.98l-9.89,11.5a1.488,1.488,0,0,1-1.13.52.277.277,0,0,1-.09-.01.22.22,0,0,1-.08.01,1.509,1.509,0,0,1-1.01-.39l-4.95-4.5a1.5,1.5,0,1,1,2.02-2.22l3.9,3.55,8.95-10.42a1.5,1.5,0,1,1,2.28,1.96Z"/>
-  <path fill="#494c4e" d="M26,0H4A4.012,4.012,0,0,0,0,4V20.85a3.5,3.5,0,0,1,1.505-.35A3.492,3.492,0,0,1,2,20.545V16H7v5H3.3a3.439,3.439,0,0,1,.556.411L5.6,23H6.729L9,20.356V16h3.741l1.1-1.282A3.48,3.48,0,0,1,16,13.551V9h5v5H18.3a3.417,3.417,0,0,1,1.547,2H21v5H17.681L14,25.28V28H11.661l-1.72,2H26a4.012,4.012,0,0,0,4-4V4A4.012,4.012,0,0,0,26,0ZM7,14H2V9H7ZM7,7H2V4A2.006,2.006,0,0,1,4,2H7Zm7,7H9V9h5Zm0-7H9V2h5Zm7,21H16V23h5ZM21,7H16V2h5Zm7,19a2.006,2.006,0,0,1-2,2H23V23h5Zm0-5H23V16h5Zm0-7H23V9h5Zm0-7H23V2h3a2.006,2.006,0,0,1,2,2Z"/></svg>
-</svg>`;
+  <path fill="#494c4e" d="M26,0H4A4.012,4.012,0,0,0,0,4V20.85a3.5,3.5,0,0,1,1.505-.35A3.492,3.492,0,0,1,2,20.545V16H7v5H3.3a3.439,3.439,0,0,1,.556.411L5.6,23H6.729L9,20.356V16h3.741l1.1-1.282A3.48,3.48,0,0,1,16,13.551V9h5v5H18.3a3.417,3.417,0,0,1,1.547,2H21v5H17.681L14,25.28V28H11.661l-1.72,2H26a4.012,4.012,0,0,0,4-4V4A4.012,4.012,0,0,0,26,0ZM7,14H2V9H7ZM7,7H2V4A2.006,2.006,0,0,1,4,2H7Zm7,7H9V9h5Zm0-7H9V2h5Zm7,21H16V23h5ZM21,7H16V2h5Zm7,19a2.006,2.006,0,0,1-2,2H23V23h5Zm0-5H23V16h5Zm0-7H23V9h5Zm0-7H23V2h3a2.006,2.006,0,0,1,2,2Z"/>
+</svg>
+`;