@noctuatech/uswds 0.0.34 → 0.0.35
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/checkbox/checkbox.element.ts +15 -5
- package/src/lib/radio/radio-option/radio-option.element.ts +9 -6
- package/src/lib/radio/radio.element.ts +22 -0
- package/src/lib/radio/radio.stories.ts +2 -7
- package/target/lib/checkbox/checkbox.element.js +15 -5
- package/target/lib/checkbox/checkbox.element.js.map +1 -1
- package/target/lib/radio/radio-option/radio-option.element.d.ts +1 -0
- package/target/lib/radio/radio-option/radio-option.element.js +15 -7
- package/target/lib/radio/radio-option/radio-option.element.js.map +1 -1
- package/target/lib/radio/radio.element.js +22 -0
- package/target/lib/radio/radio.element.js.map +1 -1
- package/target/lib/radio/radio.stories.d.ts +0 -1
- package/target/lib/radio/radio.stories.js +2 -4
- package/target/lib/radio/radio.stories.js.map +1 -1
package/package.json
CHANGED
|
@@ -49,13 +49,13 @@ declare global {
|
|
|
49
49
|
margin-right: 0.75rem;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
input:
|
|
53
|
-
background-color: #
|
|
54
|
-
box-shadow: 0 0 0 2px #
|
|
52
|
+
input:disabled + .checkbox {
|
|
53
|
+
background-color: #fff;
|
|
54
|
+
box-shadow: 0 0 0 2px #757575;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
:
|
|
58
|
-
background-color: #
|
|
57
|
+
input:disabled:is(:checked) + .checkbox {
|
|
58
|
+
background-color: #757575;
|
|
59
59
|
box-shadow: 0 0 0 2px #757575;
|
|
60
60
|
}
|
|
61
61
|
|
|
@@ -63,6 +63,11 @@ declare global {
|
|
|
63
63
|
color: #757575;
|
|
64
64
|
cursor: not-allowed;
|
|
65
65
|
}
|
|
66
|
+
|
|
67
|
+
input:checked + .checkbox {
|
|
68
|
+
background-color: #005ea2;
|
|
69
|
+
box-shadow: 0 0 0 2px #005ea2;
|
|
70
|
+
}
|
|
66
71
|
|
|
67
72
|
input:checked + .checkbox::after {
|
|
68
73
|
content: " ";
|
|
@@ -98,6 +103,11 @@ declare global {
|
|
|
98
103
|
background-color: rgba(0, 94, 162, 0.1);
|
|
99
104
|
border-color: #005ea2;
|
|
100
105
|
}
|
|
106
|
+
|
|
107
|
+
:host([tiled]) label:has(input:checked:is(:disabled)) {
|
|
108
|
+
background-color: #fff;
|
|
109
|
+
border-color: #757575;
|
|
110
|
+
}
|
|
101
111
|
`,
|
|
102
112
|
html`
|
|
103
113
|
<label>
|
|
@@ -37,6 +37,9 @@ export class USARadioOptionElement extends HTMLElement {
|
|
|
37
37
|
@attr()
|
|
38
38
|
accessor value = "";
|
|
39
39
|
|
|
40
|
+
@attr()
|
|
41
|
+
accessor disabled = false;
|
|
42
|
+
|
|
40
43
|
#label = query("label");
|
|
41
44
|
#input = query("input");
|
|
42
45
|
#slot = query("slot");
|
|
@@ -52,7 +55,7 @@ export class USARadioOptionElement extends HTMLElement {
|
|
|
52
55
|
});
|
|
53
56
|
|
|
54
57
|
attributeChangedCallback() {
|
|
55
|
-
this.#input({ value: this.value });
|
|
58
|
+
this.#input({ value: this.value, disabled: this.disabled });
|
|
56
59
|
this.#slot({ name: this.value });
|
|
57
60
|
|
|
58
61
|
this.slot = this.value;
|
|
@@ -60,16 +63,16 @@ export class USARadioOptionElement extends HTMLElement {
|
|
|
60
63
|
|
|
61
64
|
@injected()
|
|
62
65
|
onInjected() {
|
|
63
|
-
const
|
|
66
|
+
const radioCtx = this.#radio();
|
|
64
67
|
|
|
65
|
-
|
|
68
|
+
radioCtx.addRadioOption(this.#label());
|
|
66
69
|
|
|
67
70
|
this.#input({
|
|
68
|
-
name:
|
|
69
|
-
checked:
|
|
71
|
+
name: radioCtx.name,
|
|
72
|
+
checked: radioCtx.value === this.value,
|
|
70
73
|
});
|
|
71
74
|
|
|
72
|
-
this.#observer.observe(
|
|
75
|
+
this.#observer.observe(radioCtx, {
|
|
73
76
|
attributeFilter: ["value", "name"],
|
|
74
77
|
});
|
|
75
78
|
}
|
|
@@ -61,6 +61,23 @@ declare global {
|
|
|
61
61
|
inset 0 0 0 2px #fff;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
+
label:has(input:checked:is(:disabled))::before {
|
|
65
|
+
background-color: #757575;
|
|
66
|
+
box-shadow:
|
|
67
|
+
0 0 0 2px #757575,
|
|
68
|
+
inset 0 0 0 2px #fff;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
label:has(input:disabled) {
|
|
72
|
+
cursor: not-allowed;
|
|
73
|
+
color: #757575 !important;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
label:has(input:disabled)::before {
|
|
77
|
+
background-color: #fff;
|
|
78
|
+
box-shadow: 0 0 0 2px #757575;
|
|
79
|
+
}
|
|
80
|
+
|
|
64
81
|
label:has(input:focus)::before {
|
|
65
82
|
outline: 0.25rem solid var(--usa-radio-focus-color);
|
|
66
83
|
outline-offset: 0.25rem;
|
|
@@ -83,6 +100,11 @@ declare global {
|
|
|
83
100
|
border-color: var(--usa-radio-active-color);
|
|
84
101
|
}
|
|
85
102
|
|
|
103
|
+
:host([tiled]) label:has(input:checked:is(:disabled)) {
|
|
104
|
+
background-color: #fff;
|
|
105
|
+
border-color: #757575;
|
|
106
|
+
}
|
|
107
|
+
|
|
86
108
|
slot {
|
|
87
109
|
display: flex;
|
|
88
110
|
}
|
|
@@ -23,17 +23,14 @@ const meta = {
|
|
|
23
23
|
|
|
24
24
|
<usa-radio-option value="frederick-douglass">
|
|
25
25
|
Frederick Douglass
|
|
26
|
-
|
|
27
|
-
args.description,
|
|
28
|
-
() => html`<usa-description>${args.description}</usa-description>`,
|
|
29
|
-
)}
|
|
26
|
+
<usa-description>This is optional text that can be used to describe the label in more detail.</usa-description>
|
|
30
27
|
</usa-radio-option>
|
|
31
28
|
|
|
32
29
|
<usa-radio-option value="booker-t-washington">
|
|
33
30
|
Booker T. Washington
|
|
34
31
|
</usa-radio-option>
|
|
35
32
|
|
|
36
|
-
<usa-radio-option value="george-washington-carver">
|
|
33
|
+
<usa-radio-option value="george-washington-carver" disabled>
|
|
37
34
|
George Washington Carver
|
|
38
35
|
</usa-radio-option>
|
|
39
36
|
</usa-radio>
|
|
@@ -42,8 +39,6 @@ const meta = {
|
|
|
42
39
|
argTypes: {},
|
|
43
40
|
args: {
|
|
44
41
|
tiled: true,
|
|
45
|
-
description:
|
|
46
|
-
"This is optional text that can be used to describe the label in more detail.",
|
|
47
42
|
},
|
|
48
43
|
} satisfies Meta<USARadioElement & { description: string }>;
|
|
49
44
|
|
|
@@ -44,13 +44,13 @@ let USACheckboxElement = (() => {
|
|
|
44
44
|
margin-right: 0.75rem;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
input:
|
|
48
|
-
background-color: #
|
|
49
|
-
box-shadow: 0 0 0 2px #
|
|
47
|
+
input:disabled + .checkbox {
|
|
48
|
+
background-color: #fff;
|
|
49
|
+
box-shadow: 0 0 0 2px #757575;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
:
|
|
53
|
-
background-color: #
|
|
52
|
+
input:disabled:is(:checked) + .checkbox {
|
|
53
|
+
background-color: #757575;
|
|
54
54
|
box-shadow: 0 0 0 2px #757575;
|
|
55
55
|
}
|
|
56
56
|
|
|
@@ -58,6 +58,11 @@ let USACheckboxElement = (() => {
|
|
|
58
58
|
color: #757575;
|
|
59
59
|
cursor: not-allowed;
|
|
60
60
|
}
|
|
61
|
+
|
|
62
|
+
input:checked + .checkbox {
|
|
63
|
+
background-color: #005ea2;
|
|
64
|
+
box-shadow: 0 0 0 2px #005ea2;
|
|
65
|
+
}
|
|
61
66
|
|
|
62
67
|
input:checked + .checkbox::after {
|
|
63
68
|
content: " ";
|
|
@@ -93,6 +98,11 @@ let USACheckboxElement = (() => {
|
|
|
93
98
|
background-color: rgba(0, 94, 162, 0.1);
|
|
94
99
|
border-color: #005ea2;
|
|
95
100
|
}
|
|
101
|
+
|
|
102
|
+
:host([tiled]) label:has(input:checked:is(:disabled)) {
|
|
103
|
+
background-color: #fff;
|
|
104
|
+
border-color: #757575;
|
|
105
|
+
}
|
|
96
106
|
`,
|
|
97
107
|
html `
|
|
98
108
|
<label>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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;
|
|
1
|
+
{"version":3,"file":"checkbox.element.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -34,14 +34,19 @@ let USARadioOptionElement = (() => {
|
|
|
34
34
|
let _value_decorators;
|
|
35
35
|
let _value_initializers = [];
|
|
36
36
|
let _value_extraInitializers = [];
|
|
37
|
+
let _disabled_decorators;
|
|
38
|
+
let _disabled_initializers = [];
|
|
39
|
+
let _disabled_extraInitializers = [];
|
|
37
40
|
let _onInjected_decorators;
|
|
38
41
|
var USARadioOptionElement = class extends _classSuper {
|
|
39
42
|
static { _classThis = this; }
|
|
40
43
|
static {
|
|
41
44
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
42
45
|
_value_decorators = [attr()];
|
|
46
|
+
_disabled_decorators = [attr()];
|
|
43
47
|
_onInjected_decorators = [injected()];
|
|
44
48
|
__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);
|
|
49
|
+
__esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
|
|
45
50
|
__esDecorate(this, null, _onInjected_decorators, { kind: "method", name: "onInjected", static: false, private: false, access: { has: obj => "onInjected" in obj, get: obj => obj.onInjected }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
46
51
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
47
52
|
USARadioOptionElement = _classThis = _classDescriptor.value;
|
|
@@ -51,7 +56,10 @@ let USARadioOptionElement = (() => {
|
|
|
51
56
|
#value_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, ""));
|
|
52
57
|
get value() { return this.#value_accessor_storage; }
|
|
53
58
|
set value(value) { this.#value_accessor_storage = value; }
|
|
54
|
-
#
|
|
59
|
+
#disabled_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
60
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
61
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
62
|
+
#label = (__runInitializers(this, _disabled_extraInitializers), query("label"));
|
|
55
63
|
#input = query("input");
|
|
56
64
|
#slot = query("slot");
|
|
57
65
|
#radio = inject(RADIO_CTX);
|
|
@@ -63,18 +71,18 @@ let USARadioOptionElement = (() => {
|
|
|
63
71
|
});
|
|
64
72
|
});
|
|
65
73
|
attributeChangedCallback() {
|
|
66
|
-
this.#input({ value: this.value });
|
|
74
|
+
this.#input({ value: this.value, disabled: this.disabled });
|
|
67
75
|
this.#slot({ name: this.value });
|
|
68
76
|
this.slot = this.value;
|
|
69
77
|
}
|
|
70
78
|
onInjected() {
|
|
71
|
-
const
|
|
72
|
-
|
|
79
|
+
const radioCtx = this.#radio();
|
|
80
|
+
radioCtx.addRadioOption(this.#label());
|
|
73
81
|
this.#input({
|
|
74
|
-
name:
|
|
75
|
-
checked:
|
|
82
|
+
name: radioCtx.name,
|
|
83
|
+
checked: radioCtx.value === this.value,
|
|
76
84
|
});
|
|
77
|
-
this.#observer.observe(
|
|
85
|
+
this.#observer.observe(radioCtx, {
|
|
78
86
|
attributeFilter: ["value", "name"],
|
|
79
87
|
});
|
|
80
88
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-option.element.js","sourceRoot":"","sources":["../../../../src/lib/radio/radio-option/radio-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;IAgC7B,qBAAqB;4BAxBjC,UAAU,CAAC;YACV,IAAI,EAAE,sBAAsB;SAC7B,CAAC,EACD,OAAO,CAAC;YACP,OAAO,EAAE,kBAAkB;YAC3B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;KAMF;gBACD,IAAI,CAAA;;;;;;;;KAQH;aACF;SACF,CAAC;;;;sBACyC,WAAW
|
|
1
|
+
{"version":3,"file":"radio-option.element.js","sourceRoot":"","sources":["../../../../src/lib/radio/radio-option/radio-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;IAgC7B,qBAAqB;4BAxBjC,UAAU,CAAC;YACV,IAAI,EAAE,sBAAsB;SAC7B,CAAC,EACD,OAAO,CAAC;YACP,OAAO,EAAE,kBAAkB;YAC3B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;KAMF;gBACD,IAAI,CAAA;;;;;;;;KAQH;aACF;SACF,CAAC;;;;sBACyC,WAAW;;;;;;;;;qCAAnB,SAAQ,WAAW;;;;iCACnD,IAAI,EAAE;oCAGN,IAAI,EAAE;sCAwBN,QAAQ,EAAE;YA1BX,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAGpB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAS;YAwB1B,iLAAA,UAAU,6DAaT;YA1CH,6KAiDC;;;YAjDY,uDAAqB;;QAEhC,2BAFW,mDAAqB,+CAEf,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAGpB,iIAAoB,KAAK,GAAC;QAA1B,IAAS,QAAQ,8CAAS;QAA1B,IAAS,QAAQ,oDAAS;QAE1B,MAAM,0DAAG,KAAK,CAAC,OAAO,CAAC,EAAC;QACxB,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;QACxB,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;QACtB,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAE3B,SAAS,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACpC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,IAAI,CAAC,MAAM,CAAC;gBACV,IAAI,EAAE,KAAK,CAAC,IAAI;gBAChB,OAAO,EAAE,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;aACpC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,wBAAwB;YACtB,IAAI,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;YAC5D,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;YAEjC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,CAAC;QAGD,UAAU;YACR,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE/B,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;YAEvC,IAAI,CAAC,MAAM,CAAC;gBACV,IAAI,EAAE,QAAQ,CAAC,IAAI;gBACnB,OAAO,EAAE,QAAQ,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;aACvC,CAAC,CAAC;YAEH,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,EAAE;gBAC/B,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;aACnC,CAAC,CAAC;QACL,CAAC;QAED,oBAAoB;YAClB,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC;YAEvB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC;;;;SAhDU,qBAAqB"}
|
|
@@ -54,6 +54,23 @@ let USARadioElement = (() => {
|
|
|
54
54
|
inset 0 0 0 2px #fff;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
label:has(input:checked:is(:disabled))::before {
|
|
58
|
+
background-color: #757575;
|
|
59
|
+
box-shadow:
|
|
60
|
+
0 0 0 2px #757575,
|
|
61
|
+
inset 0 0 0 2px #fff;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
label:has(input:disabled) {
|
|
65
|
+
cursor: not-allowed;
|
|
66
|
+
color: #757575 !important;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
label:has(input:disabled)::before {
|
|
70
|
+
background-color: #fff;
|
|
71
|
+
box-shadow: 0 0 0 2px #757575;
|
|
72
|
+
}
|
|
73
|
+
|
|
57
74
|
label:has(input:focus)::before {
|
|
58
75
|
outline: 0.25rem solid var(--usa-radio-focus-color);
|
|
59
76
|
outline-offset: 0.25rem;
|
|
@@ -76,6 +93,11 @@ let USARadioElement = (() => {
|
|
|
76
93
|
border-color: var(--usa-radio-active-color);
|
|
77
94
|
}
|
|
78
95
|
|
|
96
|
+
:host([tiled]) label:has(input:checked:is(:disabled)) {
|
|
97
|
+
background-color: #fff;
|
|
98
|
+
border-color: #757575;
|
|
99
|
+
}
|
|
100
|
+
|
|
79
101
|
slot {
|
|
80
102
|
display: flex;
|
|
81
103
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.element.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.element.ts"],"names":[],"mappings":";AAAA,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;AAEzE,OAAO,EAAE,SAAS,EAAuB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"radio.element.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { html } from "lit";
|
|
2
|
-
import { when } from "lit/directives/when.js";
|
|
3
2
|
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
4
3
|
const meta = {
|
|
5
4
|
title: "usa-radio",
|
|
@@ -19,14 +18,14 @@ const meta = {
|
|
|
19
18
|
|
|
20
19
|
<usa-radio-option value="frederick-douglass">
|
|
21
20
|
Frederick Douglass
|
|
22
|
-
|
|
21
|
+
<usa-description>This is optional text that can be used to describe the label in more detail.</usa-description>
|
|
23
22
|
</usa-radio-option>
|
|
24
23
|
|
|
25
24
|
<usa-radio-option value="booker-t-washington">
|
|
26
25
|
Booker T. Washington
|
|
27
26
|
</usa-radio-option>
|
|
28
27
|
|
|
29
|
-
<usa-radio-option value="george-washington-carver">
|
|
28
|
+
<usa-radio-option value="george-washington-carver" disabled>
|
|
30
29
|
George Washington Carver
|
|
31
30
|
</usa-radio-option>
|
|
32
31
|
</usa-radio>
|
|
@@ -35,7 +34,6 @@ const meta = {
|
|
|
35
34
|
argTypes: {},
|
|
36
35
|
args: {
|
|
37
36
|
tiled: true,
|
|
38
|
-
description: "This is optional text that can be used to describe the label in more detail.",
|
|
39
37
|
},
|
|
40
38
|
};
|
|
41
39
|
export default meta;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio.stories.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"radio.stories.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAK3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;KAqBtB,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI;KACZ;CACwD,CAAC;AAE5D,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
|