@noctuatech/uswds 1.3.3 → 1.3.5

package/target/lib/input-mask/input-mask.stories.js

@@ -4,7 +4,7 @@ const meta = {
     title: 'input-mask',
     tags: ['autodocs'],
     render(args) {
-        return html `<usa-input-mask><usa-input name="phone" placeholder="${args.mask}" autocomplete="off" mask="${args.mask}" value="1234567890">Phone:</usa-input></usa-input-mask>`;
+        return html `<usa-input-mask><usa-input name="phone" placeholder="${args.mask}" autocomplete="off" mask="${args.mask}" value="1234567890">Phone:</usa-input><input type="text" placeholder="${args.mask}" autocomplete="off" mask="${args.mask}" value="1234567890"></usa-input-mask>`;
     },
     argTypes: {},
     args: {

package/target/lib/input-mask/input-mask.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-mask.stories.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;8CAE+B,IAAI,CAAC,IAAI,4BAA4B,IAAI,CAAC,IAAI;;;;KAIvF,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,IAAI,EAAE,gBAAgB;KACvB;CACkC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"file":"input-mask.stories.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;8CAE+B,IAAI,CAAC,IAAI,4BAA4B,IAAI,CAAC,IAAI;;;;yCAInD,IAAI,CAAC,IAAI,4BAA4B,IAAI,CAAC,IAAI;;KAElF,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,IAAI,EAAE,gBAAgB;KACvB;CACkC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

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

@@ -1,13 +1,11 @@
+import '@joist/templating/define.js';
 declare global {
     interface HTMLElementTagNameMap {
-        "usa-link": USALinkElement;
+        'usa-link': USALinkElement;
     }
 }
 export declare class USALinkElement extends HTMLElement {
-    #private;
     accessor href: string;
-    accessor target: "_blank" | "_parent" | "_self" | "_top" | "";
+    accessor target: '_blank' | '_parent' | '_self' | '_top' | '';
     accessor title: string;
-    accessor disabled: boolean;
-    attributeChangedCallback(): void;
 }

package/target/lib/link/link.element.js

@@ -1,11 +1,13 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { attr, css, element, html, query } from "@joist/element";
+import '@joist/templating/define.js';
+import { attr, css, element, html } from '@joist/element';
+import { bind } from '@joist/templating';
 let USALinkElement = (() => {
     let _classDecorators = [element({
-            tagName: "usa-link",
+            tagName: 'usa-link',
             shadowDom: [
                 css `:host{display:inline;color:#005ea2;text-decoration:underline}a{color:inherit;text-decoration:inherit;display:inherit;text-overflow:inherit}`,
-                html `<a><slot></slot></a>`,
+                html `<j-bind props="href,target,title"><a><slot></slot></a></j-bind>`,
             ],
         })];
     let _classDescriptor;
@@ -21,47 +23,33 @@ let USALinkElement = (() => {
     let _title_decorators;
     let _title_initializers = [];
     let _title_extraInitializers = [];
-    let _disabled_decorators;
-    let _disabled_initializers = [];
-    let _disabled_extraInitializers = [];
     var USALinkElement = class extends _classSuper {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _href_decorators = [attr()];
-            _target_decorators = [attr()];
-            _title_decorators = [attr()];
-            _disabled_decorators = [attr({
-                    observed: false,
-                })];
+            _href_decorators = [attr(), bind()];
+            _target_decorators = [attr(), bind()];
+            _title_decorators = [attr(), bind()];
             __esDecorate(this, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
             __esDecorate(this, null, _target_decorators, { kind: "accessor", name: "target", static: false, private: false, access: { has: obj => "target" in obj, get: obj => obj.target, set: (obj, value) => { obj.target = value; } }, metadata: _metadata }, _target_initializers, _target_extraInitializers);
             __esDecorate(this, null, _title_decorators, { kind: "accessor", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
-            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             USALinkElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        #href_accessor_storage = __runInitializers(this, _href_initializers, "");
+        #href_accessor_storage = __runInitializers(this, _href_initializers, '');
         get href() { return this.#href_accessor_storage; }
         set href(value) { this.#href_accessor_storage = value; }
-        #target_accessor_storage = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _target_initializers, ""));
+        #target_accessor_storage = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _target_initializers, ''));
         get target() { return this.#target_accessor_storage; }
         set target(value) { this.#target_accessor_storage = value; }
-        #title_accessor_storage = (__runInitializers(this, _target_extraInitializers), __runInitializers(this, _title_initializers, ""));
+        #title_accessor_storage = (__runInitializers(this, _target_extraInitializers), __runInitializers(this, _title_initializers, ''));
         get title() { return this.#title_accessor_storage; }
         set title(value) { this.#title_accessor_storage = value; }
-        #disabled_accessor_storage = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _disabled_initializers, false));
-        get disabled() { return this.#disabled_accessor_storage; }
-        set disabled(value) { this.#disabled_accessor_storage = value; }
-        #anchor = (__runInitializers(this, _disabled_extraInitializers), query("a"));
-        attributeChangedCallback() {
-            this.#anchor({
-                href: this.href,
-                target: this.target,
-                title: this.title,
-            });
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _title_extraInitializers);
         }
     };
     return USALinkElement = _classThis;

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

@@ -1 +1 @@
-{"version":3,"file":"link.element.js","sourceRoot":"","sources":["../../../src/lib/link/link.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IAgCpD,cAAc;4BAxB1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;KAaF;gBACD,IAAI,CAAA;;;;KAIH;aACF;SACF,CAAC;;;;sBACkC,WAAW;;;;;;;;;;;;;8BAAnB,SAAQ,WAAW;;;;gCAC5C,IAAI,EAAE;kCAGN,IAAI,EAAE;iCAGN,IAAI,EAAE;oCAGN,IAAI,CAAC;oBACJ,QAAQ,EAAE,KAAK;iBAChB,CAAC;YAVF,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,uKAAS,MAAM,6BAAN,MAAM,uFAAoD;YAGnE,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAKpB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAb5B,6KAwBC;;;YAxBY,uDAAc;;QAEzB,qEAAgB,EAAE,EAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,4HAAgE,EAAE,GAAC;QAAnE,IAAS,MAAM,4CAAoD;QAAnE,IAAS,MAAM,kDAAoD;QAGnE,4HAAiB,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAKpB,iIAAoB,KAAK,GAAC;QAA1B,IAAS,QAAQ,8CAAS;QAA1B,IAAS,QAAQ,oDAAS;QAE1B,OAAO,0DAAG,KAAK,CAAC,GAAG,CAAC,EAAC;QAErB,wBAAwB;YACtB,IAAI,CAAC,OAAO,CAAC;gBACX,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC;;;;SAvBU,cAAc"}
+{"version":3,"file":"link.element.js","sourceRoot":"","sources":["../../../src/lib/link/link.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAS,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IAkC5B,cAAc;4BA1B1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;KAaF;gBACD,IAAI,CAAA;;;;;;KAMH;aACF;SACF,CAAC;;;;sBACkC,WAAW;;;;;;;;;;8BAAnB,SAAQ,WAAW;;;;gCAC5C,IAAI,EAAE,EACN,IAAI,EAAE;kCAGN,IAAI,EAAE,EACN,IAAI,EAAE;iCAGN,IAAI,EAAE,EACN,IAAI,EAAE;YAPP,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAInB,uKAAS,MAAM,6BAAN,MAAM,uFAAoD;YAInE,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAXtB,6KAYC;;;YAZY,uDAAc;;QAGzB,qEAAgB,EAAE,EAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAInB,4HAAgE,EAAE,GAAC;QAAnE,IAAS,MAAM,4CAAoD;QAAnE,IAAS,MAAM,kDAAoD;QAInE,4HAAiB,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;;;;;;;;SAXT,cAAc"}

package/target/lib/modal/modal-close/modal-close.element.test.d.ts

@@ -0,0 +1 @@
+import './modal-close.element.js';

package/target/lib/modal/modal-close/modal-close.element.test.js

@@ -0,0 +1,9 @@
+import './modal-close.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+describe('usa-modal-close', () => {
+    it('should be accessible', async () => {
+        const modalClose = await fixture(html `<usa-modal-close>Hello World</usa-modal-close>`);
+        return assert.isAccessible(modalClose);
+    });
+});
+//# sourceMappingURL=modal-close.element.test.js.map

package/target/lib/modal/modal-close/modal-close.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-close.element.test.js","sourceRoot":"","sources":["../../../../src/lib/modal/modal-close/modal-close.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,UAAU,GAAG,MAAM,OAAO,CAAuB,IAAI,CAAA,kDAAkD,CAAC,CAAC;QAE/G,OAAO,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/modal/modal-heading/modal-heading.element.test.d.ts

@@ -0,0 +1 @@
+import './modal-heading.element.js';

package/target/lib/modal/modal-heading/modal-heading.element.test.js

@@ -0,0 +1,9 @@
+import './modal-heading.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+describe('usa-modal-heading', () => {
+    it('should be accessible', async () => {
+        const modalHeading = await fixture(html `<usa-modal-heading>Hello World</usa-modal-heading>`);
+        return assert.isAccessible(modalHeading);
+    });
+});
+//# sourceMappingURL=modal-heading.element.test.js.map

package/target/lib/modal/modal-heading/modal-heading.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal-heading.element.test.js","sourceRoot":"","sources":["../../../../src/lib/modal/modal-heading/modal-heading.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,YAAY,GAAG,MAAM,OAAO,CAAyB,IAAI,CAAA;;KAE9D,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/modal/modal.element.test.d.ts

@@ -0,0 +1,3 @@
+import './modal.element.js';
+import './modal-heading/modal-heading.element.js';
+import './modal-close/modal-close.element.js';

package/target/lib/modal/modal.element.test.js

@@ -0,0 +1,11 @@
+import './modal.element.js';
+import './modal-heading/modal-heading.element.js';
+import './modal-close/modal-close.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+describe('usa-modal', () => {
+    it('should be accessible', async () => {
+        const modal = await fixture(html `<usa-modal open><usa-modal-close></usa-modal-close><usa-modal-heading>Are you sure you want to continue?</usa-modal-heading><p>This is some other example of content</p></usa-modal>`);
+        return assert.isAccessible(modal);
+    });
+});
+//# sourceMappingURL=modal.element.test.js.map

package/target/lib/modal/modal.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.element.test.js","sourceRoot":"","sources":["../../../src/lib/modal/modal.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,0CAA0C,CAAC;AAClD,OAAO,sCAAsC,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;;;KAQhD,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/pagination/pagination-item/pagination-item.element.d.ts

@@ -1,6 +1,6 @@
 declare global {
     interface HTMLElementTagNameMap {
-        "usa-pagination-item": USAPaginationItemElement;
+        'usa-pagination-item': USAPaginationItemElement;
     }
 }
 export declare class USAPaginationItemElement extends HTMLElement {

package/target/lib/pagination/pagination-item/pagination-item.element.js

@@ -1,10 +1,10 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { css, element, html } from "@joist/element";
+import { css, element, html } from '@joist/element';
 let USAPaginationItemElement = (() => {
     let _classDecorators = [element({
-            tagName: "usa-pagination-item",
+            tagName: 'usa-pagination-item',
             shadowDom: [
-                css `:host{display:inline-flex;height:2.5rem;justify-content:center;line-height:1;min-width:2.5rem;align-items:center}:host(:first-child){margin-right:1rem}:host(:last-child){margin-left:1rem}`,
+                css `:host{display:inline-flex;height:2.5rem;justify-content:center;line-height:1;min-width:2.5rem;align-items:center}:host(:first-child){margin-right:1rem}:host(:last-child){margin-left:1rem}::slotted(usa-link){display:inline-flex;align-items:center}`,
                 html `<slot></slot>`,
             ],
         })];

package/target/lib/pagination/pagination-item/pagination-item.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination-item.element.js","sourceRoot":"","sources":["../../../../src/lib/pagination/pagination-item/pagination-item.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAkCvC,wBAAwB;4BA1BpC,OAAO,CAAC;YACP,OAAO,EAAE,qBAAqB;YAC9B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;KAiBF;gBACD,IAAI,CAAA;;KAEH;aACF;SACF,CAAC;;;;sBAC4C,WAAW;wCAAnB,SAAQ,WAAW;;;;YAAzD,6KAA4D;;;YAA/C,uDAAwB;;;;;SAAxB,wBAAwB"}
+{"version":3,"file":"pagination-item.element.js","sourceRoot":"","sources":["../../../../src/lib/pagination/pagination-item/pagination-item.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAqCvC,wBAAwB;4BA7BpC,OAAO,CAAC;YACP,OAAO,EAAE,qBAAqB;YAC9B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBF;gBACD,IAAI,CAAA,iBAAiB;aACtB;SACF,CAAC;;;;sBAC4C,WAAW;wCAAnB,SAAQ,WAAW;;;;YAAzD,6KAA4D;;;YAA/C,uDAAwB;;;;;SAAxB,wBAAwB"}

package/target/lib/pagination/pagination-no/pagination-no.element.d.ts

@@ -1,11 +1,10 @@
+import '@joist/templating/define.js';
 declare global {
     interface HTMLElementTagNameMap {
-        "usa-pagination-no": USAPaginationNoElement;
+        'usa-pagination-no': USAPaginationNoElement;
     }
 }
 export declare class USAPaginationNoElement extends HTMLElement {
-    #private;
     accessor href: string;
     accessor active: boolean;
-    attributeChangedCallback(): void;
 }

package/target/lib/pagination/pagination-no/pagination-no.element.js

@@ -1,11 +1,13 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { attr, css, element, html, query } from "@joist/element";
+import '@joist/templating/define.js';
+import { attr, css, element, html } from '@joist/element';
+import { bind } from '@joist/templating';
 let USAPaginationNoElement = (() => {
     let _classDecorators = [element({
-            tagName: "usa-pagination-no",
+            tagName: 'usa-pagination-no',
             shadowDom: [
                 css `:host{align-items:center;border-color:rgba(27,27,27,.2);border-radius:.25rem;border-style:solid;border-width:1px;color:#005ea2;display:inline-flex;justify-content:center;width:100%}a{display:inline-flex;justify-content:center;text-decoration:underline;cursor:pointer;padding:.5rem;color:inherit}:host([active]){background-color:#1b1b1b;border-color:transparent;color:#fff}`,
-                html `<a><slot></slot></a>`,
+                html `<j-bind props="href"><a><slot></slot></a></j-bind>`,
             ],
         })];
     let _classDescriptor;
@@ -22,7 +24,7 @@ let USAPaginationNoElement = (() => {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _href_decorators = [attr()];
+            _href_decorators = [attr(), bind()];
             _active_decorators = [attr()];
             __esDecorate(this, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
             __esDecorate(this, null, _active_decorators, { kind: "accessor", name: "active", static: false, private: false, access: { has: obj => "active" in obj, get: obj => obj.active, set: (obj, value) => { obj.active = value; } }, metadata: _metadata }, _active_initializers, _active_extraInitializers);
@@ -31,15 +33,15 @@ let USAPaginationNoElement = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        #href_accessor_storage = __runInitializers(this, _href_initializers, "#");
+        #href_accessor_storage = __runInitializers(this, _href_initializers, '#');
         get href() { return this.#href_accessor_storage; }
         set href(value) { this.#href_accessor_storage = value; }
         #active_accessor_storage = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _active_initializers, false));
         get active() { return this.#active_accessor_storage; }
         set active(value) { this.#active_accessor_storage = value; }
-        #a = (__runInitializers(this, _active_extraInitializers), query("a"));
-        attributeChangedCallback() {
-            this.#a({ href: this.href });
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _active_extraInitializers);
         }
     };
     return USAPaginationNoElement = _classThis;

package/target/lib/pagination/pagination-no/pagination-no.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination-no.element.js","sourceRoot":"","sources":["../../../../src/lib/pagination/pagination-no/pagination-no.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IA8CpD,sBAAsB;4BAtClC,OAAO,CAAC;YACP,OAAO,EAAE,mBAAmB;YAC5B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;gBACD,IAAI,CAAA;;;;KAIH;aACF;SACF,CAAC;;;;sBAC0C,WAAW;;;;;;;sCAAnB,SAAQ,WAAW;;;;gCACpD,IAAI,EAAE;kCAGN,IAAI,EAAE;YAFP,iKAAS,IAAI,6BAAJ,IAAI,mFAAO;YAGpB,uKAAS,MAAM,6BAAN,MAAM,uFAAS;YAL1B,6KAYC;;;YAZY,uDAAsB;;QAEjC,qEAAgB,GAAG,EAAC;QAApB,IAAS,IAAI,0CAAO;QAApB,IAAS,IAAI,gDAAO;QAGpB,4HAAkB,KAAK,GAAC;QAAxB,IAAS,MAAM,4CAAS;QAAxB,IAAS,MAAM,kDAAS;QAExB,EAAE,wDAAG,KAAK,CAAC,GAAG,CAAC,EAAC;QAEhB,wBAAwB;YACtB,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC/B,CAAC;;;;SAXU,sBAAsB"}
+{"version":3,"file":"pagination-no.element.js","sourceRoot":"","sources":["../../../../src/lib/pagination/pagination-no/pagination-no.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IAgD5B,sBAAsB;4BAxClC,OAAO,CAAC;YACP,OAAO,EAAE,mBAAmB;YAC5B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;gBACD,IAAI,CAAA;;;;;;KAMH;aACF;SACF,CAAC;;;;sBAC0C,WAAW;;;;;;;sCAAnB,SAAQ,WAAW;;;;gCACpD,IAAI,EAAE,EACN,IAAI,EAAE;kCAGN,IAAI,EAAE;YAFP,iKAAS,IAAI,6BAAJ,IAAI,mFAAO;YAGpB,uKAAS,MAAM,6BAAN,MAAM,uFAAS;YAN1B,6KAOC;;;YAPY,uDAAsB;;QAGjC,qEAAgB,GAAG,EAAC;QAApB,IAAS,IAAI,0CAAO;QAApB,IAAS,IAAI,gDAAO;QAGpB,4HAAkB,KAAK,GAAC;QAAxB,IAAS,MAAM,4CAAS;QAAxB,IAAS,MAAM,kDAAS;;;;;;;;SANb,sBAAsB"}

package/target/lib/pagination/pagination.element.test.d.ts

@@ -0,0 +1 @@
+import './pagination.element.js';

package/target/lib/pagination/pagination.element.test.js

@@ -0,0 +1,9 @@
+import './pagination.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+describe('usa-pagination', () => {
+    it('should be accessible', async () => {
+        const pagination = await fixture(html `<usa-pagination>Hello World</usa-pagination>`);
+        return assert.isAccessible(pagination);
+    });
+});
+//# sourceMappingURL=pagination.element.test.js.map

package/target/lib/pagination/pagination.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.element.test.js","sourceRoot":"","sources":["../../../src/lib/pagination/pagination.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,UAAU,GAAG,MAAM,OAAO,CAAuB,IAAI,CAAA,gDAAgD,CAAC,CAAC;QAE7G,OAAO,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/process-list/process-list.element.test.d.ts

@@ -0,0 +1,2 @@
+import './process-list.element.js';
+import './process-list-item/process-list-item.element.js';

package/target/lib/process-list/{process-list.test.js → process-list.element.test.js}

@@ -1,10 +1,10 @@
-import "./process-list.element.js";
-import "./process-list-item/process-list-item.element.js";
-import { assert, fixture, html } from "@open-wc/testing";
-describe("usa-process-list", () => {
-    it("should be accessible", async () => {
+import './process-list.element.js';
+import './process-list-item/process-list-item.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+describe('usa-process-list', () => {
+    it('should be accessible', async () => {
         const processList = await fixture(html `<usa-process-list><usa-process-list-item><h4 slot="title">Start a process</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</li><li>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</li><li>Aliquam erat volutpat. Sed quis velit.</li></ul></usa-process-list-item><usa-process-list-item><h4 slot="title">Proceed to the second step</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</usa-process-list-item><usa-process-list-item><h4 slot="title">Complete the step-by-step process</h4>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</usa-process-list-item></usa-process-list>`);
         return assert.isAccessible(processList);
     });
 });
-//# sourceMappingURL=process-list.test.js.map
+//# sourceMappingURL=process-list.element.test.js.map

package/target/lib/process-list/process-list.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-list.element.test.js","sourceRoot":"","sources":["../../../src/lib/process-list/process-list.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,kDAAkD,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,WAAW,GAAG,MAAM,OAAO,CAAwB,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkC5D,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/radio/radio-option/radio-option.element.test.d.ts

@@ -0,0 +1,2 @@
+import '../radio.element.js';
+import './radio-option.element.js';

package/target/lib/radio/radio-option/radio-option.element.test.js

@@ -0,0 +1,11 @@
+import '../radio.element.js';
+import './radio-option.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+describe('usa-radio-option', () => {
+    it('should map value to slot', async () => {
+        const radio = await fixture(html `<usa-radio><usa-radio-option value="first">First</usa-radio-option></usa-radio>`);
+        const option = radio.querySelectorAll('usa-radio-option');
+        assert.equal(option[0].value, option[0].slot);
+    });
+});
+//# sourceMappingURL=radio-option.element.test.js.map

package/target/lib/radio/radio-option/radio-option.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-option.element.test.js","sourceRoot":"","sources":["../../../../src/lib/radio/radio-option/radio-option.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAwB,IAAI,CAAA;;;;KAItD,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QAE1D,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/radio/radio.element.test.d.ts

@@ -0,0 +1,2 @@
+import './radio.element.js';
+import './radio-option/radio-option.element.js';

package/target/lib/radio/{radio.test.js → radio.element.test.js}

@@ -1,45 +1,36 @@
-import "./radio.element.js";
-import "./radio-option/radio-option.element.js";
-import { assert, fixture, html } from "@open-wc/testing";
-describe("usa-radio", () => {
-    it("should be accessible", async () => {
+import './radio.element.js';
+import './radio-option/radio-option.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+describe('usa-radio', () => {
+    it('should be accessible', async () => {
         const radio = await fixture(html `<usa-radio name="historical-figures" value="frederick-douglass" tiled><usa-radio-option value="sojourner-truth">Sojourner Truth</usa-radio-option><usa-radio-option value="frederick-douglass">Frederick Douglass</usa-radio-option><usa-radio-option value="booker-t-washington">Booker T. Washington</usa-radio-option><usa-radio-option value="george-washington-carver">George Washington Carver</usa-radio-option></usa-radio>`);
         return assert.isAccessible(radio);
     });
-    it("should create local inputs for each option", async () => {
+    it('should create local inputs for each option', async () => {
         const form = await fixture(html `<form><usa-radio name="historical-figures" value="frederick-douglass"><usa-radio-option value="sojourner-truth">Sojourner Truth</usa-radio-option><usa-radio-option value="frederick-douglass">Frederick Douglass</usa-radio-option><usa-radio-option value="booker-t-washington">Booker T. Washington</usa-radio-option><usa-radio-option value="george-washington-carver">George Washington Carver</usa-radio-option></usa-radio></form>`);
-        const nativeInputs = form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
-            [];
-        assert.deepEqual(Array.from(nativeInputs).map((input) => input.value), [
-            "sojourner-truth",
-            "frederick-douglass",
-            "booker-t-washington",
-            "george-washington-carver",
-        ]);
+        const nativeInputs = form.querySelector('usa-radio')?.shadowRoot?.querySelectorAll('input') ?? [];
+        assert.deepEqual(Array.from(nativeInputs).map((input) => input.value), ['sojourner-truth', 'frederick-douglass', 'booker-t-washington', 'george-washington-carver']);
     });
-    it("should remove inputs when options are removed", async () => {
+    it('should remove inputs when options are removed', async () => {
         const form = await fixture(html `<form><usa-radio name="historical-figures" value="frederick-douglass"><usa-radio-option value="sojourner-truth">Sojourner Truth</usa-radio-option><usa-radio-option value="frederick-douglass">Frederick Douglass</usa-radio-option><usa-radio-option value="booker-t-washington">Booker T. Washington</usa-radio-option><usa-radio-option value="george-washington-carver">George Washington Carver</usa-radio-option></usa-radio></form>`);
-        const options = form.querySelectorAll("usa-radio-option");
+        const options = form.querySelectorAll('usa-radio-option');
         options[2].remove();
-        const nativeInputs = form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
-            [];
-        assert.deepEqual(Array.from(nativeInputs).map((input) => input.value), ["sojourner-truth", "frederick-douglass", "george-washington-carver"]);
+        const nativeInputs = form.querySelector('usa-radio')?.shadowRoot?.querySelectorAll('input') ?? [];
+        assert.deepEqual(Array.from(nativeInputs).map((input) => input.value), ['sojourner-truth', 'frederick-douglass', 'george-washington-carver']);
     });
-    it("should submit form with default values", async () => {
+    it('should submit form with default values', async () => {
         const form = await fixture(html `<form><usa-radio name="historical-figures" value="frederick-douglass"><usa-radio-option value="sojourner-truth">Sojourner Truth</usa-radio-option><usa-radio-option value="frederick-douglass">Frederick Douglass</usa-radio-option><usa-radio-option value="booker-t-washington">Booker T. Washington</usa-radio-option><usa-radio-option value="george-washington-carver">George Washington Carver</usa-radio-option></usa-radio></form>`);
         const value = new FormData(form);
-        const nativeInputs = form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
-            [];
+        const nativeInputs = form.querySelector('usa-radio')?.shadowRoot?.querySelectorAll('input') ?? [];
         assert.equal(nativeInputs[1].checked, true);
-        assert.equal(value.get("historical-figures"), "frederick-douglass");
+        assert.equal(value.get('historical-figures'), 'frederick-douglass');
     });
-    it("should submit form with changed value", async () => {
+    it('should submit form with changed value', async () => {
         const form = await fixture(html `<form><usa-radio name="historical-figures" value="frederick-douglass"><usa-radio-option value="sojourner-truth">Sojourner Truth</usa-radio-option><usa-radio-option value="frederick-douglass">Frederick Douglass</usa-radio-option><usa-radio-option value="booker-t-washington">Booker T. Washington</usa-radio-option><usa-radio-option value="george-washington-carver">George Washington Carver</usa-radio-option></usa-radio></form>`);
-        const nativeInputs = form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
-            [];
+        const nativeInputs = form.querySelector('usa-radio')?.shadowRoot?.querySelectorAll('input') ?? [];
         nativeInputs[3].click();
         const value = new FormData(form);
-        assert.equal(value.get("historical-figures"), "george-washington-carver");
+        assert.equal(value.get('historical-figures'), 'george-washington-carver');
     });
 });
-//# sourceMappingURL=radio.test.js.map
+//# sourceMappingURL=radio.element.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio.element.test.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.element.test.ts"],"names":[],"mappings":"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"}

package/target/lib/range-slider/range-slider.element.d.ts

@@ -1,6 +1,7 @@
+import '@joist/templating/define.js';
 declare global {
     interface HTMLElementTagNameMap {
-        "usa-range-slider": USARangeSliderElement;
+        'usa-range-slider': USARangeSliderElement;
     }
 }
 export declare class USARangeSliderElement extends HTMLElement {
@@ -11,6 +12,7 @@ export declare class USARangeSliderElement extends HTMLElement {
     accessor min: string;
     accessor max: string;
     accessor step: string;
-    attributeChangedCallback(): void;
+    connectedCallback(): void;
+    onChange(): void;
     onInputChange(): void;
 }

package/target/lib/range-slider/range-slider.element.js

@@ -1,11 +1,14 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { attr, css, element, html, listen, query } from "@joist/element";
+import '@joist/templating/define.js';
+import { attr, css, element, html, listen, query } from '@joist/element';
+import { effect } from '@joist/observable';
+import { bind } from '@joist/templating';
 let USARangeSliderElement = (() => {
     let _classDecorators = [element({
-            tagName: "usa-range-slider",
+            tagName: 'usa-range-slider',
             shadowDom: [
                 css `:host{display:flex;flex-direction:column;max-width:30rem}input{height:2.5rem;-webkit-appearance:none;width:100%;background:0 0;border-radius:0;color:#1b1b1b;display:block;margin-top:.5rem}input:focus{outline:.25rem solid #2491ff;outline-offset:0}input::-webkit-slider-thumb{height:1.25rem;border-radius:99rem;width:1.25rem;background:#f0f0f0;border:0;box-shadow:0 0 0 2px #757575;cursor:pointer;-webkit-appearance:none;appearance:none;margin-top:-.19rem}input::-webkit-slider-runnable-track{background-color:#f0f0f0;border-radius:99rem;border:1px solid #757575;cursor:pointer;height:1rem;width:100%}`,
-                html `<label part="label"><slot></slot></label> <input type="range" part="input">`,
+                html `<j-bind attrs="for:name"><label part="label"><slot></slot></label></j-bind><j-bind props="id:name,name,value,min,max,step"><input type="range" part="input"></j-bind>`,
             ],
         })];
     let _classDescriptor;
@@ -28,64 +31,66 @@ let USARangeSliderElement = (() => {
     let _step_decorators;
     let _step_initializers = [];
     let _step_extraInitializers = [];
+    let _onChange_decorators;
     let _onInputChange_decorators;
     var USARangeSliderElement = class extends _classSuper {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _name_decorators = [attr()];
-            _value_decorators = [attr()];
-            _min_decorators = [attr()];
-            _max_decorators = [attr()];
-            _step_decorators = [attr()];
-            _onInputChange_decorators = [listen("change")];
+            _name_decorators = [attr(), bind()];
+            _value_decorators = [attr(), bind()];
+            _min_decorators = [attr(), bind()];
+            _max_decorators = [attr(), bind()];
+            _step_decorators = [attr(), bind()];
+            _onChange_decorators = [effect()];
+            _onInputChange_decorators = [listen('change')];
             __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, _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(this, null, _min_decorators, { kind: "accessor", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
             __esDecorate(this, null, _max_decorators, { kind: "accessor", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
             __esDecorate(this, null, _step_decorators, { kind: "accessor", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
+            __esDecorate(this, 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(this, null, _onInputChange_decorators, { kind: "method", name: "onInputChange", static: false, private: false, access: { has: obj => "onInputChange" in obj, get: obj => obj.onInputChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             USARangeSliderElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static formAssociated = true;
-        #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; }
-        #value_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, "0"));
+        #value_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, '0'));
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
-        #min_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _min_initializers, "0"));
+        #min_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _min_initializers, '0'));
         get min() { return this.#min_accessor_storage; }
         set min(value) { this.#min_accessor_storage = value; }
-        #max_accessor_storage = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, "100"));
+        #max_accessor_storage = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, '100'));
         get max() { return this.#max_accessor_storage; }
         set max(value) { this.#max_accessor_storage = value; }
-        #step_accessor_storage = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _step_initializers, "1"));
+        #step_accessor_storage = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _step_initializers, '1'));
         get step() { return this.#step_accessor_storage; }
         set step(value) { this.#step_accessor_storage = value; }
-        #label = (__runInitializers(this, _step_extraInitializers), query("label"));
-        #input = query("input");
+        #input = (__runInitializers(this, _step_extraInitializers), query('input'));
         #internals = this.attachInternals();
-        attributeChangedCallback() {
-            this.#label({
-                htmlFor: this.name,
-            });
-            this.#input({
-                name: this.name,
-                value: this.value,
-                min: this.min,
-                max: this.max,
-                step: this.step,
-                id: this.name,
-            });
-            this.#internals.setFormValue(this.value);
+        connectedCallback() {
+            this.#syncFormState();
+        }
+        onChange() {
+            this.#syncFormState();
         }
         onInputChange() {
             const input = this.#input();
             this.value = input.value;
         }
+        #syncFormState() {
+            const input = this.#input();
+            this.#internals.setValidity({});
+            this.#internals.setFormValue(this.value);
+            if (input.validationMessage) {
+                this.#internals.setValidity({ customError: true }, input.validationMessage, input);
+            }
+        }
         static {
             __runInitializers(_classThis, _classExtraInitializers);
         }

package/target/lib/range-slider/range-slider.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-slider.element.js","sourceRoot":"","sources":["../../../src/lib/range-slider/range-slider.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IAiE5D,qBAAqB;4BAzDjC,OAAO,CAAC;YACP,OAAO,EAAE,kBAAkB;YAC3B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CF;gBACD,IAAI,CAAA;;;;;;KAMH;aACF;SACF,CAAC;;;;sBACyC,WAAW;;;;;;;;;;;;;;;;;;qCAAnB,SAAQ,WAAW;;;;gCAGnD,IAAI,EAAE;iCAGN,IAAI,EAAE;+BAGN,IAAI,EAAE;+BAGN,IAAI,EAAE;gCAGN,IAAI,EAAE;yCAwBN,MAAM,CAAC,QAAQ,CAAC;YAnCjB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,oKAAS,KAAK,6BAAL,KAAK,qFAAO;YAGrB,8JAAS,GAAG,6BAAH,GAAG,iFAAO;YAGnB,8JAAS,GAAG,6BAAH,GAAG,iFAAS;YAGrB,iKAAS,IAAI,6BAAJ,IAAI,mFAAO;YAwBpB,0LAAA,aAAa,6DAIZ;YA5CH,6KA6CC;;;;QA5CC,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;QAG7B,0BAJW,mDAAqB,8CAIhB,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,0HAAiB,GAAG,GAAC;QAArB,IAAS,KAAK,2CAAO;QAArB,IAAS,KAAK,iDAAO;QAGrB,uHAAe,GAAG,GAAC;QAAnB,IAAS,GAAG,yCAAO;QAAnB,IAAS,GAAG,+CAAO;QAGnB,qHAAe,KAAK,GAAC;QAArB,IAAS,GAAG,yCAAS;QAArB,IAAS,GAAG,+CAAS;QAGrB,uHAAgB,GAAG,GAAC;QAApB,IAAS,IAAI,0CAAO;QAApB,IAAS,IAAI,gDAAO;QAEpB,MAAM,sDAAG,KAAK,CAAC,OAAO,CAAC,EAAC;QACxB,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;QACxB,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAEpC,wBAAwB;YACtB,IAAI,CAAC,MAAM,CAAC;gBACV,OAAO,EAAE,IAAI,CAAC,IAAI;aACnB,CAAC,CAAC;YAEH,IAAI,CAAC,MAAM,CAAC;gBACV,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,GAAG,EAAE,IAAI,CAAC,GAAG;gBACb,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,EAAE,EAAE,IAAI,CAAC,IAAI;aACd,CAAC,CAAC;YAEH,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3C,CAAC;QAGD,aAAa;YACX,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QAC3B,CAAC;;YA5CU,uDAAqB;;;;;SAArB,qBAAqB"}
+{"version":3,"file":"range-slider.element.js","sourceRoot":"","sources":["../../../src/lib/range-slider/range-slider.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;IAqE5B,qBAAqB;4BA7DjC,OAAO,CAAC;YACP,OAAO,EAAE,kBAAkB;YAC3B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CF;gBACD,IAAI,CAAA;;;;;;;;;;KAUH;aACF;SACF,CAAC;;;;sBACyC,WAAW;;;;;;;;;;;;;;;;;;;qCAAnB,SAAQ,WAAW;;;;gCAGnD,IAAI,EAAE,EACN,IAAI,EAAE;iCAGN,IAAI,EAAE,EACN,IAAI,EAAE;+BAGN,IAAI,EAAE,EACN,IAAI,EAAE;+BAGN,IAAI,EAAE,EACN,IAAI,EAAE;gCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAUN,MAAM,EAAE;yCAKR,MAAM,CAAC,QAAQ,CAAC;YA9BjB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAInB,oKAAS,KAAK,6BAAL,KAAK,qFAAO;YAIrB,8JAAS,GAAG,6BAAH,GAAG,iFAAO;YAInB,8JAAS,GAAG,6BAAH,GAAG,iFAAS;YAIrB,iKAAS,IAAI,6BAAJ,IAAI,mFAAO;YAUpB,2KAAA,QAAQ,6DAEP;YAGD,0LAAA,aAAa,6DAIZ;YAxCH,6KAoDC;;;;QAnDC,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;QAI7B,0BALW,mDAAqB,8CAKhB,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAInB,0HAAiB,GAAG,GAAC;QAArB,IAAS,KAAK,2CAAO;QAArB,IAAS,KAAK,iDAAO;QAIrB,uHAAe,GAAG,GAAC;QAAnB,IAAS,GAAG,yCAAO;QAAnB,IAAS,GAAG,+CAAO;QAInB,qHAAe,KAAK,GAAC;QAArB,IAAS,GAAG,yCAAS;QAArB,IAAS,GAAG,+CAAS;QAIrB,uHAAgB,GAAG,GAAC;QAApB,IAAS,IAAI,0CAAO;QAApB,IAAS,IAAI,gDAAO;QAEpB,MAAM,sDAAG,KAAK,CAAC,OAAO,CAAC,EAAC;QACxB,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAEpC,iBAAiB;YACf,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAGD,QAAQ;YACN,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAGD,aAAa;YACX,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;QAC3B,CAAC;QAED,cAAc;YACZ,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAChC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEzC,IAAI,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;YACrF,CAAC;QACH,CAAC;;YAnDU,uDAAqB;;;;;SAArB,qBAAqB"}

package/target/lib/range-slider/range-slider.element.test.d.ts

@@ -0,0 +1 @@
+import './range-slider.element.js';