@noctuatech/uswds 1.0.0-rc.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +4 -1
  2. package/package.json +4 -4
  3. package/src/GETTING_STARTED.mdx +77 -0
  4. package/src/lib/accordion/accordion.stories.ts +7 -5
  5. package/src/lib/alert/alert.stories.ts +27 -3
  6. package/src/lib/breadcrumbs/breadcrumbs.stories.ts +11 -4
  7. package/src/lib/checkbox/checkbox.element.ts +25 -16
  8. package/src/lib/checkbox/checkbox.stories.ts +18 -1
  9. package/src/lib/combo-box/combo-box.element.ts +22 -7
  10. package/src/lib/combo-box/combo-box.stories.ts +71 -11
  11. package/src/lib/input/input.element.ts +18 -3
  12. package/src/lib/radio/radio.element.ts +67 -22
  13. package/src/lib/select/select.element.ts +18 -3
  14. package/src/lib/textarea/textarea.element.ts +18 -3
package/README.md CHANGED
@@ -87,6 +87,7 @@ npm run gen element
87
87
  - [x] Select
88
88
  - [x] Text input
89
89
  - [ ] Time picker
90
+ - ~~[ ] Validation~~
90
91
 
91
92
  ### Navigation Components
92
93
  - [x] Accordion
@@ -105,7 +106,7 @@ npm run gen element
105
106
  - [ ] Footer
106
107
  - [ ] Header
107
108
  - [x] Icon
108
- - [ ] List
109
+ - ~~[ ] List~~
109
110
  - [x] Modal
110
111
  - [x] Process list
111
112
  - [ ] Prose
@@ -114,3 +115,5 @@ npm run gen element
114
115
  - [ ] Table
115
116
  - [x] Tag
116
117
  - [ ] Tooltip
118
+ - [ ] Character count
119
+ - ~~[ ] Identifier~~
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noctuatech/uswds",
3
- "version": "1.0.0-rc.1",
3
+ "version": "1.1.0",
4
4
  "type": "module",
5
5
  "workspaces": ["packages/**"],
6
6
  "main": "./target/lib.js",
@@ -70,9 +70,9 @@
70
70
  "license": "ISC",
71
71
  "description": "",
72
72
  "dependencies": {
73
- "@joist/di": "^4.2.2",
74
- "@joist/element": "^4.2.2",
75
- "@joist/observable": "^4.2.2",
73
+ "@joist/di": "^4.2.3-next.7",
74
+ "@joist/element": "^4.2.3-next.7",
75
+ "@joist/observable": "^4.2.3-next.7",
76
76
  "tslib": "2.8.1"
77
77
  },
78
78
  "devDependencies": {
package/src/GETTING_STARTED.mdx ADDED
@@ -0,0 +1,77 @@
1
+ # Getting Started
2
+
3
+ Getting started is easy! In just two simple steps, you'll be up and running with Noctua's US Web Design System, making it easy to build accessible, fast, and consistent websites. Let's get started!
4
+
5
+ ## Install USWDS
6
+
7
+ Either install USWDS directly from NPM.
8
+
9
+ ```sh
10
+ npm install @noctuatech/uswds
11
+ ```
12
+
13
+ Or from a CDN.
14
+
15
+ ```html
16
+ <script type="module" src="https://esm.sh/@noctuatech/uswds/define.js?bundle"></script>
17
+ ```
18
+
19
+ ## Use components directly in your HTML
20
+
21
+ After installing USWDS, you can start using the components in your HTML.
22
+
23
+ ```html
24
+ <!-- USWDS needs to be told where to find static assets such as icons -->
25
+ <usa-config icon-path="https://esm.sh/@noctuatech/uswds/assets/usa-icons/">
26
+ <form>
27
+ <usa-input name="name" placeholder="Bob Smith">Name</usa-input>
28
+ <usa-input name="email" placeholder="my@email.com">Email</usa-input>
29
+
30
+ <usa-input-mask mask="(999) 999-9999">
31
+ <usa-input name="phone" placeholder="(xxx) xxx-xxxx">
32
+ Phone
33
+ </usa-input>
34
+ </usa-input-mask>
35
+
36
+ <usa-button type="submit">Submit</usa-button>
37
+ </form>
38
+ </usa-config>
39
+ ```
40
+
41
+ ### Configuration
42
+
43
+ There are two ways to confifure UWDS for your application. There is currently only one configuration option, but there will be more in the future.
44
+
45
+ 1. The `usa-config` element is used to configure the USWDS components. This element will most comonly be at the root of your application.
46
+ But you can have multiple instances if you have different needs in different parts of your document. Configuration will be scoped to children of the `usa-config` element.
47
+
48
+ ```html
49
+ <body>
50
+ <usa-config icon-path="https://esm.sh/@noctuatech/uswds/assets/usa-icons/">
51
+ <!-- Your application -->
52
+ </usa-config>
53
+ </body>
54
+ ```
55
+
56
+ 2. JavaScript API. This version of USWDS is built with [Joist](https://github.com/joist-framework/joist), a dependency injection framework for JavaScript.
57
+ Knowing this we can provide our own configuration to USWDS components.
58
+
59
+ ```ts
60
+ import { DOMInjector } from "@joist/di";
61
+ import { USAConfig } from "@noctuatech/uswds";
62
+
63
+ const app = new DOMInjector([
64
+ [
65
+ USAConfig,
66
+ {
67
+ factory() {
68
+ return {
69
+ iconPath: "https://esm.sh/@noctuatech/uswds/assets/usa-icons/",
70
+ };
71
+ },
72
+ },
73
+ ],
74
+ ]);
75
+
76
+ app.attach(document.body);
77
+ ```
package/src/lib/accordion/accordion.stories.ts CHANGED
@@ -7,9 +7,9 @@ import type { USAAccordionElement } from "./accordion.element.js";
7
7
  const meta = {
8
8
  title: "usa-accordion",
9
9
  tags: ["autodocs"],
10
- render() {
10
+ render(args) {
11
11
  return html`
12
- <usa-accordion id="first" name="ammendment">
12
+ <usa-accordion id="first" name="${args.name}">
13
13
  <h4 slot="heading">First Ammendment</h4>
14
14
 
15
15
  Congress shall make no law respecting an establishment of religion, or
@@ -18,7 +18,7 @@ const meta = {
18
18
  assemble, and to petition the Government for a redress of grievances.
19
19
  </usa-accordion>
20
20
 
21
- <usa-accordion id="second" name="ammendment">
21
+ <usa-accordion id="second" name="${args.name}">
22
22
  <h4 slot="heading">Second Ammendment</h4>
23
23
 
24
24
  A well regulated Militia, being necessary to the security of a free
@@ -26,7 +26,7 @@ const meta = {
26
26
  infringed.
27
27
  </usa-accordion>
28
28
 
29
- <usa-accordion id="third" name="ammendment">
29
+ <usa-accordion id="third" name="${args.name}">
30
30
  <h4 slot="heading">Third Ammendment</h4>
31
31
 
32
32
  No Soldier shall, in time of peace be quartered in any house, without
@@ -36,7 +36,9 @@ const meta = {
36
36
  `;
37
37
  },
38
38
  argTypes: {},
39
- args: {},
39
+ args: {
40
+ name: "ammendment",
41
+ },
40
42
  } satisfies Meta<USAAccordionElement>;
41
43
 
42
44
  export default meta;
package/src/lib/alert/alert.stories.ts CHANGED
@@ -15,18 +15,23 @@ export default meta;
15
15
 
16
16
  type Story = StoryObj<USAAlertElement>;
17
17
 
18
- // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
19
- export const Primary: Story = {
18
+ export const Info: Story = {
20
19
  render() {
21
20
  return html`
22
- <usa-alert type="info">
21
+ <usa-alert>
23
22
  <h3 slot="heading">Informative status</h3>
24
23
 
25
24
  Lorem ipsum dolor sit amet,&nbsp;
26
25
  <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
27
26
  eiusmod.
28
27
  </usa-alert>
28
+ `;
29
+ },
30
+ };
29
31
 
32
+ export const Warning: Story = {
33
+ render() {
34
+ return html`
30
35
  <usa-alert type="warning">
31
36
  <h3 slot="heading">Warning status</h3>
32
37
 
@@ -34,7 +39,13 @@ export const Primary: Story = {
34
39
  <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
35
40
  eiusmod.
36
41
  </usa-alert>
42
+ `;
43
+ },
44
+ };
37
45
 
46
+ export const Success: Story = {
47
+ render() {
48
+ return html`
38
49
  <usa-alert type="success">
39
50
  <h3 slot="heading">Success status</h3>
40
51
 
@@ -42,7 +53,14 @@ export const Primary: Story = {
42
53
  <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
43
54
  eiusmod.
44
55
  </usa-alert>
56
+ `;
57
+ },
58
+ };
45
59
 
60
+ // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
61
+ export const Error: Story = {
62
+ render() {
63
+ return html`
46
64
  <usa-alert type="error">
47
65
  <h3 slot="heading">Error status</h3>
48
66
 
@@ -50,7 +68,13 @@ export const Primary: Story = {
50
68
  <usa-link href="#">consectetur adipiscing</usa-link>&nbsp;elit, sed do
51
69
  eiusmod.
52
70
  </usa-alert>
71
+ `;
72
+ },
73
+ };
53
74
 
75
+ export const Emergency: Story = {
76
+ render() {
77
+ return html`
54
78
  <usa-alert type="emergency">
55
79
  <h3 slot="heading">Emergency status</h3>
56
80
 
package/src/lib/breadcrumbs/breadcrumbs.stories.ts CHANGED
@@ -7,9 +7,9 @@ import type { USABreadcrumbsElement } from "./breadcrumbs.element.js";
7
7
  const meta = {
8
8
  title: "usa-breadcrumbs",
9
9
  tags: ["autodocs"],
10
- render() {
10
+ render(args) {
11
11
  return html`
12
- <usa-breadcrumbs>
12
+ <usa-breadcrumbs ?wrap=${args.wrap}>
13
13
  <usa-breadcrumb href="/">Home</usa-breadcrumb>
14
14
  <usa-breadcrumb href="/">Federal Contracting</usa-breadcrumb>
15
15
  <usa-breadcrumb href="/">Contracting assistance programs</usa-breadcrumb>
@@ -17,8 +17,15 @@ const meta = {
17
17
  </usa-breadcrumbs>
18
18
  `;
19
19
  },
20
- argTypes: {},
21
- args: {},
20
+ argTypes: {
21
+ wrap: {
22
+ type: "boolean",
23
+ control: "boolean",
24
+ },
25
+ },
26
+ args: {
27
+ wrap: false,
28
+ },
22
29
  } satisfies Meta<USABreadcrumbsElement>;
23
30
 
24
31
  export default meta;
package/src/lib/checkbox/checkbox.element.ts CHANGED
@@ -15,16 +15,25 @@ declare global {
15
15
  }
16
16
 
17
17
  :host {
18
+ --usa-input-bg-color: #fff;
19
+ --usa-input-border-color: #5c5c5c;
20
+ --usa-input-text-color: #1b1b1b;
21
+ --usa-input-focus-color: #2491ff;
22
+ --usa-input-disabled-bg-color: #fff;
23
+ --usa-input-disabled-border-color: #757575;
24
+ --usa-input-disabled-text-color: #757575;
25
+ --usa-input-active-color: #005ea2;
26
+
18
27
  display: inline-block;
19
28
  max-width: 30rem;
20
29
  position: relative;
21
30
  }
22
31
 
23
32
  :host([tiled]) label {
24
- background-color: #fff;
25
- border: 2px solid #c9c9c9;
33
+ background-color: var(--usa-input-bg-color);
34
+ border: 2px solid var(--usa-input-border-color);
26
35
  border-radius: 0.25rem;
27
- color: #1b1b1b;
36
+ color: var(--usa-input-text-color);
28
37
  padding: 0.75rem 1rem 0.75rem 0.75rem;
29
38
  }
30
39
 
@@ -37,8 +46,8 @@ declare global {
37
46
  }
38
47
 
39
48
  .checkbox {
40
- background: #fff;
41
- box-shadow: 0 0 0 2px #1b1b1b;
49
+ background: var(--usa-input-bg-color);
50
+ box-shadow: 0 0 0 2px var(--usa-input-text-color);
42
51
  display: flex;
43
52
  align-items: center;
44
53
  justify-content: center;
@@ -51,23 +60,23 @@ declare global {
51
60
  }
52
61
 
53
62
  input:disabled + .checkbox {
54
- background-color: #fff;
55
- box-shadow: 0 0 0 2px #757575;
63
+ background-color: var(--usa-input-disabled-bg-color);
64
+ box-shadow: 0 0 0 2px var(--usa-input-disabled-border-color);
56
65
  }
57
66
 
58
67
  input:disabled:is(:checked) + .checkbox {
59
- background-color: #757575;
60
- box-shadow: 0 0 0 2px #757575;
68
+ background-color: var(--usa-input-disabled-text-color);
69
+ box-shadow: 0 0 0 2px var(--usa-input-disabled-border-color);
61
70
  }
62
71
 
63
72
  :host([disabled]) label {
64
- color: #757575;
73
+ color: var(--usa-input-disabled-text-color);
65
74
  cursor: not-allowed;
66
75
  }
67
76
 
68
77
  input:checked + .checkbox {
69
- background-color: #005ea2;
70
- box-shadow: 0 0 0 2px #005ea2;
78
+ background-color: var(--usa-input-active-color);
79
+ box-shadow: 0 0 0 2px var(--usa-input-active-color);
71
80
  }
72
81
 
73
82
  input:checked + .checkbox::after {
@@ -85,7 +94,7 @@ declare global {
85
94
  }
86
95
 
87
96
  input:focus + .checkbox {
88
- outline: 0.25rem solid #2491ff;
97
+ outline: 0.25rem solid var(--usa-input-focus-color);
89
98
  outline-offset: 0.25rem;
90
99
  }
91
100
 
@@ -102,12 +111,12 @@ declare global {
102
111
 
103
112
  :host([tiled]) label:has(input:checked) {
104
113
  background-color: rgba(0, 94, 162, 0.1);
105
- border-color: #005ea2;
114
+ border-color: var(--usa-input-active-color);
106
115
  }
107
116
 
108
117
  :host([tiled]) label:has(input:checked:is(:disabled)) {
109
- background-color: #fff;
110
- border-color: #757575;
118
+ background-color: var(--usa-input-disabled-bg-color);
119
+ border-color: var(--usa-input-disabled-border-color);
111
120
  }
112
121
  `,
113
122
  html`
package/src/lib/checkbox/checkbox.stories.ts CHANGED
@@ -17,10 +17,27 @@ type Story = StoryObj<USACheckboxElement>;
17
17
 
18
18
  // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
19
19
  export const Primary: Story = {
20
+ render(args) {
21
+ return html`
22
+ <usa-checkbox name="${args.name}" value="${args.value}" ?checked=${args.checked} ?disabled=${args.disabled} ?required=${args.required}>
23
+ I agree to the above terms and conditions
24
+ </usa-checkbox>
25
+ `;
26
+ },
27
+ args: {
28
+ checked: false,
29
+ name: "toc",
30
+ value: "agree",
31
+ disabled: false,
32
+ required: false,
33
+ },
34
+ };
35
+
36
+ export const Group: Story = {
20
37
  render() {
21
38
  return html`
22
39
  <usa-checkbox-group>
23
- <legend class="usa-legend">Select any historical figure</legend>
40
+ <legend>Select any historical figure</legend>
24
41
 
25
42
  <usa-checkbox name="historical-figure" value="sojurner-truth">
26
43
  Sojourner Truth
package/src/lib/combo-box/combo-box.element.ts CHANGED
@@ -30,6 +30,14 @@ declare global {
30
30
  }
31
31
 
32
32
  :host {
33
+ --usa-input-bg-color: #fff;
34
+ --usa-input-border-color: #5c5c5c;
35
+ --usa-input-text-color: #1b1b1b;
36
+ --usa-input-focus-color: #2491ff;
37
+ --usa-input-disabled-bg-color: #fff;
38
+ --usa-input-disabled-border-color: #757575;
39
+ --usa-input-disabled-text-color: #757575;
40
+ --usa-input-hover-bg-color: #f0f0f0;
33
41
  --usa-combo-max-height: 12.5em;
34
42
 
35
43
  display: block;
@@ -40,10 +48,11 @@ declare global {
40
48
 
41
49
  input {
42
50
  border-width: 1px;
43
- border-color: #5c5c5c;
51
+ border-color: var(--usa-input-border-color);
44
52
  border-style: solid;
45
53
  border-radius: 0;
46
- color: #1b1b1b;
54
+ color: var(--usa-input-text-color);
55
+ background-color: var(--usa-input-bg-color);
47
56
  display: block;
48
57
  height: 2.5rem;
49
58
  line-height: 1.3;
@@ -55,10 +64,16 @@ declare global {
55
64
  }
56
65
 
57
66
  input:not(:disabled):focus {
58
- outline: 0.25rem solid #2491ff;
67
+ outline: 0.25rem solid var(--usa-input-focus-color);
59
68
  outline-offset: 0;
60
69
  }
61
70
 
71
+ input:disabled {
72
+ background-color: var(--usa-input-disabled-bg-color);
73
+ border-color: var(--usa-input-disabled-border-color);
74
+ color: var(--usa-input-disabled-text-color);
75
+ }
76
+
62
77
  ul {
63
78
  padding: 0;
64
79
  position: absolute;
@@ -66,7 +81,7 @@ declare global {
66
81
  width: 100%;
67
82
  transform: translateY(100%);
68
83
  margin: 0;
69
- border: 1px solid rgb(92, 92, 92);
84
+ border: 1px solid var(--usa-input-border-color);
70
85
  max-height: var(--usa-combo-max-height);
71
86
  overflow-y: scroll;
72
87
  z-index: 1001;
@@ -77,7 +92,7 @@ declare global {
77
92
  }
78
93
 
79
94
  ul li {
80
- background: #ffff;
95
+ background: var(--usa-input-bg-color);
81
96
  list-style: none;
82
97
  border-bottom: 1px solid #e6e6e6;
83
98
  cursor: pointer;
@@ -85,11 +100,11 @@ declare global {
85
100
  }
86
101
 
87
102
  ul li:hover {
88
- background-color: #f0f0f0;
103
+ background-color: var(--usa-input-hover-bg-color);
89
104
  }
90
105
 
91
106
  li:focus {
92
- outline: 0.25rem solid #2491ff;
107
+ outline: 0.25rem solid var(--usa-input-focus-color);
93
108
  outline-offset: -0.25rem;
94
109
  }
95
110
 
package/src/lib/combo-box/combo-box.stories.ts CHANGED
@@ -7,6 +7,77 @@ import type { USAComboBoxElement } from "./combo-box.element.js";
7
7
  const meta = {
8
8
  title: "usa-combo-box",
9
9
  tags: ["autodocs"],
10
+ argTypes: {},
11
+ args: {},
12
+ } satisfies Meta<USAComboBoxElement>;
13
+
14
+ export default meta;
15
+
16
+ type Story = StoryObj<USAComboBoxElement>;
17
+
18
+ // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
19
+ export const Primary: Story = {
20
+ render() {
21
+ return html`
22
+ <usa-combo-box placeholder="Select a state" name="state">
23
+ <span slot="label">States</span>
24
+
25
+ <usa-combo-box-option value="Alabama">Alabama</usa-combo-box-option>
26
+ <usa-combo-box-option value="Alaska">Alaska</usa-combo-box-option>
27
+ <usa-combo-box-option value="Arizona">Arizona</usa-combo-box-option>
28
+ <usa-combo-box-option value="Arkansas">Arkansas</usa-combo-box-option>
29
+ <usa-combo-box-option value="California">California</usa-combo-box-option>
30
+ <usa-combo-box-option value="Colorado">Colorado</usa-combo-box-option>
31
+ <usa-combo-box-option value="Connecticut">Connecticut</usa-combo-box-option>
32
+ <usa-combo-box-option value="Delaware">Delaware</usa-combo-box-option>
33
+ <usa-combo-box-option value="Florida">Florida</usa-combo-box-option>
34
+ <usa-combo-box-option value="Georgia">Georgia</usa-combo-box-option>
35
+ <usa-combo-box-option value="Hawaii">Hawaii</usa-combo-box-option>
36
+ <usa-combo-box-option value="Idaho">Idaho</usa-combo-box-option>
37
+ <usa-combo-box-option value="Illinois">Illinois</usa-combo-box-option>
38
+ <usa-combo-box-option value="Indiana">Indiana</usa-combo-box-option>
39
+ <usa-combo-box-option value="Iowa">Iowa</usa-combo-box-option>
40
+ <usa-combo-box-option value="Kansas">Kansas</usa-combo-box-option>
41
+ <usa-combo-box-option value="Kentucky">Kentucky</usa-combo-box-option>
42
+ <usa-combo-box-option value="Louisiana">Louisiana</usa-combo-box-option>
43
+ <usa-combo-box-option value="Maine">Maine</usa-combo-box-option>
44
+ <usa-combo-box-option value="Maryland">Maryland</usa-combo-box-option>
45
+ <usa-combo-box-option value="Massachusetts">Massachusetts</usa-combo-box-option>
46
+ <usa-combo-box-option value="Michigan">Michigan</usa-combo-box-option>
47
+ <usa-combo-box-option value="Minnesota">Minnesota</usa-combo-box-option>
48
+ <usa-combo-box-option value="Mississippi">Mississippi</usa-combo-box-option>
49
+ <usa-combo-box-option value="Missouri">Missouri</usa-combo-box-option>
50
+ <usa-combo-box-option value="Montana">Montana</usa-combo-box-option>
51
+ <usa-combo-box-option value="Nebraska">Nebraska</usa-combo-box-option>
52
+ <usa-combo-box-option value="Nevada">Nevada</usa-combo-box-option>
53
+ <usa-combo-box-option value="New Hampshire">New Hampshire</usa-combo-box-option>
54
+ <usa-combo-box-option value="New Jersey">New Jersey</usa-combo-box-option>
55
+ <usa-combo-box-option value="New Mexico">New Mexico</usa-combo-box-option>
56
+ <usa-combo-box-option value="New York">New York</usa-combo-box-option>
57
+ <usa-combo-box-option value="North Carolina">North Carolina</usa-combo-box-option>
58
+ <usa-combo-box-option value="North Dakota">North Dakota</usa-combo-box-option>
59
+ <usa-combo-box-option value="Ohio">Ohio</usa-combo-box-option>
60
+ <usa-combo-box-option value="Oklahoma">Oklahoma</usa-combo-box-option>
61
+ <usa-combo-box-option value="Oregon">Oregon</usa-combo-box-option>
62
+ <usa-combo-box-option value="Pennsylvania">Pennsylvania</usa-combo-box-option>
63
+ <usa-combo-box-option value="Rhode Island">Rhode Island</usa-combo-box-option>
64
+ <usa-combo-box-option value="South Carolina">South Carolina</usa-combo-box-option>
65
+ <usa-combo-box-option value="South Dakota">South Dakota</usa-combo-box-option>
66
+ <usa-combo-box-option value="Tennessee">Tennessee</usa-combo-box-option>
67
+ <usa-combo-box-option value="Texas">Texas</usa-combo-box-option>
68
+ <usa-combo-box-option value="Utah">Utah</usa-combo-box-option>
69
+ <usa-combo-box-option value="Vermont">Vermont</usa-combo-box-option>
70
+ <usa-combo-box-option value="Virginia">Virginia</usa-combo-box-option>
71
+ <usa-combo-box-option value="Washington">Washington</usa-combo-box-option>
72
+ <usa-combo-box-option value="West Virginia">West Virginia</usa-combo-box-option>
73
+ <usa-combo-box-option value="Wisconsin">Wisconsin</usa-combo-box-option>
74
+ <usa-combo-box-option value="Wyoming">Wyoming</usa-combo-box-option>
75
+ </usa-combo-box>
76
+ `;
77
+ },
78
+ };
79
+
80
+ export const WithImages: Story = {
10
81
  render() {
11
82
  return html`
12
83
  <usa-combo-box placeholder="Select a state" name="state">
@@ -214,15 +285,4 @@ const meta = {
214
285
  </usa-combo-box>
215
286
  `;
216
287
  },
217
- argTypes: {},
218
- args: {},
219
- } satisfies Meta<USAComboBoxElement>;
220
-
221
- export default meta;
222
-
223
- type Story = StoryObj<USAComboBoxElement>;
224
-
225
- // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
226
- export const Primary: Story = {
227
- args: {},
228
288
  };
package/src/lib/input/input.element.ts CHANGED
@@ -18,6 +18,14 @@ declare global {
18
18
  }
19
19
 
20
20
  :host {
21
+ --usa-input-bg-color: #fff;
22
+ --usa-input-border-color: #5c5c5c;
23
+ --usa-input-text-color: #1b1b1b;
24
+ --usa-input-focus-color: #2491ff;
25
+ --usa-input-disabled-bg-color: #fff;
26
+ --usa-input-disabled-border-color: #757575;
27
+ --usa-input-disabled-text-color: #757575;
28
+
21
29
  font-size: 1.06rem;
22
30
  line-height: 1.3;
23
31
  display: block;
@@ -28,11 +36,12 @@ declare global {
28
36
  }
29
37
 
30
38
  input {
39
+ background-color: var(--usa-input-bg-color);
31
40
  border-width: 1px;
32
- border-color: #5c5c5c;
41
+ border-color: var(--usa-input-border-color);
33
42
  border-style: solid;
34
43
  border-radius: 0;
35
- color: #1b1b1b;
44
+ color: var(--usa-input-text-color);
36
45
  display: block;
37
46
  height: 2.5rem;
38
47
  line-height: 1.3;
@@ -43,10 +52,16 @@ declare global {
43
52
  }
44
53
 
45
54
  input:not(:disabled):focus {
46
- outline: 0.25rem solid #2491ff;
55
+ outline: 0.25rem solid var(--usa-input-focus-color);
47
56
  outline-offset: 0;
48
57
  }
49
58
 
59
+ input:disabled {
60
+ background-color: var(--usa-input-disabled-bg-color);
61
+ border-color: var(--usa-input-disabled-border-color);
62
+ color: var(--usa-input-disabled-text-color);
63
+ }
64
+
50
65
  slot[name="detail"]::slotted(*) {
51
66
  color: #757575;
52
67
  }
package/src/lib/radio/radio.element.ts CHANGED
@@ -18,15 +18,21 @@ declare global {
18
18
  shadowDom: [
19
19
  css`
20
20
  :host {
21
- --usa-radio-active-color: #005ea2;
21
+ --usa-input-bg-color: #fff;
22
+ --usa-input-border-color: #5c5c5c;
23
+ --usa-input-text-color: #1b1b1b;
24
+ --usa-input-focus-color: #2491ff;
25
+ --usa-input-disabled-bg-color: #fff;
26
+ --usa-input-disabled-border-color: #757575;
27
+ --usa-input-disabled-text-color: #757575;
28
+ --usa-input-active-color: #005ea2;
29
+ --usa-radio-active-color: var(--usa-input-active-color);
22
30
  --usa-radio-tiled-bg: rgba(0, 94, 162, 0.1);
23
- --usa-radio-focus-color: #2491ff;
31
+ --usa-radio-focus-color: var(--usa-input-focus-color);
24
32
 
25
- display: flex;
26
- flex-direction: column;
27
- gap: 1rem;
33
+ display: inline-block;
28
34
  max-width: 30rem;
29
- margin-bottom: 1.5rem;
35
+ position: relative;
30
36
  }
31
37
 
32
38
  label {
@@ -47,8 +53,8 @@ declare global {
47
53
  height: 1.25rem;
48
54
  border-radius: 99rem;
49
55
  width: 1.25rem;
50
- background: #fff;
51
- box-shadow: 0 0 0 2px #1b1b1b;
56
+ background: var(--usa-input-bg-color);
57
+ box-shadow: 0 0 0 2px var(--usa-input-text-color);
52
58
  flex: 0 0 1.25rem;
53
59
  position: relative;
54
60
  z-index: 1000;
@@ -58,24 +64,24 @@ declare global {
58
64
  background-color: var(--usa-radio-active-color);
59
65
  box-shadow:
60
66
  0 0 0 2px var(--usa-radio-active-color),
61
- inset 0 0 0 2px #fff;
67
+ inset 0 0 0 2px var(--usa-input-bg-color);
62
68
  }
63
69
 
64
70
  label:has(input:checked:is(:disabled))::before {
65
- background-color: #757575;
71
+ background-color: var(--usa-input-disabled-text-color);
66
72
  box-shadow:
67
- 0 0 0 2px #757575,
68
- inset 0 0 0 2px #fff;
73
+ 0 0 0 2px var(--usa-input-disabled-text-color),
74
+ inset 0 0 0 2px var(--usa-input-bg-color);
69
75
  }
70
76
 
71
77
  label:has(input:disabled) {
72
78
  cursor: not-allowed;
73
- color: #757575 !important;
79
+ color: var(--usa-input-disabled-text-color) !important;
74
80
  }
75
81
 
76
82
  label:has(input:disabled)::before {
77
- background-color: #fff;
78
- box-shadow: 0 0 0 2px #757575;
83
+ background-color: var(--usa-input-disabled-bg-color);
84
+ box-shadow: 0 0 0 2px var(--usa-input-disabled-border-color);
79
85
  }
80
86
 
81
87
  label:has(input:focus)::before {
@@ -88,21 +94,60 @@ declare global {
88
94
  }
89
95
 
90
96
  :host([tiled]) label {
91
- background-color: #fff;
92
- border: 2px solid #c9c9c9;
93
- color: #1b1b1b;
97
+ background-color: var(--usa-input-bg-color);
98
+ border: 2px solid var(--usa-input-border-color);
94
99
  border-radius: 0.25rem;
100
+ color: var(--usa-input-text-color);
95
101
  padding: 0.75rem 1rem 0.75rem 0.75rem;
96
102
  }
97
103
 
104
+ .radio {
105
+ background: var(--usa-input-bg-color);
106
+ box-shadow: 0 0 0 2px var(--usa-input-text-color);
107
+ display: flex;
108
+ align-items: center;
109
+ justify-content: center;
110
+ height: 1.25rem;
111
+ min-width: 1.25rem;
112
+ max-width: 1.25rem;
113
+ border-radius: 50%;
114
+ position: relative;
115
+ margin-right: 0.75rem;
116
+ }
117
+
118
+ input:disabled + .radio {
119
+ background-color: var(--usa-input-disabled-bg-color);
120
+ box-shadow: 0 0 0 2px var(--usa-input-disabled-border-color);
121
+ }
122
+
123
+ input:disabled:is(:checked) + .radio {
124
+ background-color: var(--usa-input-disabled-text-color);
125
+ box-shadow: 0 0 0 2px var(--usa-input-disabled-border-color);
126
+ }
127
+
128
+ :host([disabled]) label {
129
+ color: var(--usa-input-disabled-text-color);
130
+ cursor: not-allowed;
131
+ }
132
+
133
+ input:checked + .radio {
134
+ background-color: var(--usa-input-active-color);
135
+ box-shadow: 0 0 0 2px var(--usa-input-active-color);
136
+ }
137
+
138
+ input:focus + .radio {
139
+ outline: 0.25rem solid var(--usa-input-focus-color);
140
+ outline-offset: 0.25rem;
141
+ }
142
+
98
143
  :host([tiled]) label:has(input:checked) {
99
- background-color: var(--usa-radio-tiled-bg);
100
- border-color: var(--usa-radio-active-color);
144
+ background-color: rgba(0, 94, 162, 0.1);
145
+ border-color: var(--usa-input-active-color);
101
146
  }
102
147
 
103
148
  :host([tiled]) label:has(input:checked:is(:disabled)) {
104
- background-color: #fff;
105
- border-color: #757575;
149
+ background-color: var(--usa-input-disabled-bg-color);
150
+ border-color: var(--usa-input-disabled-border-color);
106
151
  }
107
152
 
108
153
  slot {
package/src/lib/select/select.element.ts CHANGED
@@ -18,6 +18,14 @@ declare global {
18
18
  shadowDom: [
19
19
  css`
20
20
  :host {
21
+ --usa-input-bg-color: #fff;
22
+ --usa-input-border-color: #5c5c5c;
23
+ --usa-input-text-color: #1b1b1b;
24
+ --usa-input-focus-color: #2491ff;
25
+ --usa-input-disabled-bg-color: #fff;
26
+ --usa-input-disabled-border-color: #757575;
27
+ --usa-input-disabled-text-color: #757575;
28
+
21
29
  display: block;
22
30
  line-height: 1.3;
23
31
  position: relative;
@@ -30,10 +38,11 @@ declare global {
30
38
  font-size: 1.06rem;
31
39
  appearance: none;
32
40
  border-width: 1px;
33
- border-color: #5c5c5c;
41
+ border-color: var(--usa-input-border-color);
34
42
  border-style: solid;
35
43
  border-radius: 0;
36
- color: #1b1b1b;
44
+ color: var(--usa-input-text-color);
45
+ background-color: var(--usa-input-bg-color);
37
46
  display: block;
38
47
  height: 2.5rem;
39
48
  margin-top: 0.5rem;
@@ -42,10 +51,16 @@ declare global {
42
51
  }
43
52
 
44
53
  select:not(:disabled):focus {
45
- outline: 0.25rem solid #2491ff;
54
+ outline: 0.25rem solid var(--usa-input-focus-color);
46
55
  outline-offset: 0;
47
56
  }
48
57
 
58
+ select:disabled {
59
+ background-color: var(--usa-input-disabled-bg-color);
60
+ border-color: var(--usa-input-disabled-border-color);
61
+ color: var(--usa-input-disabled-text-color);
62
+ }
63
+
49
64
  usa-icon {
50
65
  position: absolute;
51
66
  right: 0.5rem;
package/src/lib/textarea/textarea.element.ts CHANGED
@@ -16,6 +16,14 @@ declare global {
16
16
  }
17
17
 
18
18
  :host {
19
+ --usa-input-bg-color: #fff;
20
+ --usa-input-border-color: #5c5c5c;
21
+ --usa-input-text-color: #1b1b1b;
22
+ --usa-input-focus-color: #2491ff;
23
+ --usa-input-disabled-bg-color: #fff;
24
+ --usa-input-disabled-border-color: #757575;
25
+ --usa-input-disabled-text-color: #757575;
26
+
19
27
  font-size: 1.06rem;
20
28
  line-height: 1.3;
21
29
  display: flex;
@@ -32,13 +40,14 @@ declare global {
32
40
  font-family: inherit;
33
41
  font-size: inherit;
34
42
  border-radius: 0;
35
- color: #1b1b1b;
43
+ color: var(--usa-input-text-color);
36
44
  display: block;
37
45
  max-width: 30rem;
38
46
  padding: .5rem;
39
47
  border-width: 1px;
40
- border-color: #5c5c5c;
48
+ border-color: var(--usa-input-border-color);
41
49
  border-style: solid;
50
+ background-color: var(--usa-input-bg-color);
42
51
  -webkit-appearance: none;
43
52
  -moz-appearance: none;
44
53
  appearance: none;
@@ -48,9 +57,15 @@ declare global {
48
57
  }
49
58
 
50
59
  textarea:not(:disabled):focus {
51
- outline: 0.25rem solid #2491ff;
60
+ outline: 0.25rem solid var(--usa-input-focus-color);
52
61
  outline-offset: 0;
53
62
  }
63
+
64
+ textarea:disabled {
65
+ background-color: var(--usa-input-disabled-bg-color);
66
+ border-color: var(--usa-input-disabled-border-color);
67
+ color: var(--usa-input-disabled-text-color);
68
+ }
54
69
  `,
55
70
  html`
56
71
  <label for="textarea">