@noctuatech/uswds 0.0.4 → 0.0.6

package/target/lib/radio/radio.element.js

@@ -1,20 +1,16 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
-import { attr, css, element, html, listen, query } from "@joist/element";
+import { attr, css, element, html, listen } from "@joist/element";
 let USARadioElement = (() => {
-    var _USARadioElement_radios, _USARadioElement_internals, _USARadioElement_value_accessor_storage, _USARadioElement_name_accessor_storage, _USARadioElement_tiled_accessor_storage;
+    var _USARadioElement_internals, _USARadioElement_value_accessor_storage, _USARadioElement_name_accessor_storage, _USARadioElement_tiled_accessor_storage;
     let _classDecorators = [element({
             tagName: "usa-radio",
             shadowDom: [
                 css `
       :host {
-        display: block;
-        max-width: 30rem;
-      }
-
-      .radios {
         display: flex;
         flex-direction: column;
         gap: 1rem;
+        max-width: 30rem;
       }
 
       label {
@@ -53,7 +49,7 @@ let USARadioElement = (() => {
         outline-offset: 0.25rem;
       }
 
-      :host([tiled]) .radios {
+      :host([tiled]) {
         gap: 0.5rem;
       }
 
@@ -69,12 +65,16 @@ let USARadioElement = (() => {
         background-color: rgba(0, 94, 162, 0.1);
         border-color: #005ea2;
       }
-    `,
-                html `
-      <slot></slot>
 
-      <div class="radios"></div>
+      slot {
+        display: flex;
+      }
+
+      slot#main {
+        margin-bottom: 0.5rem;
+      }
     `,
+                html `<slot id="main"></slot>`,
             ],
         })];
     let _classDescriptor;
@@ -92,14 +92,14 @@ let USARadioElement = (() => {
     let _tiled_initializers = [];
     let _tiled_extraInitializers = [];
     let _onChange_decorators;
+    let _onOptionAdded_decorators;
     var USARadioElement = _classThis = class extends _classSuper {
         constructor() {
             super(...arguments);
             _USARadioElement_value_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, "")));
             _USARadioElement_name_accessor_storage.set(this, (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _name_initializers, "")));
             _USARadioElement_tiled_accessor_storage.set(this, (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _tiled_initializers, false)));
-            _USARadioElement_radios.set(this, (__runInitializers(this, _tiled_extraInitializers), query(".radios")));
-            _USARadioElement_internals.set(this, this.attachInternals());
+            _USARadioElement_internals.set(this, (__runInitializers(this, _tiled_extraInitializers), this.attachInternals()));
         }
         get value() { return __classPrivateFieldGet(this, _USARadioElement_value_accessor_storage, "f"); }
         set value(value) { __classPrivateFieldSet(this, _USARadioElement_value_accessor_storage, value, "f"); }
@@ -107,6 +107,9 @@ let USARadioElement = (() => {
         set name(value) { __classPrivateFieldSet(this, _USARadioElement_name_accessor_storage, value, "f"); }
         get tiled() { return __classPrivateFieldGet(this, _USARadioElement_tiled_accessor_storage, "f"); }
         set tiled(value) { __classPrivateFieldSet(this, _USARadioElement_tiled_accessor_storage, value, "f"); }
+        get shadow() {
+            return this.shadowRoot;
+        }
         onChange(e) {
             if (e.target instanceof HTMLInputElement) {
                 if (e.target.checked) {
@@ -121,35 +124,19 @@ let USARadioElement = (() => {
             }
         }
         attributeChangedCallback() {
-            const radios = __classPrivateFieldGet(this, _USARadioElement_radios, "f").call(this);
-            for (let radio of radios.querySelectorAll("input")) {
+            for (let radio of this.shadow.querySelectorAll("usa-radio-option")) {
                 radio.checked = radio.value === this.value;
                 radio.name = this.name;
             }
         }
-        onOptionAdded(el) {
-            const radios = __classPrivateFieldGet(this, _USARadioElement_radios, "f").call(this);
-            const radioLabel = document.createElement("label");
-            radioLabel.id = el.value;
-            const input = document.createElement("input");
-            input.type = "radio";
-            input.name = this.name;
-            input.value = el.value;
-            input.checked = this.value === el.value;
-            const slot = document.createElement("slot");
-            slot.name = el.value;
-            radioLabel.append(input, slot);
-            radios.append(radioLabel);
-        }
-        onOptionRemoved(el) {
-            const radios = __classPrivateFieldGet(this, _USARadioElement_radios, "f").call(this);
-            const option = radios.querySelector(`#${el.value}`);
-            if (option) {
-                option.remove();
-            }
+        onOptionAdded(e) {
+            e.stopPropagation();
+            const target = e.target;
+            target.checked = target.value === this.value;
+            target.name = this.name;
+            this.shadow.append(target.radio);
         }
     };
-    _USARadioElement_radios = new WeakMap();
     _USARadioElement_internals = new WeakMap();
     _USARadioElement_value_accessor_storage = new WeakMap();
     _USARadioElement_name_accessor_storage = new WeakMap();
@@ -159,12 +146,16 @@ let USARadioElement = (() => {
         const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
         _value_decorators = [attr()];
         _name_decorators = [attr()];
-        _tiled_decorators = [attr()];
+        _tiled_decorators = [attr({
+                observed: false,
+            })];
         _onChange_decorators = [listen("change")];
+        _onOptionAdded_decorators = [listen("usa::radio::option::added", (el) => el)];
         __esDecorate(_classThis, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
         __esDecorate(_classThis, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
         __esDecorate(_classThis, null, _tiled_decorators, { kind: "accessor", name: "tiled", static: false, private: false, access: { has: obj => "tiled" in obj, get: obj => obj.tiled, set: (obj, value) => { obj.tiled = value; } }, metadata: _metadata }, _tiled_initializers, _tiled_extraInitializers);
         __esDecorate(_classThis, null, _onChange_decorators, { kind: "method", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+        __esDecorate(_classThis, null, _onOptionAdded_decorators, { kind: "method", name: "onOptionAdded", static: false, private: false, access: { has: obj => "onOptionAdded" in obj, get: obj => obj.onOptionAdded }, metadata: _metadata }, null, _instanceExtraInitializers);
         __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
         USARadioElement = _classThis = _classDescriptor.value;
         if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });

package/target/lib/radio/radio.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.element.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"radio.element.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;IAqFrD,eAAe;;4BA3E3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoEF;gBACD,IAAI,CAAA,yBAAyB;aAC9B;SACF,CAAC;;;;sBACmC,WAAW;;;;;;;;;;;;;4CAAnB,SAAQ,WAAW;;;YAIrC,mDAJE,mDAAe,+CAIT,EAAE,IAAC;YAGX,iJAAO,EAAE,IAAC;YAKV,kJAAQ,KAAK,IAAC;YAMvB,yFAAa,IAAI,CAAC,eAAe,EAAE,GAAC;QAoCtC,CAAC;QAlDC,IAAS,KAAK,yFAAM;QAApB,IAAS,KAAK,8FAAM;QAGpB,IAAS,IAAI,wFAAM;QAAnB,IAAS,IAAI,6FAAM;QAKnB,IAAS,KAAK,yFAAS;QAAvB,IAAS,KAAK,8FAAS;QAEvB,IAAI,MAAM;YACR,OAAO,IAAI,CAAC,UAAW,CAAC;QAC1B,CAAC;QAKD,QAAQ,CAAC,CAAQ;YACf,IAAI,CAAC,CAAC,MAAM,YAAY,gBAAgB,EAAE,CAAC;gBACzC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;oBACrB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;oBAC5B,uBAAA,IAAI,kCAAW,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC/C,CAAC;YACH,CAAC;QACH,CAAC;QAED,iBAAiB;YACf,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,uBAAA,IAAI,kCAAW,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC;QAED,wBAAwB;YACtB,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;gBACnE,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;gBAC3C,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACzB,CAAC;QACH,CAAC;QAGD,aAAa,CAAC,CAAQ;YACpB,CAAC,CAAC,eAAe,EAAE,CAAC;YAEpB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA+B,CAAC;YAEjD,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;YAC7C,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAExB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;;;;;;;;;6BAlDA,IAAI,EAAE;4BAGN,IAAI,EAAE;6BAGN,IAAI,CAAC;gBACJ,QAAQ,EAAE,KAAK;aAChB,CAAC;gCASD,MAAM,CAAC,QAAQ,CAAC;qCAuBhB,MAAM,CAAC,2BAA2B,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC;QAvChD,0KAAS,KAAK,6BAAL,KAAK,qFAAM;QAGpB,uKAAS,IAAI,6BAAJ,IAAI,mFAAM;QAKnB,0KAAS,KAAK,6BAAL,KAAK,qFAAS;QASvB,iLAAA,QAAQ,6DAOP;QAgBD,gMAAA,aAAa,6DASZ;QArDH,6KAsDC;;;;IArDQ,yBAAc,GAAG,IAAI,AAAP,CAAQ;;QADlB,uDAAe;;;;SAAf,eAAe"}

package/target/lib/radio/radio.stories.d.ts

@@ -3,9 +3,14 @@ import type { USARadioElement } from "./radio.element.js";
 declare const meta: {
     title: string;
     tags: string[];
-    render(args: USARadioElement): import("lit-html").TemplateResult<1>;
+    render(args: USARadioElement & {
+        description: string;
+    }): import("lit-html").TemplateResult<1>;
     argTypes: {};
-    args: {};
+    args: {
+        tiled: true;
+        description: string;
+    };
 };
 export default meta;
 type Story = StoryObj<USARadioElement>;

package/target/lib/radio/radio.stories.js

@@ -1,22 +1,25 @@
 import { html } from "lit";
+import { when } from "lit/directives/when.js";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
     title: "usa-radio",
     tags: ["autodocs"],
     render(args) {
         return html `
-      <usa-radio name="historical-figures" value="frederick-douglass" tiled>
+      <usa-radio
+        name="historical-figures"
+        value="frederick-douglass"
+        ?tiled=${args.tiled}
+      >
+        <legend>Select one historical figure</legend>
+
         <usa-radio-option value="sojourner-truth">
           Sojourner Truth
         </usa-radio-option>
 
         <usa-radio-option value="frederick-douglass">
           Frederick Douglass
-
-          <usa-description>
-            This is optional text that can be used to describe the label in more
-            detail.
-          </usa-description>
+          ${when(args.description, () => html `<usa-description>${args.description}</usa-description>`)}
         </usa-radio-option>
 
         <usa-radio-option value="booker-t-washington">
@@ -30,7 +33,10 @@ const meta = {
     `;
     },
     argTypes: {},
-    args: {},
+    args: {
+        tiled: true,
+        description: "This is optional text that can be used to describe the label in more detail.",
+    },
 };
 export default meta;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args

package/target/lib/radio/radio.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.stories.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;KAuBV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"file":"radio.stories.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK;;;;;;;;;;YAUf,IAAI,CACJ,IAAI,CAAC,WAAW,EAChB,GAAG,EAAE,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,WAAW,oBAAoB,CACnE;;;;;;;;;;;KAWN,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI;QACX,WAAW,EACT,8EAA8E;KACjF;CACwD,CAAC;AAE5D,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

package/target/lib/select/select-option.element.d.ts

@@ -4,8 +4,9 @@ declare global {
     }
 }
 export declare class USASelecOptionElement extends HTMLElement {
-    #private;
     accessor value: string;
+    readonly option: HTMLOptionElement;
+    attributeChangedCallback(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/target/lib/select/select-option.element.js

@@ -1,8 +1,7 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
 import { attr, css, element } from "@joist/element";
-import { USASelectElement } from "./select.element.js";
 let USASelecOptionElement = (() => {
-    var _USASelecOptionElement_parent, _USASelecOptionElement_value_accessor_storage;
+    var _USASelecOptionElement_value_accessor_storage;
     let _classDecorators = [element({
             tagName: "usa-select-option",
             shadowDom: [
@@ -24,23 +23,21 @@ let USASelecOptionElement = (() => {
         constructor() {
             super(...arguments);
             _USASelecOptionElement_value_accessor_storage.set(this, __runInitializers(this, _value_initializers, ""));
-            _USASelecOptionElement_parent.set(this, (__runInitializers(this, _value_extraInitializers), null));
+            this.option = (__runInitializers(this, _value_extraInitializers), document.createElement("option"));
         }
         get value() { return __classPrivateFieldGet(this, _USASelecOptionElement_value_accessor_storage, "f"); }
         set value(value) { __classPrivateFieldSet(this, _USASelecOptionElement_value_accessor_storage, value, "f"); }
+        attributeChangedCallback() {
+            this.option.textContent = this.textContent;
+            this.option.value = this.value;
+        }
         connectedCallback() {
-            if (this.parentElement instanceof USASelectElement) {
-                __classPrivateFieldSet(this, _USASelecOptionElement_parent, this.parentElement, "f");
-                this.parentElement.onOptionAdded(this);
-            }
+            this.dispatchEvent(new Event("usa::select::option::added", { bubbles: true }));
         }
         disconnectedCallback() {
-            if (__classPrivateFieldGet(this, _USASelecOptionElement_parent, "f")) {
-                __classPrivateFieldGet(this, _USASelecOptionElement_parent, "f").onOptionRemoved(this);
-            }
+            this.option.remove();
         }
     };
-    _USASelecOptionElement_parent = new WeakMap();
     _USASelecOptionElement_value_accessor_storage = new WeakMap();
     __setFunctionName(_classThis, "USASelecOptionElement");
     (() => {

package/target/lib/select/select-option.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-option.element.js","sourceRoot":"","sources":["../../../src/lib/select/select-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;IAkB1C,qBAAqB;;4BAVjC,OAAO,CAAC;YACP,OAAO,EAAE,mBAAmB;YAC5B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;KAIF;aACF;SACF,CAAC;;;;sBACyC,WAAW;;;;kDAAnB,SAAQ,WAAW;;;YAE3C,qGAAQ,EAAE,GAAC;YAEpB,4FAAmC,IAAI,GAAC;QAe1C,CAAC;QAjBC,IAAS,KAAK,+FAAM;QAApB,IAAS,KAAK,oGAAM;QAIpB,iBAAiB;YACf,IAAI,IAAI,CAAC,aAAa,YAAY,gBAAgB,EAAE,CAAC;gBACnD,uBAAA,IAAI,iCAAW,IAAI,CAAC,aAAa,MAAA,CAAC;gBAElC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;QAED,oBAAoB;YAClB,IAAI,uBAAA,IAAI,qCAAQ,EAAE,CAAC;gBACjB,uBAAA,IAAI,qCAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;;;;;;6BAjBA,IAAI,EAAE;QACP,0KAAS,KAAK,6BAAL,KAAK,qFAAM;QAFtB,6KAmBC;;;QAnBY,uDAAqB;;;;SAArB,qBAAqB"}
+{"version":3,"file":"select-option.element.js","sourceRoot":"","sources":["../../../src/lib/select/select-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;IAkBvC,qBAAqB;;4BAVjC,OAAO,CAAC;YACP,OAAO,EAAE,mBAAmB;YAC5B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;KAIF;aACF;SACF,CAAC;;;;sBACyC,WAAW;;;;kDAAnB,SAAQ,WAAW;;;YAE3C,qGAAQ,EAAE,GAAC;YAEX,WAAM,uDAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAC;QAgBrD,CAAC;QAlBC,IAAS,KAAK,+FAAM;QAApB,IAAS,KAAK,oGAAM;QAIpB,wBAAwB;YACtB,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YAC3C,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,CAAC;QAED,iBAAiB;YACf,IAAI,CAAC,aAAa,CAChB,IAAI,KAAK,CAAC,4BAA4B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAC3D,CAAC;QACJ,CAAC;QAED,oBAAoB;YAClB,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACvB,CAAC;;;;;;6BAlBA,IAAI,EAAE;QACP,0KAAS,KAAK,6BAAL,KAAK,qFAAM;QAFtB,6KAoBC;;;QApBY,uDAAqB;;;;SAArB,qBAAqB"}

package/target/lib/select/select.element.d.ts

@@ -1,4 +1,3 @@
-import type { USASelecOptionElement } from "./select-option.element.js";
 declare global {
     interface HTMLElementTagNameMap {
         "usa-select": USASelectElement;
@@ -11,6 +10,5 @@ export declare class USASelectElement extends HTMLElement {
     accessor name: string;
     connectedCallback(): void;
     onSelectChange(): void;
-    onOptionAdded(el: USASelecOptionElement): void;
-    onOptionRemoved(el: USASelecOptionElement): void;
+    onOptionAdded(e: Event): void;
 }

package/target/lib/select/select.element.js

@@ -1,7 +1,7 @@
 import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
 import { attr, css, element, html, listen, query } from "@joist/element";
 let USASelectElement = (() => {
-    var _USASelectElement_instances, _USASelectElement_select, _USASelectElement_internals, _USASelectElement_createId, _USASelectElement_value_accessor_storage, _USASelectElement_name_accessor_storage;
+    var _USASelectElement_select, _USASelectElement_internals, _USASelectElement_value_accessor_storage, _USASelectElement_name_accessor_storage;
     let _classDecorators = [element({
             tagName: "usa-select",
             shadowDom: [
@@ -74,10 +74,10 @@ let USASelectElement = (() => {
     let _name_initializers = [];
     let _name_extraInitializers = [];
     let _onSelectChange_decorators;
+    let _onOptionAdded_decorators;
     var USASelectElement = _classThis = class extends _classSuper {
         constructor() {
             super(...arguments);
-            _USASelectElement_instances.add(this);
             _USASelectElement_value_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, "")));
             _USASelectElement_name_accessor_storage.set(this, (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _name_initializers, "")));
             _USASelectElement_select.set(this, (__runInitializers(this, _name_extraInitializers), query("select")));
@@ -97,39 +97,28 @@ let USASelectElement = (() => {
             const select = __classPrivateFieldGet(this, _USASelectElement_select, "f").call(this);
             __classPrivateFieldGet(this, _USASelectElement_internals, "f").setFormValue(select.value);
         }
-        onOptionAdded(el) {
-            const option = document.createElement("option");
-            option.value = el.value;
-            option.innerHTML = el.innerHTML;
-            option.id = __classPrivateFieldGet(this, _USASelectElement_instances, "m", _USASelectElement_createId).call(this, el.value);
+        onOptionAdded(e) {
+            const target = e.target;
+            e.stopPropagation();
             const select = __classPrivateFieldGet(this, _USASelectElement_select, "f").call(this);
-            select.append(option);
-        }
-        onOptionRemoved(el) {
-            const select = __classPrivateFieldGet(this, _USASelectElement_select, "f").call(this);
-            const option = select.querySelector(`#${__classPrivateFieldGet(this, _USASelectElement_instances, "m", _USASelectElement_createId).call(this, el.value)}`);
-            if (option) {
-                option.remove();
-            }
+            select.append(target.option);
         }
     };
     _USASelectElement_select = new WeakMap();
     _USASelectElement_internals = new WeakMap();
-    _USASelectElement_instances = new WeakSet();
     _USASelectElement_value_accessor_storage = new WeakMap();
     _USASelectElement_name_accessor_storage = new WeakMap();
-    _USASelectElement_createId = function _USASelectElement_createId(val) {
-        return val.split(" ").join("-").toLowerCase();
-    };
     __setFunctionName(_classThis, "USASelectElement");
     (() => {
         const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
         _value_decorators = [attr()];
         _name_decorators = [attr()];
         _onSelectChange_decorators = [listen("change")];
+        _onOptionAdded_decorators = [listen("usa::select::option::added")];
         __esDecorate(_classThis, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
         __esDecorate(_classThis, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
         __esDecorate(_classThis, null, _onSelectChange_decorators, { kind: "method", name: "onSelectChange", static: false, private: false, access: { has: obj => "onSelectChange" in obj, get: obj => obj.onSelectChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+        __esDecorate(_classThis, null, _onOptionAdded_decorators, { kind: "method", name: "onOptionAdded", static: false, private: false, access: { has: obj => "onOptionAdded" in obj, get: obj => obj.onOptionAdded }, metadata: _metadata }, null, _instanceExtraInitializers);
         __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
         USASelectElement = _classThis = _classDescriptor.value;
         if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });

package/target/lib/select/select.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.element.js","sourceRoot":"","sources":["../../../src/lib/select/select.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IAsE5D,gBAAgB;;4BA5D5B,OAAO,CAAC;YACP,OAAO,EAAE,YAAY;YACrB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CF;gBACD,IAAI,CAAA;;;;;;;;;;KAUH;aACF;SACF,CAAC;;;;sBACoC,WAAW;;;;;;;;;6CAAnB,SAAQ,WAAW;;;;YAItC,oDAJE,mDAAgB,+CAIV,EAAE,IAAC;YAGX,kJAAO,EAAE,IAAC;YAEnB,sFAAU,KAAK,CAAC,QAAQ,CAAC,GAAC;YAC1B,sCAAa,IAAI,CAAC,eAAe,EAAE,EAAC;QAwCtC,CAAC;QA9CC,IAAS,KAAK,0FAAM;QAApB,IAAS,KAAK,+FAAM;QAGpB,IAAS,IAAI,yFAAM;QAAnB,IAAS,IAAI,8FAAM;QAKnB,iBAAiB;YACf,MAAM,MAAM,GAAG,uBAAA,IAAI,gCAAQ,MAAZ,IAAI,CAAU,CAAC;YAC9B,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YAC1B,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAExB,uBAAA,IAAI,mCAAW,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC;QAGD,cAAc;YACZ,MAAM,MAAM,GAAG,uBAAA,IAAI,gCAAQ,MAAZ,IAAI,CAAU,CAAC;YAE9B,uBAAA,IAAI,mCAAW,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;QAED,aAAa,CAAC,EAAyB;YACrC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAChD,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC;YACxB,MAAM,CAAC,SAAS,GAAG,EAAE,CAAC,SAAS,CAAC;YAChC,MAAM,CAAC,EAAE,GAAG,uBAAA,IAAI,+DAAU,MAAd,IAAI,EAAW,EAAE,CAAC,KAAK,CAAC,CAAC;YAErC,MAAM,MAAM,GAAG,uBAAA,IAAI,gCAAQ,MAAZ,IAAI,CAAU,CAAC;YAE9B,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACxB,CAAC;QAED,eAAe,CAAC,EAAyB;YACvC,MAAM,MAAM,GAAG,uBAAA,IAAI,gCAAQ,MAAZ,IAAI,CAAU,CAAC;YAC9B,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,IAAI,uBAAA,IAAI,+DAAU,MAAd,IAAI,EAAW,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YAEpE,IAAI,MAAM,EAAE,CAAC;gBACX,MAAM,CAAC,MAAM,EAAE,CAAC;YAClB,CAAC;QACH,CAAC;;;;;;;qEAES,GAAW;QACnB,OAAO,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;IAChD,CAAC;;;;6BA9CA,IAAI,EAAE;4BAGN,IAAI,EAAE;sCAcN,MAAM,CAAC,QAAQ,CAAC;QAhBjB,0KAAS,KAAK,6BAAL,KAAK,qFAAM;QAGpB,uKAAS,IAAI,6BAAJ,IAAI,mFAAM;QAcnB,mMAAA,cAAc,6DAIb;QAzBH,6KAkDC;;;;IAjDQ,yBAAc,GAAG,IAAI,AAAP,CAAQ;;QADlB,uDAAgB;;;;SAAhB,gBAAgB"}
+{"version":3,"file":"select.element.js","sourceRoot":"","sources":["../../../src/lib/select/select.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IAsE5D,gBAAgB;;4BA5D5B,OAAO,CAAC;YACP,OAAO,EAAE,YAAY;YACrB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CF;gBACD,IAAI,CAAA;;;;;;;;;;KAUH;aACF;SACF,CAAC;;;;sBACoC,WAAW;;;;;;;;;;6CAAnB,SAAQ,WAAW;;;YAItC,oDAJE,mDAAgB,+CAIV,EAAE,IAAC;YAGX,kJAAO,EAAE,IAAC;YAEnB,sFAAU,KAAK,CAAC,QAAQ,CAAC,GAAC;YAC1B,sCAAa,IAAI,CAAC,eAAe,EAAE,EAAC;QA0BtC,CAAC;QAhCC,IAAS,KAAK,0FAAM;QAApB,IAAS,KAAK,+FAAM;QAGpB,IAAS,IAAI,yFAAM;QAAnB,IAAS,IAAI,8FAAM;QAKnB,iBAAiB;YACf,MAAM,MAAM,GAAG,uBAAA,IAAI,gCAAQ,MAAZ,IAAI,CAAU,CAAC;YAC9B,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YAC1B,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAExB,uBAAA,IAAI,mCAAW,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC;QAGD,cAAc;YACZ,MAAM,MAAM,GAAG,uBAAA,IAAI,gCAAQ,MAAZ,IAAI,CAAU,CAAC;YAE9B,uBAAA,IAAI,mCAAW,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;QAGD,aAAa,CAAC,CAAQ;YACpB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA+B,CAAC;YAEjD,CAAC,CAAC,eAAe,EAAE,CAAC;YAEpB,MAAM,MAAM,GAAG,uBAAA,IAAI,gCAAQ,MAAZ,IAAI,CAAU,CAAC;YAC9B,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC/B,CAAC;;;;;;;;;6BAhCA,IAAI,EAAE;4BAGN,IAAI,EAAE;sCAcN,MAAM,CAAC,QAAQ,CAAC;qCAOhB,MAAM,CAAC,4BAA4B,CAAC;QAvBrC,0KAAS,KAAK,6BAAL,KAAK,qFAAM;QAGpB,uKAAS,IAAI,6BAAJ,IAAI,mFAAM;QAcnB,mMAAA,cAAc,6DAIb;QAGD,gMAAA,aAAa,6DAOZ;QAnCH,6KAoCC;;;;IAnCQ,yBAAc,GAAG,IAAI,AAAP,CAAQ;;QADlB,uDAAgB;;;;SAAhB,gBAAgB"}

package/target/lib/side-nav/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.element.js

@@ -0,0 +1,109 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { attr, css, element, html } from "@joist/element";
+let USASideNavItemElement = (() => {
+    var _USASideNavItemElement_current_accessor_storage;
+    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 = _classThis = class extends _classSuper {
+        get current() { return __classPrivateFieldGet(this, _USASideNavItemElement_current_accessor_storage, "f"); }
+        set current(value) { __classPrivateFieldSet(this, _USASideNavItemElement_current_accessor_storage, value, "f"); }
+        constructor() {
+            super(...arguments);
+            _USASideNavItemElement_current_accessor_storage.set(this, __runInitializers(this, _current_initializers, false));
+            __runInitializers(this, _current_extraInitializers);
+        }
+    };
+    _USASideNavItemElement_current_accessor_storage = new WeakMap();
+    __setFunctionName(_classThis, "USASideNavItemElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _current_decorators = [attr({
+                observed: false,
+            })];
+        __esDecorate(_classThis, 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);
+    })();
+    return USASideNavItemElement = _classThis;
+})();
+export { USASideNavItemElement };
+//# sourceMappingURL=side-nav-item.element.js.map

package/target/lib/side-nav/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.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;;;;kDAAnB,SAAQ,WAAW;QAIpD,IAAS,OAAO,iGAAS;QAAzB,IAAS,OAAO,sGAAS;;;YAAhB,yGAAU,KAAK,GAAC;;;;;;;;+BAHxB,IAAI,CAAC;gBACJ,QAAQ,EAAE,KAAK;aAChB,CAAC;QACF,gLAAS,OAAO,6BAAP,OAAO,yFAAS;QAJ3B,6KAKC;;;QALY,uDAAqB;;;;SAArB,qBAAqB"}

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

@@ -0,0 +1,8 @@
+import "./side-nav-item.element.js";
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-side-nav": USASideNavElement;
+    }
+}
+export declare class USASideNavElement extends HTMLElement {
+}

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

@@ -0,0 +1,36 @@
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import "./side-nav-item.element.js";
+import { 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;
+    var USASideNavElement = _classThis = class extends _classSuper {
+    };
+    __setFunctionName(_classThis, "USASideNavElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        __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);
+    })();
+    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,4BAA4B,CAAC;AAEpC,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAsBvC,iBAAiB;4BAd7B,OAAO,CAAC;YACP,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;KAOF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACqC,WAAW;8CAAnB,SAAQ,WAAW;;;;;QAAlD,6KAAqD;;;QAAxC,uDAAiB;;;;SAAjB,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,2 @@
+import "../link/link.element.js";
+import "./side-nav.element.js";