@noctuatech/uswds 0.1.4 → 0.2.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.
- package/README.md +48 -0
- package/package.json +4 -4
- package/src/lib/button/button.element.ts +11 -3
- package/src/lib/combo-box/combo-box.element.ts +20 -0
- package/src/lib/combo-box/combo-box.test.ts +18 -31
- package/src/lib/define.ts +5 -0
- package/src/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.ts +81 -0
- package/src/lib/in-page-nav/in-page-nav.element.ts +58 -0
- package/src/lib/in-page-nav/in-page-nav.stories.ts +67 -0
- package/src/lib/in-page-nav/in-page-nav.test.ts +15 -0
- package/src/lib/input/input.element.ts +9 -1
- package/src/lib/process-list/process-list-item/process-list-item.element.ts +80 -0
- package/src/lib/process-list/process-list.element.ts +27 -0
- package/src/lib/process-list/process-list.stories.ts +61 -0
- package/src/lib/process-list/process-list.test.ts +41 -0
- package/src/lib/search/search.element.ts +94 -0
- package/src/lib/search/search.event.ts +15 -0
- package/src/lib/search/search.stories.ts +31 -0
- package/src/lib/search/search.test.ts +81 -0
- package/src/lib.ts +5 -0
- package/target/lib/button/button.element.js +1 -1
- package/target/lib/button/button.element.js.map +1 -1
- package/target/lib/checkbox/checkbox.element.js +1 -1
- package/target/lib/combo-box/combo-box.element.d.ts +3 -0
- package/target/lib/combo-box/combo-box.element.js +23 -2
- package/target/lib/combo-box/combo-box.element.js.map +1 -1
- package/target/lib/combo-box/combo-box.test.js +7 -25
- package/target/lib/combo-box/combo-box.test.js.map +1 -1
- package/target/lib/define.d.ts +5 -0
- package/target/lib/define.js +5 -0
- package/target/lib/define.js.map +1 -1
- package/target/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.d.ts +15 -0
- package/target/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.js +78 -0
- package/target/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.js.map +1 -0
- package/target/lib/in-page-nav/in-page-nav.element.d.ts +10 -0
- package/target/lib/in-page-nav/in-page-nav.element.js +50 -0
- package/target/lib/in-page-nav/in-page-nav.element.js.map +1 -0
- package/target/lib/in-page-nav/in-page-nav.stories.d.ts +12 -0
- package/target/lib/in-page-nav/in-page-nav.stories.js +17 -0
- package/target/lib/in-page-nav/in-page-nav.stories.js.map +1 -0
- package/target/lib/in-page-nav/in-page-nav.test.d.ts +1 -0
- package/target/lib/in-page-nav/in-page-nav.test.js +9 -0
- package/target/lib/in-page-nav/in-page-nav.test.js.map +1 -0
- package/target/lib/input/input.element.d.ts +3 -1
- package/target/lib/input/input.element.js +14 -2
- package/target/lib/input/input.element.js.map +1 -1
- package/target/lib/process-list/process-list-item/process-list-item.element.d.ts +8 -0
- package/target/lib/process-list/process-list-item/process-list-item.element.js +40 -0
- package/target/lib/process-list/process-list-item/process-list-item.element.js.map +1 -0
- package/target/lib/process-list/process-list.element.d.ts +8 -0
- package/target/lib/process-list/process-list.element.js +40 -0
- package/target/lib/process-list/process-list.element.js.map +1 -0
- package/target/lib/process-list/process-list.stories.d.ts +12 -0
- package/target/lib/process-list/process-list.stories.js +17 -0
- package/target/lib/process-list/process-list.stories.js.map +1 -0
- package/target/lib/process-list/process-list.test.d.ts +2 -0
- package/target/lib/process-list/process-list.test.js +10 -0
- package/target/lib/process-list/process-list.test.js.map +1 -0
- package/target/lib/radio/radio.element.js +1 -1
- package/target/lib/search/search.element.d.ts +16 -0
- package/target/lib/search/search.element.js +99 -0
- package/target/lib/search/search.element.js.map +1 -0
- package/target/lib/search/search.event.d.ts +9 -0
- package/target/lib/search/search.event.js +8 -0
- package/target/lib/search/search.event.js.map +1 -0
- package/target/lib/search/search.stories.d.ts +12 -0
- package/target/lib/search/search.stories.js +21 -0
- package/target/lib/search/search.stories.js.map +1 -0
- package/target/lib/search/search.test.d.ts +3 -0
- package/target/lib/search/search.test.js +52 -0
- package/target/lib/search/search.test.js.map +1 -0
- package/target/lib.d.ts +5 -0
- package/target/lib.js +5 -0
- package/target/lib.js.map +1 -1
package/target/lib/define.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,+DAA+D,CAAC;AACvE,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,8CAA8C,CAAC;AACtD,OAAO,4BAA4B,CAAC;AACpC,OAAO,iDAAiD,CAAC;AACzD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,mDAAmD,CAAC;AAC3D,OAAO,sCAAsC,CAAC;AAC9C,OAAO,4CAA4C,CAAC;AACpD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,0BAA0B,CAAC;AAClC,OAAO,4CAA4C,CAAC;AACpD,OAAO,gDAAgD,CAAC;AACxD,OAAO,wBAAwB,CAAC;AAChC,OAAO,2CAA2C,CAAC;AACnD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,2CAA2C,CAAC;AACnD,OAAO,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC;AACjD,OAAO,gCAAgC,CAAC;AACxC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,yDAAyD,CAAC;AACjE,OAAO,qDAAqD,CAAC;AAC7D,OAAO,wCAAwC,CAAC;AAChD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0DAA0D,CAAC"}
|
|
1
|
+
{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,+DAA+D,CAAC;AACvE,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,8CAA8C,CAAC;AACtD,OAAO,4BAA4B,CAAC;AACpC,OAAO,iDAAiD,CAAC;AACzD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AACxC,OAAO,mDAAmD,CAAC;AAC3D,OAAO,sCAAsC,CAAC;AAC9C,OAAO,4CAA4C,CAAC;AACpD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,0BAA0B,CAAC;AAClC,OAAO,4CAA4C,CAAC;AACpD,OAAO,gDAAgD,CAAC;AACxD,OAAO,wBAAwB,CAAC;AAChC,OAAO,2CAA2C,CAAC;AACnD,OAAO,uCAAuC,CAAC;AAC/C,OAAO,2CAA2C,CAAC;AACnD,OAAO,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC;AACjD,OAAO,gCAAgC,CAAC;AACxC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,yDAAyD,CAAC;AACjE,OAAO,qDAAqD,CAAC;AAC7D,OAAO,wCAAwC,CAAC;AAChD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0DAA0D,CAAC;AAClE,OAAO,4BAA4B,CAAC;AACpC,OAAO,wCAAwC,CAAC;AAChD,OAAO,+DAA+D,CAAC;AACvE,OAAO,sCAAsC,CAAC;AAC9C,OAAO,4DAA4D,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
declare global {
|
|
2
|
+
interface HTMLElementTagNameMap {
|
|
3
|
+
"usa-in-page-nav-item": USAInPageNavItemElement;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
export declare class USAInPageNavItemElement extends HTMLElement {
|
|
7
|
+
#private;
|
|
8
|
+
accessor role: string;
|
|
9
|
+
accessor primary: boolean;
|
|
10
|
+
accessor target: string;
|
|
11
|
+
accessor active: boolean;
|
|
12
|
+
get targetElement(): HTMLElement | null;
|
|
13
|
+
attributeChangedCallback(): void;
|
|
14
|
+
onClick(e: Event): Promise<void>;
|
|
15
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { attr, css, element, html, listen, query } from "@joist/element";
|
|
3
|
+
let USAInPageNavItemElement = (() => {
|
|
4
|
+
let _classDecorators = [element({
|
|
5
|
+
tagName: "usa-in-page-nav-item",
|
|
6
|
+
shadowDom: [
|
|
7
|
+
css `:host{border-left:solid .25rem transparent;display:flex;font-size:.93rem;line-height:1.1;position:relative}a{color:#005ea2;padding:.5rem 1rem;text-decoration:none}:host([primary]) a{font-weight:700}:host([active]) a{color:#1b1b1b}:host([active]){border-color:#1b1b1b;color:#1b1b1b}`,
|
|
8
|
+
html `<a><slot></slot></a>`,
|
|
9
|
+
],
|
|
10
|
+
})];
|
|
11
|
+
let _classDescriptor;
|
|
12
|
+
let _classExtraInitializers = [];
|
|
13
|
+
let _classThis;
|
|
14
|
+
let _classSuper = HTMLElement;
|
|
15
|
+
let _instanceExtraInitializers = [];
|
|
16
|
+
let _role_decorators;
|
|
17
|
+
let _role_initializers = [];
|
|
18
|
+
let _role_extraInitializers = [];
|
|
19
|
+
let _primary_decorators;
|
|
20
|
+
let _primary_initializers = [];
|
|
21
|
+
let _primary_extraInitializers = [];
|
|
22
|
+
let _target_decorators;
|
|
23
|
+
let _target_initializers = [];
|
|
24
|
+
let _target_extraInitializers = [];
|
|
25
|
+
let _active_decorators;
|
|
26
|
+
let _active_initializers = [];
|
|
27
|
+
let _active_extraInitializers = [];
|
|
28
|
+
let _onClick_decorators;
|
|
29
|
+
var USAInPageNavItemElement = class extends _classSuper {
|
|
30
|
+
static { _classThis = this; }
|
|
31
|
+
static {
|
|
32
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
33
|
+
_role_decorators = [attr()];
|
|
34
|
+
_primary_decorators = [attr()];
|
|
35
|
+
_target_decorators = [attr()];
|
|
36
|
+
_active_decorators = [attr()];
|
|
37
|
+
_onClick_decorators = [listen("click")];
|
|
38
|
+
__esDecorate(this, null, _role_decorators, { kind: "accessor", name: "role", static: false, private: false, access: { has: obj => "role" in obj, get: obj => obj.role, set: (obj, value) => { obj.role = value; } }, metadata: _metadata }, _role_initializers, _role_extraInitializers);
|
|
39
|
+
__esDecorate(this, null, _primary_decorators, { kind: "accessor", name: "primary", static: false, private: false, access: { has: obj => "primary" in obj, get: obj => obj.primary, set: (obj, value) => { obj.primary = value; } }, metadata: _metadata }, _primary_initializers, _primary_extraInitializers);
|
|
40
|
+
__esDecorate(this, null, _target_decorators, { kind: "accessor", name: "target", static: false, private: false, access: { has: obj => "target" in obj, get: obj => obj.target, set: (obj, value) => { obj.target = value; } }, metadata: _metadata }, _target_initializers, _target_extraInitializers);
|
|
41
|
+
__esDecorate(this, null, _active_decorators, { kind: "accessor", name: "active", static: false, private: false, access: { has: obj => "active" in obj, get: obj => obj.active, set: (obj, value) => { obj.active = value; } }, metadata: _metadata }, _active_initializers, _active_extraInitializers);
|
|
42
|
+
__esDecorate(this, null, _onClick_decorators, { kind: "method", name: "onClick", static: false, private: false, access: { has: obj => "onClick" in obj, get: obj => obj.onClick }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
43
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
44
|
+
USAInPageNavItemElement = _classThis = _classDescriptor.value;
|
|
45
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
46
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
47
|
+
}
|
|
48
|
+
#role_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _role_initializers, "listitem"));
|
|
49
|
+
get role() { return this.#role_accessor_storage; }
|
|
50
|
+
set role(value) { this.#role_accessor_storage = value; }
|
|
51
|
+
#primary_accessor_storage = (__runInitializers(this, _role_extraInitializers), __runInitializers(this, _primary_initializers, false));
|
|
52
|
+
get primary() { return this.#primary_accessor_storage; }
|
|
53
|
+
set primary(value) { this.#primary_accessor_storage = value; }
|
|
54
|
+
#target_accessor_storage = (__runInitializers(this, _primary_extraInitializers), __runInitializers(this, _target_initializers, ""));
|
|
55
|
+
get target() { return this.#target_accessor_storage; }
|
|
56
|
+
set target(value) { this.#target_accessor_storage = value; }
|
|
57
|
+
#active_accessor_storage = (__runInitializers(this, _target_extraInitializers), __runInitializers(this, _active_initializers, false));
|
|
58
|
+
get active() { return this.#active_accessor_storage; }
|
|
59
|
+
set active(value) { this.#active_accessor_storage = value; }
|
|
60
|
+
get targetElement() {
|
|
61
|
+
return document.getElementById(this.target);
|
|
62
|
+
}
|
|
63
|
+
#a = (__runInitializers(this, _active_extraInitializers), query("a"));
|
|
64
|
+
attributeChangedCallback() {
|
|
65
|
+
this.#a({ href: `#${this.target}` });
|
|
66
|
+
}
|
|
67
|
+
async onClick(e) {
|
|
68
|
+
e.preventDefault();
|
|
69
|
+
if (this.targetElement) {
|
|
70
|
+
this.targetElement.scrollIntoView({ behavior: "smooth" });
|
|
71
|
+
}
|
|
72
|
+
history.pushState(null, "", `#${this.target}`);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
return USAInPageNavItemElement = _classThis;
|
|
76
|
+
})();
|
|
77
|
+
export { USAInPageNavItemElement };
|
|
78
|
+
//# sourceMappingURL=in-page-nav-item.element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"in-page-nav-item.element.js","sourceRoot":"","sources":["../../../../src/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IA+C5D,uBAAuB;4BAtCnC,OAAO,CAAC;YACP,OAAO,EAAE,sBAAsB;YAC/B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BF;gBACD,IAAI,CAAA;;;;KAIH;aACF;SACF,CAAC;;;;sBAC2C,WAAW;;;;;;;;;;;;;;;uCAAnB,SAAQ,WAAW;;;;gCACrD,IAAI,EAAE;mCAGN,IAAI,EAAE;kCAGN,IAAI,EAAE;kCAGN,IAAI,EAAE;mCAaN,MAAM,CAAC,OAAO,CAAC;YArBhB,iKAAS,IAAI,6BAAJ,IAAI,mFAAc;YAG3B,0KAAS,OAAO,6BAAP,OAAO,yFAAS;YAGzB,uKAAS,MAAM,6BAAN,MAAM,uFAAM;YAGrB,uKAAS,MAAM,6BAAN,MAAM,uFAAS;YAaxB,wKAAM,OAAO,6DAQZ;YAhCH,6KAiCC;;;YAjCY,uDAAuB;;QAElC,0BAFW,mDAAuB,8CAElB,UAAU,GAAC;QAA3B,IAAS,IAAI,0CAAc;QAA3B,IAAS,IAAI,gDAAc;QAG3B,8HAAmB,KAAK,GAAC;QAAzB,IAAS,OAAO,6CAAS;QAAzB,IAAS,OAAO,mDAAS;QAGzB,+HAAkB,EAAE,GAAC;QAArB,IAAS,MAAM,4CAAM;QAArB,IAAS,MAAM,kDAAM;QAGrB,8HAAkB,KAAK,GAAC;QAAxB,IAAS,MAAM,4CAAS;QAAxB,IAAS,MAAM,kDAAS;QAExB,IAAI,aAAa;YACf,OAAO,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC9C,CAAC;QAED,EAAE,wDAAG,KAAK,CAAC,GAAG,CAAC,EAAC;QAEhB,wBAAwB;YACtB,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QACvC,CAAC;QAGD,KAAK,CAAC,OAAO,CAAC,CAAQ;YACpB,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;YAC5D,CAAC;YAED,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACjD,CAAC;;;;SAhCU,uBAAuB"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { css, element, html, queryAll } from "@joist/element";
|
|
3
|
+
let USAInPageNavElement = (() => {
|
|
4
|
+
let _classDecorators = [element({
|
|
5
|
+
tagName: "usa-in-page-nav",
|
|
6
|
+
shadowDom: [
|
|
7
|
+
css `:host{display:flex;flex-direction:column;margin-bottom:0;margin-top:0;padding:0;max-width:15rem}`,
|
|
8
|
+
html `<slot></slot>`,
|
|
9
|
+
],
|
|
10
|
+
})];
|
|
11
|
+
let _classDescriptor;
|
|
12
|
+
let _classExtraInitializers = [];
|
|
13
|
+
let _classThis;
|
|
14
|
+
let _classSuper = HTMLElement;
|
|
15
|
+
var USAInPageNavElement = class extends _classSuper {
|
|
16
|
+
static { _classThis = this; }
|
|
17
|
+
static {
|
|
18
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
19
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
20
|
+
USAInPageNavElement = _classThis = _classDescriptor.value;
|
|
21
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
22
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
23
|
+
}
|
|
24
|
+
#items = queryAll("usa-in-page-nav-item", this);
|
|
25
|
+
#observer = new IntersectionObserver((entries) => {
|
|
26
|
+
for (const entry of entries) {
|
|
27
|
+
if (entry.isIntersecting) {
|
|
28
|
+
for (const item of this.#items()) {
|
|
29
|
+
item.active = entry.target === item.targetElement;
|
|
30
|
+
}
|
|
31
|
+
break;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}, { rootMargin: "0px 0px -60% 0px" });
|
|
35
|
+
connectedCallback() {
|
|
36
|
+
const items = this.#items();
|
|
37
|
+
for (const item of items) {
|
|
38
|
+
if (item.targetElement) {
|
|
39
|
+
this.#observer.observe(item.targetElement);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
disconnectedCallback() {
|
|
44
|
+
this.#observer.disconnect();
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
return USAInPageNavElement = _classThis;
|
|
48
|
+
})();
|
|
49
|
+
export { USAInPageNavElement };
|
|
50
|
+
//# sourceMappingURL=in-page-nav.element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"in-page-nav.element.js","sourceRoot":"","sources":["../../../src/lib/in-page-nav/in-page-nav.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;IA0BjD,mBAAmB;4BAlB/B,OAAO,CAAC;YACP,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;KASF;gBACD,IAAI,CAAA;;KAEH;aACF;SACF,CAAC;;;;sBACuC,WAAW;mCAAnB,SAAQ,WAAW;;;;YAApD,6KA+BC;;;YA/BY,uDAAmB;;QAC9B,MAAM,GAAG,QAAQ,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC;QAEhD,SAAS,GAAG,IAAI,oBAAoB,CAClC,CAAC,OAAO,EAAE,EAAE;YACV,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC5B,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;oBACzB,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;wBACjC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,aAAa,CAAC;oBACpD,CAAC;oBAED,MAAM;gBACR,CAAC;YACH,CAAC;QACH,CAAC,EACD,EAAE,UAAU,EAAE,kBAAkB,EAAE,CACnC,CAAC;QAEF,iBAAiB;YACf,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACzB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;oBACvB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBAC7C,CAAC;YACH,CAAC;QACH,CAAC;QAED,oBAAoB;YAClB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC;;;;SA9BU,mBAAmB"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/web-components";
|
|
2
|
+
import type { USAInPageNavElement } from "./in-page-nav.element.js";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
tags: string[];
|
|
6
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
7
|
+
argTypes: {};
|
|
8
|
+
args: {};
|
|
9
|
+
};
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<USAInPageNavElement>;
|
|
12
|
+
export declare const Primary: Story;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { html } from "lit";
|
|
2
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
3
|
+
const meta = {
|
|
4
|
+
title: "usa-in-page-nav",
|
|
5
|
+
tags: ["autodocs"],
|
|
6
|
+
render() {
|
|
7
|
+
return html `<div class="usa-in-page-nav-container"><aside style="position:fixed;right:1rem;top:2rem"><usa-in-page-nav><usa-in-page-nav-item target="lorem-ipsum-dolor" primary>Lorem ipsum dolor</usa-in-page-nav-item><usa-in-page-nav-item target="consectetuer-adipiscing-elit" primary>Consectetuer adipiscing elit</usa-in-page-nav-item><usa-in-page-nav-item target="nullam-sit-amet-enim">Nullam sit amet enim</usa-in-page-nav-item><usa-in-page-nav-item target="vivamus-pharetra-posuere-sapien">Vivamus pharetra posuere sapien</usa-in-page-nav-item><usa-in-page-nav-item target="suspendisse-id-velit">Suspendisse id velit</usa-in-page-nav-item><usa-in-page-nav-item target="orci-magna-rhoncus-neque">Orci magna rhoncus neque</usa-in-page-nav-item><usa-in-page-nav-item target="aliquam-erat-volutpat-velit-vitae-ligula-volutpat" primary>Aliquam erat volutpat: velit vitae ligula volutpat</usa-in-page-nav-item><usa-in-page-nav-item target="vitae-ligula">Vitae ligula</usa-in-page-nav-item></usa-in-page-nav></aside><main style="padding-right:16rem;max-width:68ex"><h1>Sample in-page navigation page</h1><h2 id="lorem-ipsum-dolor">Lorem ipsum dolor</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><h2 id="consectetuer-adipiscing-elit">Consectetuer adipiscing elit</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><h3 id="nullam-sit-amet-enim">Nullam sit amet enim</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><h3 id="vivamus-pharetra-posuere-sapien">Vivamus pharetra posuere sapien</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><h3 id="suspendisse-id-velit">Suspendisse id velit</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><h3 id="orci-magna-rhoncus-neque">Orci magna rhoncus neque</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><h2 id="aliquam-erat-volutpat-velit-vitae-ligula-volutpat">Aliquam erat volutpat: velit vitae ligula volutpat</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><h3 id="vitae-ligula">Vitae ligula</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</p></main></div>`;
|
|
8
|
+
},
|
|
9
|
+
argTypes: {},
|
|
10
|
+
args: {},
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
14
|
+
export const Primary = {
|
|
15
|
+
args: {},
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=in-page-nav.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"in-page-nav.stories.js","sourceRoot":"","sources":["../../../src/lib/in-page-nav/in-page-nav.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,iBAAiB;IACxB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CV,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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import "./in-page-nav.element.js";
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import "./in-page-nav.element.js";
|
|
2
|
+
import { assert, fixture, html } from "@open-wc/testing";
|
|
3
|
+
describe("usa-in-page-nav", () => {
|
|
4
|
+
it("should be accessible", async () => {
|
|
5
|
+
const inPageNav = await fixture(html `<usa-in-page-nav>Hello World</usa-in-page-nav>`);
|
|
6
|
+
return assert.isAccessible(inPageNav);
|
|
7
|
+
});
|
|
8
|
+
});
|
|
9
|
+
//# sourceMappingURL=in-page-nav.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"in-page-nav.test.js","sourceRoot":"","sources":["../../../src/lib/in-page-nav/in-page-nav.test.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;KAExD,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -15,13 +15,15 @@ export declare class USATextInputElement extends HTMLElement implements Maskable
|
|
|
15
15
|
accessor minLength: number;
|
|
16
16
|
accessor maxLength: number;
|
|
17
17
|
accessor required: boolean;
|
|
18
|
+
accessor disabled: boolean;
|
|
18
19
|
accessor type: "text" | "password" | "number";
|
|
19
20
|
accessor detail: "pfx" | "sfx" | "";
|
|
20
21
|
accessor value: string;
|
|
21
22
|
accessor selectionStart: number | null;
|
|
22
23
|
accessor selectionEnd: number | null;
|
|
24
|
+
get validationMessage(): string;
|
|
23
25
|
onReady(): void;
|
|
24
|
-
attributeChangedCallback(): void;
|
|
26
|
+
attributeChangedCallback(attr: string): void;
|
|
25
27
|
connectedCallback(): void;
|
|
26
28
|
focus(options?: FocusOptions): void;
|
|
27
29
|
onChange(): void;
|
|
@@ -38,6 +38,9 @@ let USATextInputElement = (() => {
|
|
|
38
38
|
let _required_decorators;
|
|
39
39
|
let _required_initializers = [];
|
|
40
40
|
let _required_extraInitializers = [];
|
|
41
|
+
let _disabled_decorators;
|
|
42
|
+
let _disabled_initializers = [];
|
|
43
|
+
let _disabled_extraInitializers = [];
|
|
41
44
|
let _type_decorators;
|
|
42
45
|
let _type_initializers = [];
|
|
43
46
|
let _type_extraInitializers = [];
|
|
@@ -69,6 +72,7 @@ let USATextInputElement = (() => {
|
|
|
69
72
|
_minLength_decorators = [attr()];
|
|
70
73
|
_maxLength_decorators = [attr()];
|
|
71
74
|
_required_decorators = [attr()];
|
|
75
|
+
_disabled_decorators = [attr()];
|
|
72
76
|
_type_decorators = [attr()];
|
|
73
77
|
_detail_decorators = [attr({
|
|
74
78
|
observed: false,
|
|
@@ -90,6 +94,7 @@ let USATextInputElement = (() => {
|
|
|
90
94
|
__esDecorate(this, null, _minLength_decorators, { kind: "accessor", name: "minLength", static: false, private: false, access: { has: obj => "minLength" in obj, get: obj => obj.minLength, set: (obj, value) => { obj.minLength = value; } }, metadata: _metadata }, _minLength_initializers, _minLength_extraInitializers);
|
|
91
95
|
__esDecorate(this, null, _maxLength_decorators, { kind: "accessor", name: "maxLength", static: false, private: false, access: { has: obj => "maxLength" in obj, get: obj => obj.maxLength, set: (obj, value) => { obj.maxLength = value; } }, metadata: _metadata }, _maxLength_initializers, _maxLength_extraInitializers);
|
|
92
96
|
__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);
|
|
97
|
+
__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);
|
|
93
98
|
__esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
|
|
94
99
|
__esDecorate(this, null, _detail_decorators, { kind: "accessor", name: "detail", static: false, private: false, access: { has: obj => "detail" in obj, get: obj => obj.detail, set: (obj, value) => { obj.detail = value; } }, metadata: _metadata }, _detail_initializers, _detail_extraInitializers);
|
|
95
100
|
__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);
|
|
@@ -128,7 +133,10 @@ let USATextInputElement = (() => {
|
|
|
128
133
|
#required_accessor_storage = (__runInitializers(this, _maxLength_extraInitializers), __runInitializers(this, _required_initializers, false));
|
|
129
134
|
get required() { return this.#required_accessor_storage; }
|
|
130
135
|
set required(value) { this.#required_accessor_storage = value; }
|
|
131
|
-
#
|
|
136
|
+
#disabled_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
137
|
+
get disabled() { return this.#disabled_accessor_storage; }
|
|
138
|
+
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
139
|
+
#type_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _type_initializers, "text"));
|
|
132
140
|
get type() { return this.#type_accessor_storage; }
|
|
133
141
|
set type(value) { this.#type_accessor_storage = value; }
|
|
134
142
|
#detail_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _detail_initializers, ""));
|
|
@@ -143,12 +151,15 @@ let USATextInputElement = (() => {
|
|
|
143
151
|
#selectionEnd_accessor_storage = (__runInitializers(this, _selectionStart_extraInitializers), __runInitializers(this, _selectionEnd_initializers, null));
|
|
144
152
|
get selectionEnd() { return this.#selectionEnd_accessor_storage; }
|
|
145
153
|
set selectionEnd(value) { this.#selectionEnd_accessor_storage = value; }
|
|
154
|
+
get validationMessage() {
|
|
155
|
+
return this.#input().validationMessage;
|
|
156
|
+
}
|
|
146
157
|
#internals = (__runInitializers(this, _selectionEnd_extraInitializers), this.attachInternals());
|
|
147
158
|
#input = query("input");
|
|
148
159
|
onReady() {
|
|
149
160
|
this.#input({ autofocus: this.autofocus });
|
|
150
161
|
}
|
|
151
|
-
attributeChangedCallback() {
|
|
162
|
+
attributeChangedCallback(attr) {
|
|
152
163
|
this.#input({
|
|
153
164
|
autocomplete: this.autocomplete,
|
|
154
165
|
placeholder: this.placeholder,
|
|
@@ -159,6 +170,7 @@ let USATextInputElement = (() => {
|
|
|
159
170
|
max: this.max,
|
|
160
171
|
minLength: this.minLength,
|
|
161
172
|
maxLength: this.maxLength,
|
|
173
|
+
disabled: this.disabled,
|
|
162
174
|
});
|
|
163
175
|
}
|
|
164
176
|
connectedCallback() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.element.js","sourceRoot":"","sources":["../../../src/lib/input/input.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;IAwFvC,mBAAmB;4BA9E/B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DF;gBACD,IAAI,CAAA;;;;;;;;KAQH;aACF;SACF,CAAC;;;;sBAEQ,WAAW
|
|
1
|
+
{"version":3,"file":"input.element.js","sourceRoot":"","sources":["../../../src/lib/input/input.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { attr, css, element, html } from "@joist/element";
|
|
3
|
+
let USAProcessListItemElement = (() => {
|
|
4
|
+
let _classDecorators = [element({
|
|
5
|
+
tagName: "usa-process-list-item",
|
|
6
|
+
shadowDom: [
|
|
7
|
+
css `*{box-sizing:border-box}:host{display:flex;gap:.5rem;flex-direction:column;position:relative;padding-left:3rem}.number{background:#fff;box-shadow:0 0 0 .25rem #fff;border:.25rem solid #1b1b1b;position:absolute;height:2.5rem;width:2.5rem;border-radius:50%;left:0;top:-11px;display:flex;align-items:center;justify-content:center;font-weight:700;z-index:1}.line{background:#d9e8f6;width:.5rem;position:absolute;top:0;bottom:-2rem;left:calc(2.5rem / 2 - .25rem)}#title::slotted(*){margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0}:host(:last-child) .line{display:none}`,
|
|
8
|
+
html `<div class="number"><slot name="count">1</slot></div><div class="line"></div><slot id="title" name="title"></slot><div class="content"><slot></slot></div>`,
|
|
9
|
+
],
|
|
10
|
+
})];
|
|
11
|
+
let _classDescriptor;
|
|
12
|
+
let _classExtraInitializers = [];
|
|
13
|
+
let _classThis;
|
|
14
|
+
let _classSuper = HTMLElement;
|
|
15
|
+
let _role_decorators;
|
|
16
|
+
let _role_initializers = [];
|
|
17
|
+
let _role_extraInitializers = [];
|
|
18
|
+
var USAProcessListItemElement = class extends _classSuper {
|
|
19
|
+
static { _classThis = this; }
|
|
20
|
+
static {
|
|
21
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
22
|
+
_role_decorators = [attr()];
|
|
23
|
+
__esDecorate(this, null, _role_decorators, { kind: "accessor", name: "role", static: false, private: false, access: { has: obj => "role" in obj, get: obj => obj.role, set: (obj, value) => { obj.role = value; } }, metadata: _metadata }, _role_initializers, _role_extraInitializers);
|
|
24
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
25
|
+
USAProcessListItemElement = _classThis = _classDescriptor.value;
|
|
26
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
27
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
28
|
+
}
|
|
29
|
+
#role_accessor_storage = __runInitializers(this, _role_initializers, "listitem");
|
|
30
|
+
get role() { return this.#role_accessor_storage; }
|
|
31
|
+
set role(value) { this.#role_accessor_storage = value; }
|
|
32
|
+
constructor() {
|
|
33
|
+
super(...arguments);
|
|
34
|
+
__runInitializers(this, _role_extraInitializers);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
return USAProcessListItemElement = _classThis;
|
|
38
|
+
})();
|
|
39
|
+
export { USAProcessListItemElement };
|
|
40
|
+
//# sourceMappingURL=process-list-item.element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"process-list-item.element.js","sourceRoot":"","sources":["../../../../src/lib/process-list/process-list-item/process-list-item.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IA4E7C,yBAAyB;4BApErC,OAAO,CAAC;YACP,OAAO,EAAE,uBAAuB;YAChC,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiDF;gBACD,IAAI,CAAA;;;;;;;;;;;;KAYH;aACF;SACF,CAAC;;;;sBAC6C,WAAW;;;;yCAAnB,SAAQ,WAAW;;;;gCACvD,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAc;YAF7B,6KAGC;;;YAHY,uDAAyB;;QAEpC,qEAAgB,UAAU,EAAC;QAA3B,IAAS,IAAI,0CAAc;QAA3B,IAAS,IAAI,gDAAc;;;;;;;;SAFhB,yBAAyB"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { attr, css, element, html } from "@joist/element";
|
|
3
|
+
let USAProcessListElement = (() => {
|
|
4
|
+
let _classDecorators = [element({
|
|
5
|
+
tagName: "usa-process-list",
|
|
6
|
+
shadowDom: [
|
|
7
|
+
css `:host{display:flex;flex-direction:column;gap:1rem}`,
|
|
8
|
+
html `<slot></slot>`,
|
|
9
|
+
],
|
|
10
|
+
})];
|
|
11
|
+
let _classDescriptor;
|
|
12
|
+
let _classExtraInitializers = [];
|
|
13
|
+
let _classThis;
|
|
14
|
+
let _classSuper = HTMLElement;
|
|
15
|
+
let _role_decorators;
|
|
16
|
+
let _role_initializers = [];
|
|
17
|
+
let _role_extraInitializers = [];
|
|
18
|
+
var USAProcessListElement = class extends _classSuper {
|
|
19
|
+
static { _classThis = this; }
|
|
20
|
+
static {
|
|
21
|
+
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
22
|
+
_role_decorators = [attr()];
|
|
23
|
+
__esDecorate(this, null, _role_decorators, { kind: "accessor", name: "role", static: false, private: false, access: { has: obj => "role" in obj, get: obj => obj.role, set: (obj, value) => { obj.role = value; } }, metadata: _metadata }, _role_initializers, _role_extraInitializers);
|
|
24
|
+
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
25
|
+
USAProcessListElement = _classThis = _classDescriptor.value;
|
|
26
|
+
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
27
|
+
__runInitializers(_classThis, _classExtraInitializers);
|
|
28
|
+
}
|
|
29
|
+
#role_accessor_storage = __runInitializers(this, _role_initializers, "list");
|
|
30
|
+
get role() { return this.#role_accessor_storage; }
|
|
31
|
+
set role(value) { this.#role_accessor_storage = value; }
|
|
32
|
+
constructor() {
|
|
33
|
+
super(...arguments);
|
|
34
|
+
__runInitializers(this, _role_extraInitializers);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
return USAProcessListElement = _classThis;
|
|
38
|
+
})();
|
|
39
|
+
export { USAProcessListElement };
|
|
40
|
+
//# sourceMappingURL=process-list.element.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"process-list.element.js","sourceRoot":"","sources":["../../../src/lib/process-list/process-list.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAuB7C,qBAAqB;4BAfjC,OAAO,CAAC;YACP,OAAO,EAAE,kBAAkB;YAC3B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;KAMF;gBACD,IAAI,CAAA;;KAEH;aACF;SACF,CAAC;;;;sBACyC,WAAW;;;;qCAAnB,SAAQ,WAAW;;;;gCACnD,IAAI,EAAE;YACP,iKAAS,IAAI,6BAAJ,IAAI,mFAAU;YAFzB,6KAGC;;;YAHY,uDAAqB;;QAEhC,qEAAgB,MAAM,EAAC;QAAvB,IAAS,IAAI,0CAAU;QAAvB,IAAS,IAAI,gDAAU;;;;;;;;SAFZ,qBAAqB"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/web-components";
|
|
2
|
+
import type { USAProcessListElement } from "./process-list.element.js";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
tags: string[];
|
|
6
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
7
|
+
argTypes: {};
|
|
8
|
+
args: {};
|
|
9
|
+
};
|
|
10
|
+
export default meta;
|
|
11
|
+
type Story = StoryObj<USAProcessListElement>;
|
|
12
|
+
export declare const Primary: Story;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { html } from "lit";
|
|
2
|
+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
|
|
3
|
+
const meta = {
|
|
4
|
+
title: "usa-process-list",
|
|
5
|
+
tags: ["autodocs"],
|
|
6
|
+
render() {
|
|
7
|
+
return html `<usa-process-list><usa-process-list-item><span slot="count">1</span><h4 slot="title">Start a process</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</li><li>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</li><li>Aliquam erat volutpat. Sed quis velit.</li></ul></usa-process-list-item><usa-process-list-item><span slot="count">2</span><h4 slot="title">Proceed to the second step</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</usa-process-list-item><usa-process-list-item><span slot="count">3</span><h4 slot="title">Complete the step-by-step process</h4>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</usa-process-list-item></usa-process-list>`;
|
|
8
|
+
},
|
|
9
|
+
argTypes: {},
|
|
10
|
+
args: {},
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
|
|
14
|
+
export const Primary = {
|
|
15
|
+
args: {},
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=process-list.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"process-list.stories.js","sourceRoot":"","sources":["../../../src/lib/process-list/process-list.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,kBAAkB;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCZ,CAAC;IACF,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import "./process-list.element.js";
|
|
2
|
+
import "./process-list-item/process-list-item.element.js";
|
|
3
|
+
import { assert, fixture, html } from "@open-wc/testing";
|
|
4
|
+
describe("usa-process-list", () => {
|
|
5
|
+
it("should be accessible", async () => {
|
|
6
|
+
const processList = await fixture(html `<usa-process-list><usa-process-list-item><h4 slot="title">Start a process</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque.<ul><li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li><li>Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.</li><li>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum.</li><li>Aliquam erat volutpat. Sed quis velit.</li></ul></usa-process-list-item><usa-process-list-item><h4 slot="title">Proceed to the second step</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</usa-process-list-item><usa-process-list-item><h4 slot="title">Complete the step-by-step process</h4>Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.</usa-process-list-item></usa-process-list>`);
|
|
7
|
+
return assert.isAccessible(processList);
|
|
8
|
+
});
|
|
9
|
+
});
|
|
10
|
+
//# sourceMappingURL=process-list.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"process-list.test.js","sourceRoot":"","sources":["../../../src/lib/process-list/process-list.test.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AACnC,OAAO,kDAAkD,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,WAAW,GAAG,MAAM,OAAO,CAAwB,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2B5D,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|