@stackoverflow/stacks 2.0.6 → 2.0.8

package/lib/base/internal.less

@@ -215,6 +215,6 @@
     #bullet-arrow(@col) {
         @image: '<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 7 10" xmlns="http://www.w3.org/2000/svg"><path d="m0.72153 0.68446 4.1336 4.3077-4.1336 4.3077" fill="none" stroke="@{col}" stroke-width="2"/></svg>';
         @encoded-image: escape(@image);
-        background-image: url("data:image/svg+xml,@{encoded-image}");
+        background-image: url("data:image/svg+xml;,@{encoded-image}");
     }
 }

package/lib/components/badge/badge.less

@@ -125,14 +125,14 @@
         --_ba-g:  calc(var(--su-static4) - var(--su-static1)); // 3px
         // :before icon
         --_ba-before-h: calc(var(--su-static16) - var(--su-static2)); // 14px
-        --_ba-before-icon: url("data:image/svg+xml,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
+        --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
         --_ba-before-mt:  calc(var(--su-static1) * -1); // -1px
         --_ba-before-w: var(--su-static12);
 
         // Sizes
         &.s-badge__xs {
             --_ba-before-h: calc(var(--su-static8) + var(--su-static1)); // 9px
-            --_ba-before-icon: url("data:image/svg+xml,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
+            --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
             --_ba-before-mt: 0;
             --_ba-before-w: calc(var(--su-static8) - var(--su-static1)); // 7px
         }
@@ -140,7 +140,7 @@
         &.s-badge__sm {
             --_ba-g: var(--su-static2);
             --_ba-before-h: calc(var(--su-static12) - var(--su-static1)); // 11px
-            --_ba-before-icon: url("data:image/svg+xml,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E");
+            --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E");
             --_ba-before-mt: 0;
             --_ba-before-w: calc(var(--su-static8) + var(--su-static1)); // 9px
         }

package/lib/components/banner/banner.less

@@ -2,22 +2,23 @@
 // TODO deprecate .s-banner (by turning it into a modifier on .s-notice)
 // This would reduce the amount of CSS we ship to the client and simplify our codebase
 .s-banner {
-    --_no-x-offset: 0;
+    --_no-ty-offset: 0;
+    --_no-ty: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
     .construct-notice-component(s-banner);
 
     &[aria-hidden="true"] { // If you want to hide and reveal the banner
-        --_no-x-offset: -1;
+        --_no-ty-offset: -1;
         opacity: 0;
         visibility: hidden;
     }
 
     &[aria-hidden="false"] {
-        --_no-x-offset: 1;
+        --_no-ty-offset: 1;
         opacity: 1;
         visibility: visible;
 
         &.is-pinned { //  If you want to put the banner above the topbar
-            --_no-x-offset: 0;
+            --_no-ty-offset: 0;
             z-index: calc(var(--zi-navigation-fixed) + 1);
         }
     }
@@ -37,8 +38,7 @@
     inset: 0 0 auto 0;
     padding: var(--su12);
     position: fixed;
-    -webkit-transform: translate3d(0, calc(var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))) * var(--_no-x-offset)), 0);
-    transform: translate3d(0, calc(var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))) * var(--_no-x-offset)), 0);
+    transform: translate3d(0, calc(var(--_no-ty) * var(--_no-ty-offset)), 0);
     width: 100%;
     z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
 }

package/lib/components/checkbox_radio/checkbox_radio.less

@@ -54,10 +54,10 @@
     // CONTEXTUAL STYLES
     .dark-mode({
         &:checked {
-            --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
+            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
         }
         &:indeterminate {
-            --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
+            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
         }
     });
 
@@ -80,11 +80,11 @@
     }
 
     &:checked {
-        --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
+        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
     }
 
     &:indeterminate {
-        --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
+        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
     }
 
     // INTERACTION

package/lib/components/code-block/code-block.a11y.test.ts

@@ -15,14 +15,13 @@ describe("code block", () => {
                 ...defaultOptions,
                 includeNullModifier: false,
             },
+            attributes: {
+                tabindex: "0",
+            },
             // TODO revisit these skipped test ids
             skippedTestids: [
-                "s-code-block-language-html-light",
-                "s-code-block-language-html-highcontrast-light",
-                "s-code-block-language-html-highcontrast-dark",
-                "s-code-block-language-html-dark",
-                "s-code-block-language-css-dark",
-                "s-code-block-language-javascript-dark",
+                /s-code-block-language-(html|css|javascript)-dark/,
+                /s-code-block-language-html-highcontrast-(light|dark)/,
                 "s-code-block-language-javascript-highcontrast-light",
             ],
         });

package/lib/components/modal/modal.test.ts

@@ -0,0 +1,155 @@
+import { html, fixture, expect } from "@open-wc/testing";
+import { screen, waitFor } from "@testing-library/dom";
+import userEvent from "@testing-library/user-event";
+import "../../index";
+
+const user = userEvent.setup();
+
+const createModal = ({
+    hidden = true,
+    initialFocusEl,
+}: { hidden?: boolean; initialFocusEl?: ReturnType<typeof html> } = {}) => html`
+    <div data-controller="s-modal">
+        <button
+            class="s-btn"
+            data-action="s-modal#show"
+            data-testid="trigger">
+            Show Modal
+        </button>
+
+        <aside
+            class="s-modal"
+            id="modal-base"
+            tabindex="-1"
+            role="dialog"
+            aria-labelledby="modal-base-title"
+            aria-describedby="modal-base-description"
+            aria-hidden="${hidden}"
+            data-s-modal-target="modal"
+            data-testid="modal">
+            <div class="s-modal--dialog" role="document">
+                <h1 class="s-modal--header" id="modal-base-title">Title</h1>
+
+                <p class="s-modal--body">
+                    <span id="modal-base-description">Description</span>
+                    <form>
+                        <input type="text" data-testid="first-focusable-element" />
+                        ${initialFocusEl}
+                    </form>
+                </p>
+
+                <div class="d-flex gx8 s-modal--footer">
+                    <button class="flex--item s-btn s-btn__primary" type="button">Save changes</button>
+                    <button class="flex--item s-btn" type="button" data-action="s-modal#hide">Cancel</button>
+                </div>
+
+                <button
+                    class="s-btn s-btn__muted s-modal--close"
+                    type="button"
+                    aria-label="Close"
+                    data-action="s-modal#hide"
+                    data-testid="close-btn">
+                    Close
+                </button>
+            </div>
+        </aside>
+    </div>
+`;
+
+describe("modal", () => {
+    it("should make the modal visible when toggle button is clicked", async () => {
+        await fixture(createModal());
+
+        const modal = await screen.findByTestId("modal");
+        const trigger = await screen.findByTestId("trigger");
+
+        expect(modal).not.to.be.visible;
+
+        await user.click(trigger);
+
+        expect(modal).to.be.visible;
+    });
+
+    it("should hide the modal when the close button is clicked", async () => {
+        await fixture(createModal({ hidden: false }));
+
+        const modal = await screen.findByTestId("modal");
+        const closeBtn = await screen.findByTestId("close-btn");
+
+        expect(modal).to.be.visible;
+
+        await user.click(closeBtn);
+
+        await waitFor(() => expect(modal).not.to.be.visible);
+    });
+
+    it('should focus on the first element with `data-s-modal-target"initialFocus"` when modal is shown', async () => {
+        await fixture(
+            createModal({
+                initialFocusEl: html`<input
+                    type="text"
+                    data-testid="initialFocus"
+                    data-s-modal-target="initialFocus"
+                />`,
+            })
+        );
+
+        const modal = await screen.findByTestId("modal");
+        const trigger = await screen.findByTestId("trigger");
+        const initialFocusEl = await screen.findByTestId("initialFocus");
+
+        expect(modal).not.to.be.visible;
+
+        await user.click(trigger);
+        expect(modal).to.be.visible;
+
+        await waitFor(() => expect(initialFocusEl).to.have.focus);
+    });
+
+    it("should focus on the first focusable element when modal is shown and no initialFocus is specified", async () => {
+        await fixture(createModal());
+
+        const modal = await screen.findByTestId("modal");
+        const trigger = await screen.findByTestId("trigger");
+        const focusableEl = await screen.findByTestId(
+            "first-focusable-element"
+        );
+
+        expect(modal).not.to.be.visible;
+        expect(focusableEl).not.to.have.focus;
+
+        await user.click(trigger);
+        expect(modal).to.be.visible;
+
+        await waitFor(() => expect(focusableEl).to.have.focus);
+    });
+
+    it("should not change set focus when an element within the modal is already focused", async () => {
+        await fixture(createModal());
+
+        const modal = await screen.findByTestId("modal");
+        const trigger = await screen.findByTestId("trigger");
+        const firstFocusableEl = await screen.findByTestId(
+            "first-focusable-element"
+        );
+        const closeButton = await screen.findByTestId("close-btn");
+
+        expect(modal).not.to.be.visible;
+        expect(firstFocusableEl).not.to.have.focus;
+
+        await user.click(trigger);
+        expect(modal).to.be.visible;
+
+        // manually focus on an element within the modal
+        closeButton.focus();
+
+        // wait for s-modal:shown css transition to complete
+        await new Promise((resolve) =>
+            modal.addEventListener("s-modal:shown", resolve)
+        );
+
+        // check that focus stayed on the manually focused element and
+        // has not changed to the first focusable element
+        expect(closeButton).to.have.focus;
+    });
+});

package/lib/components/modal/modal.ts

@@ -3,8 +3,8 @@ import * as Stacks from "../../stacks";
 export class ModalController extends Stacks.StacksController {
     static targets = ["modal", "initialFocus"];
 
-    private modalTarget!: HTMLElement;
-    private initialFocusTargets!: HTMLElement[];
+    declare readonly modalTarget: HTMLElement;
+    declare readonly initialFocusTargets: HTMLElement[];
 
     private _boundClickFn!: (event: MouseEvent) => void;
     private _boundKeypressFn!: (event: KeyboardEvent) => void;
@@ -228,7 +228,11 @@ export class ModalController extends Stacks.StacksController {
                 const initialFocus =
                     this.firstVisible(this.initialFocusTargets) ??
                     this.firstVisible(this.getAllTabbables());
-                initialFocus?.focus();
+
+                // Only set focus if focus is not already set on an element within the modal
+                if (!this.modalTarget.contains(document.activeElement)) {
+                    initialFocus?.focus();
+                }
             },
             { once: true }
         );

package/lib/components/prose/prose.less

@@ -382,7 +382,7 @@
             top: var(--_pr-spoiler-after-t);
             transition: @pr-spoiler-transition;
 
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E");
+            background-image: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E");
             background-position: center right;
             background-repeat: no-repeat;
             color: var(--black-400);

package/lib/components/table/table.ts

@@ -12,8 +12,8 @@ export enum SortOrder {
 }
 
 export class TableController extends Stacks.StacksController {
-    declare columnTarget: HTMLTableCellElement;
-    declare columnTargets: HTMLTableCellElement[];
+    declare readonly columnTarget: HTMLTableCellElement;
+    declare readonly columnTargets: HTMLTableCellElement[];
 
     static targets = ["column"];
 

package/lib/components/tag/tag.less

@@ -100,7 +100,7 @@
 
     &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
     &&__ignored {
-        --_ta-before-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
+        --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
     }
 
     // moderator overrides other muted and required, required overrides muted
@@ -151,7 +151,7 @@
     }
     &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {
-        --_ta-before-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
+        --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
     }
 
     // CHILD ELEMENTS

package/lib/components/toggle-switch/toggle-switch.less

@@ -2,14 +2,14 @@
     @ts-bg-image-fill: .set-white()[default];
     @ts-bg-image-fill-dark: .set-white-dark()[default];
     --_ts-bg: var(--black-350);
-    --_ts-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill}'/%3e%3c/svg%3e");
+    --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill}'/%3e%3c/svg%3e");
     --_ts-bg-ps: left center;
     --_ts-bs-color: transparent;
     --_ts-multiple-bg: unset;
     --_ts-multiple-fc: var(--black-400);
 
     .dark-mode({
-        --_ts-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill-dark}'/%3e%3c/svg%3e");
+        --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill-dark}'/%3e%3c/svg%3e");
     });
 
     fieldset[disabled] &,

package/lib/components/uploader/uploader.less

@@ -1,6 +1,6 @@
 .s-uploader {
     // COMPONENT-SPECIFIC CONSTANTS
-    --_up-bg-b-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); // Keeping this a custom property to save a few bytes
+    --_up-bg-b-image: url("data:image/svg+xml;,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); // Keeping this a custom property to save a few bytes
     // COMPONENT-SPECIFIC CUSTOM PROPERTIES
     --_up-bg: var(--black-100);
     --_up-bg-focus: var(--black-150);
@@ -161,7 +161,7 @@
                     object-fit: cover;
                 }
                 &:not(img) {
-                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
+                    background-image: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='%23535A60' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M3 3a2 2 0 012-2h6l4 4v10a2 2 0 01-2 2H5a2 2 0 01-2-2V3zm7-1.5V6h4.5L10 1.5z'%3E%3C/path%3E%3C/svg%3E");
                     background-position: center;
                     background-repeat: no-repeat;
                 }

package/lib/components/uploader/uploader.ts

@@ -8,9 +8,10 @@ interface FilePreview {
 
 export class UploaderController extends Stacks.StacksController {
     static targets = ["input", "previews", "uploader"];
-    private inputTarget!: HTMLInputElement;
-    private previewsTarget!: HTMLElement;
-    private uploaderTarget!: HTMLElement;
+
+    declare readonly inputTarget: HTMLInputElement;
+    declare readonly previewsTarget: HTMLElement;
+    declare readonly uploaderTarget: HTMLElement;
 
     private boundDragEnter!: () => void;
     private boundDragLeave!: () => void;