@noctuatech/uswds 0.0.34 → 0.0.36

package/src/lib/radio/radio.element.ts

@@ -61,6 +61,23 @@ declare global {
           inset 0 0 0 2px #fff;
       }
 
+      label:has(input:checked:is(:disabled))::before {
+        background-color: #757575;
+        box-shadow:
+          0 0 0 2px #757575,
+          inset 0 0 0 2px #fff;
+      }
+
+      label:has(input:disabled) {
+        cursor: not-allowed;
+        color: #757575 !important;
+      }
+
+      label:has(input:disabled)::before {
+        background-color: #fff;
+        box-shadow: 0 0 0 2px #757575;
+      }
+      
       label:has(input:focus)::before {
         outline: 0.25rem solid var(--usa-radio-focus-color);
         outline-offset: 0.25rem;
@@ -83,6 +100,11 @@ declare global {
         border-color: var(--usa-radio-active-color);
       }
 
+      :host([tiled]) label:has(input:checked:is(:disabled)) {
+        background-color: #fff;
+        border-color: #757575;
+      }
+
       slot {
         display: flex;
       }
@@ -112,15 +134,15 @@ export class USARadioElement extends HTMLElement implements RadioContainer {
   accessor tiled = false;
 
   #internals = this.attachInternals();
-  #legend = query("#legend");
-
-  connectedCallback() {
-    this.#syncFormState();
-  }
+  #firstInput: HTMLInputElement | null = null;
 
   addRadioOption(el: HTMLElement) {
     this.shadowRoot?.append(el);
 
+    if (this.#firstInput === null) {
+      this.#firstInput = el.querySelector("input");
+    }
+
     this.#syncFormState();
   }
 
@@ -139,13 +161,11 @@ export class USARadioElement extends HTMLElement implements RadioContainer {
     this.#internals.setFormValue(this.value);
     this.#internals.setValidity({});
 
-    if (this.required && !this.value) {
-      const input = this.shadowRoot?.querySelector("input");
-
+    if (this.#firstInput?.validationMessage) {
       this.#internals.setValidity(
-        { valueMissing: true },
-        "Please select an option if you want to proceed",
-        input ?? this.#legend(),
+        { customError: true },
+        this.#firstInput.validationMessage,
+        this.#firstInput,
       );
     }
   }

package/src/lib/radio/radio.stories.ts

@@ -23,17 +23,14 @@ const meta = {
 
         <usa-radio-option value="frederick-douglass">
           Frederick Douglass
-          ${when(
-            args.description,
-            () => html`<usa-description>${args.description}</usa-description>`,
-          )}
+          <usa-description>This is optional text that can be used to describe the label in more detail.</usa-description>
         </usa-radio-option>
 
         <usa-radio-option value="booker-t-washington">
           Booker T. Washington
         </usa-radio-option>
 
-        <usa-radio-option value="george-washington-carver">
+        <usa-radio-option value="george-washington-carver" disabled>
           George Washington Carver
         </usa-radio-option>
       </usa-radio>
@@ -42,8 +39,6 @@ const meta = {
   argTypes: {},
   args: {
     tiled: true,
-    description:
-      "This is optional text that can be used to describe the label in more detail.",
   },
 } satisfies Meta<USARadioElement & { description: string }>;
 

package/src/lib/select/select.element.ts

@@ -83,13 +83,21 @@ export class USASelectElement extends HTMLElement implements SelectContainer {
   #internals = this.attachInternals();
 
   connectedCallback() {
-    this.#select({ value: this.value, name: this.name });
+    this.#select({
+      value: this.value,
+      name: this.name,
+      required: this.required,
+    });
 
     this.#syncFormState();
   }
 
   attributeChangedCallback() {
-    this.#select({ value: this.value, name: this.name });
+    this.#select({
+      value: this.value,
+      name: this.name,
+      required: this.required,
+    });
 
     this.#syncFormState();
   }
@@ -109,14 +117,16 @@ export class USASelectElement extends HTMLElement implements SelectContainer {
   }
 
   #syncFormState() {
+    const select = this.#select();
+
     this.#internals.setFormValue(this.value);
     this.#internals.setValidity({});
 
-    if (this.required && !this.value) {
+    if (select.validationMessage) {
       this.#internals.setValidity(
-        { valueMissing: true },
-        "Please select an option",
-        this.#select(),
+        { customError: true },
+        select.validationMessage,
+        select,
       );
     }
   }

package/src/lib/tag/tag.element.ts

@@ -7,8 +7,10 @@ declare global {
 }
 
 export const TAG_VARIANTS = ["default", "big"] as const;
+export const TAG_TYPES = ["new", "default"] as const;
 
 export type TagVariant = (typeof TAG_VARIANTS)[number];
+export type TagType = (typeof TAG_TYPES)[number];
 
 @element({
   tagName: "usa-tag",
@@ -16,9 +18,9 @@ export type TagVariant = (typeof TAG_VARIANTS)[number];
     css`
       :host {
         font-size: 0.93rem;
-        color: #fff;
+        color: #1b1b1b;
         text-transform: uppercase;
-        background-color: #5c5c5c;
+        background-color: #e6e6e6;
         border-radius: 2px;
         margin-right: 0.25rem;
         padding: 1px 0.5rem;
@@ -29,6 +31,11 @@ export type TagVariant = (typeof TAG_VARIANTS)[number];
         padding-right: 0.5rem;
         font-size: 1.06rem;
       }
+
+      :host([type="new"]) {
+        background-color: #c05600;
+        color: #fff;
+      }
     `,
     html`<slot></slot>`,
   ],
@@ -36,4 +43,7 @@ export type TagVariant = (typeof TAG_VARIANTS)[number];
 export class USATagElement extends HTMLElement {
   @attr()
   accessor variant: TagVariant = "default";
+
+  @attr()
+  accessor type: TagType = "default";
 }

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

@@ -87,8 +87,16 @@ export class USATextareaElement extends HTMLElement {
 
   @ready()
   onReady() {
-    const input = this.#input();
-    input.autofocus = this.autofocus;
+    this.#input({ autofocus: this.autofocus });
+  }
+
+  attributeChangedCallback() {
+    this.#input({
+      name: this.name,
+      placeholder: this.placeholder,
+      autocomplete: this.autocomplete,
+      required: this.required,
+    });
   }
 
   connectedCallback() {
@@ -107,21 +115,18 @@ export class USATextareaElement extends HTMLElement {
     this.value = this.#input().value;
   }
 
-  attributeChangedCallback() {
-    const { name, placeholder, autocomplete } = this;
-
-    this.#input({ name, placeholder, autocomplete });
-  }
-
   #syncFormState() {
     const input = this.#input();
 
     this.#internals.setFormValue(input.value);
-
-    if (this.required && !input.value) {
-      this.#internals.setValidity({ valueMissing: true }, "Required", input);
-    } else {
-      this.#internals.setValidity({});
+    this.#internals.setValidity({});
+
+    if (input.validationMessage) {
+      this.#internals.setValidity(
+        { customError: true },
+        input.validationMessage,
+        input,
+      );
     }
   }
 }

package/src/lib.ts

@@ -32,3 +32,4 @@ export { USACardGroupElement } from "./lib/card/card-group/card-group.element.js
 export { USATextareaElement } from "./lib/textarea/textarea.element.js";
 export { USACollectionElement } from "./lib/collection/collection.element.js";
 export { USACollectionItemElement } from "./lib/collection/collection-item/collection-item.element.js";
+export { USACheckboxGroupElement } from "./lib/checkbox/checkbox-group/checkbox-group.element.js";

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

@@ -3,7 +3,7 @@ import type { USAAccordionElement } from "./accordion.element.js";
 declare const meta: {
     title: string;
     tags: string[];
-    render(args: USAAccordionElement): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     argTypes: {};
     args: {};
 };

package/target/lib/accordion/accordion.stories.js

@@ -3,7 +3,7 @@ import { html } from "lit";
 const meta = {
     title: "usa-accordion",
     tags: ["autodocs"],
-    render(args) {
+    render() {
         return html `
       <usa-accordion id="first" name="ammendment">
         <h4 slot="heading">First Ammendment</h4>

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

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

@@ -8,6 +8,7 @@ const meta = {
         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"}`)}
+        <usa-button disabled>Disabled</usa-button>
       </div>
     `;
     },

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

@@ -1 +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"}
+{"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;;;KAGJ,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/card/card.test.js

@@ -11,7 +11,7 @@ describe("usa-card", () => {
       <usa-card-group>
         <usa-card>
           <usa-card-media>
-            <img src="/img/built-to-grow--alt.jpg" alt="A placeholder image" />
+            <img alt="A placeholder image" />
           </usa-card-media>
 
           <usa-card-header>Card with media</usa-card-header>

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

@@ -0,0 +1,7 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-checkbox-group": USACheckboxGroupElement;
+    }
+}
+export declare class USACheckboxGroupElement extends HTMLElement {
+}

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

@@ -0,0 +1,36 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { css, element, html } from "@joist/element";
+let USACheckboxGroupElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-checkbox-group",
+            shadowDom: [
+                css `
+      :host {
+        display: flex;
+        gap: 0.75rem;
+        flex-direction: column;
+      }
+    `,
+                html `
+      <slot></slot>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var USACheckboxGroupElement = 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);
+            USACheckboxGroupElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return USACheckboxGroupElement = _classThis;
+})();
+export { USACheckboxGroupElement };
+//# sourceMappingURL=checkbox-group.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.element.js","sourceRoot":"","sources":["../../../../src/lib/checkbox/checkbox-group/checkbox-group.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAuBvC,uBAAuB;4BAfnC,OAAO,CAAC;YACP,OAAO,EAAE,oBAAoB;YAC7B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;KAMF;gBACD,IAAI,CAAA;;KAEH;aACF;SACF,CAAC;;;;sBAC2C,WAAW;uCAAnB,SAAQ,WAAW;;;;YAAxD,6KAA2D;;;YAA9C,uDAAuB;;;;;SAAvB,uBAAuB"}

package/target/lib/checkbox/checkbox.element.js

@@ -28,7 +28,7 @@ let USACheckboxElement = (() => {
         cursor: pointer;
         font-size: 1.06rem;
         line-height: 1.3;
-        flex-wrap: wrap;
+        width: 100%;
       }
 
       .checkbox {
@@ -38,19 +38,20 @@ let USACheckboxElement = (() => {
         align-items: center;
         justify-content: center;
         height: 1.25rem;
-        width: 1.25rem;
+        min-width: 1.25rem;
+        max-width: 1.25rem;
         border-radius: 2px;
         position: relative;
         margin-right: 0.75rem;
       }
 
-      input:checked + .checkbox {
-        background-color: #005ea2;
-        box-shadow: 0 0 0 2px #005ea2;
+      input:disabled + .checkbox {
+        background-color: #fff;
+        box-shadow: 0 0 0 2px #757575;
       }
 
-      :host([disabled]) .checkbox {
-        background-color: #fff;
+      input:disabled:is(:checked) + .checkbox {
+        background-color: #757575;
         box-shadow: 0 0 0 2px #757575;
       }
 
@@ -58,6 +59,11 @@ let USACheckboxElement = (() => {
         color: #757575;
         cursor: not-allowed;
       }
+
+      input:checked + .checkbox {
+        background-color: #005ea2;
+        box-shadow: 0 0 0 2px #005ea2;
+      }
       
       input:checked + .checkbox::after {
         content: " ";
@@ -93,6 +99,11 @@ let USACheckboxElement = (() => {
         background-color: rgba(0, 94, 162, 0.1);
         border-color: #005ea2;
       }
+
+      :host([tiled]) label:has(input:checked:is(:disabled)) {
+        background-color: #fff;
+        border-color: #757575;
+      }
     `,
                 html `
       <label>
@@ -181,6 +192,7 @@ let USACheckboxElement = (() => {
                 checked: this.checked,
                 name: this.name,
                 disabled: this.disabled,
+                required: this.required,
             });
             this.#syncFormState();
         }
@@ -189,6 +201,7 @@ let USACheckboxElement = (() => {
                 checked: this.checked,
                 name: this.name,
                 disabled: this.disabled,
+                required: this.required,
             });
             this.#syncFormState();
         }
@@ -199,17 +212,15 @@ let USACheckboxElement = (() => {
         }
         #syncFormState() {
             const checkbox = this.#checkbox();
+            this.#internals.setValidity({});
             if (checkbox.checked) {
                 this.#internals.setFormValue(this.value);
             }
             else {
                 this.#internals.setFormValue(null);
             }
-            if (this.required && !checkbox.checked) {
-                this.#internals.setValidity({ valueMissing: true }, "Please check this box if you want to proceed", this.#checkbox());
-            }
-            else {
-                this.#internals.setValidity({});
+            if (checkbox.validationMessage) {
+                this.#internals.setValidity({ customError: true }, checkbox.validationMessage, checkbox);
             }
         }
         static {

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.element.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.element.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"checkbox.element.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IA6H5D,kBAAkB;4BArH9B,OAAO,CAAC;YACP,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoGF;gBACD,IAAI,CAAA;;;;;;;;;;KAUH;aACF;SACF,CAAC;;;;sBACsC,WAAW;;;;;;;;;;;;;;;;;;;;;kCAAnB,SAAQ,WAAW;;;;mCAGhD,IAAI,EAAE;gCAGN,IAAI,EAAE;iCAGN,IAAI,EAAE;oCAGN,IAAI,EAAE;oCAGN,IAAI,EAAE;iCAGN,IAAI,CAAC;oBACJ,QAAQ,EAAE,KAAK;iBAChB,CAAC;4CA6BD,MAAM,CAAC,QAAQ,EAAE,sBAAsB,CAAC;YA7CzC,0KAAS,OAAO,6BAAP,OAAO,yFAAS;YAGzB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAGpB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAG1B,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAK1B,oKAAS,KAAK,6BAAL,KAAK,qFAAS;YA6BvB,mMAAA,gBAAgB,6DAKf;YAvDH,6KA4EC;;;;QA3EC,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;QAG7B,6BAJW,mDAAkB,iDAIV,KAAK,GAAC;QAAzB,IAAS,OAAO,6CAAS;QAAzB,IAAS,OAAO,mDAAS;QAGzB,2HAAgB,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,0HAAiB,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAGpB,iIAAoB,KAAK,GAAC;QAA1B,IAAS,QAAQ,8CAAS;QAA1B,IAAS,QAAQ,oDAAS;QAG1B,oIAAoB,KAAK,GAAC;QAA1B,IAAS,QAAQ,8CAAS;QAA1B,IAAS,QAAQ,oDAAS;QAK1B,8HAAiB,KAAK,GAAC;QAAvB,IAAS,KAAK,2CAAS;QAAvB,IAAS,KAAK,iDAAS;QAEvB,SAAS,uDAAG,KAAK,CAAC,OAAO,CAAC,EAAC;QAE3B,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAEpC,iBAAiB;YACf,IAAI,CAAC,SAAS,CAAC;gBACb,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAED,wBAAwB;YACtB,IAAI,CAAC,SAAS,CAAC;gBACb,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAGD,gBAAgB;YACd,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAClC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;YAEhC,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAED,cAAc;YACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAElC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAEhC,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACrB,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC;YAED,IAAI,QAAQ,CAAC,iBAAiB,EAAE,CAAC;gBAC/B,IAAI,CAAC,UAAU,CAAC,WAAW,CACzB,EAAE,WAAW,EAAE,IAAI,EAAE,EACrB,QAAQ,CAAC,iBAAiB,EAC1B,QAAQ,CACT,CAAC;YACJ,CAAC;QACH,CAAC;;YA3EU,uDAAkB;;;;;SAAlB,kBAAkB"}

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

@@ -3,30 +3,11 @@ import type { USACheckboxElement } from "./checkbox.element.js";
 declare const meta: {
     title: string;
     tags: string[];
-    render(args: USACheckboxElement & {
-        description: string;
-    }): import("lit-html").TemplateResult<1>;
-    argTypes: {
-        name: {
-            control: "text";
-        };
-        value: {
-            control: "text";
-        };
-        description: {
-            control: "text";
-        };
-        tiled: {
-            control: "boolean";
-        };
-    };
-    args: {
-        name: string;
-        value: string;
-        tiled: false;
-        disabled: false;
-    };
+    render(): import("lit-html").TemplateResult<1>;
+    argTypes: {};
+    args: {};
 };
 export default meta;
 type Story = StoryObj<USACheckboxElement>;
 export declare const Primary: Story;
+export declare const Tiled: Story;

package/target/lib/checkbox/checkbox.stories.js

@@ -1,48 +1,86 @@
 import { html } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { when } from "lit/directives/when.js";
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const meta = {
     title: "usa-checkbox",
     tags: ["autodocs"],
-    render(args) {
+    render() {
         return html `
-      <usa-checkbox
-        name=${args.name}
-        value=${ifDefined(args.value)}
-        checked=${ifDefined(args.checked)}
-        ?tiled=${args.tiled}
-        ?disabled=${args.disabled}
-      >
-        Hello World
-        ${when(args.description, () => html `<usa-description>${args.description}</usa-description>`)}
-      </usa-checkbox>
+      <usa-checkbox-group>
+        <legend class="usa-legend">Select any historical figure</legend>
+
+        <usa-checkbox name="historical-figure" value="sojurner-truth" tiled>
+          Sojourner Truth
+          <usa-description>This is optional text that can be used to describe the label in more detail.</usa-description>
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="frederick-douglass" tiled>
+          Frederick Douglass
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="booker-t-washington" tiled>
+          Booker T. Washington
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="gw-carver" tiled disabled>
+          George Washington Carver
+        </usa-checkbox>
+      </usa-checkbox-group>
     `;
     },
-    argTypes: {
-        name: {
-            control: "text",
-        },
-        value: {
-            control: "text",
-        },
-        description: {
-            control: "text",
-        },
-        tiled: {
-            control: "boolean",
-        },
-    },
-    args: {
-        name: "toc",
-        value: "agree",
-        tiled: false,
-        disabled: false,
-    },
+    argTypes: {},
+    args: {},
 };
 export default meta;
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary = {
-    args: {},
+    render() {
+        return html `
+      <usa-checkbox-group>
+        <legend class="usa-legend">Select any historical figure</legend>
+
+        <usa-checkbox name="historical-figure" value="sojurner-truth">
+          Sojourner Truth
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="frederick-douglass">
+          Frederick Douglass
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="booker-t-washington">
+          Booker T. Washington
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="gw-carver" disabled>
+          George Washington Carver
+        </usa-checkbox>
+      </usa-checkbox-group>
+    `;
+    },
+};
+export const Tiled = {
+    render() {
+        return html `
+      <usa-checkbox-group>
+        <legend class="usa-legend">Select any historical figure</legend>
+
+        <usa-checkbox name="historical-figure" value="sojurner-truth" tiled>
+          Sojourner Truth
+          <usa-description>This is optional text that can be used to describe the label in more detail.</usa-description>
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="frederick-douglass" tiled>
+          Frederick Douglass
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="booker-t-washington" tiled>
+          Booker T. Washington
+        </usa-checkbox>
+
+        <usa-checkbox name="historical-figure" value="gw-carver" tiled disabled>
+          George Washington Carver
+        </usa-checkbox>
+      </usa-checkbox-group>
+    `;
+    },
 };
 //# sourceMappingURL=checkbox.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAI9C,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;gBACR,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;kBACnB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;iBACxB,IAAI,CAAC,KAAK;oBACP,IAAI,CAAC,QAAQ;;;UAGvB,IAAI,CACJ,IAAI,CAAC,WAAW,EAChB,GAAG,EAAE,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,WAAW,oBAAoB,CACnE;;KAEJ,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;SAChB;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;SAChB;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;SAChB;QACD,KAAK,EAAE;YACL,OAAO,EAAE,SAAS;SACnB;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAK;KAChB;CAC2D,CAAC;AAE/D,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAO3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACoD,CAAC;AAE/D,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;KAoBV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBV,CAAC;IACJ,CAAC;CACF,CAAC"}

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

@@ -39,8 +39,8 @@ let USACollectionItemElement = (() => {
           <slot name="description"></slot>
         </div>
 
-        <div class="meta">
-          <slot name="meta"></slot>
+        <div class="slots">
+          <slot name="tags"></slot>
         </div>
       </div>
     `,

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

@@ -3,7 +3,7 @@ import type { USACollectionElement } from "./collection.element.js";
 declare const meta: {
     title: string;
     tags: string[];
-    render(args: USACollectionElement): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
     argTypes: {};
     args: {};
 };