@noctuatech/uswds 1.3.0 → 1.3.2

package/src/lib/input-mask/input-mask.test.ts

@@ -1,110 +1,105 @@
-import "./input-mask.element.js";
-import "../input/input.element.js";
+import './input-mask.element.js';
+import '../input/input.element.js';
 
-import { assert, fixture, html } from "@open-wc/testing";
+import { assert, fixture, html } from '@open-wc/testing';
 
-import { format } from "./format.js";
-import type { USAInputMaskElement } from "./input-mask.element.js";
+import { format } from './format.js';
+import type { USAInputMaskElement } from './input-mask.element.js';
 
-describe("format", () => {
-  it("should retrn the correct raw value", () => {
-    assert.deepEqual(format("(123) 456 7890", "(***) ***-****"), {
-      raw: "1234567890",
-      formatted: "(123) 456-7890",
+describe('format', () => {
+  it('should retrn the correct raw value', () => {
+    assert.deepEqual(format('(123) 456 7890', '(***) ***-****'), {
+      raw: '1234567890',
+      formatted: '(123) 456-7890',
     });
   });
 
-  it("should return a formatted phone number (***) ***-****", () => {
-    assert.deepEqual(format("1234567890", "(***) ***-****"), {
-      raw: "1234567890",
-      formatted: "(123) 456-7890",
+  it('should return a formatted phone number (***) ***-****', () => {
+    assert.deepEqual(format('1234567890', '(***) ***-****'), {
+      raw: '1234567890',
+      formatted: '(123) 456-7890',
     });
   });
 
-  it("should return a formatted phone number ***-***-****", () => {
-    assert.deepEqual(format("1234567890", "***-***-****"), {
-      raw: "1234567890",
-      formatted: "123-456-7890",
+  it('should return a formatted phone number ***-***-****', () => {
+    assert.deepEqual(format('1234567890', '***-***-****'), {
+      raw: '1234567890',
+      formatted: '123-456-7890',
     });
   });
 
-  it("should only allow numbers", () => {
-    assert.deepEqual(format("304213abcd", "999-999-9999"), {
-      raw: "304213abcd",
-      formatted: "304-213-",
+  it('should only allow numbers', () => {
+    assert.deepEqual(format('304213abcd', '999-999-9999'), {
+      raw: '304213abcd',
+      formatted: '304-213-',
     });
   });
 
-  it("should only allow a mix of letters and numbers", () => {
-    assert.deepEqual(format("C94749", "A-99999"), {
-      raw: "C94749",
-      formatted: "C-94749",
+  it('should only allow a mix of letters and numbers', () => {
+    assert.deepEqual(format('C94749', 'A-99999'), {
+      raw: 'C94749',
+      formatted: 'C-94749',
     });
   });
 });
 
-describe("usa-input-mask", () => {
-  it("should format default value", async () => {
+describe('usa-input-mask', () => {
+  it('should format default value', async () => {
     const el = await fixture<USAInputMaskElement>(html`
       <usa-input-mask mask="(999) 999-9999">
         <input name="phone" value="1234567890" mask />
       </usa-input-mask>
     `);
 
-    const input = el.querySelector("input");
+    const input = el.querySelector('input');
 
-    assert.equal(input?.value, "(123) 456-7890");
+    assert.equal(input?.value, '(123) 456-7890');
   });
 
-  it("should update value when on input event", async () => {
+  it('should update value when on input event', async () => {
     const el = await fixture<USAInputMaskElement>(html`
       <usa-input-mask>
         <input name="phone" mask="(999) 999-9999" />
       </usa-input-mask>
     `);
 
-    const input = el.querySelector("input");
+    const input = el.querySelector('input');
 
     if (input) {
-      input.value = "8888888888";
-      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.value = '8888888888';
+      input.dispatchEvent(new Event('input', { bubbles: true }));
     }
-
-    assert.equal(input?.value, "(888) 888-8888");
+    assert.equal(input?.value, '(888) 888-8888');
   });
 });
 
-describe("usa-input-mask with usa-input", () => {
-  it("should format default value", async () => {
+describe('usa-input-mask with usa-input', () => {
+  it('should format default value', async () => {
     const el = await fixture<USAInputMaskElement>(html`
       <usa-input-mask mask="(999) 999-9999">
         <usa-input name="phone" value="1234567890" id="TEST" mask></usa-input>
       </usa-input-mask>
     `);
 
-    const input = el.querySelector("usa-input");
+    const input = el.querySelector('usa-input');
 
-    assert.equal(input?.value, "(123) 456-7890");
+    assert.equal(input?.value, '(123) 456-7890');
   });
 
-  it("should update value when on input event", async () => {
+  it('should update value when on input event', async () => {
     const el = await fixture<USAInputMaskElement>(html`
       <usa-input-mask>
-        <usa-input
-          name="phone"
-          value="1234567890"
-          mask="(999) 999-9999"
-        ></usa-input>
+        <usa-input name="phone" value="1234567890" mask="(999) 999-9999"></usa-input>
       </usa-input-mask>
     `);
 
-    const input = el.querySelector("usa-input");
+    const input = el.querySelector('usa-input');
 
     if (input) {
-      input.value = "8888888888";
-      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.value = '8888888888';
+      input.dispatchEvent(new Event('input', { bubbles: true }));
     }
 
-    assert.equal(input?.value, "(888) 888-8888");
+    assert.equal(input?.value, '(888) 888-8888');
   });
 });

package/src/lib/services/icon.service.test.ts

@@ -1,11 +1,11 @@
-import { Injector } from "@joist/di";
-import { assert } from "@open-wc/testing";
+import { Injector } from '@joist/di';
+import { assert } from '@open-wc/testing';
 
-import { HttpService } from "./http.service.js";
-import { IconService } from "./icon.service.js";
+import { HttpService } from './http.service.js';
+import { IconService } from './icon.service.js';
 
-describe("IconService", () => {
-  it("should fetch icon if not in cache", async () => {
+describe('IconService', () => {
+  it('should fetch icon if not in cache', async () => {
     let callCount = 0;
 
     const app = new Injector({
@@ -16,7 +16,7 @@ describe("IconService", () => {
             use: class extends HttpService {
               async fetch(): Promise<Response> {
                 callCount++;
-                return new Response("<svg></svg>");
+                return new Response('<svg></svg>');
               }
             },
           },
@@ -26,13 +26,13 @@ describe("IconService", () => {
 
     const icon = app.inject(IconService);
 
-    const res = await icon.getIcon("test");
+    const res = await icon.getIcon('test' as any);
 
-    assert.equal(res.nodeName, "svg");
+    assert.equal(res.nodeName, 'svg');
     assert.equal(callCount, 1);
   });
 
-  it("should not fetch new icon if the icon is found in the cache", async () => {
+  it('should not fetch new icon if the icon is found in the cache', async () => {
     let callCount = 0;
 
     const app = new Injector({
@@ -43,7 +43,7 @@ describe("IconService", () => {
             use: class extends HttpService {
               async fetch(): Promise<Response> {
                 callCount++;
-                return new Response("<svg></svg>");
+                return new Response('<svg></svg>');
               }
             },
           },
@@ -53,11 +53,11 @@ describe("IconService", () => {
 
     const icon = app.inject(IconService);
 
-    await icon.getIcon("test");
+    await icon.getIcon('accessibility_new');
 
-    const res = await icon.getIcon("test");
+    const res = await icon.getIcon('accessibility_new');
 
-    assert.equal(res.nodeName, "svg");
+    assert.equal(res.nodeName, 'svg');
     assert.equal(callCount, 1);
   });
 });

package/src/lib/services/icon.service.ts

@@ -1,52 +1,53 @@
-import { inject, injectable } from "@joist/di";
+import { inject, injectable } from '@joist/di';
 
-import { USAConfig } from "../config/config.element.js";
-import { HttpService } from "./http.service.js";
+import { USAConfig } from '../config/config.element.js';
+import { HttpService } from './http.service.js';
+import { USAIcon } from '../icon/icon-types.js';
 
 @injectable()
 export class IconService {
   #config = inject(USAConfig);
   #http = inject(HttpService);
-  #iconCache: Map<string, Promise<HTMLTemplateElement>> = new Map();
+  #iconCache: Map<USAIcon, HTMLTemplateElement> = new Map();
 
-  async getIcon(icon: string): Promise<Node> {
+  async getIcon(icon: USAIcon, abortSignal?: AbortSignal): Promise<Node> {
     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");
-        }
+      if (!cached.content.firstElementChild) {
+        throw Error('cached value is not valid');
+      }
 
-        return res.content.firstElementChild.cloneNode(true);
-      });
+      return cached.content.firstElementChild.cloneNode(true);
     }
 
     const svg = http
-      .fetch(`${config.iconPath}${icon}.svg`)
+      .fetch(`${config.iconPath}${icon}.svg`, {
+        signal: abortSignal,
+      })
       .then((res) => {
         switch (res.status) {
           case 200:
             return res.text();
         }
 
-        return "";
+        return '';
       })
       .then((res) => {
-        const template = document.createElement("template");
+        const template = document.createElement('template');
         template.innerHTML = res;
 
+        this.#iconCache.set(icon, template);
+
         return template;
       });
 
-    this.#iconCache.set(icon, svg);
-
     return svg.then((res) => {
       if (!res.content.firstElementChild) {
-        throw Error("ICON is not valid");
+        throw Error('ICON is not valid');
       }
 
       return res.content.firstElementChild.cloneNode(true);

package/src/lib/textarea/textarea.element.ts

@@ -1,14 +1,14 @@
-import { attr, css, element, html, listen, query, ready } from "@joist/element";
-import { effect, observe } from "@joist/observable";
+import { attr, css, element, html, listen, query, ready } from '@joist/element';
+import { effect, observe } from '@joist/observable';
 
 declare global {
   interface HTMLElementTagNameMap {
-    "usa-textarea": USATextareaElement;
+    'usa-textarea': USATextareaElement;
   }
 }
 
 @element({
-  tagName: "usa-textarea",
+  tagName: 'usa-textarea',
   shadowDom: [
     css`
       * {
@@ -34,7 +34,7 @@ declare global {
         border-radius: 0;
         color: #1b1b1b;
         display: block;
-        padding: .5rem;
+        padding: 0.5rem;
         border-width: 1px;
         border-color: #5c5c5c;
         border-style: solid;
@@ -62,7 +62,7 @@ declare global {
       <label for="textarea" part="label">
         <slot></slot>
       </label>
-      
+
       <textarea id="textarea" part="textarea"></textarea>
     `,
   ],
@@ -71,13 +71,13 @@ export class USATextareaElement extends HTMLElement {
   static formAssociated = true;
 
   @attr()
-  accessor name = "";
+  accessor name = '';
 
   @attr()
-  accessor autocomplete: AutoFill = "on";
+  accessor autocomplete: AutoFill = 'on';
 
   @attr()
-  accessor placeholder = "";
+  accessor placeholder = '';
 
   @attr()
   accessor required = false;
@@ -86,10 +86,10 @@ export class USATextareaElement extends HTMLElement {
     reflect: false,
   })
   @observe()
-  accessor value = "";
+  accessor value = '';
 
   #internals = this.attachInternals();
-  #input = query("textarea");
+  #input = query('textarea');
 
   @ready()
   onReady() {
@@ -116,7 +116,7 @@ export class USATextareaElement extends HTMLElement {
     this.#syncFormState();
   }
 
-  @listen("input")
+  @listen('input')
   onInputChange() {
     this.value = this.#input().value;
   }
@@ -124,15 +124,11 @@ export class USATextareaElement extends HTMLElement {
   #syncFormState() {
     const input = this.#input();
 
-    this.#internals.setFormValue(input.value);
+    this.#internals.setFormValue(this.value);
     this.#internals.setValidity({});
 
     if (input.validationMessage) {
-      this.#internals.setValidity(
-        { customError: true },
-        input.validationMessage,
-        input,
-      );
+      this.#internals.setValidity({ customError: true }, input.validationMessage, input);
     }
   }
 }

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

@@ -1,13 +1,14 @@
-import "@joist/templating/define.js";
-import { USAAccordionToggleEvent } from "./events.js";
+import '@joist/templating/define.js';
+import { USAAccordionToggleEvent } from './events.js';
 declare global {
     interface HTMLElementTagNameMap {
-        "usa-accordion": USAAccordionElement;
+        'usa-accordion': USAAccordionElement;
     }
 }
 export declare class USAAccordionElement extends HTMLElement {
     accessor name: string;
     accessor open: boolean;
+    accessor icon: 'add' | 'remove';
     onClick(e: Event): void;
     onAccordionToggle(e: USAAccordionToggleEvent): void;
 }

package/target/lib/accordion/accordion.element.js

@@ -1,18 +1,18 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import "@joist/templating/define.js";
-import { attr, css, element, html, listen } from "@joist/element";
-import { bind } from "@joist/templating";
-import { USAAccordionToggleEvent } from "./events.js";
+import '@joist/templating/define.js';
+import { attr, css, element, html, listen } from '@joist/element';
+import { bind } from '@joist/templating';
+import { USAAccordionToggleEvent } from './events.js';
 let USAAccordionElement = (() => {
     let _classDecorators = [element({
-            tagName: "usa-accordion",
+            tagName: 'usa-accordion',
             shadowDomOpts: {
-                mode: "open",
+                mode: 'open',
                 delegatesFocus: true,
             },
             shadowDom: [
-                css `*{box-sizing:border-box}:host{display:block}:host(:not(:first-child)) summary{margin-top:.5rem}summary{align-items:center;border:0;border-radius:0;box-shadow:none;justify-content:normal;text-align:left;padding:0;color:#1b1b1b;background-color:#f0f0f0;cursor:pointer;display:flex;font-weight:700;margin:0;padding:1rem 1.25rem 1rem 1.25rem;text-decoration:none;width:100%}summary::-webkit-details-marker{display:none}slot[name=heading]{display:block;flex:1 1 auto}slot[name=heading]::slotted(*){margin:0}.content{padding-bottom:1.5rem;padding-left:1rem;padding-top:1.5rem}usa-icon[icon=remove]{display:none}details[open] usa-icon[icon=add]{display:none}details[open] usa-icon[icon=remove]{display:block}summary:hover{background-color:#e6e6e6}summary:focus{outline:.25rem solid #2491ff;outline-offset:0}`,
-                html `<j-props><details $.open="open"><summary><slot name="heading"></slot><usa-icon icon="add"></usa-icon><usa-icon icon="remove"></usa-icon></summary><div class="content"><slot></slot></div></details></j-props>`,
+                css `*{box-sizing:border-box}:host{display:block}:host(:not(:first-child)) summary{margin-top:.5rem}summary{align-items:center;border:0;border-radius:0;box-shadow:none;justify-content:normal;text-align:left;padding:0;color:#1b1b1b;background-color:#f0f0f0;cursor:pointer;display:flex;font-weight:700;margin:0;padding:1rem 1.25rem 1rem 1.25rem;text-decoration:none;width:100%}summary::-webkit-details-marker{display:none}slot[name=heading]{display:block;flex:1 1 auto}slot[name=heading]::slotted(*){margin:0}.content{padding-bottom:1.5rem;padding-left:1rem;padding-top:1.5rem}summary:hover{background-color:#e6e6e6}summary:focus{outline:.25rem solid #2491ff;outline-offset:0}`,
+                html `<j-props><details $.open="open"><summary><slot name="heading"></slot><j-props><usa-icon $.icon="icon"></usa-icon></j-props></summary><div class="content"><slot></slot></div></details></j-props>`,
             ],
         })];
     let _classDescriptor;
@@ -26,6 +26,9 @@ let USAAccordionElement = (() => {
     let _open_decorators;
     let _open_initializers = [];
     let _open_extraInitializers = [];
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
     let _onClick_decorators;
     let _onAccordionToggle_decorators;
     var USAAccordionElement = class extends _classSuper {
@@ -34,10 +37,12 @@ let USAAccordionElement = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _name_decorators = [attr()];
             _open_decorators = [attr(), bind()];
-            _onClick_decorators = [listen("click", "summary")];
-            _onAccordionToggle_decorators = [listen("usa::accordion::toggle", () => document.body)];
+            _icon_decorators = [bind((i) => (i.open ? 'remove' : 'add'))];
+            _onClick_decorators = [listen('click', 'summary')];
+            _onAccordionToggle_decorators = [listen('usa::accordion::toggle', () => document.body)];
             __esDecorate(this, 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(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(this, null, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
             __esDecorate(this, null, _onClick_decorators, { kind: "method", name: "onClick", static: false, private: false, access: { has: obj => "onClick" in obj, get: obj => obj.onClick }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _onAccordionToggle_decorators, { kind: "method", name: "onAccordionToggle", static: false, private: false, access: { has: obj => "onAccordionToggle" in obj, get: obj => obj.onAccordionToggle }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
@@ -45,12 +50,15 @@ let USAAccordionElement = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        #name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ""));
+        #name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ''));
         get name() { return this.#name_accessor_storage; }
         set name(value) { this.#name_accessor_storage = value; }
         #open_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _open_initializers, false));
         get open() { return this.#open_accessor_storage; }
         set open(value) { this.#open_accessor_storage = value; }
+        #icon_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _icon_initializers, 'add'));
+        get icon() { return this.#icon_accessor_storage; }
+        set icon(value) { this.#icon_accessor_storage = value; }
         onClick(e) {
             e.preventDefault();
             this.dispatchEvent(new USAAccordionToggleEvent(!this.open));
@@ -65,7 +73,7 @@ let USAAccordionElement = (() => {
         }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _open_extraInitializers);
+            __runInitializers(this, _icon_extraInitializers);
         }
     };
     return USAAccordionElement = _classThis;

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.element.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;IAyGzC,mBAAmB;4BAjG/B,OAAO,CAAC;YACP,OAAO,EAAE,eAAe;YACxB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;KAeH;aACF;SACF,CAAC;;;;sBACuC,WAAW;;;;;;;;;;mCAAnB,SAAQ,WAAW;;;;gCACjD,IAAI,EAAE;gCAGN,IAAI,EAAE,EACN,IAAI,EAAE;mCAGN,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC;6CAO1B,MAAM,CAAC,wBAAwB,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;YAbtD,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAInB,iKAAS,IAAI,6BAAJ,IAAI,mFAAS;YAGtB,wKAAA,OAAO,6DAIN;YAGD,sMAAA,iBAAiB,6DAMhB;YAtBH,6KAuBC;;;YAvBY,uDAAmB;;QAE9B,0BAFW,mDAAmB,8CAEd,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAInB,wHAAgB,KAAK,GAAC;QAAtB,IAAS,IAAI,0CAAS;QAAtB,IAAS,IAAI,gDAAS;QAGtB,OAAO,CAAC,CAAQ;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,CAAC,aAAa,CAAC,IAAI,uBAAuB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9D,CAAC;QAGD,iBAAiB,CAAC,CAA0B;YAC1C,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAChC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;YAC1C,CAAC;iBAAM,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC7B,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC;YACrB,CAAC;QACH,CAAC;;;;;;;;SAtBU,mBAAmB"}
+{"version":3,"file":"accordion.element.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;IA8FzC,mBAAmB;4BAtF/B,OAAO,CAAC;YACP,OAAO,EAAE,eAAe;YACxB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2DF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;KAgBH;aACF;SACF,CAAC;;;;sBACuC,WAAW;;;;;;;;;;;;;mCAAnB,SAAQ,WAAW;;;;gCACjD,IAAI,EAAE;gCAGN,IAAI,EAAE,EACN,IAAI,EAAE;gCAGN,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;mCAGxC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC;6CAO1B,MAAM,CAAC,wBAAwB,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;YAhBtD,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAInB,iKAAS,IAAI,6BAAJ,IAAI,mFAAS;YAGtB,iKAAS,IAAI,6BAAJ,IAAI,mFAA2B;YAGxC,wKAAA,OAAO,6DAIN;YAGD,sMAAA,iBAAiB,6DAMhB;YAzBH,6KA0BC;;;YA1BY,uDAAmB;;QAE9B,0BAFW,mDAAmB,8CAEd,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAInB,wHAAgB,KAAK,GAAC;QAAtB,IAAS,IAAI,0CAAS;QAAtB,IAAS,IAAI,gDAAS;QAGtB,wHAAkC,KAAK,GAAC;QAAxC,IAAS,IAAI,0CAA2B;QAAxC,IAAS,IAAI,gDAA2B;QAGxC,OAAO,CAAC,CAAQ;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,CAAC,aAAa,CAAC,IAAI,uBAAuB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9D,CAAC;QAGD,iBAAiB,CAAC,CAA0B;YAC1C,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAChC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;YAC1C,CAAC;iBAAM,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC7B,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC;YACrB,CAAC;QACH,CAAC;;;;;;;;SAzBU,mBAAmB"}

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

@@ -1,11 +1,11 @@
-import { type USAAlertType } from "./alert-types.js";
+import { type USAAlertType } from './alert-types.js';
+import { USAIcon } from '../icon/icon-types.js';
 declare global {
     interface HTMLElementTagNameMap {
-        "usa-alert": USAAlertElement;
+        'usa-alert': USAAlertElement;
     }
 }
 export declare class USAAlertElement extends HTMLElement {
-    #private;
     accessor type: USAAlertType;
-    attributeChangedCallback(): void;
+    accessor icon: USAIcon;
 }

package/target/lib/alert/alert.element.js

@@ -1,16 +1,18 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { attr, css, element, html, query } from "@joist/element";
-import { USA_ALERT_CONFIG } from "./alert-types.js";
+import { attr, css, element, html } from '@joist/element';
+import { USA_ALERT_CONFIG } from './alert-types.js';
+import { bind } from '@joist/templating';
+import { observe } from '@joist/observable';
 let USAAlertElement = (() => {
     let _classDecorators = [element({
-            tagName: "usa-alert",
+            tagName: 'usa-alert',
             shadowDomOpts: {
-                mode: "open",
+                mode: 'open',
                 delegatesFocus: true,
             },
             shadowDom: [
                 css `:host{display:block;border-left:.5rem solid #adadad;padding:1rem 1.2rem;color:#1b1b1b;margin-bottom:1rem}:host([type=info]){border-left-color:#00bde3;background-color:#e7f6f8}:host([type=warning]){background-color:#faf3d1;border-left-color:#ffbe2e}:host([type=success]){background-color:#ecf3ec;border-left-color:#00a91c}:host([type=error]){background-color:#f4e3db;border-left-color:#d54309}:host([type=emergency]){background-color:#9c3d10;border-left-color:#9c3d10;color:#fff}:host([type=emergency]) ::slotted(*){color:#fff}.alert-heading{display:grid;grid-template-columns:auto 1fr;align-items:center}usa-icon{margin:-.28rem .75rem 0 0}#heading::slotted(*){font-size:1.33rem;line-height:.9;margin-top:0;margin-bottom:.5rem}`,
-                html `<div class="alert-heading"><usa-icon icon="check_circle"></usa-icon><div><slot id="heading" name="heading"></slot></div><div class="spacer"></div><div><slot></slot></div></div>`,
+                html `<div class="alert-heading"><j-props><usa-icon $.icon="icon"></usa-icon></j-props><div><slot id="heading" name="heading"></slot></div><div class="spacer"></div><div><slot></slot></div></div>`,
             ],
         })];
     let _classDescriptor;
@@ -20,25 +22,31 @@ let USAAlertElement = (() => {
     let _type_decorators;
     let _type_initializers = [];
     let _type_extraInitializers = [];
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
     var USAAlertElement = class extends _classSuper {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _type_decorators = [attr()];
+            _type_decorators = [attr(), observe()];
+            _icon_decorators = [bind((i) => USA_ALERT_CONFIG[i.type].icon)];
             __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+            __esDecorate(this, null, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             USAAlertElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        #type_accessor_storage = __runInitializers(this, _type_initializers, "info");
+        #type_accessor_storage = __runInitializers(this, _type_initializers, 'info');
         get type() { return this.#type_accessor_storage; }
         set type(value) { this.#type_accessor_storage = value; }
-        #icon = (__runInitializers(this, _type_extraInitializers), query("usa-icon"));
-        attributeChangedCallback() {
-            this.#icon({
-                icon: USA_ALERT_CONFIG[this.type].icon,
-            });
+        #icon_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _icon_initializers, 'info'));
+        get icon() { return this.#icon_accessor_storage; }
+        set icon(value) { this.#icon_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _icon_extraInitializers);
         }
     };
     return USAAlertElement = _classThis;

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

@@ -1 +1 @@
-{"version":3,"file":"alert.element.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAqB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;IAwF1D,eAAe;4BAhF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;KAcH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;+BAAnB,SAAQ,WAAW;;;;gCAC7C,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAwB;YAFvC,6KAWC;;;YAXY,uDAAe;;QAE1B,qEAA8B,MAAM,EAAC;QAArC,IAAS,IAAI,0CAAwB;QAArC,IAAS,IAAI,gDAAwB;QAErC,KAAK,sDAAG,KAAK,CAAC,UAAU,CAAC,EAAC;QAE1B,wBAAwB;YACtB,IAAI,CAAC,KAAK,CAAC;gBACT,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI;aACvC,CAAC,CAAC;QACL,CAAC;;;;SAVU,eAAe"}
+{"version":3,"file":"alert.element.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAS,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAqB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;IA0F/B,eAAe;4BAlF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;KAgBH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;;;;+BAAnB,SAAQ,WAAW;;;;gCAC7C,IAAI,EAAE,EACN,OAAO,EAAE;gCAGT,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;YAF3C,iKAAS,IAAI,6BAAJ,IAAI,mFAAwB;YAGrC,iKAAS,IAAI,6BAAJ,IAAI,mFAAmB;YANlC,6KAOC;;;YAPY,uDAAe;;QAG1B,qEAA8B,MAAM,EAAC;QAArC,IAAS,IAAI,0CAAwB;QAArC,IAAS,IAAI,gDAAwB;QAGrC,wHAAyB,MAAM,GAAC;QAAhC,IAAS,IAAI,0CAAmB;QAAhC,IAAS,IAAI,gDAAmB;;;;;;;;SANrB,eAAe"}

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

@@ -1,5 +1,5 @@
-import type { StoryObj } from "@storybook/web-components";
-import type { USAAlertElement } from "./alert.element.js";
+import type { StoryObj } from '@storybook/web-components';
+import type { USAAlertElement } from './alert.element.js';
 declare const meta: {
     title: string;
     tags: string[];

package/target/lib/alert/alert.stories.js

@@ -1,8 +1,8 @@
-import { html } from "lit";
+import { html } from 'lit';
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
-    title: "usa-alert",
-    tags: ["autodocs"],
+    title: 'usa-alert',
+    tags: ['autodocs'],
     argTypes: {},
     args: {},
 };

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

@@ -1 +1 @@
-{"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.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,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,sEAAsE;AACtE,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.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,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;KAOV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;KAOV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;KAOV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,sEAAsE;AACtE,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;KAOV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;KAOV,CAAC;IACJ,CAAC;CACF,CAAC"}

package/target/lib/file-input/file-input-preview/file-input-preview.element.d.ts

@@ -1,7 +1,7 @@
-import "@joist/templating/define.js";
+import '@joist/templating/define.js';
 declare global {
     interface HTMLElementTagNameMap {
-        "usa-file-input-preview": USAFileInputPreviewElement;
+        'usa-file-input-preview': USAFileInputPreviewElement;
     }
 }
 export declare class USAFileInputPreviewElement extends HTMLElement {