@watermarkinsights/ripple 5.19.0-alpha.2 → 5.19.0-alpha.3

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

@@ -894,47 +894,120 @@
 .file-wrapper .file.condensed {
   column-gap: 2.5rem;
 }
+.file-wrapper .file.extra-condensed {
+  column-gap: 0.75rem;
+}
 .file-wrapper .file .filename {
-  display: inline-block;
+  font-weight: 600;
+  display: inline;
+  overflow-wrap: break-word;
+}
+.file-wrapper .file .filename-measure {
   white-space: nowrap;
+  visibility: hidden;
+  position: absolute;
+  pointer-events: none;
 }
 .file-wrapper .file .left-group {
-  overflow: hidden;
-  min-inline-size: 5.3125rem;
+  min-inline-size: 0;
   flex-grow: 1;
 }
+.file-wrapper .file .left-group:has(.-truncated) {
+  min-inline-size: fit-content;
+}
 .file-wrapper .file .right-group {
-  display: flex;
-  justify-content: end;
+  display: grid;
+  grid-template-columns: auto min-content;
   align-items: center;
   gap: 1rem;
-  min-inline-size: 0;
-  max-inline-size: 50%;
 }
 .file-wrapper .file .right-group .file-controls {
   display: flex;
   gap: 1rem;
 }
 .file-wrapper .file .right-group .file-info {
+  min-inline-size: 4.375rem;
+  text-align: right;
+  align-items: end;
+}
+.file-wrapper .file .file-info {
   display: flex;
   flex-direction: column;
-  align-items: end;
   gap: 0.25rem;
-  text-align: right;
   max-inline-size: 28.125rem;
 }
-.file-wrapper .file .right-group .file-info .uploader-name {
-  max-inline-size: 100%;
+.file-wrapper .file .file-info * {
   overflow-wrap: break-word;
+}
+.file-wrapper .file .file-info .uploader-name {
+  max-inline-size: 100%;
   text-wrap: balance;
 }
-.file-wrapper .file .right-group .file-info:empty {
+.file-wrapper .file .file-info:empty {
+  display: none;
+}
+.file-wrapper .file #file-details summary {
+  --icon-size: 24px;
+  display: block;
+  font-weight: 600;
+  color: var(--wmcolor-interactive);
+}
+.file-wrapper .file #file-details summary::before {
+  position: absolute;
+  transform: translate(0, -15%);
+}
+.file-wrapper .file #file-details summary:focus-visible {
+  outline: 3px solid var(--wmcolor-interactive-focus);
+  outline-offset: 2px;
+}
+.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;
+}
+.file-wrapper .file #file-details[open] #summary-filename-trunc {
+  display: none;
+}
+.file-wrapper .file #file-details[open] summary:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+.file-wrapper .file #file-details[open] summary:before {
+  -webkit-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='M7,10L12,15L17,10H7Z'/%3E%3C/svg%3E%0A");
+  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='M7,10L12,15L17,10H7Z'/%3E%3C/svg%3E%0A");
+}
+.file-wrapper .file #file-details:not([open]) #summary-filename-wrap {
+  display: none;
+}
+.file-wrapper .file #file-details:not([open]) summary:before {
+  content: "";
+  display: block;
+  background-color: var(--icon-fill, currentColor);
+  width: var(--icon-size, 0.875rem);
+  height: var(--icon-size, 0.875rem);
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+}
+.file-wrapper .file #file-details:not([open]) summary:before {
+  -webkit-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='M10,17L15,12L10,7V17Z'/%3E%3C/svg%3E%0A");
+  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='M10,17L15,12L10,7V17Z'/%3E%3C/svg%3E%0A");
+}
+.file-wrapper .file #summary-filename-wrap {
+  display: inline-block;
+  overflow-wrap: anywhere;
+}
+.file-wrapper .file:has(#file-details) .name-wrapper {
   display: none;
 }
 .file-wrapper .file.--error {
   border: 1px solid var(--wmcolor-file-border-error);
   background-color: var(--wmcolor-file-background-error);
-  block-size: 3.75rem;
+  min-block-size: 3.75rem;
 }
 .file-wrapper .file.--error .right-group {
   flex-shrink: 0;

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

@@ -17,8 +17,21 @@ export class File {
         this.showInfo = "last-updated";
     }
     get isCondensed() {
+        // Breakpoint at which file actions are moved into an action menu
         return this.el.clientWidth < 500;
     }
+    get isExtraCondensed() {
+        // Breakpoint at which file info is moved into a details element
+        return this.el.clientWidth < 414;
+    }
+    get needsTruncation() {
+        const boundsEl = this.el.shadowRoot.querySelector(".left-group");
+        const measureEl = this.el.shadowRoot.querySelector(".filename-measure");
+        if (boundsEl && measureEl && boundsEl.clientWidth < measureEl.clientWidth) {
+            return true;
+        }
+        return false;
+    }
     get isUploading() {
         return this.progress !== undefined && this.progress < 100;
     }
@@ -107,22 +120,20 @@ export class File {
         const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
         resizeObserver.observe(this.el);
     }
-    setFilename() {
-        // calc is not accurate and last letter may be cropped if we don't wait
-        requestAnimationFrame(() => {
-            const fileNameEl = this.el.shadowRoot.querySelector(".filename");
-            const leftBoundary = this.el.shadowRoot.querySelector(".left-group").getBoundingClientRect().left;
-            const rightGroup = this.el.shadowRoot.querySelector(".right-group");
-            const file = this.el.shadowRoot.querySelector(".file");
-            const colGap = file ? getComputedStyle(file).getPropertyValue("column-gap") : "0";
-            const rightBoundary = rightGroup
-                ? rightGroup.getBoundingClientRect().left - parseFloat(colGap)
-                : this.el.shadowRoot.querySelector(".file-wrapper").getBoundingClientRect().right - 20;
-            fileNameEl.textContent = truncateText(fileNameEl, this.fullFilename, rightBoundary - leftBoundary, 7);
-        });
+    truncateFilename() {
+        let summaryFilenameEl = this.el.shadowRoot.querySelector("#summary-filename-trunc");
+        if (summaryFilenameEl) {
+            summaryFilenameEl.textContent = truncateText(summaryFilenameEl, this.fullFilename, summaryFilenameEl.parentElement.clientWidth - 32, 7);
+            if (summaryFilenameEl.textContent === this.fullFilename) {
+                summaryFilenameEl.classList.remove("-truncated");
+            }
+            else {
+                summaryFilenameEl.classList.add("-truncated");
+            }
+        }
     }
     componentDidRender() {
-        this.setFilename();
+        this.truncateFilename();
     }
     previewFile() {
         this.wmFilePreview.emit();
@@ -140,10 +151,11 @@ export class File {
         }
     }
     renderFileName() {
-        return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "sr-only" }, this.fullFilename), h("span", { "aria-hidden": "true", class: "filename", onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev), onMouseLeave: () => hideTooltip() }), this.isUploading && h("span", { class: "sr-only" }, "uploading"))));
+        const showDetailsToggle = this.isExtraCondensed && (this.needsTruncation || (this.showInfo !== "none" && !this.errorMessage));
+        return (h("div", { class: "left-group" }, h("div", { class: "name-wrapper" }, h("span", { class: "sr-only" }, this.fullFilename), h("span", { "aria-hidden": "true", class: "filename" }, this.fullFilename), this.isUploading && h("span", { class: "sr-only" }, "uploading")), showDetailsToggle && this.renderDetailsToggle()));
     }
     renderFileInfo() {
-        return (h("div", { class: "file-info" }, (this.showInfo === "uploaded-by" || this.showInfo === "all") && (h("div", { class: "details uploader-name" }, this.uploadedBy)), (this.showInfo === "last-updated" || this.showInfo === "all") && h("div", { class: "details" }, this.lastUpdated), (this.showInfo === "size" || this.showInfo === "all") && h("div", { class: "details" }, this.size)));
+        return (h("div", { class: "file-info" }, (this.showInfo === "uploaded-by" || this.showInfo === "all") && (h("div", { class: "uploader-name" }, this.uploadedBy)), (this.showInfo === "last-updated" || this.showInfo === "all") && h("div", null, this.lastUpdated), (this.showInfo === "size" || this.showInfo === "all") && h("div", null, this.size)));
     }
     renderActionMenu() {
         const previewItem = (h("wm-menuitem", { icon: "#show", onClick: () => this.previewFile() }, this.previewActionMessage));
@@ -167,11 +179,15 @@ export class File {
         const showActionMenu = this.isCondensed && !hasSingleFileAction;
         return showActionMenu ? this.renderActionMenu() : this.renderFileActionButtons();
     }
+    renderDetailsToggle() {
+        return (h("details", { id: "file-details" }, h("summary", null, h("div", { class: "filename-measure", "aria-hidden": "true" }, this.fullFilename), h("span", { id: "summary-filename-trunc", onMouseEnter: (ev) => this.handleFilenameMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.fullFilename), h("span", { id: "summary-filename-wrap" }, this.fullFilename)), !this.errorMessage && this.renderFileInfo()));
+    }
     renderFile() {
-        return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: "right-group" }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("div", { class: "right-group" }, h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
+        const showRightGroup = !this.errorMessage && (this.fileActions !== "" || this.showInfo !== "none");
+        return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""} ${this.isExtraCondensed ? "extra-condensed" : ""}` }, this.renderFileName(), showRightGroup && (h("div", { class: "right-group" }, !this.isExtraCondensed && this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("div", { class: "right-group" }, h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { key: '88c61b45d6f48a00abeaaddb9a03e870f597df0c', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: '06c3ffd69504051197990d33f05c672d5828847f', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }

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 {
   --wmcolor-actionmenu-item-background-hover: var(--wmcolor-option-background-hover);
   --wmcolor-actionmenu-item-background-focus: var(--wmcolor-option-background-focus);

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-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-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;

package/dist/esm/{app-globals-3bb52295.js → app-globals-2a7b9752.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.19.0-alpha.2";
+const version = "5.19.0-alpha.3";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-3bb52295.js';
+import { g as globalScripts } from './app-globals-2a7b9752.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/ripple.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-3bb52295.js';
+import { g as globalScripts } from './app-globals-2a7b9752.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com