@noctuatech/uswds 0.0.28 → 0.0.30

package/target/lib/services/icon.service.js

@@ -0,0 +1,60 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { inject, injectable } from "@joist/di";
+import { USAConfig } from "../config/config.element.js";
+import { HttpService } from "./http.service.js";
+let IconService = (() => {
+    let _classDecorators = [injectable()];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var IconService = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            IconService = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #config = inject(USAConfig);
+        #http = inject(HttpService);
+        #iconCache = new Map();
+        async getIcon(icon) {
+            const config = this.#config();
+            const http = this.#http();
+            const cached = this.#iconCache.get(icon);
+            if (cached) {
+                return cached.then((res) => {
+                    if (!res.content.firstElementChild) {
+                        throw Error("cached value is not valid");
+                    }
+                    return res.content.firstElementChild.cloneNode(true);
+                });
+            }
+            const svg = http
+                .fetch(`${config.iconPath}${icon}.svg`)
+                .then((res) => {
+                switch (res.status) {
+                    case 200:
+                        return res.text();
+                }
+                return "";
+            })
+                .then((res) => {
+                const template = document.createElement("template");
+                template.innerHTML = res;
+                return template;
+            });
+            this.#iconCache.set(icon, svg);
+            return svg.then((res) => {
+                if (!res.content.firstElementChild) {
+                    throw Error("ICON is not valid");
+                }
+                return res.content.firstElementChild.cloneNode(true);
+            });
+        }
+    };
+    return IconService = _classThis;
+})();
+export { IconService };
+//# sourceMappingURL=icon.service.js.map

package/target/lib/services/icon.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.service.js","sourceRoot":"","sources":["../../../src/lib/services/icon.service.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;IAGnC,WAAW;4BADvB,UAAU,EAAE;;;;;;;;YACb,6KAgDC;;;YAhDY,uDAAW;;QACtB,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAC5B,KAAK,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;QAC5B,UAAU,GAA8C,IAAI,GAAG,EAAE,CAAC;QAElE,KAAK,CAAC,OAAO,CAAC,IAAY;YACxB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAE1B,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAEzC,IAAI,MAAM,EAAE,CAAC;gBACX,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;oBACzB,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC;wBACnC,MAAM,KAAK,CAAC,2BAA2B,CAAC,CAAC;oBAC3C,CAAC;oBAED,OAAO,GAAG,CAAC,OAAO,CAAC,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;gBACvD,CAAC,CAAC,CAAC;YACL,CAAC;YAED,MAAM,GAAG,GAAG,IAAI;iBACb,KAAK,CAAC,GAAG,MAAM,CAAC,QAAQ,GAAG,IAAI,MAAM,CAAC;iBACtC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;gBACZ,QAAQ,GAAG,CAAC,MAAM,EAAE,CAAC;oBACnB,KAAK,GAAG;wBACN,OAAO,GAAG,CAAC,IAAI,EAAE,CAAC;gBACtB,CAAC;gBAED,OAAO,EAAE,CAAC;YACZ,CAAC,CAAC;iBACD,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;gBACZ,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;gBACpD,QAAQ,CAAC,SAAS,GAAG,GAAG,CAAC;gBAEzB,OAAO,QAAQ,CAAC;YAClB,CAAC,CAAC,CAAC;YAEL,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;YAE/B,OAAO,GAAG,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;gBACtB,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC;oBACnC,MAAM,KAAK,CAAC,mBAAmB,CAAC,CAAC;gBACnC,CAAC;gBAED,OAAO,GAAG,CAAC,OAAO,CAAC,iBAAiB,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YACvD,CAAC,CAAC,CAAC;QACL,CAAC;;;;SA/CU,WAAW"}

package/target/lib/services/icon.service.test.d.ts

@@ -0,0 +1 @@
+export {};

package/target/lib/services/icon.service.test.js

@@ -0,0 +1,52 @@
+import { Injector } from "@joist/di";
+import { assert } from "@open-wc/testing";
+import { HttpService } from "./http.service.js";
+import { IconService } from "./icon.service.js";
+describe("IconService", () => {
+    it("should fetch icon if not in cache", async () => {
+        let callCount = 0;
+        const app = new Injector({
+            providers: [
+                [
+                    HttpService,
+                    {
+                        use: class extends HttpService {
+                            async fetch() {
+                                callCount++;
+                                return new Response("<svg></svg>");
+                            }
+                        },
+                    },
+                ],
+            ],
+        });
+        const icon = app.inject(IconService);
+        const res = await icon.getIcon("test");
+        assert.equal(res.nodeName, "svg");
+        assert.equal(callCount, 1);
+    });
+    it("should not fetch new icon if the icon is found in the cache", async () => {
+        let callCount = 0;
+        const app = new Injector({
+            providers: [
+                [
+                    HttpService,
+                    {
+                        use: class extends HttpService {
+                            async fetch() {
+                                callCount++;
+                                return new Response("<svg></svg>");
+                            }
+                        },
+                    },
+                ],
+            ],
+        });
+        const icon = app.inject(IconService);
+        await icon.getIcon("test");
+        const res = await icon.getIcon("test");
+        assert.equal(res.nodeName, "svg");
+        assert.equal(callCount, 1);
+    });
+});
+//# sourceMappingURL=icon.service.test.js.map

package/target/lib/services/icon.service.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.service.test.js","sourceRoot":"","sources":["../../../src/lib/services/icon.service.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,IAAI,SAAS,GAAG,CAAC,CAAC;QAElB,MAAM,GAAG,GAAG,IAAI,QAAQ,CAAC;YACvB,SAAS,EAAE;gBACT;oBACE,WAAW;oBACX;wBACE,GAAG,EAAE,KAAM,SAAQ,WAAW;4BAC5B,KAAK,CAAC,KAAK;gCACT,SAAS,EAAE,CAAC;gCACZ,OAAO,IAAI,QAAQ,CAAC,aAAa,CAAC,CAAC;4BACrC,CAAC;yBACF;qBACF;iBACF;aACF;SACF,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAErC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAEvC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QAClC,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC3E,IAAI,SAAS,GAAG,CAAC,CAAC;QAElB,MAAM,GAAG,GAAG,IAAI,QAAQ,CAAC;YACvB,SAAS,EAAE;gBACT;oBACE,WAAW;oBACX;wBACE,GAAG,EAAE,KAAM,SAAQ,WAAW;4BAC5B,KAAK,CAAC,KAAK;gCACT,SAAS,EAAE,CAAC;gCACZ,OAAO,IAAI,QAAQ,CAAC,aAAa,CAAC,CAAC;4BACrC,CAAC;yBACF;qBACF;iBACF;aACF;SACF,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAErC,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAE3B,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAEvC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QAClC,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/side-nav/side-nav-item/side-nav-item.element.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-side-nav-item": USASideNavItemElement;
+    }
+}
+export declare class USASideNavItemElement extends HTMLElement {
+    accessor current: boolean;
+}

package/target/lib/side-nav/side-nav-item/side-nav-item.element.js

@@ -0,0 +1,107 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, css, element, html } from "@joist/element";
+let USASideNavItemElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-side-nav-item",
+            shadowDom: [
+                css `
+      :host {
+        --usa-nav-item-padding-left: 2rem;
+
+        display: block;
+        border-top: 1px solid #e6e6e6;
+      }
+
+      .side-nav-item {
+        display: flex;
+        padding: 0.5rem 1rem;
+        text-decoration: none;
+        position: relative;
+      }
+
+      .side-nav-item:hover {
+        background-color: #f0f0f0;
+        color: #005ea2;
+      }
+
+      ::slotted(*) {
+        color: #5c5c5c;
+        text-decoration: none;
+        display: block;
+        width: 100%;
+      }
+
+      :host(:hover) ::slotted(*) {
+        color: #005ea2;
+      }
+
+      :host([current]) ::slotted(*:not(usa-side-nav-item)) {
+        color: #005ea2;
+        font-weight: 700;
+      }
+
+      :host([current]) .side-nav-item::after {
+        background-color: #005ea2;
+        border-radius: 99rem;
+        content: "";
+        display: block;
+        position: absolute;
+        bottom: 0.25rem;
+        top: 0.25rem;
+        width: 0.25rem;
+        left: 0;
+      }
+
+      :host([slot="children"]) .side-nav-item {
+        padding-left: var(--usa-nav-item-padding-left);
+      }
+
+      :host([slot="children"]) ::slotted(usa-side-nav-item) {
+        --usa-nav-item-padding-left: 3rem;
+      }
+
+      :host([slot="children"]) .side-nav-item::after {
+        display: none;
+      }
+    `,
+                html `
+      <div class="side-nav-item">
+        <slot></slot>
+      </div>
+
+      <slot name="children"></slot>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _current_decorators;
+    let _current_initializers = [];
+    let _current_extraInitializers = [];
+    var USASideNavItemElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _current_decorators = [attr({
+                    observed: false,
+                })];
+            __esDecorate(this, null, _current_decorators, { kind: "accessor", name: "current", static: false, private: false, access: { has: obj => "current" in obj, get: obj => obj.current, set: (obj, value) => { obj.current = value; } }, metadata: _metadata }, _current_initializers, _current_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USASideNavItemElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #current_accessor_storage = __runInitializers(this, _current_initializers, false);
+        get current() { return this.#current_accessor_storage; }
+        set current(value) { this.#current_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _current_extraInitializers);
+        }
+    };
+    return USASideNavItemElement = _classThis;
+})();
+export { USASideNavItemElement };
+//# sourceMappingURL=side-nav-item.element.js.map

package/target/lib/side-nav/side-nav-item/side-nav-item.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav-item.element.js","sourceRoot":"","sources":["../../../../src/lib/side-nav/side-nav-item/side-nav-item.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAgF7C,qBAAqB;4BAxEjC,OAAO,CAAC;YACP,OAAO,EAAE,mBAAmB;YAC5B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2DF;gBACD,IAAI,CAAA;;;;;;KAMH;aACF;SACF,CAAC;;;;sBACyC,WAAW;;;;qCAAnB,SAAQ,WAAW;;;;mCACnD,IAAI,CAAC;oBACJ,QAAQ,EAAE,KAAK;iBAChB,CAAC;YACF,0KAAS,OAAO,6BAAP,OAAO,yFAAS;YAJ3B,6KAKC;;;YALY,uDAAqB;;QAIhC,2EAAmB,KAAK,EAAC;QAAzB,IAAS,OAAO,6CAAS;QAAzB,IAAS,OAAO,mDAAS;;;;;;;;SAJd,qBAAqB"}

package/target/lib/side-nav/side-nav.element.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-side-nav": USASideNavElement;
+    }
+}
+export declare class USASideNavElement extends HTMLElement {
+    accessor role: string;
+}

package/target/lib/side-nav/side-nav.element.js

@@ -0,0 +1,47 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, css, element, html } from "@joist/element";
+let USASideNavElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-side-nav",
+            shadowDom: [
+                css `
+      :host {
+        display: block;
+        font-size: 1.06rem;
+        line-height: 1.3;
+        border-bottom: 1px solid #e6e6e6;
+      }
+    `,
+                html `<slot></slot>`,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _role_decorators;
+    let _role_initializers = [];
+    let _role_extraInitializers = [];
+    var USASideNavElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _role_decorators = [attr()];
+            __esDecorate(this, null, _role_decorators, { kind: "accessor", name: "role", static: false, private: false, access: { has: obj => "role" in obj, get: obj => obj.role, set: (obj, value) => { obj.role = value; } }, metadata: _metadata }, _role_initializers, _role_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USASideNavElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #role_accessor_storage = __runInitializers(this, _role_initializers, "navigation");
+        get role() { return this.#role_accessor_storage; }
+        set role(value) { this.#role_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _role_extraInitializers);
+        }
+    };
+    return USASideNavElement = _classThis;
+})();
+export { USASideNavElement };
+//# sourceMappingURL=side-nav.element.js.map

package/target/lib/side-nav/side-nav.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.element.js","sourceRoot":"","sources":["../../../src/lib/side-nav/side-nav.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAsB7C,iBAAiB;4BAd7B,OAAO,CAAC;YACP,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;KAOF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACqC,WAAW;;;;iCAAnB,SAAQ,WAAW;;;;gCAC/C,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAgB;YAF/B,6KAGC;;;YAHY,uDAAiB;;QAE5B,qEAAgB,YAAY,EAAC;QAA7B,IAAS,IAAI,0CAAgB;QAA7B,IAAS,IAAI,gDAAgB;;;;;;;;SAFlB,iBAAiB"}

package/target/lib/side-nav/side-nav.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from "@storybook/web-components";
+import type { USASideNavElement } from "./side-nav.element.js";
+declare const meta: {
+    title: string;
+    tags: string[];
+    render(args: USASideNavElement): import("lit-html").TemplateResult<1>;
+    argTypes: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<USASideNavElement>;
+export declare const Primary: Story;

package/target/lib/side-nav/side-nav.stories.js

@@ -0,0 +1,55 @@
+import { html } from "lit";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-side-nav",
+    tags: ["autodocs"],
+    render(args) {
+        return html `
+      <usa-side-nav>
+        <usa-side-nav-item current>
+          <usa-link href="#">Current Page</usa-link>
+
+          <usa-side-nav-item slot="children">
+            <usa-link href="#">Child</usa-link>
+          </usa-side-nav-item>
+
+          <usa-side-nav-item slot="children" current>
+            <usa-link href="#">Child</usa-link>
+
+            <usa-side-nav-item slot="children">
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+
+            <usa-side-nav-item slot="children" current>
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+
+            <usa-side-nav-item slot="children">
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+          </usa-side-nav-item>
+
+          <usa-side-nav-item slot="children">
+            <usa-link href="#">Child</usa-link>
+          </usa-side-nav-item>
+        </usa-side-nav-item>
+
+        <usa-side-nav-item>
+          <usa-link href="#">Parent</usa-link>
+        </usa-side-nav-item>
+
+        <usa-side-nav-item>
+          <usa-link href="#">Parent</usa-link>
+        </usa-side-nav-item>
+      </usa-side-nav>
+    `;
+    },
+    argTypes: {},
+    args: {},
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {},
+};
+//# sourceMappingURL=side-nav.stories.js.map

package/target/lib/side-nav/side-nav.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.stories.js","sourceRoot":"","sources":["../../../src/lib/side-nav/side-nav.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

package/target/lib/side-nav/side-nav.test.d.ts

@@ -0,0 +1,3 @@
+import "../link/link.element.js";
+import "./side-nav.element.js";
+import "./side-nav-item/side-nav-item.element.js";

package/target/lib/side-nav/side-nav.test.js

@@ -0,0 +1,93 @@
+import "../link/link.element.js";
+import "./side-nav.element.js";
+import "./side-nav-item/side-nav-item.element.js";
+import { assert, fixture, html } from "@open-wc/testing";
+describe("usa-side-nav", () => {
+    it("should be accessible", async () => {
+        const sideNav = await fixture(html `
+      <usa-side-nav>
+        <usa-side-nav-item current>
+          <usa-link href="#">Current Page</usa-link>
+
+          <usa-side-nav-item slot="children">
+            <usa-link href="#">Child</usa-link>
+          </usa-side-nav-item>
+
+          <usa-side-nav-item slot="children" current>
+            <usa-link href="#">Child</usa-link>
+
+            <usa-side-nav-item slot="children">
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+
+            <usa-side-nav-item slot="children" current>
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+
+            <usa-side-nav-item slot="children">
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+          </usa-side-nav-item>
+
+          <usa-side-nav-item slot="children">
+            <usa-link href="#">Child</usa-link>
+          </usa-side-nav-item>
+        </usa-side-nav-item>
+
+        <usa-side-nav-item>
+          <usa-link href="#">Parent</usa-link>
+        </usa-side-nav-item>
+
+        <usa-side-nav-item>
+          <usa-link href="#">Parent</usa-link>
+        </usa-side-nav-item>
+      </usa-side-nav>
+    `);
+        return assert.isAccessible(sideNav);
+    });
+    it("should set child padding correctly", async () => {
+        const sideNav = await fixture(html `
+      <usa-side-nav>
+        <usa-side-nav-item current>
+          <usa-link href="#">Current Page</usa-link>
+
+          <usa-side-nav-item slot="children">
+            <usa-link href="#">Child</usa-link>
+          </usa-side-nav-item>
+
+          <usa-side-nav-item slot="children" current>
+            <usa-link href="#">Child</usa-link>
+
+            <usa-side-nav-item slot="children">
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+
+            <usa-side-nav-item slot="children" current>
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+
+            <usa-side-nav-item slot="children">
+              <usa-link href="#">Grandchild</usa-link>
+            </usa-side-nav-item>
+          </usa-side-nav-item>
+
+          <usa-side-nav-item slot="children">
+            <usa-link href="#">Child</usa-link>
+          </usa-side-nav-item>
+        </usa-side-nav-item>
+
+        <usa-side-nav-item>
+          <usa-link href="#">Parent</usa-link>
+        </usa-side-nav-item>
+
+        <usa-side-nav-item>
+          <usa-link href="#">Parent</usa-link>
+        </usa-side-nav-item>
+      </usa-side-nav>
+    `);
+        const items = sideNav.querySelectorAll("usa-side-nav-item");
+        assert.equal(getComputedStyle(items[1]).getPropertyValue("--usa-nav-item-padding-left"), "2rem");
+        assert.equal(getComputedStyle(items[3]).getPropertyValue("--usa-nav-item-padding-left"), "3rem");
+    });
+});
+//# sourceMappingURL=side-nav.test.js.map

package/target/lib/side-nav/side-nav.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.test.js","sourceRoot":"","sources":["../../../src/lib/side-nav/side-nav.test.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,OAAO,GAAG,MAAM,OAAO,CAAoB,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCpD,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,OAAO,GAAG,MAAM,OAAO,CAAoB,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCpD,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,OAAO,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QAE5D,MAAM,CAAC,KAAK,CACV,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CACzC,6BAA6B,CAC9B,EACD,MAAM,CACP,CAAC;QAEF,MAAM,CAAC,KAAK,CACV,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CACzC,6BAA6B,CAC9B,EACD,MAAM,CACP,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/step-indicator/step/step.element.d.ts

@@ -0,0 +1,10 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-step": USAStepIndicatorStepElement;
+    }
+}
+export declare class USAStepIndicatorStepElement extends HTMLElement {
+    accessor state: "complete" | "current" | "";
+    accessor role: string;
+    onStateAttrChanged(): void;
+}

package/target/lib/step-indicator/step/step.element.js

@@ -0,0 +1,151 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, attrChanged, css, element, html } from "@joist/element";
+let USAStepIndicatorStepElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-step",
+            shadowDom: [
+                css `
+      :host {
+        color: #5c5c5c;
+        display: block;
+        flex: 1 1 0%;
+        position: relative;
+        counter-increment: usa-step-indicator;
+      }
+
+      :host([counter]):after {
+        content: counter(usa-step-indicator);
+        height: 2.5rem;
+        border-radius: 99rem;
+        width: 2.5rem;
+        background-color: #fff;
+        box-shadow:
+          inset 0 0 0 0.25rem #919191,
+          0 0 0 0.25rem #fff;
+        color: #5c5c5c;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: 700;
+        left: 0;
+        line-height: 0.9;
+        padding: calc((2.5rem - 2ex * 0.9) * 0.5);
+        position: absolute;
+        z-index: 100;
+        top: 0;
+        transform: translateY(-40%);
+        box-sizing: border-box;
+      }
+
+      :host([state="complete"]) {
+        color: #162e51;
+      }
+
+      :host([state="complete"])::before {
+        background-color: #162e51;
+      }
+
+      :host([state="current"]) {
+        color: #005ea2;
+        font-weight: bold;
+      }
+
+      :host([state="current"])::before {
+        background-color: #005ea2;
+      }
+
+      :host:before {
+        background-color: #919191;
+        content: "";
+        display: block;
+        height: 0.5rem;
+      }
+
+      .label {
+        display: block;
+        font-size: 1.06rem;
+        margin-top: 0.5rem;
+        padding-right: 2rem;
+        text-align: left;
+      }
+
+      :host([counter]) .label {
+        margin-top: 1.5rem;
+      }
+
+      :host([counter][state="complete"]):after {
+        background-color: #162e51;
+        box-shadow: 0 0 0 0.25rem #fff;
+        color: #fff;
+      }
+
+      :host([counter][state="current"]):after {
+        background-color: #005ea2;
+        box-shadow: 0 0 0 0.25rem #fff;
+        color: #fff;
+      }
+
+      :host([counter="small"]):after {
+        height: 1.5rem;
+        width: 1.5rem;
+        font-size: 0.93rem;
+      }
+
+      :host([counter]:last-child):before {
+        width: 0;
+      }
+    `,
+                html `
+      <div class="label">
+        <slot></slot>
+      </div>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _state_decorators;
+    let _state_initializers = [];
+    let _state_extraInitializers = [];
+    let _role_decorators;
+    let _role_initializers = [];
+    let _role_extraInitializers = [];
+    let _onStateAttrChanged_decorators;
+    var USAStepIndicatorStepElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _state_decorators = [attr()];
+            _role_decorators = [attr()];
+            _onStateAttrChanged_decorators = [attrChanged("state")];
+            __esDecorate(this, null, _state_decorators, { kind: "accessor", name: "state", static: false, private: false, access: { has: obj => "state" in obj, get: obj => obj.state, set: (obj, value) => { obj.state = value; } }, metadata: _metadata }, _state_initializers, _state_extraInitializers);
+            __esDecorate(this, null, _role_decorators, { kind: "accessor", name: "role", static: false, private: false, access: { has: obj => "role" in obj, get: obj => obj.role, set: (obj, value) => { obj.role = value; } }, metadata: _metadata }, _role_initializers, _role_extraInitializers);
+            __esDecorate(this, null, _onStateAttrChanged_decorators, { kind: "method", name: "onStateAttrChanged", static: false, private: false, access: { has: obj => "onStateAttrChanged" in obj, get: obj => obj.onStateAttrChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USAStepIndicatorStepElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #state_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _state_initializers, ""));
+        get state() { return this.#state_accessor_storage; }
+        set state(value) { this.#state_accessor_storage = value; }
+        #role_accessor_storage = (__runInitializers(this, _state_extraInitializers), __runInitializers(this, _role_initializers, "listitem"));
+        get role() { return this.#role_accessor_storage; }
+        set role(value) { this.#role_accessor_storage = value; }
+        onStateAttrChanged() {
+            if (this.state === "current") {
+                this.ariaCurrent = "step";
+            }
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _role_extraInitializers);
+        }
+    };
+    return USAStepIndicatorStepElement = _classThis;
+})();
+export { USAStepIndicatorStepElement };
+//# sourceMappingURL=step.element.js.map

package/target/lib/step-indicator/step/step.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.element.js","sourceRoot":"","sources":["../../../../src/lib/step-indicator/step/step.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IA6G1D,2BAA2B;4BArGvC,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0FF;gBACD,IAAI,CAAA;;;;KAIH;aACF;SACF,CAAC;;;;sBAC+C,WAAW;;;;;;;;;2CAAnB,SAAQ,WAAW;;;;iCACzD,IAAI,EAAE;gCAGN,IAAI,EAAE;8CAGN,WAAW,CAAC,OAAO,CAAC;YALrB,oKAAS,KAAK,6BAAL,KAAK,qFAAmC;YAGjD,iKAAS,IAAI,6BAAJ,IAAI,mFAAc;YAG3B,yMAAA,kBAAkB,6DAIjB;YAZH,6KAaC;;;YAbY,uDAA2B;;QAEtC,2BAFW,mDAA2B,+CAEQ,EAAE,GAAC;QAAjD,IAAS,KAAK,2CAAmC;QAAjD,IAAS,KAAK,iDAAmC;QAGjD,yHAAgB,UAAU,GAAC;QAA3B,IAAS,IAAI,0CAAc;QAA3B,IAAS,IAAI,gDAAc;QAG3B,kBAAkB;YAChB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC7B,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;YAC5B,CAAC;QACH,CAAC;;;;;;;;SAZU,2BAA2B"}

package/target/lib/step-indicator/step-indicator.element.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-step-indicator": USAStepIndicatorElement;
+    }
+}
+export declare class USAStepIndicatorElement extends HTMLElement {
+    accessor role: string;
+}