@noctuatech/uswds 1.0.0 → 1.1.1

package/README.md

@@ -87,6 +87,7 @@ npm run gen element
 - [x] Select
 - [x] Text input
 - [ ] Time picker
+- ~~[ ] Validation~~
 
 ### Navigation Components
 - [x] Accordion
@@ -105,7 +106,7 @@ npm run gen element
 - [ ] Footer
 - [ ] Header
 - [x] Icon
-- [ ] List
+- ~~[ ] List~~
 - [x] Modal
 - [x] Process list
 - [ ] Prose
@@ -114,3 +115,5 @@ npm run gen element
 - [ ] Table
 - [x] Tag
 - [ ] Tooltip
+- [ ] Character count
+- ~~[ ] Identifier~~

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noctuatech/uswds",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "type": "module",
   "workspaces": ["packages/**"],
   "main": "./target/lib.js",
@@ -70,9 +70,9 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "@joist/di": "^4.2.2",
-    "@joist/element": "^4.2.2",
-    "@joist/observable": "^4.2.2",
+    "@joist/di": "^4.2.3-next.7",
+    "@joist/element": "^4.2.3-next.7",
+    "@joist/observable": "^4.2.3-next.7",
     "tslib": "2.8.1"
   },
   "devDependencies": {

package/src/lib/accordion/accordion.stories.ts

@@ -7,9 +7,9 @@ import type { USAAccordionElement } from "./accordion.element.js";
 const meta = {
   title: "usa-accordion",
   tags: ["autodocs"],
-  render() {
+  render(args) {
     return html`
-      <usa-accordion id="first" name="ammendment">
+      <usa-accordion id="first" name="${args.name}">
         <h4 slot="heading">First Ammendment</h4>
 
         Congress shall make no law respecting an establishment of religion, or
@@ -18,7 +18,7 @@ const meta = {
         assemble, and to petition the Government for a redress of grievances.
       </usa-accordion>
 
-      <usa-accordion id="second" name="ammendment">
+      <usa-accordion id="second" name="${args.name}">
         <h4 slot="heading">Second Ammendment</h4>
 
         A well regulated Militia, being necessary to the security of a free
@@ -26,7 +26,7 @@ const meta = {
         infringed.
       </usa-accordion>
 
-      <usa-accordion id="third" name="ammendment">
+      <usa-accordion id="third" name="${args.name}">
         <h4 slot="heading">Third Ammendment</h4>
 
         No Soldier shall, in time of peace be quartered in any house, without
@@ -36,7 +36,9 @@ const meta = {
     `;
   },
   argTypes: {},
-  args: {},
+  args: {
+    name: "ammendment",
+  },
 } satisfies Meta<USAAccordionElement>;
 
 export default meta;

package/src/lib/alert/alert.stories.ts

@@ -15,18 +15,23 @@ export default meta;
 
 type Story = StoryObj<USAAlertElement>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
+export const Info: Story = {
   render() {
     return html`
-      <usa-alert type="info">
+      <usa-alert>
         <h3 slot="heading">Informative status</h3>
 
         Lorem ipsum dolor sit amet,&nbsp;
         <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
         eiusmod.
       </usa-alert>
+    `;
+  },
+};
 
+export const Warning: Story = {
+  render() {
+    return html`
       <usa-alert type="warning">
         <h3 slot="heading">Warning status</h3>
 
@@ -34,7 +39,13 @@ export const Primary: Story = {
         <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
         eiusmod.
       </usa-alert>
+    `;
+  },
+};
 
+export const Success: Story = {
+  render() {
+    return html`
       <usa-alert type="success">
         <h3 slot="heading">Success status</h3>
 
@@ -42,7 +53,14 @@ export const Primary: Story = {
         <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
         eiusmod.
       </usa-alert>
+    `;
+  },
+};
 
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+export const Error: Story = {
+  render() {
+    return html`
       <usa-alert type="error">
         <h3 slot="heading">Error status</h3>
 
@@ -50,7 +68,13 @@ export const Primary: Story = {
         <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
         eiusmod.
       </usa-alert>
+    `;
+  },
+};
 
+export const Emergency: Story = {
+  render() {
+    return html`
       <usa-alert type="emergency">
         <h3 slot="heading">Emergency status</h3>
 

package/src/lib/breadcrumbs/breadcrumbs.stories.ts

@@ -7,9 +7,9 @@ import type { USABreadcrumbsElement } from "./breadcrumbs.element.js";
 const meta = {
   title: "usa-breadcrumbs",
   tags: ["autodocs"],
-  render() {
+  render(args) {
     return html`
-      <usa-breadcrumbs>
+      <usa-breadcrumbs ?wrap=${args.wrap}>
         <usa-breadcrumb href="/">Home</usa-breadcrumb>
         <usa-breadcrumb href="/">Federal Contracting</usa-breadcrumb>
         <usa-breadcrumb href="/">Contracting assistance programs</usa-breadcrumb>
@@ -17,8 +17,15 @@ const meta = {
       </usa-breadcrumbs>
     `;
   },
-  argTypes: {},
-  args: {},
+  argTypes: {
+    wrap: {
+      type: "boolean",
+      control: "boolean",
+    },
+  },
+  args: {
+    wrap: false,
+  },
 } satisfies Meta<USABreadcrumbsElement>;
 
 export default meta;

package/src/lib/checkbox/checkbox.element.ts

@@ -15,16 +15,25 @@ declare global {
       }
 
       :host {
+        --usa-input-bg-color: #fff;
+        --usa-input-border-color: #5c5c5c;
+        --usa-input-text-color: #1b1b1b;
+        --usa-input-focus-color: #2491ff;
+        --usa-input-disabled-bg-color: #fff;
+        --usa-input-disabled-border-color: #757575;
+        --usa-input-disabled-text-color: #757575;
+        --usa-input-active-color: #005ea2;
+
         display: inline-block;
         max-width: 30rem;
         position: relative;
       }
 
       :host([tiled]) label {
-        background-color: #fff;
-        border: 2px solid #c9c9c9;
+        background-color: var(--usa-input-bg-color);
+        border: 2px solid var(--usa-input-border-color);
         border-radius: 0.25rem;
-        color: #1b1b1b;
+        color: var(--usa-input-text-color);
         padding: 0.75rem 1rem 0.75rem 0.75rem;
       }
 
@@ -37,8 +46,8 @@ declare global {
       }
 
       .checkbox {
-        background: #fff;
-        box-shadow: 0 0 0 2px #1b1b1b;
+        background: var(--usa-input-bg-color);
+        box-shadow: 0 0 0 2px var(--usa-input-text-color);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -51,23 +60,23 @@ declare global {
       }
 
       input:disabled + .checkbox {
-        background-color: #fff;
-        box-shadow: 0 0 0 2px #757575;
+        background-color: var(--usa-input-disabled-bg-color);
+        box-shadow: 0 0 0 2px var(--usa-input-disabled-border-color);
       }
 
       input:disabled:is(:checked) + .checkbox {
-        background-color: #757575;
-        box-shadow: 0 0 0 2px #757575;
+        background-color: var(--usa-input-disabled-text-color);
+        box-shadow: 0 0 0 2px var(--usa-input-disabled-border-color);
       }
 
       :host([disabled]) label {
-        color: #757575;
+        color: var(--usa-input-disabled-text-color);
         cursor: not-allowed;
       }
 
       input:checked + .checkbox {
-        background-color: #005ea2;
-        box-shadow: 0 0 0 2px #005ea2;
+        background-color: var(--usa-input-active-color);
+        box-shadow: 0 0 0 2px var(--usa-input-active-color);
       }
       
       input:checked + .checkbox::after {
@@ -85,7 +94,7 @@ declare global {
       }
 
       input:focus + .checkbox {
-        outline: 0.25rem solid #2491ff;
+        outline: 0.25rem solid var(--usa-input-focus-color);
         outline-offset: 0.25rem;
       }
 
@@ -102,12 +111,12 @@ declare global {
 
       :host([tiled]) label:has(input:checked) {
         background-color: rgba(0, 94, 162, 0.1);
-        border-color: #005ea2;
+        border-color: var(--usa-input-active-color);
       }
 
       :host([tiled]) label:has(input:checked:is(:disabled)) {
-        background-color: #fff;
-        border-color: #757575;
+        background-color: var(--usa-input-disabled-bg-color);
+        border-color: var(--usa-input-disabled-border-color);
       }
     `,
     html`

package/src/lib/checkbox/checkbox.stories.ts

@@ -17,10 +17,27 @@ type Story = StoryObj<USACheckboxElement>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Primary: Story = {
+  render(args) {
+    return html`
+      <usa-checkbox name="${args.name}" value="${args.value}" ?checked=${args.checked} ?disabled=${args.disabled} ?required=${args.required}>
+        I agree to the above terms and conditions
+      </usa-checkbox>
+    `;
+  },
+  args: {
+    checked: false,
+    name: "toc",
+    value: "agree",
+    disabled: false,
+    required: false,
+  },
+};
+
+export const Group: Story = {
   render() {
     return html`
       <usa-checkbox-group>
-        <legend class="usa-legend">Select any historical figure</legend>
+        <legend>Select any historical figure</legend>
 
         <usa-checkbox name="historical-figure" value="sojurner-truth">
           Sojourner Truth

package/src/lib/combo-box/combo-box.element.ts

@@ -30,6 +30,14 @@ declare global {
       }
       
       :host {
+        --usa-input-bg-color: #fff;
+        --usa-input-border-color: #5c5c5c;
+        --usa-input-text-color: #1b1b1b;
+        --usa-input-focus-color: #2491ff;
+        --usa-input-disabled-bg-color: #fff;
+        --usa-input-disabled-border-color: #757575;
+        --usa-input-disabled-text-color: #757575;
+        --usa-input-hover-bg-color: #f0f0f0;
         --usa-combo-max-height: 12.5em;
 
         display: block;
@@ -40,10 +48,11 @@ declare global {
       
       input {
         border-width: 1px;
-        border-color: #5c5c5c;
+        border-color: var(--usa-input-border-color);
         border-style: solid;
         border-radius: 0;
-        color: #1b1b1b;
+        color: var(--usa-input-text-color);
+        background-color: var(--usa-input-bg-color);
         display: block;
         height: 2.5rem;
         line-height: 1.3;
@@ -55,10 +64,16 @@ declare global {
       }
 
       input:not(:disabled):focus {
-        outline: 0.25rem solid #2491ff;
+        outline: 0.25rem solid var(--usa-input-focus-color);
         outline-offset: 0;
       }
 
+      input:disabled {
+        background-color: var(--usa-input-disabled-bg-color);
+        border-color: var(--usa-input-disabled-border-color);
+        color: var(--usa-input-disabled-text-color);
+      }
+
       ul {
         padding: 0;
         position: absolute;
@@ -66,7 +81,7 @@ declare global {
         width: 100%;
         transform: translateY(100%);
         margin: 0;
-        border: 1px solid rgb(92, 92, 92);
+        border: 1px solid var(--usa-input-border-color);
         max-height: var(--usa-combo-max-height);
         overflow-y: scroll;
         z-index: 1001;
@@ -77,7 +92,7 @@ declare global {
       }
 
       ul li {
-        background: #ffff;
+        background: var(--usa-input-bg-color);
         list-style: none;
         border-bottom: 1px solid #e6e6e6;
         cursor: pointer;
@@ -85,11 +100,11 @@ declare global {
       }
 
       ul li:hover {
-        background-color: #f0f0f0;
+        background-color: var(--usa-input-hover-bg-color);
       }
 
       li:focus {
-        outline: 0.25rem solid #2491ff;
+        outline: 0.25rem solid var(--usa-input-focus-color);
         outline-offset: -0.25rem;
       }
 

package/src/lib/combo-box/combo-box.stories.ts

@@ -7,6 +7,77 @@ import type { USAComboBoxElement } from "./combo-box.element.js";
 const meta = {
   title: "usa-combo-box",
   tags: ["autodocs"],
+  argTypes: {},
+  args: {},
+} satisfies Meta<USAComboBoxElement>;
+
+export default meta;
+
+type Story = StoryObj<USAComboBoxElement>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  render() {
+    return html`
+      <usa-combo-box placeholder="Select a state" name="state">
+        <span slot="label">States</span>
+
+        <usa-combo-box-option value="Alabama">Alabama</usa-combo-box-option>
+        <usa-combo-box-option value="Alaska">Alaska</usa-combo-box-option>
+        <usa-combo-box-option value="Arizona">Arizona</usa-combo-box-option>
+        <usa-combo-box-option value="Arkansas">Arkansas</usa-combo-box-option>
+        <usa-combo-box-option value="California">California</usa-combo-box-option>
+        <usa-combo-box-option value="Colorado">Colorado</usa-combo-box-option>
+        <usa-combo-box-option value="Connecticut">Connecticut</usa-combo-box-option>
+        <usa-combo-box-option value="Delaware">Delaware</usa-combo-box-option>
+        <usa-combo-box-option value="Florida">Florida</usa-combo-box-option>
+        <usa-combo-box-option value="Georgia">Georgia</usa-combo-box-option>
+        <usa-combo-box-option value="Hawaii">Hawaii</usa-combo-box-option>
+        <usa-combo-box-option value="Idaho">Idaho</usa-combo-box-option>
+        <usa-combo-box-option value="Illinois">Illinois</usa-combo-box-option>
+        <usa-combo-box-option value="Indiana">Indiana</usa-combo-box-option>
+        <usa-combo-box-option value="Iowa">Iowa</usa-combo-box-option>
+        <usa-combo-box-option value="Kansas">Kansas</usa-combo-box-option>
+        <usa-combo-box-option value="Kentucky">Kentucky</usa-combo-box-option>
+        <usa-combo-box-option value="Louisiana">Louisiana</usa-combo-box-option>
+        <usa-combo-box-option value="Maine">Maine</usa-combo-box-option>
+        <usa-combo-box-option value="Maryland">Maryland</usa-combo-box-option>
+        <usa-combo-box-option value="Massachusetts">Massachusetts</usa-combo-box-option>
+        <usa-combo-box-option value="Michigan">Michigan</usa-combo-box-option>
+        <usa-combo-box-option value="Minnesota">Minnesota</usa-combo-box-option>
+        <usa-combo-box-option value="Mississippi">Mississippi</usa-combo-box-option>
+        <usa-combo-box-option value="Missouri">Missouri</usa-combo-box-option>
+        <usa-combo-box-option value="Montana">Montana</usa-combo-box-option>
+        <usa-combo-box-option value="Nebraska">Nebraska</usa-combo-box-option>
+        <usa-combo-box-option value="Nevada">Nevada</usa-combo-box-option>
+        <usa-combo-box-option value="New Hampshire">New Hampshire</usa-combo-box-option>
+        <usa-combo-box-option value="New Jersey">New Jersey</usa-combo-box-option>
+        <usa-combo-box-option value="New Mexico">New Mexico</usa-combo-box-option>
+        <usa-combo-box-option value="New York">New York</usa-combo-box-option>
+        <usa-combo-box-option value="North Carolina">North Carolina</usa-combo-box-option>
+        <usa-combo-box-option value="North Dakota">North Dakota</usa-combo-box-option>
+        <usa-combo-box-option value="Ohio">Ohio</usa-combo-box-option>
+        <usa-combo-box-option value="Oklahoma">Oklahoma</usa-combo-box-option>
+        <usa-combo-box-option value="Oregon">Oregon</usa-combo-box-option>
+        <usa-combo-box-option value="Pennsylvania">Pennsylvania</usa-combo-box-option>
+        <usa-combo-box-option value="Rhode Island">Rhode Island</usa-combo-box-option>
+        <usa-combo-box-option value="South Carolina">South Carolina</usa-combo-box-option>
+        <usa-combo-box-option value="South Dakota">South Dakota</usa-combo-box-option>
+        <usa-combo-box-option value="Tennessee">Tennessee</usa-combo-box-option>
+        <usa-combo-box-option value="Texas">Texas</usa-combo-box-option>
+        <usa-combo-box-option value="Utah">Utah</usa-combo-box-option>
+        <usa-combo-box-option value="Vermont">Vermont</usa-combo-box-option>
+        <usa-combo-box-option value="Virginia">Virginia</usa-combo-box-option>
+        <usa-combo-box-option value="Washington">Washington</usa-combo-box-option>
+        <usa-combo-box-option value="West Virginia">West Virginia</usa-combo-box-option>
+        <usa-combo-box-option value="Wisconsin">Wisconsin</usa-combo-box-option>
+        <usa-combo-box-option value="Wyoming">Wyoming</usa-combo-box-option>
+      </usa-combo-box>
+    `;
+  },
+};
+
+export const WithImages: Story = {
   render() {
     return html`
       <usa-combo-box placeholder="Select a state" name="state">
@@ -214,15 +285,4 @@ const meta = {
       </usa-combo-box>
     `;
   },
-  argTypes: {},
-  args: {},
-} satisfies Meta<USAComboBoxElement>;
-
-export default meta;
-
-type Story = StoryObj<USAComboBoxElement>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {},
 };

package/src/lib/input/input.element.ts

@@ -18,6 +18,14 @@ declare global {
       }
 
       :host {
+        --usa-input-bg-color: #fff;
+        --usa-input-border-color: #5c5c5c;
+        --usa-input-text-color: #1b1b1b;
+        --usa-input-focus-color: #2491ff;
+        --usa-input-disabled-bg-color: #fff;
+        --usa-input-disabled-border-color: #757575;
+        --usa-input-disabled-text-color: #757575;
+
         font-size: 1.06rem;
         line-height: 1.3;
         display: block;
@@ -28,11 +36,12 @@ declare global {
       }
 
       input {
+        background-color: var(--usa-input-bg-color);
         border-width: 1px;
-        border-color: #5c5c5c;
+        border-color: var(--usa-input-border-color);
         border-style: solid;
         border-radius: 0;
-        color: #1b1b1b;
+        color: var(--usa-input-text-color);
         display: block;
         height: 2.5rem;
         line-height: 1.3;
@@ -43,10 +52,16 @@ declare global {
       }
 
       input:not(:disabled):focus {
-        outline: 0.25rem solid #2491ff;
+        outline: 0.25rem solid var(--usa-input-focus-color);
         outline-offset: 0;
       }
 
+      input:disabled {
+        background-color: var(--usa-input-disabled-bg-color);
+        border-color: var(--usa-input-disabled-border-color);
+        color: var(--usa-input-disabled-text-color);
+      }
+
       slot[name="detail"]::slotted(*) {
         color: #757575;
       }

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

@@ -18,15 +18,21 @@ declare global {
   shadowDom: [
     css`
       :host {
-        --usa-radio-active-color: #005ea2;
+        --usa-input-bg-color: #fff;
+        --usa-input-border-color: #5c5c5c;
+        --usa-input-text-color: #1b1b1b;
+        --usa-input-focus-color: #2491ff;
+        --usa-input-disabled-bg-color: #fff;
+        --usa-input-disabled-border-color: #757575;
+        --usa-input-disabled-text-color: #757575;
+        --usa-input-active-color: #005ea2;
+        --usa-radio-active-color: var(--usa-input-active-color);
         --usa-radio-tiled-bg: rgba(0, 94, 162, 0.1);
-        --usa-radio-focus-color: #2491ff;
+        --usa-radio-focus-color: var(--usa-input-focus-color);
 
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
+        display: inline-block;
         max-width: 30rem;
-        margin-bottom: 1.5rem;
+        position: relative;
       }
 
       label {
@@ -47,8 +53,8 @@ declare global {
         height: 1.25rem;
         border-radius: 99rem;
         width: 1.25rem;
-        background: #fff;
-        box-shadow: 0 0 0 2px #1b1b1b;
+        background: var(--usa-input-bg-color);
+        box-shadow: 0 0 0 2px var(--usa-input-text-color);
         flex: 0 0 1.25rem;
         position: relative;
         z-index: 1000;
@@ -58,24 +64,24 @@ declare global {
         background-color: var(--usa-radio-active-color);
         box-shadow:
           0 0 0 2px var(--usa-radio-active-color),
-          inset 0 0 0 2px #fff;
+          inset 0 0 0 2px var(--usa-input-bg-color);
       }
 
       label:has(input:checked:is(:disabled))::before {
-        background-color: #757575;
+        background-color: var(--usa-input-disabled-text-color);
         box-shadow:
-          0 0 0 2px #757575,
-          inset 0 0 0 2px #fff;
+          0 0 0 2px var(--usa-input-disabled-text-color),
+          inset 0 0 0 2px var(--usa-input-bg-color);
       }
 
       label:has(input:disabled) {
         cursor: not-allowed;
-        color: #757575 !important;
+        color: var(--usa-input-disabled-text-color) !important;
       }
 
       label:has(input:disabled)::before {
-        background-color: #fff;
-        box-shadow: 0 0 0 2px #757575;
+        background-color: var(--usa-input-disabled-bg-color);
+        box-shadow: 0 0 0 2px var(--usa-input-disabled-border-color);
       }
       
       label:has(input:focus)::before {
@@ -88,21 +94,60 @@ declare global {
       }
 
       :host([tiled]) label {
-        background-color: #fff;
-        border: 2px solid #c9c9c9;
-        color: #1b1b1b;
+        background-color: var(--usa-input-bg-color);
+        border: 2px solid var(--usa-input-border-color);
         border-radius: 0.25rem;
+        color: var(--usa-input-text-color);
         padding: 0.75rem 1rem 0.75rem 0.75rem;
       }
 
+      .radio {
+        background: var(--usa-input-bg-color);
+        box-shadow: 0 0 0 2px var(--usa-input-text-color);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 1.25rem;
+        min-width: 1.25rem;
+        max-width: 1.25rem;
+        border-radius: 50%;
+        position: relative;
+        margin-right: 0.75rem;
+      }
+
+      input:disabled + .radio {
+        background-color: var(--usa-input-disabled-bg-color);
+        box-shadow: 0 0 0 2px var(--usa-input-disabled-border-color);
+      }
+
+      input:disabled:is(:checked) + .radio {
+        background-color: var(--usa-input-disabled-text-color);
+        box-shadow: 0 0 0 2px var(--usa-input-disabled-border-color);
+      }
+
+      :host([disabled]) label {
+        color: var(--usa-input-disabled-text-color);
+        cursor: not-allowed;
+      }
+
+      input:checked + .radio {
+        background-color: var(--usa-input-active-color);
+        box-shadow: 0 0 0 2px var(--usa-input-active-color);
+      }
+
+      input:focus + .radio {
+        outline: 0.25rem solid var(--usa-input-focus-color);
+        outline-offset: 0.25rem;
+      }
+
       :host([tiled]) label:has(input:checked) {
-        background-color: var(--usa-radio-tiled-bg);
-        border-color: var(--usa-radio-active-color);
+        background-color: rgba(0, 94, 162, 0.1);
+        border-color: var(--usa-input-active-color);
       }
 
       :host([tiled]) label:has(input:checked:is(:disabled)) {
-        background-color: #fff;
-        border-color: #757575;
+        background-color: var(--usa-input-disabled-bg-color);
+        border-color: var(--usa-input-disabled-border-color);
       }
 
       slot {