@trenoxxious/n-components 1.0.7 → 1.0.8
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 +20 -3
- package/dist/index.css +26 -4
- package/dist/index.html +119 -53
- package/dist/n-components.es.js +3 -3
- package/dist/n-components.umd.js +2 -2
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
|
-
|
|
1
|
+
# n-components
|
|
2
|
+
Simple web components for use with *static* vanilla HTML, JS and CSS websites.
|
|
2
3
|
|
|
3
|
-
To use, import with `<script src="https://unpkg.com/@trenoxxious/n-components@latest/dist/n-components.umd.js"></script>`
|
|
4
|
+
To use, import with `<script src="https://unpkg.com/@trenoxxious/n-components@latest/dist/n-components.umd.js"></script>` in your HTML `<head>`.
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
## Buttons
|
|
7
|
+
**An n-component button element is called using `<n-button></n-button>` in any HTML document/context.**
|
|
8
|
+
|
|
9
|
+
There are several options for n-button components, including:
|
|
10
|
+
| Variable | Description | Default | Accepts |
|
|
11
|
+
| -------- | -------- | -------- | -------- |
|
|
12
|
+
| ***variant*** | Changes the main color theme of the button. | normal | normal, info, success, warning, alert |
|
|
13
|
+
| ***dontPunch*** | Does not scale down when clicked if this is set to true. | false | true, false |
|
|
14
|
+
| ***scaleOnHover*** | Will scale when hovered if this is set to true. | false | true, false |
|
|
15
|
+
| ***outlineOnly*** | Will only show the outline of the button if this is set to true. | false | true, false |
|
|
16
|
+
| ***animation*** | Sets the animation speed of most button animations. | normal | fast, normal, slow, very-slow |
|
|
17
|
+
| ***thick*** | Sets the padding high on the button. | false | true, false |
|
|
18
|
+
| ***thin*** | Sets the padding low on the button. | false | true, false |
|
|
19
|
+
| ***dark*** | Sets the button text to white. | false | true, false |
|
|
20
|
+
| ***bgColor*** | Sets the button's background color. | null | Any CSS-valid color string |
|
|
21
|
+
| ***rounded*** | Rounds the button corners a little more. | false | true, false |
|
|
22
|
+
| ***sharp*** | Sharpens the button corners. | false | true, false |
|
package/dist/index.css
CHANGED
|
@@ -43,7 +43,7 @@ header {
|
|
|
43
43
|
header h1 {
|
|
44
44
|
position: relative;
|
|
45
45
|
background-clip: text;
|
|
46
|
-
background-image: linear-gradient(2deg,
|
|
46
|
+
background-image: linear-gradient(2deg, rgba(255, 65, 65, 1) 40%, transparent 40.5%);
|
|
47
47
|
-webkit-background-clip: text;
|
|
48
48
|
color: transparent;
|
|
49
49
|
font-size: 9rem;
|
|
@@ -88,7 +88,7 @@ b {
|
|
|
88
88
|
.components-grid {
|
|
89
89
|
font-family: "Manjari", sans-serif, system-ui;
|
|
90
90
|
display: grid;
|
|
91
|
-
grid-template-columns:
|
|
91
|
+
grid-template-columns: 1fr 2fr;
|
|
92
92
|
gap: 24px;
|
|
93
93
|
max-width: 1200px;
|
|
94
94
|
margin: 0 auto;
|
|
@@ -133,14 +133,28 @@ b {
|
|
|
133
133
|
border-radius: 4px;
|
|
134
134
|
}
|
|
135
135
|
|
|
136
|
+
.button-grid-3 {
|
|
137
|
+
display: grid;
|
|
138
|
+
grid-template-columns: repeat(3, 1fr);
|
|
139
|
+
padding: 16px;
|
|
140
|
+
background: rgba(24, 38, 51, 0.4);
|
|
141
|
+
border: 1px dashed rgba(255, 255, 255, 0.1);
|
|
142
|
+
border-radius: 4px;
|
|
143
|
+
gap: 15px;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.sub-text {
|
|
147
|
+
color: rgba(255, 255, 255, 0.66);
|
|
148
|
+
}
|
|
149
|
+
|
|
136
150
|
.button-grid n-button {
|
|
137
151
|
padding: 8px;
|
|
138
152
|
}
|
|
139
153
|
|
|
140
154
|
.code {
|
|
141
|
-
font-family: "
|
|
155
|
+
font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
|
142
156
|
text-wrap: nowrap;
|
|
143
|
-
text-align:
|
|
157
|
+
text-align: center;
|
|
144
158
|
overflow-x: auto;
|
|
145
159
|
justify-content: flex-start;
|
|
146
160
|
align-items: center;
|
|
@@ -201,4 +215,12 @@ pre {
|
|
|
201
215
|
.sec {
|
|
202
216
|
font-size: 1.25rem;
|
|
203
217
|
}
|
|
218
|
+
|
|
219
|
+
.components-grid {
|
|
220
|
+
grid-template-columns: 1fr;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.button-grid-3 {
|
|
224
|
+
grid-template-columns: repeat(2, 1fr);
|
|
225
|
+
}
|
|
204
226
|
}
|
package/dist/index.html
CHANGED
|
@@ -14,23 +14,30 @@
|
|
|
14
14
|
|
|
15
15
|
<body>
|
|
16
16
|
<header>
|
|
17
|
-
<h1>
|
|
17
|
+
<h1 style="rotate: -2deg;">
|
|
18
18
|
n-components!
|
|
19
19
|
</h1>
|
|
20
20
|
<p>Light-weight, simple web components for use with vanilla HTML, JS and CSS.</p>
|
|
21
21
|
</header>
|
|
22
|
-
<p style="margin-left: 5%; margin-right: 5%;">Import the latest version of <b>n-components</b> into your vanilla
|
|
23
|
-
|
|
22
|
+
<p style="margin-left: 5%; margin-right: 5%;">Import the latest version of <b>n-components</b> into your vanilla
|
|
23
|
+
static HTML file using:</p>
|
|
24
|
+
<div class="code"
|
|
25
|
+
style="padding-bottom: 5px; margin-left: 5%; margin-right: 5%; text-align: center; margin-bottom: 0;"><<span
|
|
26
|
+
class="html-red">script</span> <span class="html-orange">src=</span><span
|
|
27
|
+
class="html-green">"https://unpkg.com/@trenoxxious/n-components@latest/dist/n-components.umd.js"</span>></<span
|
|
28
|
+
class="html-red">script</span>></div>
|
|
24
29
|
<p style="margin-bottom: 50px;">Then, simply call any of the below <b>n-components</b> to get started.</p>
|
|
25
|
-
<p class="sec">You want some buttons? We have some cool, customizable
|
|
26
|
-
|
|
30
|
+
<p class="sec" style="margin-left: 5%; margin-right: 5%;">You want some buttons? We have some cool, customizable
|
|
31
|
+
<span class="html-red"><b>n-</b>button</span>s.
|
|
32
|
+
</p>
|
|
33
|
+
<div class="components-grid" style="margin-bottom: 50px;">
|
|
27
34
|
<div class="component-card">
|
|
28
35
|
<div class="component-header">
|
|
29
36
|
<h3>Base Buttons</h3>
|
|
30
37
|
<p>Input:</p>
|
|
31
|
-
<pre><code class="language-html"><n-button
|
|
38
|
+
<pre><code class="language-html"><n-button>Button</n-button></code></pre>
|
|
32
39
|
<p>Output:</p>
|
|
33
|
-
<n-button
|
|
40
|
+
<n-button>Button</n-button>
|
|
34
41
|
</div>
|
|
35
42
|
<p>Examples:</p>
|
|
36
43
|
<div class="button-grid">
|
|
@@ -43,53 +50,112 @@
|
|
|
43
50
|
</div>
|
|
44
51
|
<div class="component-card">
|
|
45
52
|
<div class="component-header">
|
|
46
|
-
<h3>
|
|
47
|
-
<p>
|
|
48
|
-
<pre><code class="language-html"><n-button variant="warning" thin>A warning!</n-button></code></pre>
|
|
49
|
-
<p>Output:</p>
|
|
50
|
-
<n-button variant="warning" thin>A warning!</n-button>
|
|
51
|
-
</div>
|
|
52
|
-
<p>Examples:</p>
|
|
53
|
-
<div class="button-grid">
|
|
54
|
-
<n-button variant="normal" thin>Thin</n-button>
|
|
55
|
-
<n-button variant="info" thin>Thin</n-button>
|
|
56
|
-
<n-button variant="warning" thin>Thin</n-button>
|
|
57
|
-
<n-button variant="alert" thin>Thin</n-button>
|
|
58
|
-
<n-button variant="success" thin>Thin</n-button>
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
<div class="component-card">
|
|
62
|
-
<div class="component-header">
|
|
63
|
-
<h3>Thick Buttons</h3>
|
|
64
|
-
<p>Input:</p>
|
|
65
|
-
<pre><code class="language-html"><n-button thick>Play</n-button></code></pre>
|
|
66
|
-
<p>Output:</p>
|
|
67
|
-
<n-button thick>Play</n-button>
|
|
53
|
+
<h3>Button Settings</h3>
|
|
54
|
+
<p>Mix and match any of these component variables.</p>
|
|
68
55
|
</div>
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
56
|
+
<div class="button-grid-3">
|
|
57
|
+
<div>
|
|
58
|
+
<div class="code html-orange">variant=<span class="html-green">"info"</span></div>
|
|
59
|
+
<div>Button theme type.</div>
|
|
60
|
+
<n-button variant="info">Button</n-button>
|
|
61
|
+
<div style="margin-top: 10px;">
|
|
62
|
+
<p style="font-size: 12px;">Accepts: <span class="sub-text">normal, info, warning, alert,
|
|
63
|
+
success</span></p>
|
|
64
|
+
<p style="font-size: 12px;">Default: <span class="sub-text">normal</span></p>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
<div>
|
|
68
|
+
<div class="code html-orange">dontPunch</div>
|
|
69
|
+
<div>Won't react to clicks.</div>
|
|
70
|
+
<n-button dontPunch>Button</n-button>
|
|
71
|
+
<div style="margin-top: 10px;">
|
|
72
|
+
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
<div>
|
|
76
|
+
<div class="code html-orange">scaleOnHover</div>
|
|
77
|
+
<div>Scales when hovered.</div>
|
|
78
|
+
<n-button scaleOnHover>Scales!</n-button>
|
|
79
|
+
<div style="margin-top: 10px;">
|
|
80
|
+
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div>
|
|
84
|
+
<div class="code html-orange">animation=<span class="html-green">"fast"</span></div>
|
|
85
|
+
<div>Control most animation speeds.</div>
|
|
86
|
+
<n-button animation="fast">Fast Button</n-button>
|
|
87
|
+
<div style="margin-top: 10px;">
|
|
88
|
+
<p style="font-size: 12px;">Accepts: <span class="sub-text">fast, normal, slow or
|
|
89
|
+
very-slow</span></p>
|
|
90
|
+
<p style="font-size: 12px;">Default: <span class="sub-text">normal</span></p>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
<div>
|
|
94
|
+
<div class="code html-orange">thick</div>
|
|
95
|
+
<div>The largest button variant.</div>
|
|
96
|
+
<n-button thick>Thick Button</n-button>
|
|
97
|
+
<div style="margin-top: 10px;">
|
|
98
|
+
<p style="font-size: 12px;">Overrides: <span class="html-orange">thin</span>
|
|
99
|
+
</p>
|
|
100
|
+
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
<div>
|
|
104
|
+
<div class="code html-orange">thin</div>
|
|
105
|
+
<div>The smallest button variant.</div>
|
|
106
|
+
<n-button thin>Thin Button</n-button>
|
|
107
|
+
<div style="margin-top: 10px;">
|
|
108
|
+
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div>
|
|
112
|
+
<div class="code html-orange">dark</div>
|
|
113
|
+
<div>Colors button text lighter.</div>
|
|
114
|
+
<n-button dark>Dark Mode</n-button>
|
|
115
|
+
<div style="margin-top: 10px;">
|
|
116
|
+
<p style="font-size: 12px;">Typically combined with <span class="html-orange">outlineOnly</span>
|
|
117
|
+
or
|
|
118
|
+
<span class="html-orange">dark</span>.
|
|
119
|
+
</p>
|
|
120
|
+
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
<div>
|
|
124
|
+
<div class="code html-orange">outlineOnly</div>
|
|
125
|
+
<div>Colors button text lighter.</div>
|
|
126
|
+
<n-button outlineOnly dark>Outline</n-button>
|
|
127
|
+
<div style="margin-top: 10px;">
|
|
128
|
+
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
<div>
|
|
132
|
+
<div class="code html-orange">bgColor=<span class="html-green">"#cd50ec"</span></div>
|
|
133
|
+
<div>Colors background and border.</div>
|
|
134
|
+
<n-button bgColor="#cd50ec">Custom</n-button>
|
|
135
|
+
<div style="margin-top: 10px;">
|
|
136
|
+
<p style="font-size: 12px;">Accepts: <span class="sub-text">any CSS-valid color string</span>
|
|
137
|
+
</p>
|
|
138
|
+
<p style="font-size: 12px;">Default: <span class="sub-text">null</span></p>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
<div>
|
|
142
|
+
<div class="code html-orange">rounded</div>
|
|
143
|
+
<div>Rounds the corners.</div>
|
|
144
|
+
<n-button rounded>Rounded</n-button>
|
|
145
|
+
<div style="margin-top: 10px;">
|
|
146
|
+
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
147
|
+
</div>
|
|
148
|
+
</div>
|
|
149
|
+
<div>
|
|
150
|
+
<div class="code html-orange">sharp</div>
|
|
151
|
+
<div>Sharpens the corners.</div>
|
|
152
|
+
<n-button sharp>Sharp</n-button>
|
|
153
|
+
<div style="margin-top: 10px;">
|
|
154
|
+
<p style="font-size: 12px;">Overrides: <span class="html-orange">rounded</span>
|
|
155
|
+
</p>
|
|
156
|
+
<p style="font-size: 12px;">Default: <span class="sub-text">false</span></p>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
93
159
|
</div>
|
|
94
160
|
</div>
|
|
95
161
|
</div>
|
package/dist/n-components.es.js
CHANGED
|
@@ -531,7 +531,7 @@ function __decorate(x, j, F, U) {
|
|
|
531
531
|
}
|
|
532
532
|
var NButton = class extends i {
|
|
533
533
|
constructor(...x) {
|
|
534
|
-
super(...x), this.variant = "normal", this.thin = !1, this.thick = !1, this.outlineOnly = !1, this.
|
|
534
|
+
super(...x), this.variant = "normal", this.thin = !1, this.thick = !1, this.outlineOnly = !1, this.scaleOnHover = !1, this.rounded = !1, this.sharp = !1, this.dark = !1, this.dontPunch = !1, this.animation = "normal", this.type = "button", this.id = "", this.name = "", this.disabled = !1, this.form = "", this.formaction = "", this.formmethod = "", this.formnovalidate = !1, this.formtarget = "", this.title = "", this.ariaLabel = "", this.ariaDescribedby = "", this.ariaPressed = "", this.bgColor = "", this.borderColor = "";
|
|
535
535
|
}
|
|
536
536
|
static #e = this.properties = {
|
|
537
537
|
variant: { type: String },
|
|
@@ -541,7 +541,7 @@ var NButton = class extends i {
|
|
|
541
541
|
outlineOnly: { type: Boolean },
|
|
542
542
|
rounded: { type: Boolean },
|
|
543
543
|
sharp: { type: Boolean },
|
|
544
|
-
|
|
544
|
+
scaleOnHover: { type: Boolean },
|
|
545
545
|
dark: { type: Boolean },
|
|
546
546
|
bgColor: { type: String },
|
|
547
547
|
borderColor: { type: String },
|
|
@@ -709,7 +709,7 @@ var NButton = class extends i {
|
|
|
709
709
|
aria-label="${this.ariaLabel || ""}"
|
|
710
710
|
aria-describedby="${this.ariaDescribedby || ""}"
|
|
711
711
|
aria-pressed="${this.ariaPressed || ""}"
|
|
712
|
-
class="${this.variant}${this.bgColor || this.borderColor ? " custom-color" : ""}${this.dontPunch ? " dont-punch" : ""}${this.thin && !this.thick ? " thin" : this.thick ? " thick" : ""}${this.outlineOnly ? " outline-only" : ""}${this.
|
|
712
|
+
class="${this.variant}${this.bgColor || this.borderColor ? " custom-color" : ""}${this.dontPunch ? " dont-punch" : ""}${this.thin && !this.thick ? " thin" : this.thick ? " thick" : ""}${this.outlineOnly ? " outline-only" : ""}${this.scaleOnHover ? " scale-hover" : ""}${this.rounded && !this.sharp ? " rounded" : this.sharp ? " sharp" : ""} animation-${this.animation}"
|
|
713
713
|
style="${x ? `color: ${x}; ` : ""}${j && !this.outlineOnly ? `background-color: ${j}; ` : ""}${j && !F ? `border: 1px solid color-mix(in hsl, ${j} 100%, white 10%); ` : F ? `border: 1px solid ${F}; ` : ""}">
|
|
714
714
|
<slot></slot>
|
|
715
715
|
</button>`;
|
package/dist/n-components.umd.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.nComponents={}))})(this,function(e){var t=globalThis,n=t.ShadowRoot&&(t.ShadyCSS===void 0||t.ShadyCSS.nativeShadow)&&`adoptedStyleSheets`in Document.prototype&&`replace`in CSSStyleSheet.prototype,r=Symbol(),i=new WeakMap,a=class{constructor(e,t,n){if(this._$cssResult$=!0,n!==r)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o,t=this.t;if(n&&e===void 0){let n=t!==void 0&&t.length===1;n&&(e=i.get(t)),e===void 0&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),n&&i.set(t,e))}return e}toString(){return this.cssText}},o=e=>new a(typeof e==`string`?e:e+``,void 0,r),s=(e,...t)=>new a(e.length===1?e[0]:t.reduce((t,n,r)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if(typeof e==`number`)return e;throw Error(`Value passed to 'css' function must be a 'css' function result: `+e+`. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(n)+e[r+1],e[0]),e,r),c=(e,r)=>{if(n)e.adoptedStyleSheets=r.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let n of r){let r=document.createElement(`style`),i=t.litNonce;i!==void 0&&r.setAttribute(`nonce`,i),r.textContent=n.cssText,e.appendChild(r)}},l=n?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t=``;for(let n of e.cssRules)t+=n.cssText;return o(t)})(e):e,{is:u,defineProperty:d,getOwnPropertyDescriptor:ee,getOwnPropertyNames:te,getOwnPropertySymbols:f,getPrototypeOf:p}=Object,m=globalThis,h=m.trustedTypes,ne=h?h.emptyScript:``,re=m.reactiveElementPolyfillSupport,g=(e,t)=>e,_={toAttribute(e,t){switch(t){case Boolean:e=e?ne:null;break;case Object:case Array:e=e==null?e:JSON.stringify(e)}return e},fromAttribute(e,t){let n=e;switch(t){case Boolean:n=e!==null;break;case Number:n=e===null?null:Number(e);break;case Object:case Array:try{n=JSON.parse(e)}catch{n=null}}return n}},v=(e,t)=>!u(e,t),y={attribute:!0,type:String,converter:_,reflect:!1,useDefault:!1,hasChanged:v};Symbol.metadata??=Symbol(`metadata`),m.litPropertyMetadata??=new WeakMap;var b=class extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=y){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){let n=Symbol(),r=this.getPropertyDescriptor(e,n,t);r!==void 0&&d(this.prototype,e,r)}}static getPropertyDescriptor(e,t,n){let{get:r,set:i}=ee(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){let a=r?.call(this);i?.call(this,t),this.requestUpdate(e,a,n)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??y}static _$Ei(){if(this.hasOwnProperty(g(`elementProperties`)))return;let e=p(this);e.finalize(),e.l!==void 0&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(g(`finalized`)))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(g(`properties`))){let e=this.properties,t=[...te(e),...f(e)];for(let n of t)this.createProperty(n,e[n])}let e=this[Symbol.metadata];if(e!==null){let t=litPropertyMetadata.get(e);if(t!==void 0)for(let[e,n]of t)this.elementProperties.set(e,n)}this._$Eh=new Map;for(let[e,t]of this.elementProperties){let n=this._$Eu(e,t);n!==void 0&&this._$Eh.set(n,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){let t=[];if(Array.isArray(e)){let n=new Set(e.flat(1/0).reverse());for(let e of n)t.unshift(l(e))}else e!==void 0&&t.push(l(e));return t}static _$Eu(e,t){let n=t.attribute;return!1===n?void 0:typeof n==`string`?n:typeof e==`string`?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),this.renderRoot!==void 0&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){let e=new Map,t=this.constructor.elementProperties;for(let n of t.keys())this.hasOwnProperty(n)&&(e.set(n,this[n]),delete this[n]);e.size>0&&(this._$Ep=e)}createRenderRoot(){let e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return c(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,n){this._$AK(e,n)}_$ET(e,t){let n=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,n);if(r!==void 0&&!0===n.reflect){let i=(n.converter?.toAttribute===void 0?_:n.converter).toAttribute(t,n.type);this._$Em=e,i==null?this.removeAttribute(r):this.setAttribute(r,i),this._$Em=null}}_$AK(e,t){let n=this.constructor,r=n._$Eh.get(e);if(r!==void 0&&this._$Em!==r){let e=n.getPropertyOptions(r),i=typeof e.converter==`function`?{fromAttribute:e.converter}:e.converter?.fromAttribute===void 0?_:e.converter;this._$Em=r;let a=i.fromAttribute(t,e.type);this[r]=a??this._$Ej?.get(r)??a,this._$Em=null}}requestUpdate(e,t,n,r=!1,i){if(e!==void 0){let a=this.constructor;if(!1===r&&(i=this[e]),n??=a.getPropertyOptions(e),!((n.hasChanged??v)(i,t)||n.useDefault&&n.reflect&&i===this._$Ej?.get(e)&&!this.hasAttribute(a._$Eu(e,n))))return;this.C(e,t,n)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:n,reflect:r,wrapped:i},a){n&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,a??t??this[e]),!0!==i||a!==void 0)||(this._$AL.has(e)||(this.hasUpdated||n||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let e=this.scheduleUpdate();return e!=null&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(let[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}let e=this.constructor.elementProperties;if(e.size>0)for(let[t,n]of e){let{wrapped:e}=n,r=this[t];!0!==e||this._$AL.has(t)||r===void 0||this.C(t,void 0,n,r)}}let e=!1,t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}};b.elementStyles=[],b.shadowRootOptions={mode:`open`},b[g(`elementProperties`)]=new Map,b[g(`finalized`)]=new Map,re?.({ReactiveElement:b}),(m.reactiveElementVersions??=[]).push(`2.1.2`);var x=globalThis,S=e=>e,C=x.trustedTypes,w=C?C.createPolicy(`lit-html`,{createHTML:e=>e}):void 0,T=`$lit$`,E=`lit$${Math.random().toFixed(9).slice(2)}$`,D=`?`+E,O=`<${D}>`,k=document,A=()=>k.createComment(``),j=e=>e===null||typeof e!=`object`&&typeof e!=`function`,M=Array.isArray,ie=e=>M(e)||typeof e?.[Symbol.iterator]==`function`,N=`[
|
|
2
|
-
\f\r]`,P=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,F=/-->/g,I=/>/g,L=RegExp(`>|${N}(?:([^\\s"'>=/]+)(${N}*=${N}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,`g`),R=/'/g,z=/"/g,B=/^(?:script|style|textarea|title)$/i,ae=(e=>(t,...n)=>({_$litType$:e,strings:t,values:n}))(1),V=Symbol.for(`lit-noChange`),H=Symbol.for(`lit-nothing`),U=new WeakMap,W=k.createTreeWalker(k,129);function G(e,t){if(!M(e)||!e.hasOwnProperty(`raw`))throw Error(`invalid template strings array`);return w===void 0?t:w.createHTML(t)}var K=(e,t)=>{let n=e.length-1,r=[],i,a=t===2?`<svg>`:t===3?`<math>`:``,o=P;for(let t=0;t<n;t++){let n=e[t],s,c,l=-1,u=0;for(;u<n.length&&(o.lastIndex=u,c=o.exec(n),c!==null);)u=o.lastIndex,o===P?c[1]===`!--`?o=F:c[1]===void 0?c[2]===void 0?c[3]!==void 0&&(o=L):(B.test(c[2])&&(i=RegExp(`</`+c[2],`g`)),o=L):o=I:o===L?c[0]===`>`?(o=i??P,l=-1):c[1]===void 0?l=-2:(l=o.lastIndex-c[2].length,s=c[1],o=c[3]===void 0?L:c[3]===`"`?z:R):o===z||o===R?o=L:o===F||o===I?o=P:(o=L,i=void 0);let d=o===L&&e[t+1].startsWith(`/>`)?` `:``;a+=o===P?n+O:l>=0?(r.push(s),n.slice(0,l)+T+n.slice(l)+E+d):n+E+(l===-2?t:d)}return[G(e,a+(e[n]||`<?>`)+(t===2?`</svg>`:t===3?`</math>`:``)),r]},q=class e{constructor({strings:t,_$litType$:n},r){let i;this.parts=[];let a=0,o=0,s=t.length-1,c=this.parts,[l,u]=K(t,n);if(this.el=e.createElement(l,r),W.currentNode=this.el.content,n===2||n===3){let e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;(i=W.nextNode())!==null&&c.length<s;){if(i.nodeType===1){if(i.hasAttributes())for(let e of i.getAttributeNames())if(e.endsWith(T)){let t=u[o++],n=i.getAttribute(e).split(E),r=/([.?@])?(.*)/.exec(t);c.push({type:1,index:a,name:r[2],strings:n,ctor:r[1]===`.`?se:r[1]===`?`?ce:r[1]===`@`?le:X}),i.removeAttribute(e)}else e.startsWith(E)&&(c.push({type:6,index:a}),i.removeAttribute(e));if(B.test(i.tagName)){let e=i.textContent.split(E),t=e.length-1;if(t>0){i.textContent=C?C.emptyScript:``;for(let n=0;n<t;n++)i.append(e[n],A()),W.nextNode(),c.push({type:2,index:++a});i.append(e[t],A())}}}else if(i.nodeType===8)if(i.data===D)c.push({type:2,index:a});else{let e=-1;for(;(e=i.data.indexOf(E,e+1))!==-1;)c.push({type:7,index:a}),e+=E.length-1}a++}}static createElement(e,t){let n=k.createElement(`template`);return n.innerHTML=e,n}};function J(e,t,n=e,r){if(t===V)return t;let i=r===void 0?n._$Cl:n._$Co?.[r],a=j(t)?void 0:t._$litDirective$;return i?.constructor!==a&&(i?._$AO?.(!1),a===void 0?i=void 0:(i=new a(e),i._$AT(e,n,r)),r===void 0?n._$Cl=i:(n._$Co??=[])[r]=i),i!==void 0&&(t=J(e,i._$AS(e,t.values),i,r)),t}var oe=class{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:t},parts:n}=this._$AD,r=(e?.creationScope??k).importNode(t,!0);W.currentNode=r;let i=W.nextNode(),a=0,o=0,s=n[0];for(;s!==void 0;){if(a===s.index){let t;s.type===2?t=new Y(i,i.nextSibling,this,e):s.type===1?t=new s.ctor(i,s.name,s.strings,this,e):s.type===6&&(t=new ue(i,this,e)),this._$AV.push(t),s=n[++o]}a!==s?.index&&(i=W.nextNode(),a++)}return W.currentNode=k,r}p(e){let t=0;for(let n of this._$AV)n!==void 0&&(n.strings===void 0?n._$AI(e[t]):(n._$AI(e,n,t),t+=n.strings.length-2)),t++}},Y=class e{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,n,r){this.type=2,this._$AH=H,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=n,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=J(this,e,t),j(e)?e===H||e==null||e===``?(this._$AH!==H&&this._$AR(),this._$AH=H):e!==this._$AH&&e!==V&&this._(e):e._$litType$===void 0?e.nodeType===void 0?ie(e)?this.k(e):this._(e):this.T(e):this.$(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==H&&j(this._$AH)?this._$AA.nextSibling.data=e:this.T(k.createTextNode(e)),this._$AH=e}$(e){let{values:t,_$litType$:n}=e,r=typeof n==`number`?this._$AC(e):(n.el===void 0&&(n.el=q.createElement(G(n.h,n.h[0]),this.options)),n);if(this._$AH?._$AD===r)this._$AH.p(t);else{let e=new oe(r,this),n=e.u(this.options);e.p(t),this.T(n),this._$AH=e}}_$AC(e){let t=U.get(e.strings);return t===void 0&&U.set(e.strings,t=new q(e)),t}k(t){M(this._$AH)||(this._$AH=[],this._$AR());let n=this._$AH,r,i=0;for(let a of t)i===n.length?n.push(r=new e(this.O(A()),this.O(A()),this,this.options)):r=n[i],r._$AI(a),i++;i<n.length&&(this._$AR(r&&r._$AB.nextSibling,i),n.length=i)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){let t=S(e).nextSibling;S(e).remove(),e=t}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},X=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,n,r,i){this.type=1,this._$AH=H,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=i,n.length>2||n[0]!==``||n[1]!==``?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=H}_$AI(e,t=this,n,r){let i=this.strings,a=!1;if(i===void 0)e=J(this,e,t,0),a=!j(e)||e!==this._$AH&&e!==V,a&&(this._$AH=e);else{let r=e,o,s;for(e=i[0],o=0;o<i.length-1;o++)s=J(this,r[n+o],t,o),s===V&&(s=this._$AH[o]),a||=!j(s)||s!==this._$AH[o],s===H?e=H:e!==H&&(e+=(s??``)+i[o+1]),this._$AH[o]=s}a&&!r&&this.j(e)}j(e){e===H?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??``)}},se=class extends X{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===H?void 0:e}},ce=class extends X{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==H)}},le=class extends X{constructor(e,t,n,r,i){super(e,t,n,r,i),this.type=5}_$AI(e,t=this){if((e=J(this,e,t,0)??H)===V)return;let n=this._$AH,r=e===H&&n!==H||e.capture!==n.capture||e.once!==n.once||e.passive!==n.passive,i=e!==H&&(n===H||r);r&&this.element.removeEventListener(this.name,this,n),i&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH==`function`?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}},ue=class{constructor(e,t,n){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(e){J(this,e)}},de=x.litHtmlPolyfillSupport;de?.(q,Y),(x.litHtmlVersions??=[]).push(`3.3.2`);var fe=(e,t,n)=>{let r=n?.renderBefore??t,i=r._$litPart$;if(i===void 0){let e=n?.renderBefore??null;r._$litPart$=i=new Y(t.insertBefore(A(),e),e,void 0,n??{})}return i._$AI(e),i},Z=globalThis,Q=class extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){let t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=fe(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return V}};Q._$litElement$=!0,Q.finalized=!0,Z.litElementHydrateSupport?.({LitElement:Q});var pe=Z.litElementPolyfillSupport;pe?.({LitElement:Q}),(Z.litElementVersions??=[]).push(`4.2.2`);var me=e=>(t,n)=>{n===void 0?customElements.define(e,t):n.addInitializer(()=>{customElements.define(e,t)})};function he(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var $=class extends Q{constructor(...e){super(...e),this.variant=`normal`,this.thin=!1,this.thick=!1,this.outlineOnly=!1,this.
|
|
2
|
+
\f\r]`,P=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,F=/-->/g,I=/>/g,L=RegExp(`>|${N}(?:([^\\s"'>=/]+)(${N}*=${N}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,`g`),R=/'/g,z=/"/g,B=/^(?:script|style|textarea|title)$/i,ae=(e=>(t,...n)=>({_$litType$:e,strings:t,values:n}))(1),V=Symbol.for(`lit-noChange`),H=Symbol.for(`lit-nothing`),U=new WeakMap,W=k.createTreeWalker(k,129);function G(e,t){if(!M(e)||!e.hasOwnProperty(`raw`))throw Error(`invalid template strings array`);return w===void 0?t:w.createHTML(t)}var K=(e,t)=>{let n=e.length-1,r=[],i,a=t===2?`<svg>`:t===3?`<math>`:``,o=P;for(let t=0;t<n;t++){let n=e[t],s,c,l=-1,u=0;for(;u<n.length&&(o.lastIndex=u,c=o.exec(n),c!==null);)u=o.lastIndex,o===P?c[1]===`!--`?o=F:c[1]===void 0?c[2]===void 0?c[3]!==void 0&&(o=L):(B.test(c[2])&&(i=RegExp(`</`+c[2],`g`)),o=L):o=I:o===L?c[0]===`>`?(o=i??P,l=-1):c[1]===void 0?l=-2:(l=o.lastIndex-c[2].length,s=c[1],o=c[3]===void 0?L:c[3]===`"`?z:R):o===z||o===R?o=L:o===F||o===I?o=P:(o=L,i=void 0);let d=o===L&&e[t+1].startsWith(`/>`)?` `:``;a+=o===P?n+O:l>=0?(r.push(s),n.slice(0,l)+T+n.slice(l)+E+d):n+E+(l===-2?t:d)}return[G(e,a+(e[n]||`<?>`)+(t===2?`</svg>`:t===3?`</math>`:``)),r]},q=class e{constructor({strings:t,_$litType$:n},r){let i;this.parts=[];let a=0,o=0,s=t.length-1,c=this.parts,[l,u]=K(t,n);if(this.el=e.createElement(l,r),W.currentNode=this.el.content,n===2||n===3){let e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;(i=W.nextNode())!==null&&c.length<s;){if(i.nodeType===1){if(i.hasAttributes())for(let e of i.getAttributeNames())if(e.endsWith(T)){let t=u[o++],n=i.getAttribute(e).split(E),r=/([.?@])?(.*)/.exec(t);c.push({type:1,index:a,name:r[2],strings:n,ctor:r[1]===`.`?se:r[1]===`?`?ce:r[1]===`@`?le:X}),i.removeAttribute(e)}else e.startsWith(E)&&(c.push({type:6,index:a}),i.removeAttribute(e));if(B.test(i.tagName)){let e=i.textContent.split(E),t=e.length-1;if(t>0){i.textContent=C?C.emptyScript:``;for(let n=0;n<t;n++)i.append(e[n],A()),W.nextNode(),c.push({type:2,index:++a});i.append(e[t],A())}}}else if(i.nodeType===8)if(i.data===D)c.push({type:2,index:a});else{let e=-1;for(;(e=i.data.indexOf(E,e+1))!==-1;)c.push({type:7,index:a}),e+=E.length-1}a++}}static createElement(e,t){let n=k.createElement(`template`);return n.innerHTML=e,n}};function J(e,t,n=e,r){if(t===V)return t;let i=r===void 0?n._$Cl:n._$Co?.[r],a=j(t)?void 0:t._$litDirective$;return i?.constructor!==a&&(i?._$AO?.(!1),a===void 0?i=void 0:(i=new a(e),i._$AT(e,n,r)),r===void 0?n._$Cl=i:(n._$Co??=[])[r]=i),i!==void 0&&(t=J(e,i._$AS(e,t.values),i,r)),t}var oe=class{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){let{el:{content:t},parts:n}=this._$AD,r=(e?.creationScope??k).importNode(t,!0);W.currentNode=r;let i=W.nextNode(),a=0,o=0,s=n[0];for(;s!==void 0;){if(a===s.index){let t;s.type===2?t=new Y(i,i.nextSibling,this,e):s.type===1?t=new s.ctor(i,s.name,s.strings,this,e):s.type===6&&(t=new ue(i,this,e)),this._$AV.push(t),s=n[++o]}a!==s?.index&&(i=W.nextNode(),a++)}return W.currentNode=k,r}p(e){let t=0;for(let n of this._$AV)n!==void 0&&(n.strings===void 0?n._$AI(e[t]):(n._$AI(e,n,t),t+=n.strings.length-2)),t++}},Y=class e{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,n,r){this.type=2,this._$AH=H,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=n,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode,t=this._$AM;return t!==void 0&&e?.nodeType===11&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=J(this,e,t),j(e)?e===H||e==null||e===``?(this._$AH!==H&&this._$AR(),this._$AH=H):e!==this._$AH&&e!==V&&this._(e):e._$litType$===void 0?e.nodeType===void 0?ie(e)?this.k(e):this._(e):this.T(e):this.$(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==H&&j(this._$AH)?this._$AA.nextSibling.data=e:this.T(k.createTextNode(e)),this._$AH=e}$(e){let{values:t,_$litType$:n}=e,r=typeof n==`number`?this._$AC(e):(n.el===void 0&&(n.el=q.createElement(G(n.h,n.h[0]),this.options)),n);if(this._$AH?._$AD===r)this._$AH.p(t);else{let e=new oe(r,this),n=e.u(this.options);e.p(t),this.T(n),this._$AH=e}}_$AC(e){let t=U.get(e.strings);return t===void 0&&U.set(e.strings,t=new q(e)),t}k(t){M(this._$AH)||(this._$AH=[],this._$AR());let n=this._$AH,r,i=0;for(let a of t)i===n.length?n.push(r=new e(this.O(A()),this.O(A()),this,this.options)):r=n[i],r._$AI(a),i++;i<n.length&&(this._$AR(r&&r._$AB.nextSibling,i),n.length=i)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){let t=S(e).nextSibling;S(e).remove(),e=t}}setConnected(e){this._$AM===void 0&&(this._$Cv=e,this._$AP?.(e))}},X=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,n,r,i){this.type=1,this._$AH=H,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=i,n.length>2||n[0]!==``||n[1]!==``?(this._$AH=Array(n.length-1).fill(new String),this.strings=n):this._$AH=H}_$AI(e,t=this,n,r){let i=this.strings,a=!1;if(i===void 0)e=J(this,e,t,0),a=!j(e)||e!==this._$AH&&e!==V,a&&(this._$AH=e);else{let r=e,o,s;for(e=i[0],o=0;o<i.length-1;o++)s=J(this,r[n+o],t,o),s===V&&(s=this._$AH[o]),a||=!j(s)||s!==this._$AH[o],s===H?e=H:e!==H&&(e+=(s??``)+i[o+1]),this._$AH[o]=s}a&&!r&&this.j(e)}j(e){e===H?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??``)}},se=class extends X{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===H?void 0:e}},ce=class extends X{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==H)}},le=class extends X{constructor(e,t,n,r,i){super(e,t,n,r,i),this.type=5}_$AI(e,t=this){if((e=J(this,e,t,0)??H)===V)return;let n=this._$AH,r=e===H&&n!==H||e.capture!==n.capture||e.once!==n.once||e.passive!==n.passive,i=e!==H&&(n===H||r);r&&this.element.removeEventListener(this.name,this,n),i&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){typeof this._$AH==`function`?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}},ue=class{constructor(e,t,n){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=n}get _$AU(){return this._$AM._$AU}_$AI(e){J(this,e)}},de=x.litHtmlPolyfillSupport;de?.(q,Y),(x.litHtmlVersions??=[]).push(`3.3.2`);var fe=(e,t,n)=>{let r=n?.renderBefore??t,i=r._$litPart$;if(i===void 0){let e=n?.renderBefore??null;r._$litPart$=i=new Y(t.insertBefore(A(),e),e,void 0,n??{})}return i._$AI(e),i},Z=globalThis,Q=class extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){let e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){let t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=fe(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return V}};Q._$litElement$=!0,Q.finalized=!0,Z.litElementHydrateSupport?.({LitElement:Q});var pe=Z.litElementPolyfillSupport;pe?.({LitElement:Q}),(Z.litElementVersions??=[]).push(`4.2.2`);var me=e=>(t,n)=>{n===void 0?customElements.define(e,t):n.addInitializer(()=>{customElements.define(e,t)})};function he(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}var $=class extends Q{constructor(...e){super(...e),this.variant=`normal`,this.thin=!1,this.thick=!1,this.outlineOnly=!1,this.scaleOnHover=!1,this.rounded=!1,this.sharp=!1,this.dark=!1,this.dontPunch=!1,this.animation=`normal`,this.type=`button`,this.id=``,this.name=``,this.disabled=!1,this.form=``,this.formaction=``,this.formmethod=``,this.formnovalidate=!1,this.formtarget=``,this.title=``,this.ariaLabel=``,this.ariaDescribedby=``,this.ariaPressed=``,this.bgColor=``,this.borderColor=``}static#e=this.properties={variant:{type:String},animation:{type:String},thin:{type:Boolean},thick:{type:Boolean},outlineOnly:{type:Boolean},rounded:{type:Boolean},sharp:{type:Boolean},scaleOnHover:{type:Boolean},dark:{type:Boolean},bgColor:{type:String},borderColor:{type:String},dontPunch:{type:Boolean},type:{type:String},id:{type:String},name:{type:String},disabled:{type:Boolean},form:{type:String},formaction:{type:String},formmethod:{type:String},formnovalidate:{type:Boolean},formtarget:{type:String},title:{type:String},ariaLabel:{type:String,attribute:`aria-label`},ariaDescribedby:{type:String,attribute:`aria-describedby`},ariaPressed:{type:String,attribute:`aria-pressed`}};static#t=this.styles=s`
|
|
3
3
|
button {
|
|
4
4
|
padding: 8px 16px;
|
|
5
5
|
border: none;
|
|
@@ -136,7 +136,7 @@
|
|
|
136
136
|
aria-label="${this.ariaLabel||``}"
|
|
137
137
|
aria-describedby="${this.ariaDescribedby||``}"
|
|
138
138
|
aria-pressed="${this.ariaPressed||``}"
|
|
139
|
-
class="${this.variant}${this.bgColor||this.borderColor?` custom-color`:``}${this.dontPunch?` dont-punch`:``}${this.thin&&!this.thick?` thin`:this.thick?` thick`:``}${this.outlineOnly?` outline-only`:``}${this.
|
|
139
|
+
class="${this.variant}${this.bgColor||this.borderColor?` custom-color`:``}${this.dontPunch?` dont-punch`:``}${this.thin&&!this.thick?` thin`:this.thick?` thick`:``}${this.outlineOnly?` outline-only`:``}${this.scaleOnHover?` scale-hover`:``}${this.rounded&&!this.sharp?` rounded`:this.sharp?` sharp`:``} animation-${this.animation}"
|
|
140
140
|
style="${e?`color: ${e}; `:``}${t&&!this.outlineOnly?`background-color: ${t}; `:``}${t&&!n?`border: 1px solid color-mix(in hsl, ${t} 100%, white 10%); `:n?`border: 1px solid ${n}; `:``}">
|
|
141
141
|
<slot></slot>
|
|
142
142
|
</button>`}};$=he([me(`n-button`)],$),Object.defineProperty(e,`NButton`,{enumerable:!0,get:function(){return $}})});
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@trenoxxious/n-components",
|
|
3
3
|
"description": "Customizable components for use with vanilla HTML, Javascript and CSS.",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "1.0.
|
|
5
|
+
"version": "1.0.8",
|
|
6
6
|
"repository": "github:Trenoxxious/n-components",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"web-components",
|
|
@@ -27,7 +27,8 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@types/node": "^25.0.3",
|
|
29
29
|
"typescript": "~5.9.3",
|
|
30
|
-
"vite": "npm:rolldown-vite@7.2.5"
|
|
30
|
+
"vite": "npm:rolldown-vite@7.2.5",
|
|
31
|
+
"vite-plugin-full-reload": "^1.2.0"
|
|
31
32
|
},
|
|
32
33
|
"overrides": {
|
|
33
34
|
"vite": "npm:rolldown-vite@7.2.5"
|