@noctuatech/uswds 1.3.6 → 1.3.7
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.
- package/package.json +1 -1
- package/src/lib/button/button.element.ts +14 -14
- package/src/lib/button/button.stories.ts +12 -11
- package/src/lib/select/select.element.ts +2 -2
- package/target/lib/button/button.element.js +1 -1
- package/target/lib/button/button.stories.d.ts +2 -2
- package/target/lib/button/button.stories.js +10 -5
- package/target/lib/button/button.stories.js.map +1 -1
- package/target/lib/select/select.element.js +2 -2
- package/target/lib/select/select.element.js.map +1 -1
package/package.json
CHANGED
|
@@ -82,20 +82,6 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
|
|
|
82
82
|
outline-offset: 0.25rem;
|
|
83
83
|
}
|
|
84
84
|
|
|
85
|
-
:is(button, a):disabled {
|
|
86
|
-
color: #454545;
|
|
87
|
-
background-color: #c9c9c9;
|
|
88
|
-
cursor: not-allowed;
|
|
89
|
-
opacity: 1;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
:is(button, a):disabled:hover,
|
|
93
|
-
:is(button, a):disabled:active,
|
|
94
|
-
:is(button, a):disabled:focus {
|
|
95
|
-
color: #454545;
|
|
96
|
-
background-color: #c9c9c9;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
85
|
:is(button, a):focus {
|
|
100
86
|
outline: 0.25rem solid #2491ff;
|
|
101
87
|
outline-offset: 0;
|
|
@@ -162,6 +148,20 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
|
|
|
162
148
|
box-shadow: inset 0 0 0 2px #162e51;
|
|
163
149
|
color: #162e51;
|
|
164
150
|
}
|
|
151
|
+
|
|
152
|
+
:host(*) :is(button, a):disabled {
|
|
153
|
+
color: #454545;
|
|
154
|
+
background-color: #c9c9c9;
|
|
155
|
+
cursor: not-allowed;
|
|
156
|
+
opacity: 1;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
:host(*) :is(button, a):disabled:hover,
|
|
160
|
+
:host(*) :is(button, a):disabled:active,
|
|
161
|
+
:host(*) :is(button, a):disabled:focus {
|
|
162
|
+
color: #454545;
|
|
163
|
+
background-color: #c9c9c9;
|
|
164
|
+
}
|
|
165
165
|
`,
|
|
166
166
|
html`
|
|
167
167
|
<j-if bind="href">
|
|
@@ -1,26 +1,27 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from
|
|
2
|
-
import { html } from
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/web-components';
|
|
2
|
+
import { html } from 'lit';
|
|
3
3
|
|
|
4
|
-
import { BUTTON_VARIANTS, type USAButtonElement } from
|
|
4
|
+
import { BUTTON_VARIANTS, type USAButtonElement } from './button.element.js';
|
|
5
5
|
|
|
6
6
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
7
7
|
const meta = {
|
|
8
|
-
title:
|
|
9
|
-
tags: [
|
|
8
|
+
title: 'usa-button',
|
|
9
|
+
tags: ['autodocs'],
|
|
10
10
|
render() {
|
|
11
11
|
return html`
|
|
12
12
|
<div style="display: inline-flex; flex-direction: column; gap: 1rem">
|
|
13
13
|
${BUTTON_VARIANTS.map(
|
|
14
14
|
(variant, i) =>
|
|
15
|
-
html`<usa-button variant=${variant}>Hello World</usa-button> ${
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
html`<usa-button variant=${variant}>Hello World</usa-button> ${i === BUTTON_VARIANTS.length - 1
|
|
16
|
+
? ''
|
|
17
|
+
: '\n\n'}`,
|
|
18
18
|
)}
|
|
19
19
|
${BUTTON_VARIANTS.map(
|
|
20
20
|
(variant, i) =>
|
|
21
|
-
html`<usa-button href="#" variant=${variant}>Hello World (Link)</usa-button> ${
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
html`<usa-button href="#" variant=${variant}>Hello World (Link)</usa-button> ${i ===
|
|
22
|
+
BUTTON_VARIANTS.length - 1
|
|
23
|
+
? ''
|
|
24
|
+
: '\n\n'}`,
|
|
24
25
|
)}
|
|
25
26
|
<usa-button disabled>Disabled</usa-button>
|
|
26
27
|
</div>
|
|
@@ -107,7 +107,7 @@ export class USASelectElement extends HTMLElement implements SelectContainer {
|
|
|
107
107
|
this.#syncFormState();
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
@listen('
|
|
110
|
+
@listen('input')
|
|
111
111
|
onSelectChange(e: Event) {
|
|
112
112
|
e.stopImmediatePropagation();
|
|
113
113
|
|
|
@@ -115,7 +115,7 @@ export class USASelectElement extends HTMLElement implements SelectContainer {
|
|
|
115
115
|
|
|
116
116
|
this.value = select.value;
|
|
117
117
|
|
|
118
|
-
this.dispatchEvent(new Event('
|
|
118
|
+
this.dispatchEvent(new Event('input', { bubbles: true }));
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
addSelectOption(option: HTMLOptionElement) {
|
|
@@ -11,7 +11,7 @@ let USAButtonElement = (() => {
|
|
|
11
11
|
delegatesFocus: true,
|
|
12
12
|
},
|
|
13
13
|
shadowDom: [
|
|
14
|
-
css `:host{display:inline-block;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;overflow:hidden}a,button{box-sizing:border-box;font-size:1.06rem;line-height:.9;color:#fff;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;border:0;cursor:pointer;-moz-column-gap:0.5rem;column-gap:.5rem;display:inline-flex;font-weight:700;justify-content:center;padding:.75rem 1.25rem;text-align:center;text-decoration:none;width:100%;height:100%;cursor:pointer}@media all and (min-width:30em){:host{width:auto}}:is(button,a):visited{color:#fff}:is(button,a):hover{color:#fff;background-color:#1a4480;border-bottom:0;text-decoration:none}:is(button,a):active{color:#fff;background-color:#162e51}:is(button,a):not([disabled]):focus{outline-offset:0.25rem}:is(button,a):
|
|
14
|
+
css `:host{display:inline-block;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;overflow:hidden}a,button{box-sizing:border-box;font-size:1.06rem;line-height:.9;color:#fff;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;border:0;cursor:pointer;-moz-column-gap:0.5rem;column-gap:.5rem;display:inline-flex;font-weight:700;justify-content:center;padding:.75rem 1.25rem;text-align:center;text-decoration:none;width:100%;height:100%;cursor:pointer}@media all and (min-width:30em){:host{width:auto}}:is(button,a):visited{color:#fff}:is(button,a):hover{color:#fff;background-color:#1a4480;border-bottom:0;text-decoration:none}:is(button,a):active{color:#fff;background-color:#162e51}:is(button,a):not([disabled]):focus{outline-offset:0.25rem}:is(button,a):focus{outline:.25rem solid #2491ff;outline-offset:0}:host([variant=secondary]) :is(button,a){color:#fff;background-color:#d83933}:host([variant=secondary]) :is(button,a):hover{background-color:#b50909}:host([variant=secondary]) :is(button,a):active{background-color:#8b0a03}:host([variant=cool]) :is(button,a){color:#1b1b1b;background-color:#00bde3}:host([variant=cool]) :is(button,a):hover{background-color:#28a0cb}:host([variant=cool]) :is(button,a):active{color:#fff;background-color:#07648d}:host([variant=warm]) :is(button,a){color:#1b1b1b;background-color:#fa9441}:host([variant=warm]) :is(button,a):hover{color:#fff;background-color:#c05600}:host([variant=warm]) :is(button,a):active{color:#fff;background-color:#775540}:host([variant=outline]) :is(button,a){background-color:transparent;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}:host([variant=outline]) :is(button,a):hover{box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}:host([variant=outline]) :is(button,a):active{box-shadow:inset 0 0 0 2px #162e51;color:#162e51}:host(*) :is(button,a):disabled{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}:host(*) :is(button,a):disabled:active,:host(*) :is(button,a):disabled:focus,:host(*) :is(button,a):disabled:hover{color:#454545;background-color:#c9c9c9}`,
|
|
15
15
|
html `<j-if bind="href"><template><j-bind props="href,target"><a part="link"><slot></slot></a></j-bind></template><template else><j-bind props="value,type,disabled"><button tabindex="0" part="button"><slot></slot></button></j-bind></template></j-if>`,
|
|
16
16
|
],
|
|
17
17
|
})];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { StoryObj } from
|
|
2
|
-
import { type USAButtonElement } from
|
|
1
|
+
import type { StoryObj } from '@storybook/web-components';
|
|
2
|
+
import { type USAButtonElement } from './button.element.js';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
5
|
tags: string[];
|
|
@@ -1,11 +1,16 @@
|
|
|
1
|
-
import { html } from
|
|
2
|
-
import { BUTTON_VARIANTS } from
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import { BUTTON_VARIANTS } from './button.element.js';
|
|
3
3
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
4
4
|
const meta = {
|
|
5
|
-
title:
|
|
6
|
-
tags: [
|
|
5
|
+
title: 'usa-button',
|
|
6
|
+
tags: ['autodocs'],
|
|
7
7
|
render() {
|
|
8
|
-
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
|
|
8
|
+
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
|
|
9
|
+
? ''
|
|
10
|
+
: '\n\n'}`)} ${BUTTON_VARIANTS.map((variant, i) => html `<usa-button href="#" variant="${variant}">Hello World (Link)</usa-button>${i ===
|
|
11
|
+
BUTTON_VARIANTS.length - 1
|
|
12
|
+
? ''
|
|
13
|
+
: '\n\n'}`)}<usa-button disabled="disabled">Disabled</usa-button></div>`;
|
|
9
14
|
},
|
|
10
15
|
argTypes: {},
|
|
11
16
|
args: {},
|
|
@@ -1 +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;QACJ,OAAO,IAAI,CAAA;;UAEL,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,uBAAuB,OAAO,
|
|
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;QACJ,OAAO,IAAI,CAAA;;UAEL,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,uBAAuB,OAAO,6BAA6B,CAAC,KAAK,eAAe,CAAC,MAAM,GAAG,CAAC;YAC3F,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,MAAM,EAAE,CACjB;UACC,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,gCAAgC,OAAO,oCAAoC,CAAC;YAC9E,eAAe,CAAC,MAAM,GAAG,CAAC;YACxB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,MAAM,EAAE,CACjB;;;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"}
|
|
@@ -40,7 +40,7 @@ let USASelectElement = (() => {
|
|
|
40
40
|
_name_decorators = [attr(), bind()];
|
|
41
41
|
_required_decorators = [attr(), bind()];
|
|
42
42
|
_onChange_decorators = [effect()];
|
|
43
|
-
_onSelectChange_decorators = [listen('
|
|
43
|
+
_onSelectChange_decorators = [listen('input')];
|
|
44
44
|
__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);
|
|
45
45
|
__esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
|
|
46
46
|
__esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
|
|
@@ -72,7 +72,7 @@ let USASelectElement = (() => {
|
|
|
72
72
|
e.stopImmediatePropagation();
|
|
73
73
|
const select = this.#select();
|
|
74
74
|
this.value = select.value;
|
|
75
|
-
this.dispatchEvent(new Event('
|
|
75
|
+
this.dispatchEvent(new Event('input', { bubbles: true }));
|
|
76
76
|
}
|
|
77
77
|
addSelectOption(option) {
|
|
78
78
|
const select = this.#select();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.element.js","sourceRoot":"","sources":["../../../src/lib/select/select.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAwB,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;IA2E9B,gBAAgB;4BAnE5B,UAAU,CAAC;YACV,IAAI,EAAE,gBAAgB;YACtB,aAAa,EAAE,CAAC,cAAc,CAAC;SAChC,CAAC,EACD,OAAO,CAAC;YACP,OAAO,EAAE,YAAY;YACrB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CF;gBACD,IAAI,CAAA;;;;;;;;;;;;KAYH;aACF;SACF,CAAC;;;;sBACoC,WAAW;;;;;;;;;;;;;gCAAnB,SAAQ,WAAW;;;;iCAG9C,IAAI,EAAE,EACN,IAAI,EAAE;gCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAUN,MAAM,EAAE;0CAKR,MAAM,CAAC,
|
|
1
|
+
{"version":3,"file":"select.element.js","sourceRoot":"","sources":["../../../src/lib/select/select.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAwB,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;IA2E9B,gBAAgB;4BAnE5B,UAAU,CAAC;YACV,IAAI,EAAE,gBAAgB;YACtB,aAAa,EAAE,CAAC,cAAc,CAAC;SAChC,CAAC,EACD,OAAO,CAAC;YACP,OAAO,EAAE,YAAY;YACrB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4CF;gBACD,IAAI,CAAA;;;;;;;;;;;;KAYH;aACF;SACF,CAAC;;;;sBACoC,WAAW;;;;;;;;;;;;;gCAAnB,SAAQ,WAAW;;;;iCAG9C,IAAI,EAAE,EACN,IAAI,EAAE;gCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAGN,IAAI,EAAE,EACN,IAAI,EAAE;oCAUN,MAAM,EAAE;0CAKR,MAAM,CAAC,OAAO,CAAC;YAtBhB,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAIpB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAInB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAU1B,2KAAA,QAAQ,6DAEP;YAGD,6LAAA,cAAc,6DAQb;YApCH,6KA4DC;;;;QA3DC,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;QAI7B,2BALW,mDAAgB,+CAKV,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAIpB,yHAAgB,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAInB,gIAAoB,KAAK,GAAC;QAA1B,IAAS,QAAQ,8CAAS;QAA1B,IAAS,QAAQ,oDAAS;QAE1B,OAAO,0DAAG,KAAK,CAAC,QAAQ,CAAC,EAAC;QAC1B,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAEpC,iBAAiB;YACf,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAGD,QAAQ;YACN,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAGD,cAAc,CAAC,CAAQ;YACrB,CAAC,CAAC,wBAAwB,EAAE,CAAC;YAE7B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAE9B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAE1B,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC5D,CAAC;QAED,eAAe,CAAC,MAAyB;YACvC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAE9B,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBAC3C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC5B,CAAC;YAED,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QACxB,CAAC;QAED,KAAK,CAAC,cAAc;YAClB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAE9B,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAEhC,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;YAExB,IAAI,MAAM,CAAC,iBAAiB,EAAE,CAAC;gBAC7B,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;YACvF,CAAC;QACH,CAAC;;YA3DU,uDAAgB;;;;;SAAhB,gBAAgB"}
|