@noctuatech/uswds 0.0.28 → 0.0.29

package/target/lib/button/button.element.js

@@ -0,0 +1,263 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, css, element, html, listen, query, ready } from "@joist/element";
+export const BUTTON_VARIANTS = [
+    "primary",
+    "secondary",
+    "cool",
+    "warm",
+    "outline",
+];
+let USAButtonElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-button",
+            shadowDomOpts: {
+                mode: "open",
+                delegatesFocus: true,
+            },
+            shadowDom: [
+                css `
+      :host {
+        display: contents;
+      }
+
+      .usa-button {
+        box-sizing: border-box;
+        font-size: 1.06rem;
+        line-height: 0.9;
+        color: white;
+        background-color: #005ea2;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        align-items: center;
+        border: 0;
+        border-radius: 0.25rem;
+        cursor: pointer;
+        -moz-column-gap: 0.5rem;
+        column-gap: 0.5rem;
+        display: inline-flex;
+        font-weight: 700;
+        justify-content: center;
+        padding: 0.75rem 1.25rem;
+        text-align: center;
+        text-decoration: none;
+        width: 100%;
+        cursor: pointer;
+      }
+
+      @media all and (min-width: 30em) {
+        .usa-button {
+          width: auto;
+        }
+      }
+
+      .usa-button:visited {
+        color: white;
+      }
+
+      .usa-button:hover {
+        color: white;
+        background-color: #1a4480;
+        border-bottom: 0;
+        text-decoration: none;
+      }
+
+      .usa-button:active {
+        color: white;
+        background-color: #162e51;
+      }
+
+      .usa-button:not([disabled]):focus {
+        outline-offset: 0.25rem;
+      }
+
+      .usa-button:disabled {
+        color: #454545;
+        background-color: #c9c9c9;
+        cursor: not-allowed;
+        opacity: 1;
+      }
+
+      .usa-button:disabled:hover,
+      .usa-button:disabled:active,
+      .usa-button:disabled:focus {
+        color: #454545;
+        background-color: #c9c9c9;
+      }
+
+      .usa-button:focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
+      }
+
+      /** Secondary */
+      :host([variant="secondary"]) .usa-button {
+        color: #fff;
+        background-color: #d83933;
+      }
+
+      :host([variant="secondary"]) .usa-button:hover {
+        background-color: #b50909;
+      }
+
+      :host([variant="secondary"]) .usa-button:active {
+        background-color: #8b0a03;
+      }
+
+      /** cool */
+      :host([variant="cool"]) .usa-button {
+        color: #1b1b1b;
+        background-color: #00bde3;
+      }
+
+      :host([variant="cool"]) .usa-button:hover {
+        background-color: #28a0cb;
+      }
+
+      :host([variant="cool"]) .usa-button:active {
+        color: #fff;
+        background-color: #07648d;
+      }
+
+      /** warm */
+      :host([variant="warm"]) .usa-button {
+        color: #1b1b1b;
+        background-color: #fa9441;
+      }
+
+      :host([variant="warm"]) .usa-button:hover {
+        color: #fff;
+        background-color: #c05600;
+      }
+
+      :host([variant="warm"]) .usa-button:active {
+        color: #fff;
+        background-color: #775540;
+      }
+
+      /** outline */
+      :host([variant="outline"]) .usa-button {
+        background-color: transparent;
+        box-shadow: inset 0 0 0 2px #005ea2;
+        color: #005ea2;
+      }
+
+      :host([variant="outline"]) .usa-button:hover {
+        box-shadow: inset 0 0 0 2px #1a4480;
+        color: #1a4480;
+      }
+
+      :host([variant="outline"]) .usa-button:active {
+        box-shadow: inset 0 0 0 2px #162e51;
+        color: #162e51;
+      }
+    `,
+                html `
+      <button class="usa-button" tabindex="0">
+        <slot></slot>
+      </button>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _onReady_decorators;
+    let _onKeyDown_decorators;
+    let _onInternalClick_decorators;
+    var USAButtonElement = 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()];
+            _disabled_decorators = [attr()];
+            _variant_decorators = [attr()];
+            _value_decorators = [attr()];
+            _onReady_decorators = [ready()];
+            _onKeyDown_decorators = [listen("keydown", () => document.body)];
+            _onInternalClick_decorators = [listen("click")];
+            __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, _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(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_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, _onReady_decorators, { kind: "method", name: "onReady", static: false, private: false, access: { has: obj => "onReady" in obj, get: obj => obj.onReady }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onKeyDown_decorators, { kind: "method", name: "onKeyDown", static: false, private: false, access: { has: obj => "onKeyDown" in obj, get: obj => obj.onKeyDown }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onInternalClick_decorators, { kind: "method", name: "onInternalClick", static: false, private: false, access: { has: obj => "onInternalClick" in obj, get: obj => obj.onInternalClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USAButtonElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static formAssociated = true;
+        #type_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _type_initializers, "button"));
+        get type() { return this.#type_accessor_storage; }
+        set type(value) { this.#type_accessor_storage = value; }
+        #disabled_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        get disabled() { return this.#disabled_accessor_storage; }
+        set disabled(value) { this.#disabled_accessor_storage = value; }
+        #variant_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _variant_initializers, "primary"));
+        get variant() { return this.#variant_accessor_storage; }
+        set variant(value) { this.#variant_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _value_initializers, ""));
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #tabIndex_accessor_storage = (__runInitializers(this, _value_extraInitializers), 0);
+        get tabIndex() { return this.#tabIndex_accessor_storage; }
+        set tabIndex(value) { this.#tabIndex_accessor_storage = value; }
+        #internals = this.attachInternals();
+        #button = query("button");
+        onReady() {
+            const input = this.#button();
+            input.autofocus = this.autofocus;
+        }
+        onKeyDown(e) {
+            if (this.type === "submit") {
+                if (e.key.toUpperCase() === "ENTER") {
+                    this.#handleForm();
+                }
+            }
+        }
+        onInternalClick() {
+            this.#handleForm();
+        }
+        attributeChangedCallback() {
+            const button = this.#button();
+            button.type = this.type;
+            button.disabled = this.disabled;
+        }
+        #handleForm() {
+            const { form } = this.#internals;
+            if (form) {
+                if (this.type === "submit") {
+                    const btn = document.createElement("button");
+                    btn.type = "submit";
+                    form.append(btn);
+                    btn.click();
+                    btn.remove();
+                }
+                else if (this.type === "reset") {
+                    form.reset();
+                }
+            }
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return USAButtonElement = _classThis;
+})();
+export { USAButtonElement };
+//# sourceMappingURL=button.element.js.map

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

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

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

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

package/target/lib/button/button.stories.js

@@ -0,0 +1,22 @@
+import { html } from "lit";
+import { BUTTON_VARIANTS } from "./button.element.js";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-button",
+    tags: ["autodocs"],
+    render(args) {
+        return html `
+      <div style="display: inline-flex; flex-direction: column; gap: 1rem">
+        ${BUTTON_VARIANTS.map((variant, i) => html `<usa-button variant=${variant}>Hello World</usa-button> ${i === BUTTON_VARIANTS.length - 1 ? "" : "\n\n"}`)}
+      </div>
+    `;
+    },
+    argTypes: {},
+    args: {},
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {},
+};
+//# sourceMappingURL=button.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/lib/button/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,eAAe,EAAyB,MAAM,qBAAqB,CAAC;AAE7E,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;UAEL,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,uBAAuB,OAAO,6BAChC,CAAC,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAC1C,EAAE,CACL;;KAEJ,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

package/target/lib/button/button.test.d.ts

@@ -0,0 +1 @@
+import "./button.element.js";

package/target/lib/button/button.test.js

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

package/target/lib/button/button.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.test.js","sourceRoot":"","sources":["../../../src/lib/button/button.test.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAyB,MAAM,qBAAqB,CAAC;AAE7E,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,KAAK,MAAM,OAAO,IAAI,eAAe,EAAE,CAAC;QACtC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;YACpC,MAAM,MAAM,GAAG,MAAM,OAAO,CAAmB,IAAI,CAAA;8BAC3B,OAAO;OAC9B,CAAC,CAAC;YAEH,OAAO,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC,CAAC,CAAC"}

package/target/lib/card/card-body/card-body.element.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-card-body": USACardBodyElement;
+    }
+}
+export declare class USACardBodyElement extends HTMLElement {
+}

package/target/lib/card/card-body/card-body.element.js

@@ -0,0 +1,35 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { css, element, html } from "@joist/element";
+let USACardBodyElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-card-body",
+            shadowDom: [
+                css `
+      :host {
+        display: flex;
+        flex: 1 1 0%;
+        padding: 0.5rem 1.5rem;
+        flex-basis: auto;
+      }
+    `,
+                html `<slot></slot>`,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var USACardBodyElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            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);
+            USACardBodyElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return USACardBodyElement = _classThis;
+})();
+export { USACardBodyElement };
+//# sourceMappingURL=card-body.element.js.map

package/target/lib/card/card-body/card-body.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-body.element.js","sourceRoot":"","sources":["../../../../src/lib/card/card-body/card-body.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAsBvC,kBAAkB;4BAd9B,OAAO,CAAC;YACP,OAAO,EAAE,eAAe;YACxB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;KAOF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACsC,WAAW;kCAAnB,SAAQ,WAAW;;;;YAAnD,6KAAsD;;;YAAzC,uDAAkB;;;;;SAAlB,kBAAkB"}

package/target/lib/card/card-footer/card-footer.element.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-card-footer": USACardFooterElement;
+    }
+}
+export declare class USACardFooterElement extends HTMLElement {
+}

package/target/lib/card/card-footer/card-footer.element.js

@@ -0,0 +1,33 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { css, element, html } from "@joist/element";
+let USACardFooterElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-card-footer",
+            shadowDom: [
+                css `
+      :host {
+        display: flex;
+        padding: 0.5rem 1.5rem 1.5rem;
+      }
+    `,
+                html `<slot></slot>`,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var USACardFooterElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            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);
+            USACardFooterElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return USACardFooterElement = _classThis;
+})();
+export { USACardFooterElement };
+//# sourceMappingURL=card-footer.element.js.map

package/target/lib/card/card-footer/card-footer.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-footer.element.js","sourceRoot":"","sources":["../../../../src/lib/card/card-footer/card-footer.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAoBvC,oBAAoB;4BAZhC,OAAO,CAAC;YACP,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;KAKF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACwC,WAAW;oCAAnB,SAAQ,WAAW;;;;YAArD,6KAAwD;;;YAA3C,uDAAoB;;;;;SAApB,oBAAoB"}

package/target/lib/card/card-group/card-group.element.d.ts

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

package/target/lib/card/card-group/card-group.element.js

@@ -0,0 +1,51 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, css, element, html } from "@joist/element";
+let USACardGroupElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-card-group",
+            shadowDom: [
+                css `
+      :host {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 1rem;
+        margin-bottom: 1rem;
+      }
+
+      :host([variant="flag"]) {
+        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
+      }
+    `,
+                html `<slot></slot>`,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _role_decorators;
+    let _role_initializers = [];
+    let _role_extraInitializers = [];
+    var USACardGroupElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _role_decorators = [attr()];
+            __esDecorate(this, null, _role_decorators, { kind: "accessor", name: "role", static: false, private: false, access: { has: obj => "role" in obj, get: obj => obj.role, set: (obj, value) => { obj.role = value; } }, metadata: _metadata }, _role_initializers, _role_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USACardGroupElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #role_accessor_storage = __runInitializers(this, _role_initializers, "list");
+        get role() { return this.#role_accessor_storage; }
+        set role(value) { this.#role_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _role_extraInitializers);
+        }
+    };
+    return USACardGroupElement = _classThis;
+})();
+export { USACardGroupElement };
+//# sourceMappingURL=card-group.element.js.map

package/target/lib/card/card-group/card-group.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-group.element.js","sourceRoot":"","sources":["../../../../src/lib/card/card-group/card-group.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IA0B7C,mBAAmB;4BAlB/B,OAAO,CAAC;YACP,OAAO,EAAE,gBAAgB;YACzB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;KAWF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACuC,WAAW;;;;mCAAnB,SAAQ,WAAW;;;;gCACjD,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAU;YAFzB,6KAGC;;;YAHY,uDAAmB;;QAE9B,qEAAgB,MAAM,EAAC;QAAvB,IAAS,IAAI,0CAAU;QAAvB,IAAS,IAAI,gDAAU;;;;;;;;SAFZ,mBAAmB"}

package/target/lib/card/card-header/card-header.element.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-card-header": USACardHeaderElement;
+    }
+}
+export declare class USACardHeaderElement extends HTMLElement {
+}

package/target/lib/card/card-header/card-header.element.js

@@ -0,0 +1,43 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { css, element, html } from "@joist/element";
+let USACardHeaderElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-card-header",
+            shadowDom: [
+                css `
+      :host {
+        font-family:
+          Merriweather Web,
+          Georgia,
+          Cambria,
+          Times New Roman,
+          Times,
+          serif !important;
+        display: flex;
+        padding: 1.5rem 1.5rem 0.5rem;
+        font-size: 1.22rem;
+        font-weight: bold;
+        line-height: 1.2;
+      }
+    `,
+                html `<slot></slot>`,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var USACardHeaderElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            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);
+            USACardHeaderElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return USACardHeaderElement = _classThis;
+})();
+export { USACardHeaderElement };
+//# sourceMappingURL=card-header.element.js.map

package/target/lib/card/card-header/card-header.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-header.element.js","sourceRoot":"","sources":["../../../../src/lib/card/card-header/card-header.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IA8BvC,oBAAoB;4BAtBhC,OAAO,CAAC;YACP,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;KAeF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACwC,WAAW;oCAAnB,SAAQ,WAAW;;;;YAArD,6KAAwD;;;YAA3C,uDAAoB;;;;;SAApB,oBAAoB"}

package/target/lib/card/card-media/card-media.element.d.ts

@@ -0,0 +1,8 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-card-media": USACardImgElement;
+    }
+}
+export declare class USACardImgElement extends HTMLElement {
+    accessor varint: "standard" | "inset";
+}

package/target/lib/card/card-media/card-media.element.js

@@ -0,0 +1,71 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, css, element, html } from "@joist/element";
+let USACardImgElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-card-media",
+            shadowDom: [
+                css `
+      :host {
+        display: block;
+        border-top-left-radius: calc(0.25rem - 2px);
+        border-top-right-radius: calc(0.25rem - 2px);
+        background-color: #f0f0f0;
+        position: relative;
+        overflow: hidden;
+        box-sizing: border-box;
+      }
+
+      :host([variant="inset"]) {
+        background-color: #fff;
+        padding-top: 1.5rem;
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+      }
+
+      ::slotted(img) {
+        display: block;
+        height: 100%;
+        width: 100%;
+        -o-object-fit: cover;
+        object-fit: cover;
+      }
+
+      :host(:not(:first-child)) {
+        margin-top: 0.5rem;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    `,
+                html ` <slot></slot> `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _varint_decorators;
+    let _varint_initializers = [];
+    let _varint_extraInitializers = [];
+    var USACardImgElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _varint_decorators = [attr()];
+            __esDecorate(this, null, _varint_decorators, { kind: "accessor", name: "varint", static: false, private: false, access: { has: obj => "varint" in obj, get: obj => obj.varint, set: (obj, value) => { obj.varint = value; } }, metadata: _metadata }, _varint_initializers, _varint_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USACardImgElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #varint_accessor_storage = __runInitializers(this, _varint_initializers, "standard");
+        get varint() { return this.#varint_accessor_storage; }
+        set varint(value) { this.#varint_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _varint_extraInitializers);
+        }
+    };
+    return USACardImgElement = _classThis;
+})();
+export { USACardImgElement };
+//# sourceMappingURL=card-media.element.js.map

package/target/lib/card/card-media/card-media.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-media.element.js","sourceRoot":"","sources":["../../../../src/lib/card/card-media/card-media.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IA8C7C,iBAAiB;4BAtC7B,OAAO,CAAC;YACP,OAAO,EAAE,gBAAgB;YACzB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;gBACD,IAAI,CAAA,iBAAiB;aACtB;SACF,CAAC;;;;sBACqC,WAAW;;;;iCAAnB,SAAQ,WAAW;;;;kCAC/C,IAAI,EAAE;YACP,uKAAS,MAAM,6BAAN,MAAM,uFAAoC;YAFrD,6KAGC;;;YAHY,uDAAiB;;QAE5B,yEAAwC,UAAU,EAAC;QAAnD,IAAS,MAAM,4CAAoC;QAAnD,IAAS,MAAM,kDAAoC;;;;;;;;SAFxC,iBAAiB"}

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

@@ -0,0 +1,9 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-card": USACardElement;
+    }
+}
+export declare class USACardElement extends HTMLElement {
+    accessor role: string;
+    accessor variant: "default" | "flag";
+}