@watermarkinsights/ripple 5.19.0-alpha.9 → 5.19.0

package/dist/collection/components/datepickers/datepicker.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }

package/dist/collection/components/wm-file/wm-file.css

@@ -915,7 +915,7 @@
   min-inline-size: 0;
   flex-grow: 1;
 }
-.file-wrapper .file .left-group:has(.-truncated) {
+.file-wrapper .file .left-group:has(#file-details:not([open]) .-truncated) {
   min-inline-size: fit-content;
 }
 .file-wrapper .file .right-group {
@@ -957,6 +957,7 @@
   display: block;
   font-weight: 600;
   color: var(--wmcolor-interactive);
+  list-style-type: none;
 }
 .file-wrapper .file #file-details summary::before {
   position: absolute;
@@ -969,7 +970,7 @@
 .file-wrapper .file #file-details #summary-filename-trunc,
 .file-wrapper .file #file-details #summary-filename-wrap,
 .file-wrapper .file #file-details .file-info {
-  margin-inline-start: 2rem;
+  margin-inline-start: 1.5rem;
 }
 .file-wrapper .file #file-details[open] #summary-filename-trunc {
   display: none;

package/dist/collection/components/wm-menuitem/wm-menuitem.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host(:focus-visible) {
   outline: none;
 }

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }

package/dist/collection/components/wm-pagination/wm-pagination.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host,
 wm-pagination {
   --wmcolor-pagination-arrow-disabled: var(--wmcolor-interactive-disabled);

package/dist/collection/components/wm-search/wm-search.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }

package/dist/collection/components/wm-snackbar/wm-snackbar.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
   margin: unset;

package/dist/collection/components/wm-snackbar/wm-snackbar.js

@@ -33,24 +33,20 @@ export class Snackbar {
         this.resetUpdatedNotifications(prevParsedNotifications);
         if (prevParsedNotifications.length < this.parsedNotifications.length) {
             const latestNotification = this.parsedNotifications[0];
+            // don't announce link if user is tabbing because link is focused after announcement
+            this.announce(`${latestNotification.message} ${this.isTabbing ? "" : latestNotification.link}`);
             if (!latestNotification.link) {
                 const newTimer = window.setTimeout(() => this.snackExpired(latestNotification.id), 6000);
                 this.timers = Object.assign({ [latestNotification.id]: newTimer }, this.timers);
             }
-            else {
-                if (this.isTabbing) {
-                    this.focusOnDismiss = document.activeElement ? document.activeElement : null;
-                    this.stopTimer(latestNotification);
-                    // allow snack to render before focusing
-                    window.setTimeout(() => {
-                        const link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
-                        link.focus();
-                    });
-                }
-                else {
-                    // don't announce link if user is tabbing because link is focused after announcement
-                    !this.isTabbing && this.announce(`${latestNotification.message} ${latestNotification.link}`);
-                }
+            else if (this.isTabbing) {
+                this.focusOnDismiss = document.activeElement ? document.activeElement : null;
+                this.stopTimer(latestNotification);
+                // allow snack to render before focusing
+                window.requestAnimationFrame(() => {
+                    const link = this.el.shadowRoot.querySelector(`#action-${latestNotification.id}`);
+                    link.focus();
+                });
             }
         }
     }
@@ -149,11 +145,11 @@ export class Snackbar {
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" })))), h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() }, h("div", { class: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h(Host, { key: '2b062c8a3acb61667fee361512d91b9e08c27a07' }, h("div", { key: 'c4643e64a3e706732dd2b44d94938c73ee7914cb', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: '01264c3db9744e9b71b6c8cc05c9c80f3c8086c4' }, h("div", { key: '0e49a6805c3f36589077c8685c58ef2e75196a6a', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), h("div", { key: 'd886c23167016f1ea92da9edd75b1b8ffbafe098', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+            } }, this.renderSnackbars()), h("div", { key: '9c4ea98f1ce40e18e82ef66684bd3d7481343a36', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tag-input/wm-tag-input.css

@@ -882,13 +882,13 @@
   --wmcolor-taginput-option-text-selected: var(--wmcolor-option-text-disabled);
   --wmcolor-taginput-option-text: var(--wmcolor-interactive);
   --wmcolor-taginput-row-background-hover: var(--wmcolor-interactive-background-hover);
-  --wmcolor-taginput-row-background-focus: var(--wmcolor-interactive-background-focus);
+  --wmcolor-taginput-row-background-focus: var(--wmcolor-background-selected);
   --wmcolor-taginput-row-background-selected: var(--wmcolor-table-row-background-selected);
   --wmcolor-taginput-row-background-table: var(--wmcolor-table-row-background);
   --wmcolor-taginput-row-border-selected: var(--wmcolor-table-row-border-selected);
   --wmcolor-taginput-tag-background-highlight: var(--wmcolor-interactive-background-highlight);
   --wmcolor-taginput-tag-background-locked: var(--wmcolor-interactive-disabled);
-  --wmcolor-taginput-tag-background: var(--wmcolor-palelilacgray); /* EXCEPTION */
+  --wmcolor-taginput-tag-background: var(--wmcolor-lilacgray-30); /* EXCEPTION */
   --wmcolor-taginput-tag-text-locked: var(--wmcolor-text-ondark);
   --wmcolor-taginput-tag-text: var(--wmcolor-text);
   --wmcolor-taginput-tagbutton-background-hover: var(--wmcolor-interactive-hover);
@@ -1218,11 +1218,12 @@
   outline: none;
   background: var(--wmcolor-taginput-option-background-hover);
 }
-:host .dropdown-wrapper li.option.focused, :host .dropdown-wrapper li.add-new-btn.focused,
-:host .dropdown-wrapper div.option.focused,
-:host .dropdown-wrapper div.add-new-btn.focused {
+:host .dropdown-wrapper li.option.focused:not(:hover), :host .dropdown-wrapper li.add-new-btn.focused:not(:hover),
+:host .dropdown-wrapper div.option.focused:not(:hover),
+:host .dropdown-wrapper div.add-new-btn.focused:not(:hover) {
   outline: none;
   background: var(--wmcolor-taginput-option-background-focus);
+  color: var(--wmcolor-interactive-text);
 }
 :host .dropdown-wrapper li.help-text,
 :host .dropdown-wrapper div.help-text {
@@ -1245,9 +1246,6 @@
   overflow: auto;
   margin-block-start: 1.5rem;
 }
-:host .table-wrapper:focus {
-  outline: none;
-}
 :host .table-wrapper #table {
   width: 100%;
   border-spacing: 0px;
@@ -1266,6 +1264,9 @@
   text-transform: uppercase;
   padding: 0 1.5rem;
 }
+:host .table-wrapper #table:focus {
+  outline: none;
+}
 :host .table-wrapper tr:nth-child(even) {
   background-color: var(--wmcolor-taginput-altrow-background-table);
 }

package/dist/collection/components/wm-tag-input/wm-tag-input.js

@@ -634,7 +634,7 @@ export class TagInput {
             }
         }
     }
-    handleTableWrapperFocus() {
+    handleTableFocus() {
         // Forward focus to first focusable table row when container receives focus
         // First try filtered options, then fall back to all options
         let targetOptions = this.filteredOptionEls;
@@ -717,6 +717,14 @@ export class TagInput {
                     // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text
                     showTooltip("bottom", this._focusedOption, this._focusedOption.innerText);
                 }
+                const tableEl = this.el.shadowRoot.querySelector("#table");
+                if (!(this.el.shadowRoot.activeElement == tableEl)) {
+                    tableEl.focus();
+                }
+                if (this.filteredOptionEls.length > 0 && this.focusedOption == this.filteredOptionEls[0]) {
+                    // When the focused option is the first option, scroll to the top of the table so headers are visible
+                    this.el.shadowRoot.querySelector(".table-wrapper").scrollTop = 0;
+                }
             }
             optionToFocus.scrollIntoView({ block: "nearest" });
         }
@@ -815,6 +823,12 @@ export class TagInput {
     handleTagMouseEnter(ev) {
         this.showTooltipIfTruncated(ev.target);
     }
+    renderDropdownInput() {
+        return (h("input", { id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": "dropdown", "aria-describedby": `help-text ${this.errorMessage ? "error " : ""} max-tags`, "aria-label": `${this.label} ${globalMessages.getCharacterLimit(this.characterLimit)}`, "aria-expanded": this.isExpanded.toString(), "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.characterLimit, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) }));
+    }
+    renderTableInput() {
+        return (h("input", { id: "input", class: "input", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": "table", "aria-describedby": `help-text ${this.errorMessage ? "error " : ""} max-tags`, "aria-label": this.label, placeholder: this.placeholder, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) }));
+    }
     renderDropdown() {
         return (h("div", { class: `dropdown-wrapper ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { id: "help-text", class: "help-text" }, this.renderHelpText()), h("ul", { class: "dropdown", id: "dropdown", role: "listbox", "aria-multiselectable": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.label, tabindex: -1 }, this.inputEl && this.renderAddNewButton(), this.filteredOptionEls.map((o) => this.renderListItem(o)))));
     }
@@ -841,11 +855,8 @@ export class TagInput {
     renderTable() {
         return (h("div", { class: `table-wrapper ${this.isKeying ? "user-is-keying" : ""}`, onScroll: () => this.dismissTooltip(),
             // browsers will make this container tabbable if it scrolls
-            // this handler will forward focus to the appropriate element within the table...
-            onFocus: () => this.handleTableWrapperFocus(),
-            // ...and for consistency, the table, whether it scrolls or not, should be tabbable
-            // as long as it's not empty
-            tabindex: this.filteredOptionEls.length ? "0" : undefined, onKeyDown: (ev) => this.handleTableWrapperKeyDown(ev) }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true" }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
+            // we need to proactively set tabindex to -1 to avoid user focus. This is okay, because the table provides behavior that allows scrolling its content
+            tabindex: -1, onKeyDown: (ev) => this.handleTableWrapperKeyDown(ev) }, h("table", { id: "table", role: "grid", class: `${this.colWidths ? "fixed-widths" : ""}`, "aria-label": this.label, "aria-multiselectable": "true", onFocus: () => this.handleTableFocus(), "aria-activedescendant": this._focusedCell ? this._focusedCell.id : undefined, tabindex: this.filteredOptionEls.length ? "0" : undefined }, this.renderTableHeaders(), this.filteredOptionEls.length ? (this.filteredOptionEls.map((o) => this.renderTableRow(o))) : (h("div", { class: "no-results" }, this.noResultsMessage)))));
     }
     renderTableHeaders() {
         return (h("tr", { class: "headers", role: "row" }, csvToArray(this.colHeaders).map((header, idx) => (h("th", { class: "header-cell", role: "columnheader",
@@ -916,12 +927,10 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '3b80913e5cebf97f7da13646d3ba2ebca1ff7acb', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '3046fd2f7c843d6dd7049063164ba1ecbb791bed', class: "label-wrapper" }, h("label", { key: 'd33734b6cbe7dff0b512bf760bdf1ff26a756446', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { key: '9c0e3c6662a75f33e9506d5051b01119afea6327', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'ebd9f767f4b4b715078845aed067e10471394bd7', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '62a1b95c2a0d7b3f2cf0f2386eb0cd9e1aeba303', class: "upper-row" }, h("div", { key: 'a6c0facb5651b3e6009e26f193c381b7a4ec002f', class: "svg-icon svg-search" }), h("div", { key: '9020b2b35aa161b72f073b9a0eb2a963680d3727', class: `tags-and-input-wrapper` }, h("ul", { key: 'e5136c64a45cf4f6f7a759721e126b55066b386b', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (h("div", { key: 'a605a67a736cfced28788202c713c9a471829815', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '2b6e16b5779bfe055260370775e3517378917636', class: "label-wrapper" }, h("label", { key: 'b47147159b09e53988dba0f360665853ef522167', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.requiredField && (h("div", { key: '06afe2cbaf6a32989ee70fd50725adb875d9a8b3', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'ba9a1ed7545a2f0b3b72ebdf23231de7df9abf20', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: '03b6ba86a93df334ba0af0e5759cb0834f5e002e', class: "upper-row" }, h("div", { key: '5a4b29d9cdcc228426a29524d51e47be84728da8', class: "svg-icon svg-search" }), h("div", { key: 'ddd1831f74b7a5204b9ee0077bfe475e5782369c', class: `tags-and-input-wrapper` }, h("ul", { key: '0f561a33d4fd7dc683d04bc6c47f0e0f6c096f0a', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("input", { key: 'e6b95de440173ace0008faacd3b8bea77af0da8c', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
-                this.handleBlur(ev);
-            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (h("div", { key: '418f93ca2ea86a1fa46a6d2f601c84e309c32a2f', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'a4a98937151304e2d9357f0522d445b6f841eb02', id: "info", class: "info-text" }, this.info)), h("div", { key: 'b6ac66b1e5a056503da95df5b1eec2bcba259b76', id: "error" }, this.errorMessage), h("div", { key: '5f7e12833cadb8961f850aa47a8e61262e6d3779', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'cd62e6627ab5932fb436f333cfb4a33ba3404adc', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: '7cc8c9ba718417cbea5b26b15f7f671b5ad2ee06', id: "info", class: "info-text" }, this.info)), h("div", { key: 'a8be5ef2c7f945226f9136c0009a9ce3bcc33686', id: "error" }, this.errorMessage), h("div", { key: '3159070da0e032545bf5e3b2ae1e7d8eb6917e69', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get is() { return "wm-tag-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-textarea/wm-textarea.js

@@ -71,7 +71,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: '5bd7daf935fa75bec3fccc000c4674b23da1c043', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '52f18f7ef95fb4505f19ec57b3328db9706af750', class: "label-wrapper" }, h("label", { key: '510bf29970364b1caacfd1eef164a2f766217df2', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '47024a21e0940c6c40dde2b131c337636fe1bbdf', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("span", { key: 'dff37fb5a589b44b4eb249b0b3a572e9944a15cb', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '8dda587667514bbf0db310491cf58d2b3ea00fea', class: "inner-wrapper" }, h("div", { key: '8782435cdc9150197ac29a09fd6b3d6b95413c59', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '3d7a017570a79669f03914e00be725a633717c66', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '7cfb20e30f1413096a861089e932aabc46be0593', id: "info", class: "info" }, this.info)), h("div", { key: '2f450eb52e3bf5e805e125f19e59766c4d45a75c', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '024947b6fa1ef096bb09c1c9183984e647ed5432', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'c2bdf3a833b32103d85e4d19572985dde836aeb8', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '61f16420145b5289639728f06f7a7e9c90ecb220', class: "label-wrapper" }, h("label", { key: 'cf3a1d2dbe614498ce76f7d10252ddabe591ffc7', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: 'ed53aebd7ba2338ba9a34db8ed84f86266fb01a0', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.requiredField && (h("span", { key: 'c91d58aa6d531d19ca62227f1f9ae6776dc2e6eb', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'abbd117e4231de2ee3d696216d869a3ac3078240', class: "inner-wrapper" }, h("div", { key: 'e94b2f9f8bbf6d5e374e68555ac266789283b280', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '908e5bb512ed6253d5f1c9cb593f74cf5766ef8c', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '51239b18371da181395d159315d280e1993383cd', id: "info", class: "info" }, this.info)), h("div", { key: 'dd678537871b6ac6efeec23995a1c8bb5a9c3fbb', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '54e35dfe321a05965fc555814cdd3235457a0871', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-timepicker/wm-timepicker.css

@@ -860,37 +860,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }

package/dist/collection/components/wm-timepicker/wm-timepicker.js

@@ -281,13 +281,13 @@ export class Timepicker {
         return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (h(Host, { key: 'fd0acc447628174ea8551c1ea7cafdc8b0b6ec74', onBlur: () => this.close(false) }, h("div", { key: 'a8c7c453558df7a33fc42d71eff78894a36306d6', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '9f259605e513d12e32716f12b4d5dee9fb97d10a', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '1b1b596a992a66f6738cab61086c9d7298934e8c', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '4fc12427a1b3c62b9a6e7cd53c83cec311b46f1e', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '6f299347f62dd5299f0223bbdee82fc55dafe06a' }, h("div", { key: 'd78e3b28b110714558d94ba03bedc4d63e8a41d7', class: "inner-wrapper" }, h("input", { key: '1af64c4c0ab7bd983d3e926ad1ea146bed0dadea', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: 'a99cd67d7bfa17c4ba512b73097b5987b8d5d4f8', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
+        return (h(Host, { key: 'e05ceac51a9193466dff7a488803f09ae91c837a', onBlur: () => this.close(false) }, h("div", { key: '4bdd4087ff1b8c4956623571dc168d761646ce4e', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: 'c64a7486a1c3b74f61c94ce0b3f59c45e96b639e', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: 'cce428cf638a5932b1c157794e646f0b8026e1db', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '655e1585ffdb70eed624eeec16aa270f3f6584b6', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: '85bf657eff58d0774a25d20c0eba53d7deadd98d' }, h("div", { key: '0152b10359dcb69a47275ee88e0a5c0b8cacf051', class: "inner-wrapper" }, h("input", { key: '32a55fbfebecafa786cafafc540016f52fcbf38a', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), h("button", { key: '4c77218b291d0d3858c456c816a608b6d2e6d8c6', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
             // This addresses an issue in Safari, where clicking buttons does not focus them
             // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
             onMouseDown: (ev) => {
                 ev.preventDefault();
                 this.buttonEl.focus();
-            } }, h("span", { key: 'd50582487d9860716e0bdc67b99ac75b346d62aa', class: "svg-icon svg-time" })), h("ul", { key: '63a9ed95dc1c238d12d84150c406e5ff877d71b3', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: '25ea586bea9676a7d18c2fdeada1dcaf0a224471', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '4985d6ee5df49f687eaeeb06a1b5a0c8b14b7119', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { key: '0211abd0a1e89e3fd48278022f45572a8696a8de', class: "svg-icon svg-time" })), h("ul", { key: 'e7db5d8e3853b0c64099996064c17e361f3f0119', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), h("div", { key: 'bb587cbf052b2b54ff5cd54cd1ee26e1015adf86', id: "error", class: "error" }, this.errorMessage)), h("div", { key: 'bf8d0736ecbd1c987b0d5c15a87537be665812d7', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get is() { return "wm-timepicker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-toggletip/wm-toggletip.js

@@ -229,11 +229,11 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: '07c2a62e81a2df15f667ca84d440c96dc21a89f7', class: `size-${this.targetSize}` }, h("button", { key: 'd0cb8080843aa0c61fbc2a8280b12e25707ba79a', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
+        return (h(Host, { key: '2127bc9c0e5bebbf58fce82b7ea772a3b6fe2ada', class: `size-${this.targetSize}` }, h("button", { key: '55335d84975af0a4e6928b71d08745050454d4e4', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: '1b082071110727cf565df491c69b8f2a7c58a3d4', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: 'de52ea584962f47a035c900af10e31951ec49ef6', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
             // @ts-ignore - despite what Typescript says, this is a valid event for popover elements
-            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: '140540c39e67e60d63ed8c6e4435a7063a2bb16d', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: '88e8da7742e5aa390fd17be1efd6067d25f71209', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-uploader/wm-uploader.css

@@ -1556,37 +1556,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
 :host {
   display: block;
   position: relative;
@@ -1868,7 +1837,7 @@
   width: fit-content;
 }
 .requirements summary .title-text {
-  margin-inline-start: 2rem;
+  margin-inline-start: 1.5rem;
 }
 .requirements summary::marker {
   font-size: 0.75rem;
@@ -1913,7 +1882,7 @@
   flex-direction: column;
   gap: 0.25rem;
   margin-block-start: 0.25rem;
-  margin-inline-start: 2rem;
+  margin-inline-start: 1.5rem;
 }
 
 #file-count {