PageSourceSearch

https://nopwd.io/

html nopwd.io collected 2026-09-25 22:45:34 UTC 176,899 bytes, 5,932 lines download raw bytes

1<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="icon" type="image/svg+xml" href="/favicon.ico"><link rel="apple-touch-icon" type="image/png" sizes="180x180" href="/apple-touch-icon.png"><link rel="preload" as="font" href="/fonts/Inter.var.woff2" crossorigin="anonymous"><title>Say goodbye to passwords. | NoPwd</title><meta name="description" content="Nopwd offers seamless integration of email link and Passkeys authentication for your application."><meta name="author" content="Adrien Pinet"><meta property="og:url" content="https://nopwd.io/"><meta property="og:type" content="website"><meta property="og:title" content="Say goodbye to passwords."><meta property="og:description" content="Nopwd offers seamless integration of email link and Passkeys authentication for your application."><meta property="og:image" content="/og.png"><meta name="twitter:card" content="summary"><meta property="twitter:url" content="https://nopwd.io/"><meta name="twitter:title" content="Say goodbye to passwords."><meta name="twitter:description" content="Nopwd offers seamless integration of email link and Passkeys authentication for your application."><meta name="twitter:image" content="/og.png"><style>:root{--np-core-color-green-xs: hsla(117, 40%, 36%, 1);--np-core-color-green-s: hsla(117, 40%, 46%, 1);--np-core-color-green-m: hsla(117, 40%, 56%, 1);--np-core-color-green-l: hsla(117, 40%, 66%, 1);--np-core-color-green-xl: hsla(117, 40%, 76%, 1);--np-core-color-red-xs: hsla(2, 79%, 49%, 1);--np-core-color-red-s: hsla(2, 79%, 59%, 1);--np-core-color-red-m: hsla(2, 79%, 69%, 1);--np-core-color-red-l: hsla(2, 79%, 79%, 1);--np-core-color-red-xl: hsla(2, 79%, 89%, 1);--np-core-color-blue-xs: hsl(208, 80%, 30%);--np-core-color-blue-s: hsl(208, 80%, 40%);--np-core-color-blue-m: hsl(208, 80%, 50%);--np-core-color-blue-l: hsl(208, 80%, 60%);--np-core-color-blue-xl: hsl(208, 80%, 70%);--np-core-color-grey-xs: hsla(270, 10%, 10%, 1);--np-core-color-grey-s: hsla(270, 10%, 30%, 1);--np-core-color-grey-m: hsla(270, 10%, 50%, 1);--np-core-color-grey-l: hsla(270, 10%, 70%, 1);--np-core-color-grey-xl: hsla(270, 10%, 90%, 1);--np-core-color-black: hsla(270, 10%, 0%, 1);--np-core-color-white: hsla(270, 10%, 100%, 1);--np-core-color-purple-xs: hsla(270, 69%, 20%);--np-core-color-purple-s: hsla(270, 69%, 30%);--np-core-color-purple-m: hsla(270, 69%, 40%);--np-core-color-purple-l: hsla(270, 69%, 50%);--np-core-color-purple-xl: hsla(270, 69%, 60%);--np-core-color-pink-xs: hsl(330, 100%, 30%, 1);--np-core-color-pink-s: hsl(330, 100%, 40%, 1);--np-core-color-pink-m: hsl(330, 100%, 50%, 1);--np-core-color-pink-l: hsl(330, 100%, 60%, 1);--np-core-color-pink-xl: hsl(330, 100%, 70%, 1);--np-core-color-yellow-xs:hsl(70,100%,55%, 1);--np-core-color-yellow-s: hsl(70,100%,65%, 1);--np-core-color-yellow-m:hsl(70,100%,75%, 1);--np-core-color-yellow-l: hsl(70,100%,85%, 1);--np-core-color-yellow-xl: hsl(70,100%,96%, 1);--np-core-color-orange-xs: hsl(39,89%,43%, 1);--np-core-color-orange-s: hsl(39,89%,53%, 1);--np-core-color-orange-m: hsl(39,89%,63%, 1);--np-core-color-orange-l: hsl(39,89%,73%, 1);--np-core-color-orange-xl: hsl(39,89%,83%, 1)}:root{--np-core-gradient-purple-pink: linear-gradient( 45deg, var(--np-core-color-purple-m), var(--np-core-color-pink-m) );--np-core-gradient-blue-green: linear-gradient( 45deg, var(--np-core-color-blue-m), var(--np-core-color-green-m) )}:root{--np-core-padding-xs: .2em;--np-core-padding-s: .5em;--np-core-padding-m: 1em;--np-core-padding-l: 1.5em;--np-core-padding-xl: 2em}:root{--np-core-border-width-xs: 1px;--np-core-border-width-s: 2px;--np-core-border-width-m: 3px;--np-core-border-width-l: 4px;--np-core-border-width-xl: 5px}:root{--np-core-border-radius-xs: .1em;--np-core-border-radius-s: .2em;--np-core-border-radius-m: .4em;--np-core-border-radius-l: .8em;--np-core-border-radius-xl: 1.6em}:root{--np-core-font-size-xs: .6em;--np-core-font-size-s: .8em;--np-core-font-size-m: 1em;--np-core-font-size-l: 1.5em;--np-core-font-size-xl: 3em;
1--np-core-font-weight-xs: 100;--np-core-font-weight-s: 300;--np-core-font-weight-m: 500;--np-core-font-weight-l: 700;--np-core-font-weight-xl: 900}:root{--np-core-icon-gap: var(--np-core-padding-s)}@font-face{font-family:inter;src:url(/fonts/Inter.var.woff2) format("woff2 supports variations"),url(/fonts/Inter.var.woff2) format("woff2-variations");font-weight:100 900;font-stretch:75% 125%;font-display:swap}html,body{padding:0;margin:0;scroll-behavior:smooth}body{display:flex;width:100%;flex-flow:column;align-items:stretch;font-family:inter,system-ui,sans-serif;background-color:var(--np-core-color-grey-xl)}
2</style>
2<script>/** @license Copyright 2020 Google LLC (BSD-3-Clause) */
3/** Bundled JS generated from "@astrojs/lit/client-shim.js" */
4var N = Object.defineProperty;
5var i = (t, n) => () => (t && (n = t((t = 0))), n);
6var b = (t, n) => {
7	for (var a in n) N(t, a, { get: n[a], enumerable: !0 });
8};
9function s() {
10	if (d === void 0) {
11		let t = document.createElement('div');
12		(t.innerHTML = '<div><template shadowrootmode="open"></template></div>'),
13			(d = !!t.firstElementChild.shadowRoot);
14	}
15	return d;
16}
17var d,
18	m = i(() => {});
19var p,
20	c,
21	f,
22	u = i(() => {
23		(p = (t) => t.parentElement === null),
24			(c = (t) => t.tagName === 'TEMPLATE'),
25			(f = (t) => t.nodeType === Node.ELEMENT_NODE);
26	});
27var h,
28	E = i(() => {
29		m();
30		u();
31		h = (t) => {
32			var n;
33			if (s()) return;
34			let a = [],
35				e = t.firstElementChild;
36			for (; e !== t && e !== null; )
37				if (c(e)) a.push(e), (e = e.content);
38				else if (e.firstElementChild !== null) e = e.firstElementChild;
39				else if (f(e) && e.nextElementSibling !== null) e = e.nextElementSibling;
40				else {
41					let o;
42					for (; e !== t && e !== null; )
43						if (p(e)) {
44							o = a.pop();
45							let r = o.parentElement,
46								l = o.getAttribute('shadowroot');
47							if (((e = o), l === 'open' || l === 'closed')) {
48								let y = o.hasAttribute('shadowrootdelegatesfocus');
49								try {
50									r.attachShadow({ mode: l, delegatesFocus: y }).append(o.content);
51								} catch {}
52							} else o = void 0;
53						} else {
54							let r = e.nextElementSibling;
55							if (r != null) {
56								(e = r), o !== void 0 && o.parentElement.removeChild(o);
57								break;
58							}
59							let l =
60								(n = e.parentElement) === null || n === void 0 ? void 0 : n.nextElementSibling;
61							if (l != null) {
62								(e = l), o !== void 0 && o.parentElement.removeChild(o);
63								break;
64							}
65							(e = e.parentElement), o !== void 0 && (o.parentElement.removeChild(o), (o = void 0));
66						}
67				}
68		};
69	});
70var w = i(() => {
71	E();
72});
73var v = {};
74b(v, { hasNativeDeclarativeShadowRoots: () => s, hydrateShadowRoots: () => h });
75var S = i(() => {
76	m();
77	w();
78});
79async function g() {
80	let { hydrateShadowRoots: t } = await Promise.resolve().then(() => (S(), v));
81	window.addEventListener('DOMContentLoaded', () => t(document.body), { once: true });
82}
83var x = Document.parseHTMLUnsafe(
84	'<p><template shadowrootmode="open"></template></p>'
85).querySelector('p');
86(!x || !x.shadowRoot) && g();
87</script>
87</head> <body> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
87<script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script>
87<astro-island uid="1GPSnI" component-url="/_astro/app-header.BQo8nLiQ.js" component-export="AppHeader" renderer-url="/_astro/client.DEGHhFmz.js" props="{}" ssr client="idle" before-hydration-url="/_astro/astro_scripts/before-hydration.js.BZdOL1wD.js" opts="{&quot;name&quot;:&quot;AppHeader&quot;,&quot;value&quot;:true}" await-children><app-header><template shadowroot="open" shadowrootmode="open"><style>
88    :host {
89      position: sticky;
90      top: 0;
91      background-color: rgba(255, 255, 255, 0.5);
92      -webkit-backdrop-filter: blur(8px);
93      backdrop-filter: blur(8px);
94
95      z-index: 2;
96    }
97
98    header {
99      display: flex;
100      align-items: center;
101      justify-content: space-between;
102      padding: 1em;
103    }
104
105    a {
106      display: flex;
107      gap: var(--np-core-padding-xs);
108      position: relative;
109      text-decoration: none;
110      color: var(--np-core-color-grey-s);
111    }
112
113    a:hover {
114      color: var(--np-core-color-black);
115    }
116
117    .brand {
118      display: none;
119      justify-content: flex-start;
120      align-items: center;
121      letter-spacing: -1px;
122      font-size: var(--np-core-font-size-s);
123    }
124
125    .brand strong {
126      font-weight: var(--np-core-font-weight-l);
127    }
128
129    .brand .icon {
130      font-size: var(--np-core-font-size-l);
131    }
132
133    @media (min-width: 400px) {
134      .brand {
135        display: flex;
136      }
137    }
138
139    .icon {
140      height: 1em;
141      width: 1em;
142    }
143
144    .beta {
145      position: relative;
146      top: -1em;
147      left: -0.5em;
148      transform: rotate(-20deg);
149
150      padding: var(--np-core-padding-xs) var(--np-core-padding-s);
151      border-radius: var(--np-core-padding-xs);
152      border: 0px solid var(--np-core-color-orange-xs);
153
154      font-size: var(--np-core-font-size-xs);
155      font-weight: var(--np-core-font-weight-l);
156
157      color: var(--np-core-color-orange-xs);
158
159      animation: bounce 1s ease forwards;
160      animation-delay: 1000ms;
161    }
162
163    @media (min-width: 400px) {
164      .beta {
165      }
166    }
167
168    @keyframes bounce {
169      0%,
170      20%,
171      50%,
172      80%,
173      100% {
174        transform: translateY(0) rotate(-20deg);
175      }
176
177      40% {
178        transform: translateY(-2em);
179      }
180
181      60% {
182        transform: translateY(-0.5em);
183      }
184    }
185  </style><!--lit-part +gZw6aL5S44=--><header>
186      <a href="/"
187        ><!--lit-part g4LKUeBmWqE=--><svg
188  xmlns="http://www.w3.org/2000/svg"
189  viewBox="0 0 24 24"
190  fill="currentColor"
191  class="icon icon--shield-check"
192>
193  <path
194    fill-rule="evenodd"
195    d="M12.516 2.17a.75.75 0 00-1.032 0 11.209 11.209 0 01-7.877 3.08.75.75 0 00-.722.515A12.74 12.74 0 002.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 00.374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 00-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08zm3.094 8.016a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
196    clip-rule="evenodd"
197  />
198</svg><!--/lit-part--> <span class="brand">no<strong>pwd</strong></span>
199        <span class="beta">beta</span></a
200      >
201
202      <!--lit-node 6--><dynamic-island defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
203    :host {
204      display: flex;
205      align-items: center;
206      border-radius: 1em;
207      font-size: var(--np-core-font-size-s);
208      gap: var(--np-core-padding-xl);
209
210      background-color: var(--np-core-color-grey-l);
211      box-shadow: inset 0 0 10px var(--np-core-color-grey-m);
212      color: var(--np-core-color-grey-xl);
213
214      background-color: transparent;
215      box-shadow: none;
216      color: var(--np-core-color-grey-s);
217    }
218    .logo {
219      display: flex;
220      align-items: center;
221    }
222
223    .icon {
224      width: 1em;
225      height: 1em;
226    }
227
228    nav {
229      display: flex;
230      gap: 1em;
231      align-items: stretch;
232    }
233
234    ul {
235      display: flex;
236      align-items: center;
237      padding: 0;
238      margin: 0;
239      gap: 1em;
240      list-style: none;
241    }
242
243    .separator {
244      border-left: 1px var(--np-core-color-grey-l) solid;
245    }
246
247    li {
248      padding: 0;
249      font-weight: var(--np-core-font-weight-l);
250    }
251
252    span span {
253      color: grey;
254    }
255
256    .icon {
257      width: 1em;
258    }
259
260    .status {
261      display: flex;
262      align-items: center;
263      font-size: var(--np-core-font-size-s);
264      font-weight: var(--np-core-font-weight-l);
265      gap: 0.5em;
266    }
267
268    .status .icon {
269      color: var(--np-core-color-green-m);
270      animation: live 1s infinite ease-in-out alternate;
271    }
272
273    @keyframes live {
274      0% {
275        opacity: 0.6;
276      }
277      100% {
278        opacity: 1;
279      }
280    }
281
282    a {
283      display: flex;
284      align-items: center;
285
286      text-decoration: none;
287      color: var(--np-core-color-grey-s);
288    }
289
290    a:hover {
291      color: var(--np-core-color-black);
292    }
293  </style><!--lit-part NRiQKsId0Fk=-->
294      <nav>
295        <ul>
296          <li><a href="https://dev.nopwd.io">Get started</a></li>
297          <li><a href="https://nopwd.rocks">Playground</a></li>
298        </ul>
299        <span class="separator"></span>
300        <ul>
301          <li><a href="https://github.com/nopwdio" aria-label="github"><!--lit-part m119RJyvzjU=--> <svg
302  width="98"
303  height="96"
304  viewBox="0 0 98 96"
305  xmlns="http://www.w3.org/2000/svg"
306  class="icon icon--github"
307>
308  <path
309    fill-rule="evenodd"
310    clip-rule="evenodd"
311    d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.3
31162 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
312    fill="currentColor"
313  />
314</svg><!--/lit-part--></a></li>
315        </ul>
316      </nav>
317    <!--/lit-part--></template></dynamic-island>
318    </header><!--/lit-part--></template></app-header><!--astro:end--></astro-island>  
318<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();</script>
318<astro-island uid="1wSa50" component-url="/_astro/section-hero.Dfy9zW-Y.js" component-export="SectionHero" renderer-url="/_astro/client.DEGHhFmz.js" props="{}" ssr client="load" before-hydration-url="/_astro/astro_scripts/before-hydration.js.BZdOL1wD.js" opts="{&quot;name&quot;:&quot;SectionHero&quot;,&quot;value&quot;:true}" await-children><section-hero><template shadowroot="open" shadowrootmode="open"><style>
319    :host {
320      display: flex;
321      flex-flow: column;
322      justify-content: center;
323      align-items: center;
324      padding: var(--np-core-padding-m);
325    }
326
327    main {
328      display: flex;
329      flex-flow: column;
330      align-items: stretch;
331      justify-content: space-evenly;
332      max-width: 1000px;
333      gap: 4em;
334    }
335
336    h1 {
337      font-size: var(--np-core-font-size-xl);
338      margin: var(--np-core-padding-xl) 0 0 0;
339      text-align: center;
340      font-weight: 800;
341      text-transform: uppercase;
342      letter-spacing: -1px;
343      font-weight: var(--np-core-font-weight-xl);
344    }
345
346    h1 b {
347      color: transparent;
348      background-image: linear-gradient(30deg, var(--np-core-color-black), transparent);
349      -webkit-background-clip: text;
350      background-clip: text;
351      font-weight: var(--np-core-font-weight-xs);
352    }
353
354    h2 {
355      margin: 0;
356      text-align: center;
357      font-size: var(--np-core-font-size-l);
358      font-weight: var(--np-core-font-weight-m);
359      color: var(--np-core-color-grey-xs);
360      max-width: 630px;
361    }
362
363    h2 a {
364      color: inherit;
365      text-decoration: none;
366      font-weight: var(--np-core-font-weight-l);
367      border-bottom: 1px solid var(--np-core-color-grey-l);
368    }
369
370    h2 a:hover {
371      text-decoration: none;
372      font-weight: var(--np-core-font-weight-l);
373      border-bottom: 1px solid var(--np-core-color-grey-xs);
374    }
375
376    article {
377      display: flex;
378      flex-flow: column;
379      gap: var(--np-core-padding-l);
380      justify-content: center;
381      align-items: stretch;
382    }
383
384    @media (min-width: 400px) {
385      article {
386        align-items: center;
387      }
388    }
389
390    ul {
391      display: flex;
392      flex-flow: column;
393      gap: 1em;
394      list-style: none;
395
396      margin: 0;
397      padding: 0;
398
399      color: var(--np-core-color-grey-s);
400      font-size: var(--np-core-font-size-m);
401      font-weight: var(--np-core-font-weight-m);
402    }
403
404    li {
405      display: flex;
406      flex-flow: row;
407      align-items: center;
408      justify-content: space-between;
409      gap: 1em;
410      border-radius: 0.5em;
411      border: 1px dashed var(--np-core-color-grey-l);
412      padding: 1em;
413    }
414
415    li .icon {
416      font-size: var(--np-core-font-size-l);
417    }
418
419    li a {
420      flex-shrink: 0;
421      text-decoration: none;
422      font-size: var(--np-core-font-size-xs);
423      color: var(--np-core-color-grey-m);
424      border: 1px solid var(--np-core-color-grey-l);
425      border-radius: 2em;
426      padding: var(--np-core-padding-s) var(--np-core-padding-m);
427    }
428
429    li a:hover {
430      color: var(--np-core-color-grey-s);
431      border-color: var(--np-core-color-grey-s);
432    }
433
434    @media (min-width: 400px) {
435      ul {
436        display: grid;
437
438        grid-template-columns: 1fr 1fr;
439      }
440
441      li {
442        flex-flow: column;
443        align-items: center;
444        text-align: center;
445      }
446    }
447
448    @media (min-width: 700px) {
449      ul {
450        display: flex;
451        flex-flow: row;
452      }
453
454      li {
455        flex: 1;
456      }
457    }
458
459    .icon {
460      width: 1em;
461    }
462  </style><!--lit-part zC5LeNkBsZY=-->
463      <main>
464        <h1>
465          Eliminate <b>Passwords</b>
466          Forever.
467        </h1>
468        <article>
469          <h2>
470            Nopwd offers the simplest way to integrate
471            <a href="#section-magiclink">email link</a> and
472            <a href="#section-passkeys">Passkeys</a> authentication into your application.
473          </h2>
474          <!--lit-node 7--><code-command  code="npm i @nopwdio/sdk-js" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
475    :host {
476      display: flex;
477      flex: 1;
478    }
479
480    button {
481      display: flex;
482      flex: 1;
483      font-size: var(--np-core-font-size-m);
484      align-items: stretch;
485      padding: 0.5em 1em;
486      border-radius: 0.5em;
487      gap: 1em;
488      background-image: linear-gradient(45deg, #3b82f6, #8b5cf6);
489      color: white;
490      border: 0px solid var(--np-core-color-grey-xs);
491      font-weight: var(--np-core-font-weight-l);
492      cursor: pointer;
493    }
494
495    span.code {
496      flex: 1;
497    }
498
499    ui-clipboard {
500      flex-shrink: 0;
501    }
502
503    span.separator {
504      border-left: 1px solid var(--np-core-color-grey-l);
505    }
506
507    .icon {
508      color: var(--np-core-color-grey-xl);
509      width: 1em;
510    }
511  </style><!--lit-part SdquGGocnTM=-->
512      <!--lit-node 0--><button >
513        <span class="code"><!--lit-part-->npm i @nopwdio/sdk-js<!--/lit-part--></span>
514        <span class="separator"></span>
515        <!--lit-node 4--><ui-clipboard  text="npm i @nopwdio/sdk-js" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
516    :host,
517    span {
518      display: flex;
519      align-items: center;
520    }
521
522    .icon {
523      width: 1em;
524      height: 1em;
525    }
526
527    span.idle {
528      cursor: pointer;
529    }
530
531    span.busy .icon {
532      animation: hideIt var(--delay) linear forwards;
533    }
534
535    span.done .icon {
536      animation: showIt var(--delay) linear forwards;
537    }
538
539    @keyframes hideIt {
540      from {
541        transform: scale(1);
542      }
543      to {
544        transform: scale(0);
545      }
546    }
547    @keyframes showIt {
548      from {
549        transform: scale(0);
550      }
551      50% {
552        transform: scale(1.4);
553      }
554
555      to {
556        transform: scale(1);
557      }
558    }
559  </style><!--lit-part BRUAAAUVAAA=--><!--lit-part us4tHPFt+tw=--><!--lit-node 0--><span class="idle" ><!--lit-part kMtQNZeoWhc=--><svg
560  xmlns="http://www.w3.org/2000/svg"
561  fill="none"
562  viewBox="0 0 24 24"
563  stroke-width="1.5"
564  stroke="currentColor"
565  class="icon icon--clipboard-document"
566>
567  <path
568    stroke-linecap="round"
569    stroke-linejoin="round"
570    d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z"
571  />
572</svg><!--/lit-part--></span><!--/lit-part--><?><!--/lit-part--></template></ui-clipboard>
573      </button>
574    <!--/lit-part--></template></code-command>
575        </article>
576        <aside>
577          <ul>
578            <li>
579              <!--lit-part LUJDOwHcyps=--><svg
580  width="24"
581  height="24"
582  viewBox="0 0 24 24"
583  fill="none"
584  xmlns="http://www.w3.org/2000/svg"
585  class="icon"
586>
587  <path
588    d="M2.25 7.125C2.25 6.50368 2.75368 6 3.375 6H9.375C9.99632 6 10.5 6.50368 10.5 7.125V10.875C10.5 11.4963 9.99632 12 9.375 12H3.375C2.75368 12 2.25 11.4963 2.25 10.875V7.125Z"
589    stroke="currentColor"
590    stroke-width="1.5"
591    stroke-linecap="round"
592    stroke-linejoin="round"
593  />
594  <path
595    d="M14.25 8.625C14.25 8.00368 14.7537 7.5 15.375 7.5H20.625C21.2463 7.5 21.75 8.00368 21.75 8.625V16.875C21.75 17.4963 21.2463 18 20.625 18H15.375C14.7537 18 14.25 17.4963 14.25 16.875V8.625Z"
596    stroke="currentColor"
597    stroke-width="1.5"
598    stroke-linecap="round"
599    stroke-linejoin="round"
600  />
601  <path
602    d="M3.75 16.125C3.75 15.5037 4.25368 15 4.875 15H10.125C10.7463 15 11.25 15.5037 11.25 16.125V18.375C11.25 18.9963 10.7463 19.5 10.125 19.5H4.875C4.25368 19.5 3.75 18.9963 3.75 18.375V16.125Z"
603    stroke="currentColor"
604    stroke-width="1.5"
605    stroke-linecap="round"
606    stroke-linejoin="round"
607  />
608</svg><!--/lit-part-->
609              <span>Standard web components</span>
610              <a href="https://dev.nopwd.io/reference/components/#components-list">Components →</a>
611            </li>
612            <li>
613              <!--lit-part Z6+1gPqQsgU=-->
614  <svg
615    width="24"
616    height="24"
617    viewBox="0 0 24 24"
618    fill="none"
619    xmlns="http://www.w3.org/2000/svg"
620    class="icon"
621  >
622    <path
623      d="M11.4194 15.1694L17.25 21C18.2855 22.0355 19.9645 22.0355 21 21C22.0355 19.9645 22.0355 18.2855 21 17.25L15.1233 11.3733M11.4194 15.1694L13.9155 12.1383C14.2315 11.7546 14.6542 11.5132 15.1233 11.3733M11.4194 15.1694L6.76432 20.8219C6.28037 21.4096 5.55897 21.75 4.79768 21.75C3.39064 21.75 2.25 20.6094 2.25 19.2023C2.25 18.441 2.59044 17.7196 3.1781 17.2357L10.0146 11.6056M15.1233 11.3733C15.6727 11.2094 16.2858 11.1848 16.8659 11.2338C16.9925 11.2445 17.1206 11.25 17.25 11.25C19.7353 11.25 21.75 9.23528 21.75 6.75C21.75 6.08973 21.6078 5.46268 21.3523 4.89779L18.0762 8.17397C16.9605 7.91785 16.0823 7.03963 
62315.8262 5.92397L19.1024 2.64774C18.5375 2.39223 17.9103 2.25 17.25 2.25C14.7647 2.25 12.75 4.26472 12.75 6.75C12.75 6.87938 12.7555 7.00749 12.7662 7.13411C12.8571 8.20956 12.6948 9.39841 11.8617 10.0845L11.7596 10.1686M10.0146 11.6056L5.90901 7.5H4.5L2.25 3.75L3.75 2.25L7.5 4.5V5.90901L11.7596 10.1686M10.0146 11.6056L11.7596 10.1686M18.375 18.375L15.75 15.75M4.86723 19.125H4.87473V19.1325H4.86723V19.125Z"
624      stroke="currentColor"
625      stroke-width="1.5"
626      stroke-linecap="round"
627      stroke-linejoin="round"
628    />
629  </svg>
630<!--/lit-part-->
631              <span>Fully customizable with CSS parts</span>
632              <a href="https://dev.nopwd.io/guides/customization">Customization →</a>
633            </li>
634            <li>
635              <!--lit-part EhEXrmPyRkY=-->
636  <svg
637    width="24"
638    height="24"
639    viewBox="0 0 24 24"
640    fill="none"
641    xmlns="http://www.w3.org/2000/svg"
642    stroke="currentColor"
643    class="icon"
644  >
645    <path
646      d="M8.25 18.75C8.25 19.5784 7.57843 20.25 6.75 20.25C5.92157 20.25 5.25 19.5784 5.25 18.75M8.25 18.75C8.25 17.9216 7.57843 17.25 6.75 17.25C5.92157 17.25 5.25 17.9216 5.25 18.75M8.25 18.75H14.25M5.25 18.75H3.375C2.75368 18.75 2.25 18.2463 2.25 17.625V14.2504M19.5 18.75C19.5 19.5784 18.8284 20.25 18 20.25C17.1716 20.25 16.5 19.5784 16.5 18.75M19.5 18.75C19.5 17.9216 18.8284 17.25 18 17.25C17.1716 17.25 16.5 17.9216 16.5 18.75M19.5 18.75L20.625 18.75C21.2463 18.75 21.7537 18.2457 21.7154 17.6256C21.5054 14.218 20.3473 11.0669 18.5016 8.43284C18.1394 7.91592 17.5529 7.60774 16.9227 7.57315H14.25M16.5 18.75H14.25M14.25 7.57315V6.61479C14.25 6.0473 13.8275 5.56721 13.263 5.50863C11.6153 5.33764 9.94291 5.25 8.25 5.25C6.55709 5.25 4.88466 5.33764 3.23698 5.50863C2.67252 5.56721 2.25 6.0473 2.25 6.61479V14.2504M14.25 7.57315V14.2504M14.25 18.75V14.2504M14.25 14.2504H2.25"
647      stroke-width="1.5"
648      stroke-linecap="round"
649      stroke-linejoin="round"
650    />
651  </svg>
652<!--/lit-part-->
653              <span>Available via CDN or NPM</span>
654              <a href="https://dev.nopwd.io/reference/components/#how-to-install">installation →</a>
655            </li>
656            <li>
657              <!--lit-part 2p06ty3+y1E=-->
658  <svg
659    xmlns="http://www.w3.org/2000/svg"
660    fill="none"
661    viewBox="0 0 24 24"
662    stroke-width="1.5"
663    stroke="currentColor"
664    class="icon icon--sparkles"
665  >
666    <path
667      stroke-linecap="round"
668      stroke-linejoin="round"
669      d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
670    />
671  </svg>
672<!--/lit-part-->
673              <span>No credit card or API key required</span>
674              <a href="https://dev.nopwd.io/guides">Get started →</a>
675            </li>
676          </ul>
677        </aside>
678      </main>
679    <!--/lit-part--></template></section-hero><!--astro:end--></astro-island> <astro-island uid="2knQI2" component-url="/_astro/section-magiclink.8QevHtoT.js" component-export="SectionMagiclink" renderer-url="/_astro/client.DEGHhFmz.js" props="{&quot;id&quot;:[0,&quot;section-magiclink&quot;]}" ssr client="idle" before-hydration-url="/_astro/astro_scripts/before-hydration.js.BZdOL1wD.js" opts="{&quot;name&quot;:&quot;SectionMagiclink&quot;,&quot;value&quot;:true}" await-children><section-magiclink id="section-magiclink"><template shadowroot="open" shadowrootmode="open"><style></style><!--lit-part q1U2TSjDBhQ=-->
680      <!--lit-node 0--><ui-section
681        
682        
683       title="Email Link Authentication Flow" desc="Also known as a magic link, email authentication is a passwordless flow where users click a unique link sent to their email address to log in." defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
684    :host {
685      margin-top: 4em;
686      display: flex;
687      flex-flow: column;
688      align-items: center;
689      justify-content: center;
690      --aside-width: var(--ui-section--aside-width, 280px);
691    }
692
693    section {
694      display: flex;
695      flex-flow: column;
696      align-items: stretch;
697      max-width: 1000px;
698      gap: 2em;
699      padding: 1em;
700    }
701
702    header {
703      display: flex;
704      flex-flow: column;
705      align-items: center;
706      gap: 1em;
707      padding: 1em 0;
708    }
709
710    header :is(h1, p) {
711      margin: 0;
712      max-width: 600px;
713    }
714
715    header h1 {
716      font-size: var(--np-core-font-size-m);
717      color: var(--np-core-color-grey-xs);
718      text-align: center;
719      text-transform: uppercase;
720      letter-spacing: 0px;
721      font-weight: var(--np-core-font-weight-xl);
722    }
723
724    header p {
725      color: var(--np-core-color-grey-xs);
726      font-size: var(--np-core-font-size-m);
727      font-weight: var(--np-core-font-weight-l);
728      text-align: center;
729    }
730
731    slot[name="nav"] {
732      display: flex;
733      justify-content: center;
734      max-width: calc(100vw - 2em);
735    }
736
737    main {
738      display: flex;
739      flex-flow: column;
740      align-items: center;
741      gap: 2em;
742      max-width: 1200px;
743    }
744
745    slot[name="article"] {
746      display: flex;
747      flex-flow: column;
748      align-items: stretch;
749      gap: 1em;
750      width: calc(100vw - 2em);
751    }
752
753    slot[name="aside"] {
754      display: flex;
755      flex-flow: column;
756      align-items: stretch;
757      width: calc(100vw - 2em);
758    }
759
760    @media (min-width: 320px) {
761      slot[name="aside"] {
762        width: calc(var(--aside-width) - 2em);
763      }
764    }
765
766    @media (min-width: 700px) {
767      main {
768        flex-flow: row;
769        justify-content: space-between;
770        align-items: flex-start;
771      }
772
773      :host([aside="left"]) main {
774        flex-flow: row-reverse;
775      }
776
777      slot[name="article"] {
778        width: calc(100vw - 2em - var(--aside-width) - 2em);
779      }
780    }
781
782    @media (min-width: 1000px) {
783      slot[name="nav"] {
784        width: calc(1000px - 2em);
785      }
786
787      slot[name="article"] {
788        width: calc(1000px - 2em - var(--aside-width) - 2em);
789      }
790    }
791  </style><!--lit-part Szg1IDYYDfQ=-->
792      <section>
793        <header>
794          <h1><!--lit-part-->Email Link Authentication Flow<!--/lit-part--></h1>
795          <p><!--lit-part-->Also known as a magic link, email authentication is a passwordless flow where users click a unique link sent to their email address to log in.<!--/lit-part--></p>
796        </header>
797        <slot name="nav"></slot>
798        <main>
799          <slot name="article"></slot>
800          <slot name="aside"></slot>
801        </main>
802      </section>
803    <!--/lit-part--></template>
804        <article slot="article">
805          <!--lit-node 2--><ui-component-card   name="np-login" desc="Magic link input element" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
806    :host {
807      display: flex;
808      align-items: center;
809      gap: var(--np-core-padding-s);
810    }
811
812    .icon {
813      width: var(--np-core-font-size-l);
814      height: var(--np-core-font-size-l);
815      color: white;
816    }
817
818    aside {
819      display: flex;
820      padding: var(--np-core-padding-s);
821      border-radius: var(--np-core-padding-s);
822    }
823
824    main {
825      display: flex;
826      flex-flow: column;
827      gap: var(--np-core-padding-xs);
828      -webkit-background-clip: text;
829      background-clip: text;
830    }
831
832    aside,
833    main {
834      background-image: linear-gradient(45deg, #3b82f6, #8b5cf6);
835    }
836
837    h1,
838    p {
839      margin: 0;
840      color: transparent;
841    }
842
843    h1 {
844      font-size: var(--np-core-font-size-l);
845      font-weight: var(--np-core-font-weight-l);
846    }
847
848    p {
849      font-size: var(--np-core-font-size-xs);
850      font-weight: var(--np-core-font-weight-xl);
851      text-transform: uppercase;
852    }
853  </style><!--lit-part 6gdE1QGzWLs=-->
854      <aside><!--lit-part LUJDOwHcyps=--><svg
855  width="24"
856  height="24"
857  viewBox="0 0 24 24"
858  fill="none"
859  xmlns="http://www.w3.org/2000/svg"
860  class="icon"
861>
862  <path
863    d="M2.25 7.125C2.25 6.50368 2.75368 6 3.375 6H9.375C9.99632 6 10.5 6.50368 10.5 7.125V10.875C10.5 11.4963 9.99632 12 9.375 12H3.375C2.75368 12 2.25 11.4963 2.25 10.875V7.125Z"
864    stroke="currentColor"
865    stroke-width="1.5"
866    stroke-linecap="round"
867    stroke-linejoin="round"
868  />
869  <path
870    d="M14.25 8.625C14.25 8.00368 14.7537 7.5 15.375 7.5H20.625C21.2463 7.5 21.75 8.00368 21.75 8.625V16.875C21.75 17.4963 21.2463 18 20.625 18H15.375C14.7537 18 14.25 17.4963 14.25 16.875V8.625Z"
871    stroke="currentColor"
872    stroke-width="1.5"
873    stroke-linecap="round"
874    stroke-linejoin="round"
875  />
876  <path
877    d="M3.75 16.125C3.75 15.5037 4.25368 15 4.875 15H10.125C10.7463 15 11.25 15.5037 11.25 16.125V18.375C11.25 18.9963 10.7463 19.5 10.125 19.5H4.875C4.25368 19.5 3.75 18.9963 3.75 18.375V16.125Z"
878    stroke="currentColor"
879    stroke-width="1.5"
880    stroke-linecap="round"
881    stroke-linejoin="round"
882  />
883</svg><!--/lit-part--></aside>
884      <main>
885        <h1>&lt;<!--lit-part-->np-login<!--/lit-part-->&gt;</h1>
886        <p><!--lit-part-->Magic link input element<!--/lit-part--></p>
887      </main>
888    <!--/lit-part--></template></ui-component-card>
889          <!--lit-node 3--><ui-info
890             defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
891    :host {
892      display: flex;
893      padding: 0 0 0 1em;
894      margin: 1em 0;
895      font-size: var(--np-core-font-size-m);
896      color: var(--np-core-color-grey-s);
897      border-left-width: 1px;
898      border-left-style: solid;
899      border-image: linear-gradient(
900          to bottom,
901          transparent,
902          var(--np-core-color-grey-m),
903          transparent
904        )
905        1 100%;
906    }
907
908    p {
909      margin: 0;
910      padding: 0;
911    }
912    ::slotted(b) {
913      padding: 0em 0.4em;
914      border-radius: 0.2em;
915      font-size: var(--np-core-font-size-s);
916      border: 1px solid var(--np-core-color-grey-l);
917      font-weight: var(--np-core-font-weight-s);
918      color: var(--np-core-color-grey-xs);
919      font-style: normal;
920    }
921  </style><!--lit-part /l3xvd6A6Yk=--><p><slot></slot></p><!--/lit-part--></template>Simply add the <b>np-login</b> web component, listen to the <b>np:login</b> event, and
922            you're done!</ui-info
923          >
924          <!--lit-node 6--><editor-template   title="Magic Link Authentication" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
925    :host {
926      display: flex;
927      flex-flow: column;
928      border-radius: var(--np-core-font-size-xs);
929      overflow: hidden;
930
931      box-shadow: 8px 8px 30px var(--np-core-color-grey-m),
932        -8px -8px 30px var(--np-core-color-white);
933    }
934
935    header {
936      display: flex;
937      align-items: center;
938      gap: 0.5em;
939      padding: 0.5em;
940      justify-content: space-between;
941      background-color: var(--np-core-color-grey-xs);
942      border-bottom: 1px solid var(--np-core-color-grey-m);
943    }
944
945    .window .icon {
946      width: 0.8em;
947    }
948    .window .close {
949      color: var(--np-core-color-red-s);
950    }
951
952    .window .reduce {
953      color: var(--np-core-color-orange-m);
954    }
955
956    .window .full {
957      color: var(--np-core-color-green-m);
958    }
959
960    h1 {
961      flex: 1;
962      text-align: center;
963      margin: 0;
964      padding: 0.5em 1em;
965      font-size: var(--np-core-font-size-xs);
966      font-weight: var(--np-core-font-weight-m);
967      background-color: var(--np-core-color-grey-s);
968      color: var(--np-core-color-grey-xl);
969      border: 1px solid var(--np-core-color-grey-m);
970      border-radius: var(--np-core-font-size-xs);
971    }
972
973    main {
974      display: flex;
975      padding: 1em;
976      background-color: var(--np-core-color-grey-xs);
977      color: var(--np-core-color-grey-xl);
978      font-size: var(--np-core-font-size-s);
979      overflow-x: scroll;
980      scroll-behavior: smooth;
981    }
982
983    main::-webkit-scrollbar {
984      display: none;
985    }
986
987    .icon {
988      width: 1em;
989    }
990
991    ui-clipboard {
992      color: var(--np-core-color-grey-l);
993    }
994  </style><!--lit-part ph8/fUonEYo=-->
995      <header>
996        <span class="window">
997          <span class="close"><!--lit-part zygiWmBAPRU=--><svg
998  class="icon icon--circle"
999  xmlns="http://www.w3.org/2000/svg"
1000  viewBox="0 0 24 24"
1001>
1002  <circle cx="12" cy="12" r="10" fill="currentColor" />
1003</svg><!--/lit-part--></span>
1004          <span class="reduce"><!--lit-part zygiWmBAPRU=--><svg
1005  class="icon icon--circle"
1006  xmlns="http://www.w3.org/2000/svg"
1007  viewBox="0 0 24 24"
1008>
1009  <circle cx="12" cy="12" r="10" fill="currentColor" />
1010</svg><!--/lit-part--></span>
1011          <span class="full"><!--lit-part zygiWmBAPRU=--><svg
1012  class="icon icon--circle"
1013  xmlns="http://www.w3.org/2000/svg"
1014  viewBox="0 0 24 24"
1015>
1016  <circle cx="12" cy="12" r="10" fill="currentColor" />
1017</svg><!--/lit-part--></span>
1018        </span>
1019        <h1><!--lit-part-->Magic Link Authentication<!--/lit-part--></h1>
1020        <!--lit-node 10--><ui-clipboard  text="&lt;h1&gt;MyApp Login Form&lt;/h1&gt;
1021
1022&lt;np-login&gt;&lt;/np-login&gt; 
1023
1024&lt;script type=&quot;module&quot;&gt;
1025  const input = document.querySelector(&quot;np-login&quot;);
1026
1027  input.addEventListener(&quot;np:login&quot;, async (e) =&gt; {
1028    // You are authenticated 🎉
1029    const { expires_at, token } = await e.target.getSession();
1030  });
1031&lt;/script&gt;" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
1032    :host,
1033    span {
1034      display: flex;
1035      align-items: center;
1036    }
1037
1038    .icon {
1039      width: 1em;
1040      height: 1em;
1041    }
1042
1043    span.idle {
1044      cursor: pointer;
1045    }
1046
1047    span.busy .icon {
1048      animation: hideIt var(--delay) linear forwards;
1049    }
1050
1051    span.done .icon {
1052      animation: showIt var(--delay) linear forwards;
1053    }
1054
1055    @keyframes hideIt {
1056      from {
1057        transform: scale(1);
1058      }
1059      to {
1060        transform: scale(0);
1061      }
1062    }
1063    @keyframes showIt {
1064      from {
1065        transform: scale(0);
1066      }
1067      50% {
1068        transform: scale(1.4);
1069      }
1070
1071      to {
1072        transform: scale(1);
1073      }
1074    }
1075  </style><!--lit-part BRUAAAUVAAA=--><!--lit-part us4tHPFt+tw=--><!--lit-node 0--><span class="idle" ><!--lit-part kMtQNZeoWhc=--><svg
1076  xmlns="http://www.w3.org/2000/svg"
1077  fill="none"
1078  viewBox="0 0 24 24"
1079  stroke-width="1.5"
1080  stroke="currentColor"
1081  class="icon icon--clipboard-document"
1082>
1083  <path
1084    stroke-linecap="round"
1085    stroke-linejoin="round"
1086    d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z"
1087  />
1088</svg><!--/lit-part--></span><!--/lit-part--><?><!--/lit-part--></template></ui-clipboard>
1089      </header>
1090      <main><slot></slot></main>
1091    <!--/lit-part--></template>
1092            <!--lit-node 7--><code-shiki   language="html" code="&lt;h1&gt;MyApp Login Form&lt;/h1&gt;
1093
1094&lt;np-login&gt;&lt;/np-login&gt; 
1095
1096&lt;script type=&quot;module&quot;&gt;
1097  const input = document.querySelector(&quot;np-login&quot;);
1098
1099  input.addEventListener(&quot;np:login&quot;, async (e) =&gt; {
1100    // You are authenticated 🎉
1101    const { expires_at, token } = await e.target.getSession();
1102  });
1103&lt;/script&gt;" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
1104    :host {
1105      display: flex;
1106      align-items: center;
1107      font-weight: var(--np-core-font-weight-m);
1108    }
1109
1110    pre,
1111    code {
1112      tab-size: 2;
1113      margin: 0;
1114      padding: 0;
1115      /*font-family: Menlo, Consolas, monospace;*/
1116      transform: scale(1);
1117      font-size: 12px;
1118    }
1119
1120    :host::selection {
1121      background-color: #7928ca;
1122      color: white;
1123    }
1124
1125    // Nord theme
1126
1127    .hljs-subst {
1128      color: #d8dee9;
1129    }
1130
1131    .hljs-selector-tag {
1132      color: #81a1c1;
1133    }
1134
1135    .hljs-selector-id {
1136      color: #8fbcbb;
1137      font-weight: bold;
1138    }
1139
1140    .hljs-selector-class {
1141      color: #8fbcbb;
1142    }
1143
1144    .hljs-selector-attr {
1145      color: #8fbcbb;
1146    }
1147
1148    .hljs-property {
1149      color: #88c0d0;
1150    }
1151
1152    .hljs-selector-pseudo {
1153      color: #88c0d0;
1154    }
1155
1156    .hljs-addition {
1157      background-color: rgba(163, 190, 140, 0.5);
1158    }
1159
1160    .hljs-deletion {
1161      background-color: rgba(191, 97, 106, 0.5);
1162    }
1163
1164    .hljs-built_in,
1165    .hljs-type {
1166      color: #8fbcbb;
1167    }
1168
1169    .hljs-class {
1170      color: #8fbcbb;
1171    }
1172
1173    .hljs-function {
1174      color: #88c0d0;
1175    }
1176
1177    .hljs-title.hljs-function,
1178    .hljs-function > .hljs-title {
1179      color: #88c0d0;
1180    }
1181
1182    .hljs-keyword,
1183    .hljs-literal,
1184    .hljs-symbol {
1185      color: #81a1c1;
1186    }
1187
1188    .hljs-number {
1189      color: #b48ead;
1190    }
1191
1192    .hljs-regexp {
1193      color: #ebcb8b;
1194    }
1195
1196    .hljs-string {
1197      color: #a3be8c;
1198    }
1199
1200    .hljs-title {
1201      color: #8fbcbb;
1202    }
1203
1204    .hljs-params {
1205      color: #d8dee9;
1206    }
1207
1208    .hljs-bullet {
1209      color: #81a1c1;
1210    }
1211
1212    .hljs-code {
1213      color: #8fbcbb;
1214    }
1215
1216    .hljs-emphasis {
1217      font-style: italic;
1218    }
1219
1220    .hljs-formula {
1221      color: #8fbcbb;
1222    }
1223
1224    .hljs-strong {
1225      font-weight: bold;
1226    }
1227
1228    .hljs-link:hover {
1229      text-decoration: underline;
1230    }
1231
1232    .hljs-quote {
1233      color: #4c566a;
1234    }
1235
1236    .hljs-comment {
1237      color: #8c96aa;
1238    }
1239
1240    .hljs-doctag {
1241      color: #8fbcbb;
1242    }
1243
1244    .hljs-meta,
1245    .hljs-meta .hljs-keyword {
1246      color: #5e81ac;
1247    }
1248
1249    .hljs-meta .hljs-string {
1250      color: #a3be8c;
1251    }
1252
1253    .hljs-attr {
1254      color: #8fbcbb;
1255    }
1256
1257    .hljs-attribute {
1258      color: #d8dee9;
1259    }
1260
1261    .hljs-name {
1262      color: #81a1c1;
1263    }
1264
1265    .hljs-section {
1266      color: #88c0d0;
1267    }
1268
1269    .hljs-tag {
1270      color: #81a1c1;
1271    }
1272
1273    .hljs-variable {
1274      color: #d8dee9;
1275    }
1276
1277    .hljs-template-variable {
1278      color: #d8dee9;
1279    }
1280
1281    .hljs-template-tag {
1282      color: #5e81ac;
1283    }
1284  </style><!--lit-part ClNCJ8ooUiE=--><pre><code><!--lit-part 60vkrpCRnMU=--><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>MyApp Login Form<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
1285
1286<span class="hljs-tag">&lt;<span class="hljs-name">np-login</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">np-login</span>&gt;</span> 
1287
1288<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="language-javascript">
1289  <span class="hljs-keyword">const</span> input = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">&quot;np-login&quot;</span>);
1290
1291  input.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&quot;np:login&quot;</span>, <span class="hljs-title function_">async</span> (e) =&gt; {
1292    <span class="hljs-comment">// You are authenticated 🎉</span>
1293    <span class="hljs-keyword">const</span> { expires_at, token } = <span class="hljs-keyword">await</span> e.<span class="hljs-property">target</span>.<span class="hljs-title function_">getSession</span>();
1294  });
1295</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><!--/lit-part--></code></pre><!--/lit-part--></template></code-shiki>
1296          </editor-template>
1297        </article>
1298        <!--lit-node 8--><demo-magiclink  slot="aside" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
1299    np-login {
1300      pointer-events: none;
1301    }
1302
1303    .screen {
1304      display: flex;
1305      align-items: stretch;
1306      flex-flow: column;
1307      position: relative;
1308      padding: 1em;
1309    }
1310
1311    #replay {
1312      display: flex;
1313      margin-top: 2em;
1314      justify-content: center;
1315      align-items: center;
1316      gap: 0.5em;
1317      background-color: transparent;
1318      border: none;
1319      color: var(--np-core-color-grey-s);
1320    }
1321
1322    .icon {
1323      width: 1em;
1324    }
1325
1326    #page-login {
1327      display: flex;
1328      justify-content: center;
1329      position: relative;
1330      gap: 0.5em;
1331      width: 100%;
1332      flex-flow: column;
1333    }
1334
1335    h1 {
1336      color: var(--np-core-color-grey-s);
1337    }
1338
1339    #email-validate:not([state])::part(button) {
1340      background-image: linear-gradient(45deg, #3b82f6, #8b5cf6);
1341    }
1342
1343    #notification {
1344      display: flex;
1345      align-items: center;
1346      position: absolute;
1347      left: 1em;
1348      right: 1em;
1349      gap: 1em;
1350      padding: 1em;
1351      border-radius: 0.5em;
1352      border: rgba(200, 200, 200, 0.5) solid 1px;
1353      background-color: rgba(220, 220, 220, 0.1);
1354      backdrop-filter: blur(6px);
1355      -webkit-backdrop-filter: blur(6px);
1356      z-index: 1000;
1357    }
1358
1359    #notification .icon {
1360      font-size: var(--np-core-font-size-xl);
1361    }
1362
1363    #notification .content {
1364      display: flex;
1365      flex-flow: column;
1366      justify-content: left;
1367    }
1368
1369    #notification .content h1 {
1370      color: black;
1371      margin: 0;
1372      padding: 0;
1373      font-size: var(--np-core-font-size-m);
1374    }
1375    #notification .content p {
1376      margin: 0;
1377      padding: 0;
1378    }
1379
1380    #page-mailbox {
1381      display: flex;
1382      width: 100%;
1383      flex-flow: column;
1384      align-items: flex-start;
1385    }
1386
1387    #page-mailbox header {
1388      font-size: 0.6em;
1389      font-weight: 700;
1390    }
1391
1392    #page-mailbox .fake {
1393      font-size: 0.8em;
1394      color: var(--np-core-color-grey-m);
1395      background-color: var(--np-core-color-grey-m);
1396      border-radius: 0.5em;
1397      margin: 0.2em 0;
1398    }
1399
1400    #authorize {
1401      margin: 2em 0;
1402      padding: 0.5em 1em;
1403      border: none;
1404      border-radius: 0.5em;
1405      font-weight: 900;
1406      color: white;
1407      width: 100%;
1408      background-image: linear-gradient(45deg, #7928ca, #ff0080);
1409      background-image: linear-gradient(45deg, #3b82f6, #8b5cf6);
1410    }
1411
1412    #conditional {
1413      display: flex;
1414      position: absolute;
1415      top: 1em;
1416    }
1417
1418    #page-authenticated {
1419      display: flex;
1420      width: 100%;
1421      align-items: center;
1422      flex-flow: column;
1423    }
1424
1425    #page-authenticated h1 {
1426      margin: 2em 0 0 0;
1427      font-size: var(--np-core-font-size-xl);
1428      color: var(--np-core-color-green-m);
1429    }
1430
1431    #page-authenticated h2 {
1432      text-align: center;
1433      font-weight: var(--np-core-font-weight-l);
1434      color: var(--np-core-color-green-m);
1435
1436      margin: 0;
1437    }
1438
1439    /* reset */
1440
1441    #notification {
1442      display: none;
1443    }
1444
1445    #page-mailbox {
1446      display: none;
1447    }
1448
1449    #page-authenticated {
1450      display: none;
1451    }
1452  </style><!--lit-part fKXadyiDMtg=-->
1453      <!--lit-node 0--><ui-intersect    max="1" threshold="0.8" defer-hydration><template shadowroot="open" shadowrootmode="open"><style></style><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></template>
1454        <!--lit-node 1--><mobile-template defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
1455    :host {
1456      display: flex;
1457      flex-shrink: 0;
1458      flex-flow: column;
1459      justify-content: stretch;
1460      aspect-ratio: 9 / 16;
1461      border-radius: var(--np-core-font-size-l);
1462      border: 3px solid black;
1463
1464      font-size: var(--np-core-font-size-s);
1465
1466      box-shadow: 8px 8px 30px var(--np-core-color-grey-m),
1467        -8px -8px 30px var(--np-core-color-white);
1468    }
1469
1470    header {
1471      display: grid;
1472      align-items: center;
1473      margin: 1em;
1474      grid-template-columns: 1fr 1fr 1fr;
1475      height: 1.4em;
1476    }
1477
1478    .clock,
1479    .status {
1480      display: flex;
1481      justify-content: center;
1482      align-items: center;
1483      font-size: var(--np-core-font-size-s);
1484    }
1485
1486    .clock {
1487      font-weight: var(--np-core-font-weight-l);
1488      gap: var(--np-core-padding-xs);
1489    }
1490    .clock .separator[odd] {
1491      color: var(--np-core-color-grey-l);
1492    }
1493
1494    .center {
1495      border-radius: 1em;
1496      height: 1.5em;
1497      background-color: var(--np-core-color-black);
1498    }
1499
1500    .status {
1501      gap: 0.5em;
1502    }
1503
1504    .icon {
1505      width: 1em;
1506    }
1507  </style><!--lit-part R7YEdBBcArw=-->
1508      <header>
1509        <span class="clock">
1510          <span class="digit"
1511            ><!--lit-part-->--<!--/lit-part--></span
1512          >
1513          <!--lit-node 4--><span class="separator" >:</span>
1514          <span class="digit"
1515            ><!--lit-part-->--<!--/lit-part--></span
1516          >
1517        </span>
1518        <span class="center"></span>
1519        <div class="status"><!--lit-part oNsTGPsJ6WA=--><svg
1520  xmlns="http://www.w3.org/2000/svg"
1521  viewBox="0 0 24 24"
1522  fill="currentColor"
1523  class="icon icon--wifi"
1524>
1525  <path
1526    fill-rule="evenodd"
1527    d="M1.371 8.143c5.858-5.857 15.356-5.857 21.213 0a.75.75 0 010 1.061l-.53.53a.75.75 0 01-1.06 0c-4.98-4.979-13.053-4.979-18.032 0a.75.75 0 01-1.06 0l-.53-.53a.75.75 0 010-1.06zm3.182 3.182c4.1-4.1 10.749-4.1 14.85 0a.75.75 0 010 1.061l-.53.53a.75.75 0 01-1.062 0 8.25 8.25 0 00-11.667 0 .75.75 0 01-1.06 0l-.53-.53a.75.75 0 010-1.06zm3.204 3.182a6 6 0 018.486 0 .75.75 0 010 1.061l-.53.53a.75.75 0 01-1.061 0 3.75 3.75 0 00-5.304 0 .75.75 0 01-1.06 0l-.53-.53a.75.75 0 010-1.06zm3.182 3.182a1.5 1.5 0 012.122 0 .75.75 0 010 1.061l-.53.53a.75.75 0 01-1.061 0l-.53-.53a.75.75 0 010-1.06z"
1528    clip-rule="evenodd"
1529  />
1530</svg><!--/lit-part--><!--lit-part T9fhyP6YE38=--><svg
1531  xmlns="http://www.w3.org/2000/svg"
1532  viewBox="0 0 24 24"
1533  fill="currentColor"
1534  class="icon icon--battery"
1535>
1536  <path
1537    fill-rule="evenodd"
1538    d="M3.75 6.75a3 3 0 00-3 3v6a3 3 0 003 3h15a3 3 0 003-3v-.037c.856-.174 1.5-.93 1.5-1.838v-2.25c0-.907-.644-1.664-1.5-1.837V9.75a3 3 0 00-3-3h-15zm15 1.5a1.5 1.5 0 011.5 1.5v6a1.5 1.5 0 01-1.5 1.5h-15a1.5 1.5 0 01-1.5-1.5v-6a1.5 1.5 0 011.5-1.5h15zM4.5 9.75a.75.75 0 00-.75.75V15c0 .414.336.75.75.75H18a.75.75 0 00.75-.75v-4.5a.75.75 0 00-.75-.75H4.5z"
1539    clip-rule="evenodd"
1540  />
1541</svg><!--/lit-part--></div>
1542      </header>
1543      <slot></slot>
1544    <!--/lit-part--></template>
1545          <div class="screen">
1546            <div id="notification">
1547              <!--lit-part Ues4L5ejRGY=--><svg
1548  xmlns="http://www.w3.org/2000/svg"
1549  fill="none"
1550  viewBox="0 0 24 24"
1551  stroke-width="1.5"
1552  stroke="currentColor"
1553  class="icon icon--inbox"
1554>
1555  <path
1556    stroke-linecap="round"
1557    stroke-linejoin="round"
1558    d="M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H6.911a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661z"
1559  />
1560</svg><!--/lit-part-->
1561              <div class="content">
1562                <h1>Auth request</h1>
1563                <p>Authentication request to my.app</p>
1564              </div>
1565            </div>
1566            <div id="page-login">
1567              <h1>MyApp login form</h1>
1568              <!--lit-node 10--><np-login  id="email-input" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
1569  :host {
1570    --np-core-color-green-xs: hsla(117, 40%, 36%, 1);
1571    --np-core-color-green-s: hsla(117, 40%, 46%, 1);
1572    --np-core-color-green-m: hsla(117, 40%, 56%, 1);
1573    --np-core-color-green-l: hsla(117, 40%, 66%, 1);
1574    --np-core-color-green-xl: hsla(117, 40%, 76%, 1);
1575
1576    --np-core-color-red-xs: hsla(2, 79%, 49%, 1);
1577    --np-core-color-red-s: hsla(2, 79%, 59%, 1);
1578    --np-core-color-red-m: hsla(2, 79%, 69%, 1);
1579    --np-core-color-red-l: hsla(2, 79%, 79%, 1);
1580    --np-core-color-red-xl: hsla(2, 79%, 89%, 1);
1581
1582    --np-core-color-blue-xs: hsl(208, 80%, 30%);
1583    --np-core-color-blue-s: hsl(208, 80%, 40%);
1584    --np-core-color-blue-m: hsl(208, 80%, 50%);
1585    --np-core-color-blue-l: hsl(208, 80%, 60%);
1586    --np-core-color-blue-xl: hsl(208, 80%, 70%);
1587
1588    --np-core-color-grey-xs: hsla(270, 10%, 10%, 1);
1589    --np-core-color-grey-s: hsla(270, 10%, 30%, 1);
1590    --np-core-color-grey-m: hsla(270, 10%, 50%, 1);
1591    --np-core-color-grey-l: hsla(270, 10%, 70%, 1);
1592    --np-core-color-grey-xl: hsla(270, 10%, 90%, 1);
1593
1594    --np-core-color-black: hsla(270, 10%, 0%, 1);
1595    --np-core-color-white: hsla(270, 10%, 100%, 1);
1596
1597    --np-core-color-purple-xs: hsla(270, 69%, 20%);
1598    --np-core-color-purple-s: hsla(270, 69%, 30%);
1599    --np-core-color-purple-m: hsla(270, 69%, 40%);
1600    --np-core-color-purple-l: hsla(270, 69%, 50%);
1601    --np-core-color-purple-xl: hsla(270, 69%, 60%);
1602
1603    --np-core-color-pink-xs: hsl(330, 100%, 30%, 1);
1604    --np-core-color-pink-s: hsl(330, 100%, 40%, 1);
1605    --np-core-color-pink-m: hsl(330, 100%, 50%, 1);
1606    --np-core-color-pink-l: hsl(330, 100%, 60%, 1);
1607    --np-core-color-pink-xl: hsl(330, 100%, 70%, 1);
1608
1609    --np-core-color-yellow-xs: hsl(70, 100%, 55%, 1);
1610    --np-core-color-yellow-s: hsl(70, 100%, 65%, 1);
1611    --np-core-color-yellow-m: hsl(70, 100%, 75%, 1);
1612    --np-core-color-yellow-l: hsl(70, 100%, 85%, 1);
1613    --np-core-color-yellow-xl: hsl(70, 100%, 96%, 1);
1614
1615    --np-core-color-orange-xs: hsl(39, 89%, 43%, 1);
1616    --np-core-color-orange-s: hsl(39, 89%, 53%, 1);
1617    --np-core-color-orange-m: hsl(39, 89%, 63%, 1);
1618    --np-core-color-orange-l: hsl(39, 89%, 73%, 1);
1619    --np-core-color-orange-xl: hsl(39, 89%, 83%, 1);
1620  }
1621
1622  :host {
1623    --np-core-gradient-purple-pink: linear-gradient(
1624      45deg,
1625      var(--np-core-color-purple-m),
1626      var(--np-core-color-pink-m)
1627    );
1628    --np-core-gradient-blue-green: linear-gradient(
1629      45deg,
1630      var(--np-core-color-blue-m),
1631      var(--np-core-color-green-m)
1632    );
1633  }
1634
1635  :host {
1636    --np-core-padding-xs: 0.2em;
1637    --np-core-padding-s: 0.5em;
1638    --np-core-padding-m: 1em;
1639    --np-core-padding-l: 1.5em;
1640    --np-core-padding-xl: 2em;
1641  }
1642
1643  :host {
1644    --np-core-border-width-xs: 1px;
1645    --np-core-border-width-s: 2px;
1646    --np-core-border-width-m: 3px;
1647    --np-core-border-width-l: 4px;
1648    --np-core-border-width-xl: 5px;
1649  }
1650
1651  :host {
1652    --np-core-border-radius-xs: 0.1em;
1653    --np-core-border-radius-s: 0.2em;
1654    --np-core-border-radius-m: 0.4em;
1655    --np-core-border-radius-l: 0.6em;
1656    --np-core-border-radius-xl: 0.8em;
1657  }
1658
1659  :host {
1660    --np-core-font-size-xs: 0.6em;
1661    --np-core-font-size-s: 0.8em;
1662    --np-core-font-size-m: 1em;
1663    --np-core-font-size-l: 1.2em;
1664    --np-core-font-size-xl: 1.4em;
1665
1666    --np-core-font-weight-xs: 200;
1667    --np-core-font-weight-s: 300;
1668    --np-core-font-weight-m: 400;
1669    --np-core-font-weight-l: 500;
1670    --np-core-font-weight-xl: 600;
1671  }
1672
1673  :host {
1674    --np-core-animation-duration-xs: 100ms;
1675    --np-core-animation-duration-s: 200ms;
1676    --np-core-animation-duration-m: 400ms;
1677    --np-core-animation-duration-l: 800ms;
1678    --np-core-animation-duration-xl: 1600ms;
1679  }
1680
1681  @keyframes scale {
1682    0% {
1683      transform: scale(1);
1684    }
1685    100% {
1686      transform: scale(0.5);
1687    }
1688  }
1689
1690  @keyframes bounce {
1691    0%,
1692    20%,
1693    50%,
1694    80%,
1695    100% {
1696      transform: translateY(0);
1697    }
1698    40% {
1699      transform: translateY(-0.4em);
1700    }
1701    60% {
1702      transform: translateY(-0.2em);
1703    }
1704  }
1705
1706  @keyframes glow {
1707    50% {
1708      opacity: 0.4;
1709      transform: scale(0.8);
1710    }
1711    100% {
1712      opacity: 1;
1713      transform: scale(1);
1714    }
1715  }
1716
1717  :host {
1718    --np-component-padding: var(--np-core-padding-s);
1719
1720    --np-component-border-radius: var(--np-core-border-radius-s);
1721    --np-component-border-width: var(--np-core-border-width-xs);
1722
1723    --np-component-font-size: var(--np-core-font-size-m);
1724    --np-component-font-weight: var(--np-core-font-weight-l);
1725
1726    --np-component-border-width: var(--np-core-border-width-xs);
1727    --np-component-icon-gap: var(--np-core-padding-s);
1728  }
1729
1730  :host {
1731    --np-component-border-color: var(--np-core-color-black);
1732    --np-component-text-color: var(--np-core-color-black);
1733    --np-component-background-color: transparent;
1734  }
1735
1736  .icon {
1737    width: 1em;
1738  }
1739
1740  .icon--busy {
1741    animation: scale var(--np-core-animation-duration-m) ease-out infinite alternate;
1742  }
1743
1744  .icon--envelope {
1745    animation: bounce var(--np-core-animation-duration-l) ease-out 10;
1746  }
1747
1748  :host {
1749    display: flex;
1750    overflow: hidden;
1751
1752    border: solid var(--np-component-border-color) var(--np-component-border-width);
1753    border-radius: var(--np-component-border-radius);
1754  }
1755
1756  :host([state="authenticated"]) {
1757    --np-component-border-color: var(--np-core-color-green-m);
1758  }
1759
1760  :host([state="error"]) {
1761    --np-component-border-color: var(--np-core-color-red-m);
1762  }
1763
1764  input,
1765  button {
1766    display: flex;
1767
1768    border: none;
1769    outline: none;
1770
1771    margin: 0;
1772    padding: var(--np-component-padding);
1773    font-size: var(--np-component-font-size);
1774    font-weight: var(--np-component-font-weight);
1775
1776    background-color: var(--np-component-background-color);
1777  }
1778
1779  input {
1780    flex-grow: 1;
1781    color: var(--np-component-text-color);
1782  }
1783
1784  button {
1785    color: var(--np-component-border-color);
1786  }
1787</style><!--lit-part xK9ZVg1x6r4=-->
1788      <!--lit-node 0--><input
1789        type="email"
1790        
1791        
1792        value=""
1793        placeholder="Your email"
1794        id="email-input"
1795        autocomplete="username webauthn"
1796        part="input"
1797      />
1798      <!--lit-node 1--><button  part="button">
1799        <!--lit-part BRUAAAUVAAA=--><!--lit-part l4vxxSH7Qn8=--><svg
1800  xmlns="http://www.w3.org/2000/svg"
1801  fill="none"
1802  viewBox="0 0 24 24"
1803  stroke-width="1.5"
1804  stroke="currentColor"
1805  class="icon icon--arrow-right-circle"
1806>
1807  <path
1808    stroke-linecap="round"
1809    stroke-linejoin="round"
1810    d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
1811  />
1812</svg><!--/lit-part--><?><!--/lit-part-->
1813      </button>
1814    <!--/lit-part--></template></np-login>
1815              <!--lit-node 11--><button id="replay" ><!--lit-part vqaCrzawFsg=--><svg
1816  width="24"
1817  height="24"
1818  viewBox="0 0 24 24"
1819  fill="none"
1820  xmlns="http://www.w3.org/2000/svg"
1821  class="icon icon--arrow-path-rounded"
1822>
1823  <path
1824    d="M19.5 12C19.5 10.7681 19.4536 9.54699 19.3624 8.3384C19.2128 6.35425 17.6458 4.78724 15.6616 4.63757C14.453 4.54641 13.2319 4.5 12 4.5C10.7681 4.5 9.54699 4.54641 8.3384 4.63757C6.35425 4.78724 4.78724 6.35425 4.63757 8.3384C4.62097 8.55852 4.60585 8.77906 4.59222 9M19.5 12L22.5 9M19.5 12L16.5 9M4.5 12C4.5 13.2319 4.54641 14.453 4.63757 15.6616C4.78724 17.6458 6.35425 19.2128 8.3384 19.3624C9.54699 19.4536 10.7681 19.5 12 19.5C13.2319 19.5 14.453 19.4536 15.6616 19.3624C17.6458 19.2128 19.2128 17.6458 19.3624 15.6616C19.379 15.4415 19.3941 15.2209 19.4078 15M4.5 12L7.5 15M4.5 12L1.5 15"
1825    stroke="currentColor"
1826    stroke-width="1.5"
1827    stroke-linecap="round"
1828    stroke-linejoin="round"
1829  />
1830</svg> <!--/lit-part--> Replay</button>
1831            </div>
1832            <div id="page-mailbox">
1833              <header>&#9664; myapp</header>
1834              <h1>Mailbox</h1>
1835              <p class="fake">FFFF</p>
1836              <p class="fake">FFFFFFFFFFFFFF</p>
1837              <p class="fake">FFFFFFFF</p>
1838              <button id="authorize">Authenticate</button>
1839            </div>
1840            <div id="page-authenticated">
1841              <h1><!--lit-part PlYJAga2inY=--><svg
1842  xmlns="http://www.w3.org/2000/svg"
1843  viewBox="0 0 24 24"
1844  fill="currentColor"
1845  class="icon icon--badge-check"
1846>
1847  <path
1848    fill-rule="evenodd"
1849    d="M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.007 6.387a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
1850    clip-rule="evenodd"
1851  />
1852</svg><!--/lit-part--></h1>
1853              <h2>Success!</h2>
1854            </div>
1855          </div>
1856        </mobile-template>
1857      </ui-intersect>
1858    <!--/lit-part--></template></demo-magiclink>
1859      </ui-section>
1860    <!--/lit-part--></template></section-magiclink><!--astro:end--></astro-island> <astro-island uid="2iGLFG" component-url="/_astro/section-passkey.Cvd
1860HzzDA.js" component-export="SectionPasskey" renderer-url="/_astro/client.DEGHhFmz.js" props="{&quot;id&quot;:[0,&quot;section-passkeys&quot;]}" ssr client="idle" before-hydration-url="/_astro/astro_scripts/before-hydration.js.BZdOL1wD.js" opts="{&quot;name&quot;:&quot;SectionPasskey&quot;,&quot;value&quot;:true}" await-children><section-passkey id="section-passkeys"><template shadowroot="open" shadowrootmode="open"><style></style><!--lit-part +XmbEeLS0og=-->
1861      <!--lit-node 0--><ui-section
1862        
1863        
1864        
1865       title="Passkey Authentication" desc="Based on FIDO Alliance and W3C standards, passkeys replace passwords with a cryptographic key
1866          that is unlocked only with the user&#39;s device." aside="left" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
1867    :host {
1868      margin-top: 4em;
1869      display: flex;
1870      flex-flow: column;
1871      align-items: center;
1872      justify-content: center;
1873      --aside-width: var(--ui-section--aside-width, 280px);
1874    }
1875
1876    section {
1877      display: flex;
1878      flex-flow: column;
1879      align-items: stretch;
1880      max-width: 1000px;
1881      gap: 2em;
1882      padding: 1em;
1883    }
1884
1885    header {
1886      display: flex;
1887      flex-flow: column;
1888      align-items: center;
1889      gap: 1em;
1890      padding: 1em 0;
1891    }
1892
1893    header :is(h1, p) {
1894      margin: 0;
1895      max-width: 600px;
1896    }
1897
1898    header h1 {
1899      font-size: var(--np-core-font-size-m);
1900      color: var(--np-core-color-grey-xs);
1901      text-align: center;
1902      text-transform: uppercase;
1903      letter-spacing: 0px;
1904      font-weight: var(--np-core-font-weight-xl);
1905    }
1906
1907    header p {
1908      color: var(--np-core-color-grey-xs);
1909      font-size: var(--np-core-font-size-m);
1910      font-weight: var(--np-core-font-weight-l);
1911      text-align: center;
1912    }
1913
1914    slot[name="nav"] {
1915      display: flex;
1916      justify-content: center;
1917      max-width: calc(100vw - 2em);
1918    }
1919
1920    main {
1921      display: flex;
1922      flex-flow: column;
1923      align-items: center;
1924      gap: 2em;
1925      max-width: 1200px;
1926    }
1927
1928    slot[name="article"] {
1929      display: flex;
1930      flex-flow: column;
1931      align-items: stretch;
1932      gap: 1em;
1933      width: calc(100vw - 2em);
1934    }
1935
1936    slot[name="aside"] {
1937      display: flex;
1938      flex-flow: column;
1939      align-items: stretch;
1940      width: calc(100vw - 2em);
1941    }
1942
1943    @media (min-width: 320px) {
1944      slot[name="aside"] {
1945        width: calc(var(--aside-width) - 2em);
1946      }
1947    }
1948
1949    @media (min-width: 700px) {
1950      main {
1951        flex-flow: row;
1952        justify-content: space-between;
1953        align-items: flex-start;
1954      }
1955
1956      :host([aside="left"]) main {
1957        flex-flow: row-reverse;
1958      }
1959
1960      slot[name="article"] {
1961        width: calc(100vw - 2em - var(--aside-width) - 2em);
1962      }
1963    }
1964
1965    @media (min-width: 1000px) {
1966      slot[name="nav"] {
1967        width: calc(1000px - 2em);
1968      }
1969
1970      slot[name="article"] {
1971        width: calc(1000px - 2em - var(--aside-width) - 2em);
1972      }
1973    }
1974  </style><!--lit-part Szg1IDYYDfQ=-->
1975      <section>
1976        <header>
1977          <h1><!--lit-part-->Passkey Authentication<!--/lit-part--></h1>
1978          <p><!--lit-part-->Based on FIDO Alliance and W3C standards, passkeys replace passwords with a cryptographic key
1979          that is unlocked only with the user&#39;s device.<!--/lit-part--></p>
1980        </header>
1981        <slot name="nav"></slot>
1982        <main>
1983          <slot name="article"></slot>
1984          <slot name="aside"></slot>
1985        </main>
1986      </section>
1987    <!--/lit-part--></template>
1988        <!--lit-node 1--><ui-pills    slot="nav" selected="use" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
1989    :host {
1990      display: flex;
1991      flex-wrap: nowrap;
1992      overflow-x: scroll;
1993      scroll-behavior: smooth;
1994      border: 1px solid var(--np-core-color-black);
1995      padding: var(--np-core-padding-xs);
1996      border-radius: var(--np-core-border-radius-xl);
1997    }
1998
1999    :host::-webkit-scrollbar {
2000      display: none;
2001    }
2002  </style><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></template>
2003          <!--lit-node 2--><ui-pills-item  name="create" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
2004    :host {
2005      display: flex;
2006      --highlight-color-light: var(--ui-pills-highlight-color-light, var(--np-core-color-grey-s));
2007      --highlight-color: var(--ui-pills-highlight-color, var(--np-core-color-black));
2008    }
2009
2010    button {
2011      white-space: nowrap;
2012      padding: var(--np-core-padding-s) var(--np-core-padding-m);
2013      border-radius: var(--np-core-border-radius-xl);
2014      background-color: transparent;
2015      border: none;
2016    }
2017
2018    :host(:not([checked])) button {
2019      color: var(--highlight-color-light);
2020      cursor: pointer;
2021    }
2022
2023    :host(:not([checked])) button:hover {
2024      color: var(--highlight-color);
2025      cursor: pointer;
2026    }
2027
2028    :host([checked]) button {
2029      background-color: var(--highlight-color);
2030      font-weight: var(--np-core-font-weight-l);
2031      color: white;
2032    }
2033  </style><!--lit-part 7Lk+2YMsNqg=--><!--lit-node 0--><button  part="button"><slot></slot></button><!--/lit-part--></template>Registration</ui-pills-item>
2034          <!--lit-node 3--><ui-pills-item  name="use" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
2035    :host {
2036      display: flex;
2037      --highlight-color-light: var(--ui-pills-highlight-color-light, var(--np-core-color-grey-s));
2038      --highlight-color: var(--ui-pills-highlight-color, var(--np-core-color-black));
2039    }
2040
2041    button {
2042      white-space: nowrap;
2043      padding: var(--np-core-padding-s) var(--np-core-padding-m);
2044      border-radius: var(--np-core-border-radius-xl);
2045      background-color: transparent;
2046      border: none;
2047    }
2048
2049    :host(:not([checked])) button {
2050      color: var(--highlight-color-light);
2051      cursor: pointer;
2052    }
2053
2054    :host(:not([checked])) button:hover {
2055      color: var(--highlight-color);
2056      cursor: pointer;
2057    }
2058
2059    :host([checked]) button {
2060      background-color: var(--highlight-color);
2061      font-weight: var(--np-core-font-weight-l);
2062      color: white;
2063    }
2064  </style><!--lit-part 7Lk+2YMsNqg=--><!--lit-node 0--><button  part="button"><slot></slot></button><!--/lit-part--></template>Authentication</ui-pills-item>
2065        </ui-pills>
2066
2067        <!--lit-part HH3pWgSjCOc=-->
2068              <article slot="article">
2069                <!--lit-node 1--><ui-component-card
2070                  
2071                  
2072                 name="np-login" desc="Passkey authentication input element" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
2073    :host {
2074      display: flex;
2075      align-items: center;
2076      gap: var(--np-core-padding-s);
2077    }
2078
2079    .icon {
2080      width: var(--np-core-font-size-l);
2081      height: var(--np-core-font-size-l);
2082      color: white;
2083    }
2084
2085    aside {
2086      display: flex;
2087      padding: var(--np-core-padding-s);
2088      border-radius: var(--np-core-padding-s);
2089    }
2090
2091    main {
2092      display: flex;
2093      flex-flow: column;
2094      gap: var(--np-core-padding-xs);
2095      -webkit-background-clip: text;
2096      background-clip: text;
2097    }
2098
2099    aside,
2100    main {
2101      background-image: linear-gradient(45deg, #3b82f6, #8b5cf6);
2102    }
2103
2104    h1,
2105    p {
2106      margin: 0;
2107      color: transparent;
2108    }
2109
2110    h1 {
2111      font-size: var(--np-core-font-size-l);
2112      font-weight: var(--np-core-font-weight-l);
2113    }
2114
2115    p {
2116      font-size: var(--np-core-font-size-xs);
2117      font-weight: var(--np-core-font-weight-xl);
2118      text-transform: uppercase;
2119    }
2120  </style><!--lit-part 6gdE1QGzWLs=-->
2121      <aside><!--lit-part LUJDOwHcyps=--><svg
2122  width="24"
2123  height="24"
2124  viewBox="0 0 24 24"
2125  fill="none"
2126  xmlns="http://www.w3.org/2000/svg"
2127  class="icon"
2128>
2129  <path
2130    d="M2.25 7.125C2.25 6.50368 2.75368 6 3.375 6H9.375C9.99632 6 10.5 6.50368 10.5 7.125V10.875C10.5 11.4963 9.99632 12 9.375 12H3.375C2.75368 12 2.25 11.4963 2.25 10.875V7.125Z"
2131    stroke="currentColor"
2132    stroke-width="1.5"
2133    stroke-linecap="round"
2134    stroke-linejoin="round"
2135  />
2136  <path
2137    d="M14.25 8.625C14.25 8.00368 14.7537 7.5 15.375 7.5H20.625C21.2463 7.5 21.75 8.00368 21.75 8.625V16.875C21.75 17.4963 21.2463 18 20.625 18H15.375C14.7537 18 14.25 17.4963 14.25 16.875V8.625Z"
2138    stroke="currentColor"
2139    stroke-width="1.5"
2140    stroke-linecap="round"
2141    stroke-linejoin="round"
2142  />
2143  <path
2144    d="M3.75 16.125C3.75 15.5037 4.25368 15 4.875 15H10.125C10.7463 15 11.25 15.5037 11.25 16.125V18.375C11.25 18.9963 10.7463 19.5 10.125 19.5H4.875C4.25368 19.5 3.75 18.9963 3.75 18.375V16.125Z"
2145    stroke="currentColor"
2146    stroke-width="1.5"
2147    stroke-linecap="round"
2148    stroke-linejoin="round"
2149  />
2150</svg><!--/lit-part--></aside>
2151      <main>
2152        <h1>&lt;<!--lit-part-->np-login<!--/lit-part-->&gt;</h1>
2153        <p><!--lit-part-->Passkey authentication input element<!--/lit-part--></p>
2154      </main>
2155    <!--/lit-part--></template></ui-component-card>
2156                <!--lit-node 2--><ui-info defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
2157    :host {
2158      display: flex;
2159      padding: 0 0 0 1em;
2160      margin: 1em 0;
2161      font-size: var(--np-core-font-size-m);
2162      color: var(--np-core-color-grey-s);
2163      border-left-width: 1px;
2164      border-left-style: solid;
2165      border-image: linear-gradient(
2166          to bottom,
2167          transparent,
2168          var(--np-core-color-grey-m),
2169          transparent
2170        )
2171        1 100%;
2172    }
2173
2174    p {
2175      margin: 0;
2176      padding: 0;
2177    }
2178    ::slotted(b) {
2179      padding: 0em 0.4em;
2180      border-radius: 0.2em;
2181      font-size: var(--np-core-font-size-s);
2182      border: 1px solid var(--np-core-color-grey-l);
2183      font-weight: var(--np-core-font-weight-s);
2184      color: var(--np-core-color-grey-xs);
2185      font-style: normal;
2186    }
2187  </style><!--lit-part /l3xvd6A6Yk=--><p><slot></slot></p><!--/lit-part--></template>
2188                  When focused, the <b>np-login</b> component (also used for the magic link flow)
2189                  will display the passkey created by the user. Once authentication is complete, an
2190                  <b>np:login</b> event is triggered.
2191                </ui-info>
2192
2193                <!--lit-node 5--><editor-template   title="Passkey Authentication" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
2194    :host {
2195      display: flex;
2196      flex-flow: column;
2197      border-radius: var(--np-core-font-size-xs);
2198      overflow: hidden;
2199
2200      box-shadow: 8px 8px 30px var(--np-core-color-grey-m),
2201        -8px -8px 30px var(--np-core-color-white);
2202    }
2203
2204    header {
2205      display: flex;
2206      align-items: center;
2207      gap: 0.5em;
2208      padding: 0.5em;
2209      justify-content: space-between;
2210      background-color: var(--np-core-color-grey-xs);
2211      border-bottom: 1px solid var(--np-core-color-grey-m);
2212    }
2213
2214    .window .icon {
2215      width: 0.8em;
2216    }
2217    .window .close {
2218      color: var(--np-core-color-red-s);
2219    }
2220
2221    .window .reduce {
2222      color: var(--np-core-color-orange-m);
2223    }
2224
2225    .window .full {
2226      color: var(--np-core-color-green-m);
2227    }
2228
2229    h1 {
2230      flex: 1;
2231      text-align: center;
2232      margin: 0;
2233      padding: 0.5em 1em;
2234      font-size: var(--np-core-font-size-xs);
2235      font-weight: var(--np-core-font-weight-m);
2236      background-color: var(--np-core-color-grey-s);
2237      color: var(--np-core-color-grey-xl);
2238      border: 1px solid var(--np-core-color-grey-m);
2239      border-radius: var(--np-core-font-size-xs);
2240    }
2241
2242    main {
2243      display: flex;
2244      padding: 1em;
2245      background-color: var(--np-core-color-grey-xs);
2246      color: var(--np-core-color-grey-xl);
2247      font-size: var(--np-core-font-size-s);
2248      overflow-x: scroll;
2249      scroll-behavior: smooth;
2250    }
2251
2252    main::-webkit-scrollbar {
2253      display: none;
2254    }
2255
2256    .icon {
2257      width: 1em;
2258    }
2259
2260    ui-clipboard {
2261      color: var(--np-core-color-grey-l);
2262    }
2263  </style><!--lit-part ph8/fUonEYo=-->
2264      <header>
2265        <span class="window">
2266          <span class="close"><!--lit-part zygiWmBAPRU=--><svg
2267  class="icon icon--circle"
2268  xmlns="http://www.w3.org/2000/svg"
2269  viewBox="0 0 24 24"
2270>
2271  <circle cx="12" cy="12" r="10" fill="currentColor" />
2272</svg><!--/lit-part--></span>
2273          <span class="reduce"><!--lit-part zygiWmBAPRU=--><svg
2274  class="icon icon--circle"
2275  xmlns="http://www.w3.org/2000/svg"
2276  viewBox="0 0 24 24"
2277>
2278  <circle cx="12" cy="12" r="10" fill="currentColor" />
2279</svg><!--/lit-part--></span>
2280          <span class="full"><!--lit-part zygiWmBAPRU=--><svg
2281  class="icon icon--circle"
2282  xmlns="http://www.w3.org/2000/svg"
2283  viewBox="0 0 24 24"
2284>
2285  <circle cx="12" cy="12" r="10" fill="currentColor" />
2286</svg><!--/lit-part--></span>
2287        </span>
2288        <h1><!--lit-part-->Passkey Authentication<!--/lit-part--></h1>
2289        <!--lit-node 10--><ui-clipboard  text="&lt;np-login&gt;&lt;/np-login&gt;
2290
2291&lt;script type=&quot;module&quot;&gt;
2292  const npLogin = document.querySelector(&quot;np-login&quot;);
2293
2294  npLogin.addEventListner(&quot;np:login&quot;, async (e) =&gt; {
2295    // Your are authenticated 🎉
2296    const { expires_at, token } = await e.target.getSession();
2297  });
2298&lt;/script&gt;" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
2299    :host,
2300    span {
2301      display: flex;
2302      align-items: center;
2303    }
2304
2305    .icon {
2306      width: 1em;
2307      height: 1em;
2308    }
2309
2310    span.idle {
2311      cursor: pointer;
2312    }
2313
2314    span.busy .icon {
2315      animation: hideIt var(--delay) linear forwards;
2316    }
2317
2318    span.done .icon {
2319      animation: showIt var(--delay) linear forwards;
2320    }
2321
2322    @keyframes hideIt {
2323      from {
2324        transform: scale(1);
2325      }
2326      to {
2327        transform: scale(0);
2328      }
2329    }
2330    @keyframes showIt {
2331      from {
2332        transform: scale(0);
2333      }
2334      50% {
2335        transform: scale(1.4);
2336      }
2337
2338      to {
2339        transform: scale(1);
2340      }
2341    }
2342  </style><!--lit-part BRUAAAUVAAA=--><!--lit-part us4tHPFt+tw=--><!--lit-node 0--><span class="idle" ><!--lit-part kMtQNZeoWhc=--><svg
2343  xmlns="http://www.w3.org/2000/svg"
2344  fill="none"
2345  viewBox="0 0 24 24"
2346  stroke-width="1.5"
2347  stroke="currentColor"
2348  class="icon icon--clipboard-document"
2349>
2350  <path
2351    stroke-linecap="round"
2352    stroke-linejoin="round"
2353    d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z"
2354  />
2355</svg><!--/lit-part--></span><!--/lit-part--><?><!--/lit-part--></template></ui-clipboard>
2356      </header>
2357      <main><slot></slot></main>
2358    <!--/lit-part--></template>
2359                  <!--lit-node 6--><code-shiki   language="html" code="&lt;np-login&gt;&lt;/np-login&gt;
2360
2361&lt;script type=&quot;module&quot;&gt;
2362  const npLogin = document.querySelector(&quot;np-login&quot;);
2363
2364  npLogin.addEventListner(&quot;np:login&quot;, async (e) =&gt; {
2365    // Your are authenticated 🎉
2366    const { expires_at, token } = await e.target.getSession();
2367  });
2368&lt;/script&gt;" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
2369    :host {
2370      display: flex;
2371      align-items: center;
2372      font-weight: var(--np-core-font-weight-m);
2373    }
2374
2375    pre,
2376    code {
2377      tab-size: 2;
2378      margin: 0;
2379      padding: 0;
2380      /*font-family: Menlo, Consolas, monospace;*/
2381      transform: scale(1);
2382      font-size: 12px;
2383    }
2384
2385    :host::selection {
2386      background-color: #7928ca;
2387      color: white;
2388    }
2389
2390    // Nord theme
2391
2392    .hljs-subst {
2393      color: #d8dee9;
2394    }
2395
2396    .hljs-selector-tag {
2397      color: #81a1c1;
2398    }
2399
2400    .hljs-selector-id {
2401      color: #8fbcbb;
2402      font-weight: bold;
2403    }
2404
2405    .hljs-selector-class {
2406      color: #8fbcbb;
2407    }
2408
2409    .hljs-selector-attr {
2410      color: #8fbcbb;
2411    }
2412
2413    .hljs-property {
2414      color: #88c0d0;
2415    }
2416
2417    .hljs-selector-pseudo {
2418      color: #88c0d0;
2419    }
2420
2421    .hljs-addition {
2422      background-color: rgba(163, 190, 140, 0.5);
2423    }
2424
2425    .hljs-deletion {
2426      background-color: rgba(191, 97, 106, 0.5);
2427    }
2428
2429    .hljs-built_in,
2430    .hljs-type {
2431      color: #8fbcbb;
2432    }
2433
2434    .hljs-class {
2435      color: #8fbcbb;
2436    }
2437
2438    .hljs-function {
2439      color: #88c0d0;
2440    }
2441
2442    .hljs-title.hljs-function,
2443    .hljs-function > .hljs-title {
2444      color: #88c0d0;
2445    }
2446
2447    .hljs-keyword,
2448    .hljs-literal,
2449    .hljs-symbol {
2450      color: #81a1c1;
2451    }
2452
2453    .hljs-number {
2454      color: #b48ead;
2455    }
2456
2457    .hljs-regexp {
2458      color: #ebcb8b;
2459    }
2460
2461    .hljs-string {
2462      color: #a3be8c;
2463    }
2464
2465    .hljs-title {
2466      color: #8fbcbb;
2467    }
2468
2469    .hljs-params {
2470      color: #d8dee9;
2471    }
2472
2473    .hljs-bullet {
2474      color: #81a1c1;
2475    }
2476
2477    .hljs-code {
2478      color: #8fbcbb;
2479    }
2480
2481    .hljs-emphasis {
2482      font-style: italic;
2483    }
2484
2485    .hljs-formula {
2486      color: #8fbcbb;
2487    }
2488
2489    .hljs-strong {
2490      font-weight: bold;
2491    }
2492
2493    .hljs-link:hover {
2494      text-decoration: underline;
2495    }
2496
2497    .hljs-quote {
2498      color: #4c566a;
2499    }
2500
2501    .hljs-comment {
2502      color: #8c96aa;
2503    }
2504
2505    .hljs-doctag {
2506      color: #8fbcbb;
2507    }
2508
2509    .hljs-meta,
2510    .hljs-meta .hljs-keyword {
2511      color: #5e81ac;
2512    }
2513
2514    .hljs-meta .hljs-string {
2515      color: #a3be8c;
2516    }
2517
2518    .hljs-attr {
2519      color: #8fbcbb;
2520    }
2521
2522    .hljs-attribute {
2523      color: #d8dee9;
2524    }
2525
2526    .hljs-name {
2527      color: #81a1c1;
2528    }
2529
2530    .hljs-section {
2531      color: #88c0d0;
2532    }
2533
2534    .hljs-tag {
2535      color: #81a1c1;
2536    }
2537
2538    .hljs-variable {
2539      color: #d8dee9;
2540    }
2541
2542    .hljs-template-variable {
2543      color: #d8dee9;
2544    }
2545
2546    .hljs-template-tag {
2547      color: #5e81ac;
2548    }
2549  </style><!--lit-part ClNCJ8ooUiE=--><pre><code><!--lit-part wcuWxqIxDz0=--><span class="hljs-tag">&lt;<span class="hljs-name">np-login</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">np-login</span>&gt;</span>
2550
2551<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="language-javascript">
2552  <span class="hljs-keyword">const</span> npLogin = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">&quot;np-login&quot;</span>);
2553
2554  npLogin.<span class="hljs-title function_">addEventListner</span>(<span class="hljs-string">&quot;np:login&quot;</span>, <span class="hljs-title function_">async</span> (e) =&gt; {
2555    <span class="hljs-comment">// Your are authenticated 🎉</span>
2556    <span class="hljs-keyword">const</span> { expires_at, token } = <span class="hljs-keyword">await</span> e.<span class="hljs-property">target</span>.<span class="hljs-title function_">getSession</span>();
2557  });
2558</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><!--/lit-part--></code></pre><!--/lit-part--></template></code-shiki>
2559                </editor-template>
2560              </article>
2561              <!--lit-node 7--><demo-webauthn  slot="aside" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
2562    np-passkey-conditional,
2563    np-login {
2564      pointer-events: none;
2565    }
2566
2567    .screen {
2568      display: flex;
2569      position: relative;
2570      padding: 1em;
2571    }
2572
2573    #replay {
2574      display: flex;
2575      margin-top: 2em;
2576      justify-content: center;
2577      align-items: center;
2578      gap: 0.2em;
2579      background-color: transparent;
2580      border: none;
2581      color: var(--np-core-color-grey-s);
2582    }
2583
2584    .icon {
2585      width: 1em;
2586    }
2587
2588    #page-login {
2589      display: flex;
2590      justify-content: center;
2591      position: relative;
2592      gap: 0.25em;
2593      width: 100%;
2594      flex-flow: column;
2595    }
2596
2597    #page-login > h1 {
2598      color: var(--np-core-color-grey-s);
2599    }
2600
2601    #email-validate:not([state])::part(button) {
2602      background-image: linear-gradient(45deg, #437e8e, #71b280);
2603    }
2604
2605    .conditional {
2606      display: flex;
2607      position: relative;
2608    }
2609
2610    .conditional .passkeys {
2611      display: none;
2612      flex-flow: column;
2613      position: absolute;
2614      top: 0em;
2615      right: 0;
2616      left: 0;
2617      border: 1px solid var(--np-core-color-grey-l);
2618      border-radius: 0.4em;
2619      padding: 0.5em;
2620      gap: 0.5em;
2621      color: var(--np-core-color-grey-s);
2622      background-color: var(--np-core-color-grey-xl);
2623    }
2624
2625    .conditional .passkeys .passkey {
2626      display: flex;
2627      border-radius: 0.4em;
2628      justify-content: space-between;
2629      padding: 0.5em;
2630    }
2631
2632    .conditional .passkeys .passkey[selected] {
2633      background-color: var(--np-core-color-blue-m);
2634      color: white;
2635    }
2636
2637    .conditional .passkeys .passkey .description {
2638      display: flex;
2639      flex-flow: column;
2640    }
2641
2642    .conditional .passkeys .passkey .description h1 {
2643      margin: 0;
2644      font-size: var(--np-core-font-size-m);
2645    }
2646    .conditional .passkeys .passkey .description p {
2647      margin: 0;
2648      font-size: var(--np-core-font-size-s);
2649    }
2650
2651    .conditional .passkeys .passkey .icon {
2652      font-size: var(--np-core-font-size-l);
2653    }
2654
2655    .conditional .passkeys .passkey[authenticating] .icon {
2656      animation: blink 300ms infinite ease-in-out alternate;
2657    }
2658
2659    @keyframes blink {
2660      0% {
2661        opacity: 0.4;
2662      }
2663      100% {
2664        opacity: 1;
2665      }
2666    }
2667
2668    #page-authenticated {
2669      display: flex;
2670      width: 100%;
2671      align-items: center;
2672      flex-flow: column;
2673    }
2674
2675    #page-authenticated h1 {
2676      margin: 2em 0 0 0;
2677      font-size: var(--np-core-font-size-xl);
2678      color: var(--np-core-color-green-m);
2679    }
2680
2681    #page-authenticated h2 {
2682      text-align: center;
2683      font-weight: var(--np-core-font-weight-l);
2684      color: var(--np-core-color-green-m);
2685
2686      margin: 0;
2687    }
2688
2689    /* reset */
2690
2691    #notification {
2692      display: none;
2693    }
2694
2695    #page-mailbox {
2696      display: none;
2697    }
2698
2699    #page-authenticated {
2700      display: none;
2701    }
2702  </style><!--lit-part 1yAn1lsOH5Q=-->
2703      <!--lit-node 0--><ui-intersect    max="1" threshold="0.8" defer-hydration><template shadowroot="open" shadowrootmode="open"><style></style><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></template>
2704        <!--lit-node 1--><mobile-template defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
2705    :host {
2706      display: flex;
2707      flex-shrink: 0;
2708      flex-flow: column;
2709      justify-content: stretch;
2710      aspect-ratio: 9 / 16;
2711      border-radius: var(--np-core-font-size-l);
2712      border: 3px solid black;
2713
2714      font-size: var(--np-core-font-size-s);
2715
2716      box-shadow: 8px 8px 30px var(--np-core-color-grey-m),
2717        -8px -8px 30px var(--np-core-color-white);
2718    }
2719
2720    header {
2721      display: grid;
2722      align-items: center;
2723      margin: 1em;
2724      grid-template-columns: 1fr 1fr 1fr;
2725      height: 1.4em;
2726    }
2727
2728    .clock,
2729    .status {
2730      display: flex;
2731      justify-content: center;
2732      align-items: center;
2733      font-size: var(--np-core-font-size-s);
2734    }
2735
2736    .clock {
2737      font-weight: var(--np-core-font-weight-l);
2738      gap: var(--np-core-padding-xs);
2739    }
2740    .clock .separator[odd] {
2741      color: var(--np-core-color-grey-l);
2742    }
2743
2744    .center {
2745      border-radius: 1em;
2746      height: 1.5em;
2747      background-color: var(--np-core-color-black);
2748    }
2749
2750    .status {
2751      gap: 0.5em;
2752    }
2753
2754    .icon {
2755      width: 1em;
2756    }
2757  </style><!--lit-part R7YEdBBcArw=-->
2758      <header>
2759        <span class="clock">
2760          <span class="digit"
2761            ><!--lit-part-->--<!--/lit-part--></span
2762          >
2763          <!--lit-node 4--><span class="separator" >:</span>
2764          <span class="digit"
2765            ><!--lit-part-->--<!--/lit-part--></span
2766          >
2767        </span>
2768        <span class="center"></span>
2769        <div class="status"><!--lit-part oNsTGPsJ6WA=--><svg
2770  xmlns="http://www.w3.org/2000/svg"
2771  viewBox="0 0 24 24"
2772  fill="currentColor"
2773  class="icon icon--wifi"
2774>
2775  <path
2776    fill-rule="evenodd"
2777    d="M1.371 8.143c5.858-5.857 15.356-5.857 21.213 0a.75.75 0 010 1.061l-.53.53a.75.75 0 01-1.06 0c-4.98-4.979-13.053-4.979-18.032 0a.75.75 0 01-1.06 0l-.53-.53a.75.75 0 010-1.06zm3.182 3.182c4.1-4.1 10.749-4.1 14.85 0a.75.75 0 010 1.061l-.53.53a.75.75 0 01-1.062 0 8.25 8.25 0 00-11.667 0 .75.75 0 01-1.06 0l-.53-.53a.75.75 0 010-1.06zm3.204 3.182a6 6 0 018.486 0 .75.75 0 010 1.061l-.53.53a.75.75 0 01-1.061 0 3.75 3.75 0 00-5.304 0 .75.75 0 01-1.06 0l-.53-.53a.75.75 0 010-1.06zm3.182 3.182a1.5 1.5 0 012.122 0 .75.75 0 010 1.061l-.53.53a.75.75 0 01-1.061 0l-.53-.53a.75.75 0 010-1.06z"
2778    clip-rule="evenodd"
2779  />
2780</svg><!--/lit-part--><!--lit-part T9fhyP6YE38=--><svg
2781  xmlns="http://www.w3.org/2000/svg"
2782  viewBox="0 0 24 24"
2783  fill="currentColor"
2784  class="icon icon--battery"
2785>
2786  <path
2787    fill-rule="evenodd"
2788    d="M3.75 6.75a3 3 0 00-3 3v6a3 3 0 003 3h15a3 3 0 003-3v-.037c.856-.174 1.5-.93 1.5-1.838v-2.25c0-.907-.644-1.664-1.5-1.837V9.75a3 3 0 00-3-3h-15zm15 1.5a1.5 1.5 0 011.5 1.5v6a1.5 1.5 0 01-1.5 1.5h-15a1.5 1.5 0 01-1.5-1.5v-6a1.5 1.5 0 011.5-1.5h15zM4.5 9.75a.75.75 0 00-.75.75V15c0 .414.336.75.75.75H18a.75.75 0 00.75-.75v-4.5a.75.75 0 00-.75-.75H4.5z"
2789    clip-rule="evenodd"
2790  />
2791</svg><!--/lit-part--></div>
2792      </header>
2793      <slot></slot>
2794    <!--/lit-part--></template>
2795          <div class="screen">
2796            <div id="page-login">
2797              <h1>MyApp Login form</h1>
2798              <!--lit-node 5--><np-login  id="email-input" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
2799  :host {
2800    --np-core-color-green-xs: hsla(117, 40%, 36%, 1);
2801    --np-core-color-green-s: hsla(117, 40%, 46%, 1);
2802    --np-core-color-green-m: hsla(117, 40%, 56%, 1);
2803    --np-core-color-green-l: hsla(117, 40%, 66%, 1);
2804    --np-core-color-green-xl: hsla(117, 40%, 76%, 1);
2805
2806    --np-core-color-red-xs: hsla(2, 79%, 49%, 1);
2807    --np-core-color-red-s: hsla(2, 79%, 59%, 1);
2808    --np-core-color-red-m: hsla(2, 79%, 69%, 1);
2809    --np-core-color-red-l: hsla(2, 79%, 79%, 1);
2810    --np-core-color-red-xl: hsla(2, 79%, 89%, 1);
2811
2812    --np-core-color-blue-xs: hsl(208, 80%, 30%);
2813    --np-core-color-blue-s: hsl(208, 80%, 40%);
2814    --np-core-color-blue-m: hsl(208, 80%, 50%);
2815    --np-core-color-blue-l: hsl(208, 80%, 60%);
2816    --np-core-color-blue-xl: hsl(208, 80%, 70%);
2817
2818    --np-core-color-grey-xs: hsla(270, 10%, 10%, 1);
2819    --np-core-color-grey-s: hsla(270, 10%, 30%, 1);
2820    --np-core-color-grey-m: hsla(270, 10%, 50%, 1);
2821    --np-core-color-grey-l: hsla(270, 10%, 70%, 1);
2822    --np-core-color-grey-xl: hsla(270, 10%, 90%, 1);
2823
2824    --np-core-color-black: hsla(270, 10%, 0%, 1);
2825    --np-core-color-white: hsla(270, 10%, 100%, 1);
2826
2827    --np-core-color-purple-xs: hsla(270, 69%, 20%);
2828    --np-core-color-purple-s: hsla(270, 69%, 30%);
2829    --np-core-color-purple-m: hsla(270, 69%, 40%);
2830    --np-core-color-purple-l: hsla(270, 69%, 50%);
2831    --np-core-color-purple-xl: hsla(270, 69%, 60%);
2832
2833    --np-core-color-pink-xs: hsl(330, 100%, 30%, 1);
2834    --np-core-color-pink-s: hsl(330, 100%, 40%, 1);
2835    --np-core-color-pink-m: hsl(330, 100%, 50%, 1);
2836    --np-core-color-pink-l: hsl(330, 100%, 60%, 1);
2837    --np-core-color-pink-xl: hsl(330, 100%, 70%, 1);
2838
2839    --np-core-color-yellow-xs: hsl(70, 100%, 55%, 1);
2840    --np-core-color-yellow-s: hsl(70, 100%, 65%, 1);
2841    --np-core-color-yellow-m: hsl(70, 100%, 75%, 1);
2842    --np-core-color-yellow-l: hsl(70, 100%, 85%, 1);
2843    --np-core-color-yellow-xl: hsl(70, 100%, 96%, 1);
2844
2845    --np-core-color-orange-xs: hsl(39, 89%, 43%, 1);
2846    --np-core-color-orange-s: hsl(39, 89%, 53%, 1);
2847    --np-core-color-orange-m: hsl(39, 89%, 63%, 1);
2848    --np-core-color-orange-l: hsl(39, 89%, 73%, 1);
2849    --np-core-color-orange-xl: hsl(39, 89%, 83%, 1);
2850  }
2851
2852  :host {
2853    --np-core-gradient-purple-pink: linear-gradient(
2854      45deg,
2855      var(--np-core-color-purple-m),
2856      var(--np-core-color-pink-m)
2857    );
2858    --np-core-gradient-blue-green: linear-gradient(
2859      45deg,
2860      var(--np-core-color-blue-m),
2861      var(--np-core-color-green-m)
2862    );
2863  }
2864
2865  :host {
2866    --np-core-padding-xs: 0.2em;
2867    --np-core-padding-s: 0.5em;
2868    --np-core-padding-m: 1em;
2869    --np-core-padding-l: 1.5em;
2870    --np-core-padding-xl: 2em;
2871  }
2872
2873  :host {
2874    --np-core-border-width-xs: 1px;
2875    --np-core-border-width-s: 2px;
2876    --np-core-border-width-m: 3px;
2877    --np-core-border-width-l: 4px;
2878    --np-core-border-width-xl: 5px;
2879  }
2880
2881  :host {
2882    --np-core-border-radius-xs: 0.1em;
2883    --np-core-border-radius-s: 0.2em;
2884    --np-core-border-radius-m: 0.4em;
2885    --np-core-border-radius-l: 0.6em;
2886    --np-core-border-radius-xl: 0.8em;
2887  }
2888
2889  :host {
2890    --np-core-font-size-xs: 0.6em;
2891    --np-core-font-size-s: 0.8em;
2892    --np-core-font-size-m: 1em;
2893    --np-core-font-size-l: 1.2em;
2894    --np-core-font-size-xl: 1.4em;
2895
2896    --np-core-font-weight-xs: 200;
2897    --np-core-font-weight-s: 300;
2898    --np-core-font-weight-m: 400;
2899    --np-core-font-weight-l: 500;
2900    --np-core-font-weight-xl: 600;
2901  }
2902
2903  :host {
2904    --np-core-animation-duration-xs: 100ms;
2905    --np-core-animation-duration-s: 200ms;
2906    --np-core-animation-duration-m: 400ms;
2907    --np-core-animation-duration-l: 800ms;
2908    --np-core-animation-duration-xl: 1600ms;
2909  }
2910
2911  @keyframes scale {
2912    0% {
2913      transform: scale(1);
2914    }
2915    100% {
2916      transform: scale(0.5);
2917    }
2918  }
2919
2920  @keyframes bounce {
2921    0%,
2922    20%,
2923    50%,
2924    80%,
2925    100% {
2926      transform: translateY(0);
2927    }
2928    40% {
2929      transform: translateY(-0.4em);
2930    }
2931    60% {
2932      transform: translateY(-0.2em);
2933    }
2934  }
2935
2936  @keyframes glow {
2937    50% {
2938      opacity: 0.4;
2939      transform: scale(0.8);
2940    }
2941    100% {
2942      opacity: 1;
2943      transform: scale(1);
2944    }
2945  }
2946
2947  :host {
2948    --np-component-padding: var(--np-core-padding-s);
2949
2950    --np-component-border-radius: var(--np-core-border-radius-s);
2951    --np-component-border-width: var(--np-core-border-width-xs);
2952
2953    --np-component-font-size: var(--np-core-font-size-m);
2954    --np-component-font-weight: var(--np-core-font-weight-l);
2955
2956    --np-component-border-width: var(--np-core-border-width-xs);
2957    --np-component-icon-gap: var(--np-core-padding-s);
2958  }
2959
2960  :host {
2961    --np-component-border-color: var(--np-core-color-black);
2962    --np-component-text-color: var(--np-core-color-black);
2963    --np-component-background-color: transparent;
2964  }
2965
2966  .icon {
2967    width: 1em;
2968  }
2969
2970  .icon--busy {
2971    animation: scale var(--np-core-animation-duration-m) ease-out infinite alternate;
2972  }
2973
2974  .icon--envelope {
2975    animation: bounce var(--np-core-animation-duration-l) ease-out 10;
2976  }
2977
2978  :host {
2979    display: flex;
2980    overflow: hidden;
2981
2982    border: solid var(--np-component-border-color) var(--np-component-border-width);
2983    border-radius: var(--np-component-border-radius);
2984  }
2985
2986  :host([state="authenticated"]) {
2987    --np-component-border-color: var(--np-core-color-green-m);
2988  }
2989
2990  :host([state="error"]) {
2991    --np-component-border-color: var(--np-core-color-red-m);
2992  }
2993
2994  input,
2995  button {
2996    display: flex;
2997
2998    border: none;
2999    outline: none;
3000
3001    margin: 0;
3002    padding: var(--np-component-padding);
3003    font-size: var(--np-component-font-size);
3004    font-weight: var(--np-component-font-weight);
3005
3006    background-color: var(--np-component-background-color);
3007  }
3008
3009  input {
3010    flex-grow: 1;
3011    color: var(--np-component-text-color);
3012  }
3013
3014  button {
3015    color: var(--np-component-border-color);
3016  }
3017</style><!--lit-part xK9ZVg1x6r4=-->
3018      <!--lit-node 0--><input
3019        type="email"
3020        
3021        
3022        value=""
3023        placeholder="Your email"
3024        id="email-input"
3025        autocomplete="username webauthn"
3026        part="input"
3027      />
3028      <!--lit-node 1--><button  part="button">
3029        <!--lit-part BRUAAAUVAAA=--><!--lit-part l4vxxSH7Qn8=--><svg
3030  xmlns="http://www.w3.org/2000/svg"
3031  fill="none"
3032  viewBox="0 0 24 24"
3033  stroke-width="1.5"
3034  stroke="currentColor"
3035  class="icon icon--arrow-right-circle"
3036>
3037  <path
3038    stroke-linecap="round"
3039    stroke-linejoin="round"
3040    d="m12.75 15 3-3m0 0-3-3m3 3h-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
3041  />
3042</svg><!--/lit-part--><?><!--/lit-part-->
3043      </button>
3044    <!--/lit-part--></template></np-login>
3045              <div class="conditional">
3046                <div id="passkeys" class="passkeys">
3047                  <div id="passkey" class="passkey">
3048                    <div class="description">
3049                      <h1>[email protected]</h1>
3050                      <p>Use passkey for this website</p>
3051                    </div>
3052                    <!--lit-part 9ac3UEwvXH4=--><svg
3053  xmlns="http://www.w3.org/2000/svg"
3054  fill="none"
3055  viewBox="0 0 24 24"
3056  stroke-width="1.5"
3057  stroke="currentColor"
3058  class="icon icon--fingerprint"
3059>
3060  <title id="title">Fingerprint</title>
3061  <path
3062    stroke-linecap="round"
3063    stroke-linejoin="round"
3064    d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33"
3065  />
3066</svg><!--/lit-part-->
3067                  </div>
3068                </div>
3069              </div>
3070              <!--lit-node 13--><button id="replay" ><!--lit-part vqaCrzawFsg=--><svg
3071  width="24"
3072  height="24"
3073  viewBox="0 0 24 24"
3074  fill="none"
3075  xmlns="http://www.w3.org/2000/svg"
3076  class="icon icon--arrow-path-rounded"
3077>
3078  <path
3079    d="M19.5 12C19.5 10.7681 19.4536 9.54699 19.3624 8.3384C19.2128 6.35425 17.6458 4.78724 15.6616 4.63757C14.453 4.54641 13.2319 4.5 12 4.5C10.7681 4.5 9.54699 4.54641 8.3384 4.63757C6.35425 4.78724 4.78724 6.35425 4.63757 8.3384C4.62097 8.55852 4.60585 8.77906 4.59222 9M19.5 12L22.5 9M19.5 12L16.5 9M4.5 12C4.5 13.2319 4.54641 14.453 4.63757 15.6616C4.78724 17.6458 6.35425 19.2128 8.3384 19.3624C9.54699 19.4536 10.7681 19.5 12 19.5C13.2319 19.5 14.453 19.4536 15.6616 19.3624C17.6458 19.2128 19.2128 17.6458 19.3624 15.6616C19.379 15.4415 19.3941 15.2209 19.4078 15M4.5 12L7.5 15M4.5 12L1.5 15"
3080    stroke="currentColor"
3081    stroke-width="1.5"
3082    stroke-linecap="round"
3083    stroke-linejoin="round"
3084  />
3085</svg> <!--/lit-part--> Replay</button>
3086            </div>
3087            <div id="page-authenticated">
3088              <h1><!--lit-part PlYJAga2inY=--><svg
3089  xmlns="http://www.w3.org/2000/svg"
3090  viewBox="0 0 24 24"
3091  fill="currentColor"
3092  class="icon icon--badge-check"
3093>
3094  <path
3095    fill-rule="evenodd"
3096    d="M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.007 6.387a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
3097    clip-rule="evenodd"
3098  />
3099</svg><!--/lit-part--></h1>
3100              <h2>Success!</h2>
3101            </div>
3102          </div>
3103        </mobile-template>
3104      </ui-intersect>
3105    <!--/lit-part--></template></demo-webauthn>
3106            <!--/lit-part-->
3107      </ui-section>
3108    <!--/lit-part--></template></section-passkey><!--astro:end--></astro-island> 
3108<script>(()=>{var a=(s,i,o)=>{let r=async()=>{await(await s())()},t=typeof i.value=="object"?i.value:void 0,c={rootMargin:t==null?void 0:t.rootMargin},n=new IntersectionObserver(e=>{for(let l of e)if(l.isIntersecting){n.disconnect(),r();break}},c);for(let e of o.children)n.observe(e)};(self.Astro||(self.Astro={})).visible=a;window.dispatchEvent(new Event("astro:visible"));})();</script>
3108<astro-island uid="Zo95W7" component-url="/_astro/section-customize.e2uDBaIG.js" component-export="SectionCustomize" renderer-url="/_astro/client.DEGHhFmz.js" props="{}" ssr client="visible" before-hydration-url="/_astro/astro_scripts/before-hydration.js.BZdOL1wD.js" opts="{&quot;name&quot;:&quot;SectionCustomize&quot;,&quot;value&quot;:true}" await-children><section-customize><template shadowroot="open" shadowrootmode="open"><style>
3109    np-logout {
3110      pointer-events: none;
3111    }
3112
3113    np-logout[state="loggingout"]::part(button) {
3114      color: hsla(270, 10%, 50%, 1);
3115      background-color: transparent;
3116      border: none;
3117    }
3118  </style><!--lit-part cRvkZqCJBcA=-->
3119      <!--lit-node 0--><ui-section
3120        
3121        
3122       title="Theming and Styling" desc="Customize Nopwd components extensively using CSS parts. This allows you to control the theming and styling for each element state." defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
3123    :host {
3124      margin-top: 4em;
3125      display: flex;
3126      flex-flow: column;
3127      align-items: center;
3128      justify-content: center;
3129      --aside-width: var(--ui-section--aside-width, 280px);
3130    }
3131
3132    section {
3133      display: flex;
3134      flex-flow: column;
3135      align-items: stretch;
3136      max-width: 1000px;
3137      gap: 2em;
3138      padding: 1em;
3139    }
3140
3141    header {
3142      display: flex;
3143      flex-flow: column;
3144      align-items: center;
3145      gap: 1em;
3146      padding: 1em 0;
3147    }
3148
3149    header :is(h1, p) {
3150      margin: 0;
3151      max-width: 600px;
3152    }
3153
3154    header h1 {
3155      font-size: var(--np-core-font-size-m);
3156      color: var(--np-core-color-grey-xs);
3157      text-align: center;
3158      text-transform: uppercase;
3159      letter-spacing: 0px;
3160      font-weight: var(--np-core-font-weight-xl);
3161    }
3162
3163    header p {
3164      color: var(--np-core-color-grey-xs);
3165      font-size: var(--np-core-font-size-m);
3166      font-weight: var(--np-core-font-weight-l);
3167      text-align: center;
3168    }
3169
3170    slot[name="nav"] {
3171      display: flex;
3172      justify-content: center;
3173      max-width: calc(100vw - 2em);
3174    }
3175
3176    main {
3177      display: flex;
3178      flex-flow: column;
3179      align-items: center;
3180      gap: 2em;
3181      max-width: 1200px;
3182    }
3183
3184    slot[name="article"] {
3185      display: flex;
3186      flex-flow: column;
3187      align-items: stretch;
3188      gap: 1em;
3189      width: calc(100vw - 2em);
3190    }
3191
3192    slot[name="aside"] {
3193      display: flex;
3194      flex-flow: column;
3195      align-items: stretch;
3196      width: calc(100vw - 2em);
3197    }
3198
3199    @media (min-width: 320px) {
3200      slot[name="aside"] {
3201        width: calc(var(--aside-width) - 2em);
3202      }
3203    }
3204
3205    @media (min-width: 700px) {
3206      main {
3207        flex-flow: row;
3208        justify-content: space-between;
3209        align-items: flex-start;
3210      }
3211
3212      :host([aside="left"]) main {
3213        flex-flow: row-reverse;
3214      }
3215
3216      slot[name="article"] {
3217        width: calc(100vw - 2em - var(--aside-width) - 2em);
3218      }
3219    }
3220
3221    @media (min-width: 1000px) {
3222      slot[name="nav"] {
3223        width: calc(1000px - 2em);
3224      }
3225
3226      slot[name="article"] {
3227        width: calc(1000px - 2em - var(--aside-width) - 2em);
3228      }
3229    }
3230  </style><!--lit-part Szg1IDYYDfQ=-->
3231      <section>
3232        <header>
3233          <h1><!--lit-part-->Theming and Styling<!--/lit-part--></h1>
3234          <p><!--lit-part-->Customize Nopwd components extensively using CSS parts. This allows you to control the theming and styling for each element state.<!--/lit-part--></p>
3235        </header>
3236        <slot name="nav"></slot>
3237        <main>
3238          <slot name="article"></slot>
3239          <slot name="aside"></slot>
3240        </main>
3241      </section>
3242    <!--/lit-part--></template>
3243        <!--lit-node 1--><ui-pills    slot="nav" selected="default" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
3244    :host {
3245      display: flex;
3246      flex-wrap: nowrap;
3247      overflow-x: scroll;
3248      scroll-behavior: smooth;
3249      border: 1px solid var(--np-core-color-black);
3250      padding: var(--np-core-padding-xs);
3251      border-radius: var(--np-core-border-radius-xl);
3252    }
3253
3254    :host::-webkit-scrollbar {
3255      display: none;
3256    }
3257  </style><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></template>
3258          <!--lit-node 2--><ui-pills-item  name="default" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
3259    :host {
3260      display: flex;
3261      --highlight-color-light: var(--ui-pills-highlight-color-light, var(--np-core-color-grey-s));
3262      --highlight-color: var(--ui-pills-highlight-color, var(--np-core-color-black));
3263    }
3264
3265    button {
3266      white-space: nowrap;
3267      padding: var(--np-core-padding-s) var(--np-core-padding-m);
3268      border-radius: var(--np-core-border-radius-xl);
3269      background-color: transparent;
3270      border: none;
3271    }
3272
3273    :host(:not([checked])) button {
3274      color: var(--highlight-color-light);
3275      cursor: pointer;
3276    }
3277
3278    :host(:not([checked])) button:hover {
3279      color: var(--highlight-color);
3280      cursor: pointer;
3281    }
3282
3283    :host([checked]) button {
3284      background-color: var(--highlight-color);
3285      font-weight: var(--np-core-font-weight-l);
3286      color: white;
3287    }
3288  </style><!--lit-part 7Lk+2YMsNqg=--><!--lit-node 0--><button  part="button"><slot></slot></button><!--/lit-part--></template>Default</ui-pills-item>
3289          <!--lit-node 3--><ui-pills-item  name="loggingout" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
3290    :host {
3291      display: flex;
3292      --highlight-color-light: var(--ui-pills-highlight-color-light, var(--np-core-color-grey-s));
3293      --highlight-color: var(--ui-pills-highlight-color, var(--np-core-color-black));
3294    }
3295
3296    button {
3297      white-space: nowrap;
3298      padding: var(--np-core-padding-s) var(--np-core-padding-m);
3299      border-radius: var(--np-core-border-radius-xl);
3300      background-color: transparent;
3301      border: none;
3302    }
3303
3304    :host(:not([checked])) button {
3305      color: var(--highlight-color-light);
3306      cursor: pointer;
3307    }
3308
3309    :host(:not([checked])) button:hover {
3310      color: var(--highlight-color);
3311      cursor: pointer;
3312    }
3313
3314    :host([checked]) button {
3315      background-color: var(--highlight-color);
3316      font-weight: var(--np-core-font-weight-l);
3317      color: white;
3318    }
3319  </style><!--lit-part 7Lk+2YMsNqg=--><!--lit-node 0--><button  part="button"><slot></slot></button><!--/lit-part--></template>Logging Out</ui-pills-item>
3320          <!--lit-node 4--><ui-pills-item  name="loggedout" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
3321    :host {
3322      display: flex;
3323      --highlight-color-light: var(--ui-pills-highlight-color-light, var(--np-core-color-grey-s));
3324      --highlight-color: var(--ui-pills-highlight-color, var(--np-core-color-black));
3325    }
3326
3327    button {
3328      white-space: nowrap;
3329      padding: var(--np-core-padding-s) var(--np-core-padding-m);
3330      border-radius: var(--np-core-border-radius-xl);
3331      background-color: transparent;
3332      border: none;
3333    }
3334
3335    :host(:not([checked])) button {
3336      color: var(--highlight-color-light);
3337      cursor: pointer;
3338    }
3339
3340    :host(:not([checked])) button:hover {
3341      color: var(--highlight-color);
3342      cursor: pointer;
3343    }
3344
3345    :host([checked]) button {
3346      background-color: var(--highlight-color);
3347      font-weight: var(--np-core-font-weight-l);
3348      color: white;
3349    }
3350  </style><!--lit-part 7Lk+2YMsNqg=--><!--lit-node 0--><button  part="button"><slot></slot></button><!--/lit-part--></template>Logged Out</ui-pills-item>
3351        </ui-pills>
3352
3353        <aside slot="aside">
3354          <!--lit-node 6--><np-logout
3355            
3356           state defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
3357  :host {
3358    --np-core-color-green-xs: hsla(117, 40%, 36%, 1);
3359    --np-core-color-green-s: hsla(117, 40%, 46%, 1);
3360    --np-core-color-green-m: hsla(117, 40%, 56%, 1);
3361    --np-core-color-green-l: hsla(117, 40%, 66%, 1);
3362    --np-core-color-green-xl: hsla(117, 40%, 76%, 1);
3363
3364    --np-core-color-red-xs: hsla(2, 79%, 49%, 1);
3365    --np-core-color-red-s: hsla(2, 79%, 59%, 1);
3366    --np-core-color-red-m: hsla(2, 79%, 69%, 1);
3367    --np-core-color-red-l: hsla(2, 79%, 79%, 1);
3368    --np-core-color-red-xl: hsla(2, 79%, 89%, 1);
3369
3370    --np-core-color-blue-xs: hsl(208, 80%, 30%);
3371    --np-core-color-blue-s: hsl(208, 80%, 40%);
3372    --np-core-color-blue-m: hsl(208, 80%, 50%);
3373    --np-core-color-blue-l: hsl(208, 80%, 60%);
3374    --np-core-color-blue-xl: hsl(208, 80%, 70%);
3375
3376    --np-core-color-grey-xs: hsla(270, 10%, 10%, 1);
3377    --np-core-color-grey-s: hsla(270, 10%, 30%, 1);
3378    --np-core-color-grey-m: hsla(270, 10%, 50%, 1);
3379    --np-core-color-grey-l: hsla(270, 10%, 70%, 1);
3380    --np-core-color-grey-xl: hsla(270, 10%, 90%, 1);
3381
3382    --np-core-color-black: hsla(270, 10%, 0%, 1);
3383    --np-core-color-white: hsla(270, 10%, 100%, 1);
3384
3385    --np-core-color-purple-xs: hsla(270, 69%, 20%);
3386    --np-core-color-purple-s: hsla(270, 69%, 30%);
3387    --np-core-color-purple-m: hsla(270, 69%, 40%);
3388    --np-core-color-purple-l: hsla(270, 69%, 50%);
3389    --np-core-color-purple-xl: hsla(270, 69%, 60%);
3390
3391    --np-core-color-pink-xs: hsl(330, 100%, 30%, 1);
3392    --np-core-color-pink-s: hsl(330, 100%, 40%, 1);
3393    --np-core-color-pink-m: hsl(330, 100%, 50%, 1);
3394    --np-core-color-pink-l: hsl(330, 100%, 60%, 1);
3395    --np-core-color-pink-xl: hsl(330, 100%, 70%, 1);
3396
3397    --np-core-color-yellow-xs: hsl(70, 100%, 55%, 1);
3398    --np-core-color-yellow-s: hsl(70, 100%, 65%, 1);
3399    --np-core-color-yellow-m: hsl(70, 100%, 75%, 1);
3400    --np-core-color-yellow-l: hsl(70, 100%, 85%, 1);
3401    --np-core-color-yellow-xl: hsl(70, 100%, 96%, 1);
3402
3403    --np-core-color-orange-xs: hsl(39, 89%, 43%, 1);
3404    --np-core-color-orange-s: hsl(39, 89%, 53%, 1);
3405    --np-core-color-orange-m: hsl(39, 89%, 63%, 1);
3406    --np-core-color-orange-l: hsl(39, 89%, 73%, 1);
3407    --np-core-color-orange-xl: hsl(39, 89%, 83%, 1);
3408  }
3409
3410  :host {
3411    --np-core-gradient-purple-pink: linear-gradient(
3412      45deg,
3413      var(--np-core-color-purple-m),
3414      var(--np-core-color-pink-m)
3415    );
3416    --np-core-gradient-blue-green: linear-gradient(
3417      45deg,
3418      var(--np-core-color-blue-m),
3419      var(--np-core-color-green-m)
3420    );
3421  }
3422
3423  :host {
3424    --np-core-padding-xs: 0.2em;
3425    --np-core-padding-s: 0.5em;
3426    --np-core-padding-m: 1em;
3427    --np-core-padding-l: 1.5em;
3428    --np-core-padding-xl: 2em;
3429  }
3430
3431  :host {
3432    --np-core-border-width-xs: 1px;
3433    --np-core-border-width-s: 2px;
3434    --np-core-border-width-m: 3px;
3435    --np-core-border-width-l: 4px;
3436    --np-core-border-width-xl: 5px;
3437  }
3438
3439  :host {
3440    --np-core-border-radius-xs: 0.1em;
3441    --np-core-border-radius-s: 0.2em;
3442    --np-core-border-radius-m: 0.4em;
3443    --np-core-border-radius-l: 0.6em;
3444    --np-core-border-radius-xl: 0.8em;
3445  }
3446
3447  :host {
3448    --np-core-font-size-xs: 0.6em;
3449    --np-core-font-size-s: 0.8em;
3450    --np-core-font-size-m: 1em;
3451    --np-core-font-size-l: 1.2em;
3452    --np-core-font-size-xl: 1.4em;
3453
3454    --np-core-font-weight-xs: 200;
3455    --np-core-font-weight-s: 300;
3456    --np-core-font-weight-m: 400;
3457    --np-core-font-weight-l: 500;
3458    --np-core-font-weight-xl: 600;
3459  }
3460
3461  :host {
3462    --np-core-animation-duration-xs: 100ms;
3463    --np-core-animation-duration-s: 200ms;
3464    --np-core-animation-duration-m: 400ms;
3465    --np-core-animation-duration-l: 800ms;
3466    --np-core-animation-duration-xl: 1600ms;
3467  }
3468
3469  @keyframes scale {
3470    0% {
3471      transform: scale(1);
3472    }
3473    100% {
3474      transform: scale(0.5);
3475    }
3476  }
3477
3478  @keyframes bounce {
3479    0%,
3480    20%,
3481    50%,
3482    80%,
3483    100% {
3484      transform: translateY(0);
3485    }
3486    40% {
3487      transform: translateY(-0.4em);
3488    }
3489    60% {
3490      transform: translateY(-0.2em);
3491    }
3492  }
3493
3494  @keyframes glow {
3495    50% {
3496      opacity: 0.4;
3497      transform: scale(0.8);
3498    }
3499    100% {
3500      opacity: 1;
3501      transform: scale(1);
3502    }
3503  }
3504
3505  :host {
3506    --np-component-padding: var(--np-core-padding-s);
3507
3508    --np-component-border-radius: var(--np-core-border-radius-s);
3509    --np-component-border-width: var(--np-core-border-width-xs);
3510
3511    --np-component-font-size: var(--np-core-font-size-m);
3512    --np-component-font-weight: var(--np-core-font-weight-l);
3513
3514    --np-component-border-width: var(--np-core-border-width-xs);
3515    --np-component-icon-gap: var(--np-core-padding-s);
3516  }
3517
3518  :host {
3519    --np-component-border-color: var(--np-core-color-black);
3520    --np-component-text-color: var(--np-core-color-black);
3521    --np-component-background-color: transparent;
3522  }
3523
3524  .icon {
3525    width: 1em;
3526  }
3527
3528  .icon--busy {
3529    animation: scale var(--np-core-animation-duration-m) ease-out infinite alternate;
3530  }
3531
3532  .icon--envelope {
3533    animation: bounce var(--np-core-animation-duration-l) ease-out 10;
3534  }
3535
3536  :host {
3537    display: flex;
3538  }
3539
3540  button {
3541    display: flex;
3542    flex-grow: 1;
3543
3544    gap: var(--np-component-icon-gap);
3545    justify-content: center;
3546    align-items: center;
3547
3548    margin: 0;
3549    padding: var(--np-component-padding);
3550
3551    border: solid var(--np-component-border-color) var(--np-component-border-width);
3552    border-radius: var(--np-component-border-radius);
3553
3554    font-size: var(--np-component-font-size);
3555    font-weight: var(--np-component-font-weight);
3556
3557    color: var(--np-component-text-color);
3558    background-color: var(--np-component-background-color);
3559  }
3560
3561  :host {
3562    --np-component-border-color: var(--np-core-color-black);
3563    --np-component-text-color: var(--np-core-color-white);
3564    --np-component-background-color: var(--np-core-color-black);
3565  }
3566</style><!--lit-part KCIffch3dD8=--><!--lit-node 0--><button  part="button">
3567      <!--lit-part 4ZzNa0R2Taw=--><slot>Logout</slot><!--/lit-part-->
3568    </button><!--/lit-part--></template></np-logout>
3569          <!--lit-node 7--><ui-info defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
3570    :host {
3571      display: flex;
3572      padding: 0 0 0 1em;
3573      margin: 1em 0;
3574      font-size: var(--np-core-font-size-m);
3575      color: var(--np-core-color-grey-s);
3576      border-left-width: 1px;
3577      border-left-style: solid;
3578      border-image: linear-gradient(
3579          to bottom,
3580          transparent,
3581          var(--np-core-color-grey-m),
3582          transparent
3583        )
3584        1 100%;
3585    }
3586
3587    p {
3588      margin: 0;
3589      padding: 0;
3590    }
3591    ::slotted(b) {
3592      padding: 0em 0.4em;
3593      border-radius: 0.2em;
3594      font-size: var(--np-core-font-size-s);
3595      border: 1px solid var(--np-core-color-grey-l);
3596      font-weight: var(--np-core-font-weight-s);
3597      color: var(--np-core-color-grey-xs);
3598      font-style: normal;
3599    }
3600  </style><!--lit-part /l3xvd6A6Yk=--><p><slot></slot></p><!--/lit-part--></template><!--lit-part-->The component is ready for user interaction.<!--/lit-part--></ui-info>
3601        </aside>
3602        <article slot="article">
3603          <!--lit-node 10--><editor-template
3604            
3605            
3606           title="Styling for the default state" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
3607    :host {
3608      display: flex;
3609      flex-flow: column;
3610      border-radius: var(--np-core-font-size-xs);
3611      overflow: hidden;
3612
3613      box-shadow: 8px 8px 30px var(--np-core-color-grey-m),
3614        -8px -8px 30px var(--np-core-color-white);
3615    }
3616
3617    header {
3618      display: flex;
3619      align-items: center;
3620      gap: 0.5em;
3621      padding: 0.5em;
3622      justify-content: space-between;
3623      background-color: var(--np-core-color-grey-xs);
3624      border-bottom: 1px solid var(--np-core-color-grey-m);
3625    }
3626
3627    .window .icon {
3628      width: 0.8em;
3629    }
3630    .window .close {
3631      color: var(--np-core-color-red-s);
3632    }
3633
3634    .window .reduce {
3635      color: var(--np-core-color-orange-m);
3636    }
3637
3638    .window .full {
3639      color: var(--np-core-color-green-m);
3640    }
3641
3642    h1 {
3643      flex: 1;
3644      text-align: center;
3645      margin: 0;
3646      padding: 0.5em 1em;
3647      font-size: var(--np-core-font-size-xs);
3648      font-weight: var(--np-core-font-weight-m);
3649      background-color: var(--np-core-color-grey-s);
3650      color: var(--np-core-color-grey-xl);
3651      border: 1px solid var(--np-core-color-grey-m);
3652      border-radius: var(--np-core-font-size-xs);
3653    }
3654
3655    main {
3656      display: flex;
3657      padding: 1em;
3658      background-color: var(--np-core-color-grey-xs);
3659      color: var(--np-core-color-grey-xl);
3660      font-size: var(--np-core-font-size-s);
3661      overflow-x: scroll;
3662      scroll-behavior: smooth;
3663    }
3664
3665    main::-webkit-scrollbar {
3666      display: none;
3667    }
3668
3669    .icon {
3670      width: 1em;
3671    }
3672
3673    ui-clipboard {
3674      color: var(--np-core-color-grey-l);
3675    }
3676  </style><!--lit-part ph8/fUonEYo=-->
3677      <header>
3678        <span class="window">
3679          <span class="close"><!--lit-part zygiWmBAPRU=--><svg
3680  class="icon icon--circle"
3681  xmlns="http://www.w3.org/2000/svg"
3682  viewBox="0 0 24 24"
3683>
3684  <circle cx="12" cy="12" r="10" fill="currentColor" />
3685</svg><!--/lit-part--></span>
3686          <span class="reduce"><!--lit-part zygiWmBAPRU=--><svg
3687  class="icon icon--circle"
3688  xmlns="http://www.w3.org/2000/svg"
3689  viewBox="0 0 24 24"
3690>
3691  <circle cx="12" cy="12" r="10" fill="currentColor" />
3692</svg><!--/lit-part--></span>
3693          <span class="full"><!--lit-part zygiWmBAPRU=--><svg
3694  class="icon icon--circle"
3695  xmlns="http://www.w3.org/2000/svg"
3696  viewBox="0 0 24 24"
3697>
3698  <circle cx="12" cy="12" r="10" fill="currentColor" />
3699</svg><!--/lit-part--></span>
3700        </span>
3701        <h1><!--lit-part-->Styling for the default state<!--/lit-part--></h1>
3702        <!--lit-node 10--><ui-clipboard  text="np-logout:not([state])::part(button) {
3703  color: white;
3704  background-color: black;
3705}" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
3706    :host,
3707    span {
3708      display: flex;
3709      align-items: center;
3710    }
3711
3712    .icon {
3713      width: 1em;
3714      height: 1em;
3715    }
3716
3717    span.idle {
3718      cursor: pointer;
3719    }
3720
3721    span.busy .icon {
3722      animation: hideIt var(--delay) linear forwards;
3723    }
3724
3725    span.done .icon {
3726      animation: showIt var(--delay) linear forwards;
3727    }
3728
3729    @keyframes hideIt {
3730      from {
3731        transform: scale(1);
3732      }
3733      to {
3734        transform: scale(0);
3735      }
3736    }
3737    @keyframes showIt {
3738      from {
3739        transform: scale(0);
3740      }
3741      50% {
3742        transform: scale(1.4);
3743      }
3744
3745      to {
3746        transform: scale(1);
3747      }
3748    }
3749  </style><!--lit-part BRUAAAUVAAA=--><!--lit-part us4tHPFt+tw=--><!--lit-node 0--><span class="idle" ><!--lit-part kMtQNZeoWhc=--><svg
3750  xmlns="http://www.w3.org/2000/svg"
3751  fill="none"
3752  viewBox="0 0 24 24"
3753  stroke-width="1.5"
3754  stroke="currentColor"
3755  class="icon icon--clipboard-document"
3756>
3757  <path
3758    stroke-linecap="round"
3759    stroke-linejoin="round"
3760    d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z"
3761  />
3762</svg><!--/lit-part--></span><!--/lit-part--><?><!--/lit-part--></template></ui-clipboard>
3763      </header>
3764      <main><slot></slot></main>
3765    <!--/lit-part--></template>
3766            <!--lit-node 11--><code-shiki
3767              
3768              
3769             language="css" code="np-logout:not([state])::part(button) {
3770  color: white;
3771  background-color: black;
3772}" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
3773    :host {
3774      display: flex;
3775      align-items: center;
3776      font-weight: var(--np-core-font-weight-m);
3777    }
3778
3779    pre,
3780    code {
3781      tab-size: 2;
3782      margin: 0;
3783      padding: 0;
3784      /*font-family: Menlo, Consolas, monospace;*/
3785      transform: scale(1);
3786      font-size: 12px;
3787    }
3788
3789    :host::selection {
3790      background-color: #7928ca;
3791      color: white;
3792    }
3793
3794    // Nord theme
3795
3796    .hljs-subst {
3797      color: #d8dee9;
3798    }
3799
3800    .hljs-selector-tag {
3801      color: #81a1c1;
3802    }
3803
3804    .hljs-selector-id {
3805      color: #8fbcbb;
3806      font-weight: bold;
3807    }
3808
3809    .hljs-selector-class {
3810      color: #8fbcbb;
3811    }
3812
3813    .hljs-selector-attr {
3814      color: #8fbcbb;
3815    }
3816
3817    .hljs-property {
3818      color: #88c0d0;
3819    }
3820
3821    .hljs-selector-pseudo {
3822      color: #88c0d0;
3823    }
3824
3825    .hljs-addition {
3826      background-color: rgba(163, 190, 140, 0.5);
3827    }
3828
3829    .hljs-deletion {
3830      background-color: rgba(191, 97, 106, 0.5);
3831    }
3832
3833    .hljs-built_in,
3834    .hljs-type {
3835      color: #8fbcbb;
3836    }
3837
3838    .hljs-class {
3839      color: #8fbcbb;
3840    }
3841
3842    .hljs-function {
3843      color: #88c0d0;
3844    }
3845
3846    .hljs-title.hljs-function,
3847    .hljs-function > .hljs-title {
3848      color: #88c0d0;
3849    }
3850
3851    .hljs-keyword,
3852    .hljs-literal,
3853    .hljs-symbol {
3854      color: #81a1c1;
3855    }
3856
3857    .hljs-number {
3858      color: #b48ead;
3859    }
3860
3861    .hljs-regexp {
3862      color: #ebcb8b;
3863    }
3864
3865    .hljs-string {
3866      color: #a3be8c;
3867    }
3868
3869    .hljs-title {
3870      color: #8fbcbb;
3871    }
3872
3873    .hljs-params {
3874      color: #d8dee9;
3875    }
3876
3877    .hljs-bullet {
3878      color: #81a1c1;
3879    }
3880
3881    .hljs-code {
3882      color: #8fbcbb;
3883    }
3884
3885    .hljs-emphasis {
3886      font-style: italic;
3887    }
3888
3889    .hljs-formula {
3890      color: #8fbcbb;
3891    }
3892
3893    .hljs-strong {
3894      font-weight: bold;
3895    }
3896
3897    .hljs-link:hover {
3898      text-decoration: underline;
3899    }
3900
3901    .hljs-quote {
3902      color: #4c566a;
3903    }
3904
3905    .hljs-comment {
3906      color: #8c96aa;
3907    }
3908
3909    .hljs-doctag {
3910      color: #8fbcbb;
3911    }
3912
3913    .hljs-meta,
3914    .hljs-meta .hljs-keyword {
3915      color: #5e81ac;
3916    }
3917
3918    .hljs-meta .hljs-string {
3919      color: #a3be8c;
3920    }
3921
3922    .hljs-attr {
3923      color: #8fbcbb;
3924    }
3925
3926    .hljs-attribute {
3927      color: #d8dee9;
3928    }
3929
3930    .hljs-name {
3931      color: #81a1c1;
3932    }
3933
3934    .hljs-section {
3935      color: #88c0d0;
3936    }
3937
3938    .hljs-tag {
3939      color: #81a1c1;
3940    }
3941
3942    .hljs-variable {
3943      color: #d8dee9;
3944    }
3945
3946    .hljs-template-variable {
3947      color: #d8dee9;
3948    }
3949
3950    .hljs-template-tag {
3951      color: #5e81ac;
3952    }
3953  </style><!--lit-part ClNCJ8ooUiE=--><pre><code><!--lit-part kYSL4hnpOAU=-->np-logout<span class="hljs-selector-pseudo">:not</span>(<span class="hljs-selector-attr">[state]</span>)<span class="hljs-selector-pseudo">::part</span>(<span class="hljs-selector-tag">button</span>) {
3954  <span class="hljs-attribute">color</span>: white;
3955  <span class="hljs-attribute">background-color</span>: black;
3956}<!--/lit-part--></code></pre><!--/lit-part--></template></code-shiki>
3957          </editor-template>
3958        </article>
3959      </ui-section>
3960    <!--/lit-part--></template></section-customize><!--astro:end--></astro-island> <astro-island uid="Z16c4xz" component-url="/_astro/section-localization.Wo7qsrGu.js" component-export="SectionLocalization" renderer-url="/_astro/client.DEGHhFmz.js" props="{}" ssr client="visible" before-hydration-url="/_astro/astro_scripts/before-hydration.js.BZdOL1wD.js" opts="{&quot;name&quot;:&quot;SectionLocalization&quot;,&quot;value&quot;:true}" await-children><section-localization><template shadowroot="open" shadowrootmode="open"><style>
3961    np-login {
3962      pointer-events: none;
3963    }
3964  </style><!--lit-part /Qge38/x774=-->
3965      <!--lit-node 0--><ui-section
3966        
3967        
3968        
3969       title="Localization" desc="Effortlessly override strings for any element to localize to any language or customize the wording to fit your brand." aside="left" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
3970    :host {
3971      margin-top: 4em;
3972      display: flex;
3973      flex-flow: column;
3974      align-items: center;
3975      justify-content: center;
3976      --aside-width: var(--ui-section--aside-width, 280px);
3977    }
3978
3979    section {
3980      display: flex;
3981      flex-flow: column;
3982      align-items: stretch;
3983      max-width: 1000px;
3984      gap: 2em;
3985      padding: 1em;
3986    }
3987
3988    header {
3989      display: flex;
3990      flex-flow: column;
3991      align-items: center;
3992      gap: 1em;
3993      padding: 1em 0;
3994    }
3995
3996    header :is(h1, p) {
3997      margin: 0;
3998      max-width: 600px;
3999    }
4000
4001    header h1 {
4002      font-size: var(--np-core-font-size-m);
4003      color: var(--np-core-color-grey-xs);
4004      text-align: center;
4005      text-transform: uppercase;
4006      letter-spacing: 0px;
4007      font-weight: var(--np-core-font-weight-xl);
4008    }
4009
4010    header p {
4011      color: var(--np-core-color-grey-xs);
4012      font-size: var(--np-core-font-size-m);
4013      font-weight: var(--np-core-font-weight-l);
4014      text-align: center;
4015    }
4016
4017    slot[name="nav"] {
4018      display: flex;
4019      justify-content: center;
4020      max-width: calc(100vw - 2em);
4021    }
4022
4023    main {
4024      display: flex;
4025      flex-flow: column;
4026      align-items: center;
4027      gap: 2em;
4028      max-width: 1200px;
4029    }
4030
4031    slot[name="article"] {
4032      display: flex;
4033      flex-flow: column;
4034      align-items: stretch;
4035      gap: 1em;
4036      width: calc(100vw - 2em);
4037    }
4038
4039    slot[name="aside"] {
4040      display: flex;
4041      flex-flow: column;
4042      align-items: stretch;
4043      width: calc(100vw - 2em);
4044    }
4045
4046    @media (min-width: 320px) {
4047      slot[name="aside"] {
4048        width: calc(var(--aside-width) - 2em);
4049      }
4050    }
4051
4052    @media (min-width: 700px) {
4053      main {
4054        flex-flow: row;
4055        justify-content: space-between;
4056        align-items: flex-start;
4057      }
4058
4059      :host([aside="left"]) main {
4060        flex-flow: row-reverse;
4061      }
4062
4063      slot[name="article"] {
4064        width: calc(100vw - 2em - var(--aside-width) - 2em);
4065      }
4066    }
4067
4068    @media (min-width: 1000px) {
4069      slot[name="nav"] {
4070        width: calc(1000px - 2em);
4071      }
4072
4073      slot[name="article"] {
4074        width: calc(1000px - 2em - var(--aside-width) - 2em);
4075      }
4076    }
4077  </style><!--lit-part Szg1IDYYDfQ=-->
4078      <section>
4079        <header>
4080          <h1><!--lit-part-->Localization<!--/lit-part--></h1>
4081          <p><!--lit-part-->Effortlessly override strings for any element to localize to any language or customize the wording to fit your brand.<!--/lit-part--></p>
4082        </header>
4083        <slot name="nav"></slot>
4084        <main>
4085          <slot name="article"></slot>
4086          <slot name="aside"></slot>
4087        </main>
4088      </section>
4089    <!--/lit-part--></template>
4090        <!--lit-node 1--><ui-pills    slot="nav" selected="default" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4091    :host {
4092      display: flex;
4093      flex-wrap: nowrap;
4094      overflow-x: scroll;
4095      scroll-behavior: smooth;
4096      border: 1px solid var(--np-core-color-black);
4097      padding: var(--np-core-padding-xs);
4098      border-radius: var(--np-core-border-radius-xl);
4099    }
4100
4101    :host::-webkit-scrollbar {
4102      display: none;
4103    }
4104  </style><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></template>
4105          <!--lit-node 2--><ui-pills-item  name="default" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4106    :host {
4107      display: flex;
4108      --highlight-color-light: var(--ui-pills-highlight-color-light, var(--np-core-color-grey-s));
4109      --highlight-color: var(--ui-pills-highlight-color, var(--np-core-color-black));
4110    }
4111
4112    button {
4113      white-space: nowrap;
4114      padding: var(--np-core-padding-s) var(--np-core-padding-m);
4115      border-radius: var(--np-core-border-radius-xl);
4116      background-color: transparent;
4117      border: none;
4118    }
4119
4120    :host(:not([checked])) button {
4121      color: var(--highlight-color-light);
4122      cursor: pointer;
4123    }
4124
4125    :host(:not([checked])) button:hover {
4126      color: var(--highlight-color);
4127      cursor: pointer;
4128    }
4129
4130    :host([checked]) button {
4131      background-color: var(--highlight-color);
4132      font-weight: var(--np-core-font-weight-l);
4133      color: white;
4134    }
4135  </style><!--lit-part 7Lk+2YMsNqg=--><!--lit-node 0--><button  part="button"><slot></slot></button><!--/lit-part--></template>Default</ui-pills-item>
4136          <!--lit-node 3--><ui-pills-item  name="loggingout" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4137    :host {
4138      display: flex;
4139      --highlight-color-light: var(--ui-pills-highlight-color-light, var(--np-core-color-grey-s));
4140      --highlight-color: var(--ui-pills-highlight-color, var(--np-core-color-black));
4141    }
4142
4143    button {
4144      white-space: nowrap;
4145      padding: var(--np-core-padding-s) var(--np-core-padding-m);
4146      border-radius: var(--np-core-border-radius-xl);
4147      background-color: transparent;
4148      border: none;
4149    }
4150
4151    :host(:not([checked])) button {
4152      color: var(--highlight-color-light);
4153      cursor: pointer;
4154    }
4155
4156    :host(:not([checked])) button:hover {
4157      color: var(--highlight-color);
4158      cursor: pointer;
4159    }
4160
4161    :host([checked]) button {
4162      background-color: var(--highlight-color);
4163      font-weight: var(--np-core-font-weight-l);
4164      color: white;
4165    }
4166  </style><!--lit-part 7Lk+2YMsNqg=--><!--lit-node 0--><button  part="button"><slot></slot></button><!--/lit-part--></template>Logging out</ui-pills-item>
4167          <!--lit-node 4--><ui-pills-item  name="loggedout" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4168    :host {
4169      display: flex;
4170      --highlight-color-light: var(--ui-pills-highlight-color-light, var(--np-core-color-grey-s));
4171      --highlight-color: var(--ui-pills-highlight-color, var(--np-core-color-black));
4172    }
4173
4174    button {
4175      white-space: nowrap;
4176      padding: var(--np-core-padding-s) var(--np-core-padding-m);
4177      border-radius: var(--np-core-border-radius-xl);
4178      background-color: transparent;
4179      border: none;
4180    }
4181
4182    :host(:not([checked])) button {
4183      color: var(--highlight-color-light);
4184      cursor: pointer;
4185    }
4186
4187    :host(:not([checked])) button:hover {
4188      color: var(--highlight-color);
4189      cursor: pointer;
4190    }
4191
4192    :host([checked]) button {
4193      background-color: var(--highlight-color);
4194      font-weight: var(--np-core-font-weight-l);
4195      color: white;
4196    }
4197  </style><!--lit-part 7Lk+2YMsNqg=--><!--lit-node 0--><button  part="button"><slot></slot></button><!--/lit-part--></template>Logged out</ui-pills-item>
4198        </ui-pills>
4199
4200        <aside slot="aside">
4201          <!--lit-part 4imGyQ0dlso=--><!--lit-node 0--><np-logout defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4202  :host {
4203    --np-core-color-green-xs: hsla(117, 40%, 36%, 1);
4204    --np-core-color-green-s: hsla(117, 40%, 46%, 1);
4205    --np-core-color-green-m: hsla(117, 40%, 56%, 1);
4206    --np-core-color-green-l: hsla(117, 40%, 66%, 1);
4207    --np-core-color-green-xl: hsla(117, 40%, 76%, 1);
4208
4209    --np-core-color-red-xs: hsla(2, 79%, 49%, 1);
4210    --np-core-color-red-s: hsla(2, 79%, 59%, 1);
4211    --np-core-color-red-m: hsla(2, 79%, 69%, 1);
4212    --np-core-color-red-l: hsla(2, 79%, 79%, 1);
4213    --np-core-color-red-xl: hsla(2, 79%, 89%, 1);
4214
4215    --np-core-color-blue-xs: hsl(208, 80%, 30%);
4216    --np-core-color-blue-s: hsl(208, 80%, 40%);
4217    --np-core-color-blue-m: hsl(208, 80%, 50%);
4218    --np-core-color-blue-l: hsl(208, 80%, 60%);
4219    --np-core-color-blue-xl: hsl(208, 80%, 70%);
4220
4221    --np-core-color-grey-xs: hsla(270, 10%, 10%, 1);
4222    --np-core-color-grey-s: hsla(270, 10%, 30%, 1);
4223    --np-core-color-grey-m: hsla(270, 10%, 50%, 1);
4224    --np-core-color-grey-l: hsla(270, 10%, 70%, 1);
4225    --np-core-color-grey-xl: hsla(270, 10%, 90%, 1);
4226
4227    --np-core-color-black: hsla(270, 10%, 0%, 1);
4228    --np-core-color-white: hsla(270, 10%, 100%, 1);
4229
4230    --np-core-color-purple-xs: hsla(270, 69%, 20%);
4231    --np-core-color-purple-s: hsla(270, 69%, 30%);
4232    --np-core-color-purple-m: hsla(270, 69%, 40%);
4233    --np-core-color-purple-l: hsla(270, 69%, 50%);
4234    --np-core-color-purple-xl: hsla(270, 69%, 60%);
4235
4236    --np-core-color-pink-xs: hsl(330, 100%, 30%, 1);
4237    --np-core-color-pink-s: hsl(330, 100%, 40%, 1);
4238    --np-core-color-pink-m: hsl(330, 100%, 50%, 1);
4239    --np-core-color-pink-l: hsl(330, 100%, 60%, 1);
4240    --np-core-color-pink-xl: hsl(330, 100%, 70%, 1);
4241
4242    --np-core-color-yellow-xs: hsl(70, 100%, 55%, 1);
4243    --np-core-color-yellow-s: hsl(70, 100%, 65%, 1);
4244    --np-core-color-yellow-m: hsl(70, 100%, 75%, 1);
4245    --np-core-color-yellow-l: hsl(70, 100%, 85%, 1);
4246    --np-core-color-yellow-xl: hsl(70, 100%, 96%, 1);
4247
4248    --np-core-color-orange-xs: hsl(39, 89%, 43%, 1);
4249    --np-core-color-orange-s: hsl(39, 89%, 53%, 1);
4250    --np-core-color-orange-m: hsl(39, 89%, 63%, 1);
4251    --np-core-color-orange-l: hsl(39, 89%, 73%, 1);
4252    --np-core-color-orange-xl: hsl(39, 89%, 83%, 1);
4253  }
4254
4255  :host {
4256    --np-core-gradient-purple-pink: linear-gradient(
4257      45deg,
4258      var(--np-core-color-purple-m),
4259      var(--np-core-color-pink-m)
4260    );
4261    --np-core-gradient-blue-green: linear-gradient(
4262      45deg,
4263      var(--np-core-color-blue-m),
4264      var(--np-core-color-green-m)
4265    );
4266  }
4267
4268  :host {
4269    --np-core-padding-xs: 0.2em;
4270    --np-core-padding-s: 0.5em;
4271    --np-core-padding-m: 1em;
4272    --np-core-padding-l: 1.5em;
4273    --np-core-padding-xl: 2em;
4274  }
4275
4276  :host {
4277    --np-core-border-width-xs: 1px;
4278    --np-core-border-width-s: 2px;
4279    --np-core-border-width-m: 3px;
4280    --np-core-border-width-l: 4px;
4281    --np-core-border-width-xl: 5px;
4282  }
4283
4284  :host {
4285    --np-core-border-radius-xs: 0.1em;
4286    --np-core-border-radius-s: 0.2em;
4287    --np-core-border-radius-m: 0.4em;
4288    --np-core-border-radius-l: 0.6em;
4289    --np-core-border-radius-xl: 0.8em;
4290  }
4291
4292  :host {
4293    --np-core-font-size-xs: 0.6em;
4294    --np-core-font-size-s: 0.8em;
4295    --np-core-font-size-m: 1em;
4296    --np-core-font-size-l: 1.2em;
4297    --np-core-font-size-xl: 1.4em;
4298
4299    --np-core-font-weight-xs: 200;
4300    --np-core-font-weight-s: 300;
4301    --np-core-font-weight-m: 400;
4302    --np-core-font-weight-l: 500;
4303    --np-core-font-weight-xl: 600;
4304  }
4305
4306  :host {
4307    --np-core-animation-duration-xs: 100ms;
4308    --np-core-animation-duration-s: 200ms;
4309    --np-core-animation-duration-m: 400ms;
4310    --np-core-animation-duration-l: 800ms;
4311    --np-core-animation-duration-xl: 1600ms;
4312  }
4313
4314  @keyframes scale {
4315    0% {
4316      transform: scale(1);
4317    }
4318    100% {
4319      transform: scale(0.5);
4320    }
4321  }
4322
4323  @keyframes bounce {
4324    0%,
4325    20%,
4326    50%,
4327    80%,
4328    100% {
4329      transform: translateY(0);
4330    }
4331    40% {
4332      transform: translateY(-0.4em);
4333    }
4334    60% {
4335      transform: translateY(-0.2em);
4336    }
4337  }
4338
4339  @keyframes glow {
4340    50% {
4341      opacity: 0.4;
4342      transform: scale(0.8);
4343    }
4344    100% {
4345      opacity: 1;
4346      transform: scale(1);
4347    }
4348  }
4349
4350  :host {
4351    --np-component-padding: var(--np-core-padding-s);
4352
4353    --np-component-border-radius: var(--np-core-border-radius-s);
4354    --np-component-border-width: var(--np-core-border-width-xs);
4355
4356    --np-component-font-size: var(--np-core-font-size-m);
4357    --np-component-font-weight: var(--np-core-font-weight-l);
4358
4359    --np-component-border-width: var(--np-core-border-width-xs);
4360    --np-component-icon-gap: var(--np-core-padding-s);
4361  }
4362
4363  :host {
4364    --np-component-border-color: var(--np-core-color-black);
4365    --np-component-text-color: var(--np-core-color-black);
4366    --np-component-background-color: transparent;
4367  }
4368
4369  .icon {
4370    width: 1em;
4371  }
4372
4373  .icon--busy {
4374    animation: scale var(--np-core-animation-duration-m) ease-out infinite alternate;
4375  }
4376
4377  .icon--envelope {
4378    animation: bounce var(--np-core-animation-duration-l) ease-out 10;
4379  }
4380
4381  :host {
4382    display: flex;
4383  }
4384
4385  button {
4386    display: flex;
4387    flex-grow: 1;
4388
4389    gap: var(--np-component-icon-gap);
4390    justify-content: center;
4391    align-items: center;
4392
4393    margin: 0;
4394    padding: var(--np-component-padding);
4395
4396    border: solid var(--np-component-border-color) var(--np-component-border-width);
4397    border-radius: var(--np-component-border-radius);
4398
4399    font-size: var(--np-component-font-size);
4400    font-weight: var(--np-component-font-weight);
4401
4402    color: var(--np-component-text-color);
4403    background-color: var(--np-component-background-color);
4404  }
4405
4406  :host {
4407    --np-component-border-color: var(--np-core-color-black);
4408    --np-component-text-color: var(--np-core-color-white);
4409    --np-component-background-color: var(--np-core-color-black);
4410  }
4411</style><!--lit-part KCIffch3dD8=--><!--lit-node 0--><button  part="button">
4412      <!--lit-part 4ZzNa0R2Taw=--><slot>Logout</slot><!--/lit-part-->
4413    </button><!--/lit-part--></template><!--lit-part-->Log out<!--/lit-part--></np-logout><!--/lit-part-->
4414          <!--lit-node 7--><ui-info defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4415    :host {
4416      display: flex;
4417      padding: 0 0 0 1em;
4418      margin: 1em 0;
4419      font-size: var(--np-core-font-size-m);
4420      color: var(--np-core-color-grey-s);
4421      border-left-width: 1px;
4422      border-left-style: solid;
4423      border-image: linear-gradient(
4424          to bottom,
4425          transparent,
4426          var(--np-core-color-grey-m),
4427          transparent
4428        )
4429        1 100%;
4430    }
4431
4432    p {
4433      margin: 0;
4434      padding: 0;
4435    }
4436    ::slotted(b) {
4437      padding: 0em 0.4em;
4438      border-radius: 0.2em;
4439      font-size: var(--np-core-font-size-s);
4440      border: 1px solid var(--np-core-color-grey-l);
4441      font-weight: var(--np-core-font-weight-s);
4442      color: var(--np-core-color-grey-xs);
4443      font-style: normal;
4444    }
4445  </style><!--lit-part /l3xvd6A6Yk=--><p><slot></slot></p><!--/lit-part--></template><!--lit-part-->The default state for logging out.<!--/lit-part--></ui-info>
4446        </aside>
4447        <article slot="article">
4448          <!--lit-node 10--><editor-template
4449            
4450            
4451           title="Localization for the default state" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4452    :host {
4453      display: flex;
4454      flex-flow: column;
4455      border-radius: var(--np-core-font-size-xs);
4456      overflow: hidden;
4457
4458      box-shadow: 8px 8px 30px var(--np-core-color-grey-m),
4459        -8px -8px 30px var(--np-core-color-white);
4460    }
4461
4462    header {
4463      display: flex;
4464      align-items: center;
4465      gap: 0.5em;
4466      padding: 0.5em;
4467      justify-content: space-between;
4468      background-color: var(--np-core-color-grey-xs);
4469      border-bottom: 1px solid var(--np-core-color-grey-m);
4470    }
4471
4472    .window .icon {
4473      width: 0.8em;
4474    }
4475    .window .close {
4476      color: var(--np-core-color-red-s);
4477    }
4478
4479    .window .reduce {
4480      color: var(--np-core-color-orange-m);
4481    }
4482
4483    .window .full {
4484      color: var(--np-core-color-green-m);
4485    }
4486
4487    h1 {
4488      flex: 1;
4489      text-align: center;
4490      margin: 0;
4491      padding: 0.5em 1em;
4492      font-size: var(--np-core-font-size-xs);
4493      font-weight: var(--np-core-font-weight-m);
4494      background-color: var(--np-core-color-grey-s);
4495      color: var(--np-core-color-grey-xl);
4496      border: 1px solid var(--np-core-color-grey-m);
4497      border-radius: var(--np-core-font-size-xs);
4498    }
4499
4500    main {
4501      display: flex;
4502      padding: 1em;
4503      background-color: var(--np-core-color-grey-xs);
4504      color: var(--np-core-color-grey-xl);
4505      font-size: var(--np-core-font-size-s);
4506      overflow-x: scroll;
4507      scroll-behavior: smooth;
4508    }
4509
4510    main::-webkit-scrollbar {
4511      display: none;
4512    }
4513
4514    .icon {
4515      width: 1em;
4516    }
4517
4518    ui-clipboard {
4519      color: var(--np-core-color-grey-l);
4520    }
4521  </style><!--lit-part ph8/fUonEYo=-->
4522      <header>
4523        <span class="window">
4524          <span class="close"><!--lit-part zygiWmBAPRU=--><svg
4525  class="icon icon--circle"
4526  xmlns="http://www.w3.org/2000/svg"
4527  viewBox="0 0 24 24"
4528>
4529  <circle cx="12" cy="12" r="10" fill="currentColor" />
4530</svg><!--/lit-part--></span>
4531          <span class="reduce"><!--lit-part zygiWmBAPRU=--><svg
4532  class="icon icon--circle"
4533  xmlns="http://www.w3.org/2000/svg"
4534  viewBox="0 0 24 24"
4535>
4536  <circle cx="12" cy="12" r="10" fill="currentColor" />
4537</svg><!--/lit-part--></span>
4538          <span class="full"><!--lit-part zygiWmBAPRU=--><svg
4539  class="icon icon--circle"
4540  xmlns="http://www.w3.org/2000/svg"
4541  viewBox="0 0 24 24"
4542>
4543  <circle cx="12" cy="12" r="10" fill="currentColor" />
4544</svg><!--/lit-part--></span>
4545        </span>
4546        <h1><!--lit-part-->Localization for the default state<!--/lit-part--></h1>
4547        <!--lit-node 10--><ui-clipboard  text="&lt;np-logout&gt;
4548  Log out
4549  &lt;span slot=&quot;loggingout&quot;&gt;Logging out...&lt;/span&gt;
4550  &lt;span slot=&quot;loggedout&quot;&gt;Congratulations&lt;/span&gt;
4551&lt;/np-logout&gt;" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4552    :host,
4553    span {
4554      display: flex;
4555      align-items: center;
4556    }
4557
4558    .icon {
4559      width: 1em;
4560      height: 1em;
4561    }
4562
4563    span.idle {
4564      cursor: pointer;
4565    }
4566
4567    span.busy .icon {
4568      animation: hideIt var(--delay) linear forwards;
4569    }
4570
4571    span.done .icon {
4572      animation: showIt var(--delay) linear forwards;
4573    }
4574
4575    @keyframes hideIt {
4576      from {
4577        transform: scale(1);
4578      }
4579      to {
4580        transform: scale(0);
4581      }
4582    }
4583    @keyframes showIt {
4584      from {
4585        transform: scale(0);
4586      }
4587      50% {
4588        transform: scale(1.4);
4589      }
4590
4591      to {
4592        transform: scale(1);
4593      }
4594    }
4595  </style><!--lit-part BRUAAAUVAAA=--><!--lit-part us4tHPFt+tw=--><!--lit-node 0--><span class="idle" ><!--lit-part kMtQNZeoWhc=--><svg
4596  xmlns="http://www.w3.org/2000/svg"
4597  fill="none"
4598  viewBox="0 0 24 24"
4599  stroke-width="1.5"
4600  stroke="currentColor"
4601  class="icon icon--clipboard-document"
4602>
4603  <path
4604    stroke-linecap="round"
4605    stroke-linejoin="round"
4606    d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z"
4607  />
4608</svg><!--/lit-part--></span><!--/lit-part--><?><!--/lit-part--></template></ui-clipboard>
4609      </header>
4610      <main><slot></slot></main>
4611    <!--/lit-part--></template>
4612            <!--lit-node 11--><code-shiki   language="html" code="&lt;np-logout&gt;
4613  Log out
4614  &lt;span slot=&quot;loggingout&quot;&gt;Logging out...&lt;/span&gt;
4615  &lt;span slot=&quot;loggedout&quot;&gt;Congratulations&lt;/span&gt;
4616&lt;/np-logout&gt;" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4617    :host {
4618      display: flex;
4619      align-items: center;
4620      font-weight: var(--np-core-font-weight-m);
4621    }
4622
4623    pre,
4624    code {
4625      tab-size: 2;
4626      margin: 0;
4627      padding: 0;
4628      /*font-family: Menlo, Consolas, monospace;*/
4629      transform: scale(1);
4630      font-size: 12px;
4631    }
4632
4633    :host::selection {
4634      background-color: #7928ca;
4635      color: white;
4636    }
4637
4638    // Nord theme
4639
4640    .hljs-subst {
4641      color: #d8dee9;
4642    }
4643
4644    .hljs-selector-tag {
4645      color: #81a1c1;
4646    }
4647
4648    .hljs-selector-id {
4649      color: #8fbcbb;
4650      font-weight: bold;
4651    }
4652
4653    .hljs-selector-class {
4654      color: #8fbcbb;
4655    }
4656
4657    .hljs-selector-attr {
4658      color: #8fbcbb;
4659    }
4660
4661    .hljs-property {
4662      color: #88c0d0;
4663    }
4664
4665    .hljs-selector-pseudo {
4666      color: #88c0d0;
4667    }
4668
4669    .hljs-addition {
4670      background-color: rgba(163, 190, 140, 0.5);
4671    }
4672
4673    .hljs-deletion {
4674      background-color: rgba(191, 97, 106, 0.5);
4675    }
4676
4677    .hljs-built_in,
4678    .hljs-type {
4679      color: #8fbcbb;
4680    }
4681
4682    .hljs-class {
4683      color: #8fbcbb;
4684    }
4685
4686    .hljs-function {
4687      color: #88c0d0;
4688    }
4689
4690    .hljs-title.hljs-function,
4691    .hljs-function > .hljs-title {
4692      color: #88c0d0;
4693    }
4694
4695    .hljs-keyword,
4696    .hljs-literal,
4697    .hljs-symbol {
4698      color: #81a1c1;
4699    }
4700
4701    .hljs-number {
4702      color: #b48ead;
4703    }
4704
4705    .hljs-regexp {
4706      color: #ebcb8b;
4707    }
4708
4709    .hljs-string {
4710      color: #a3be8c;
4711    }
4712
4713    .hljs-title {
4714      color: #8fbcbb;
4715    }
4716
4717    .hljs-params {
4718      color: #d8dee9;
4719    }
4720
4721    .hljs-bullet {
4722      color: #81a1c1;
4723    }
4724
4725    .hljs-code {
4726      color: #8fbcbb;
4727    }
4728
4729    .hljs-emphasis {
4730      font-style: italic;
4731    }
4732
4733    .hljs-formula {
4734      color: #8fbcbb;
4735    }
4736
4737    .hljs-strong {
4738      font-weight: bold;
4739    }
4740
4741    .hljs-link:hover {
4742      text-decoration: underline;
4743    }
4744
4745    .hljs-quote {
4746      color: #4c566a;
4747    }
4748
4749    .hljs-comment {
4750      color: #8c96aa;
4751    }
4752
4753    .hljs-doctag {
4754      color: #8fbcbb;
4755    }
4756
4757    .hljs-meta,
4758    .hljs-meta .hljs-keyword {
4759      color: #5e81ac;
4760    }
4761
4762    .hljs-meta .hljs-string {
4763      color: #a3be8c;
4764    }
4765
4766    .hljs-attr {
4767      color: #8fbcbb;
4768    }
4769
4770    .hljs-attribute {
4771      color: #d8dee9;
4772    }
4773
4774    .hljs-name {
4775      color: #81a1c1;
4776    }
4777
4778    .hljs-section {
4779      color: #88c0d0;
4780    }
4781
4782    .hljs-tag {
4783      color: #81a1c1;
4784    }
4785
4786    .hljs-variable {
4787      color: #d8dee9;
4788    }
4789
4790    .hljs-template-variable {
4791      color: #d8dee9;
4792    }
4793
4794    .hljs-template-tag {
4795      color: #5e81ac;
4796    }
4797  </style><!--lit-part ClNCJ8ooUiE=--><pre><code><!--lit-part SViVkVsK7y8=--><span class="hljs-tag">&lt;<span class="hljs-name">np-logout</span>&gt;</span>
4798  Log out
4799  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;loggingout&quot;</span>&gt;</span>Logging out...<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;
4799</span>
4800  <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;loggedout&quot;</span>&gt;</span>Congratulations<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
4801<span class="hljs-tag">&lt;/<span class="hljs-name">np-logout</span>&gt;</span><!--/lit-part--></code></pre><!--/lit-part--></template></code-shiki>
4802          </editor-template>
4803        </article>
4804      </ui-section>
4805    <!--/lit-part--></template></section-localization><!--astro:end--></astro-island> <astro-island uid="Z1MOIum" component-url="/_astro/section-session.Dci2zXOV.js" component-export="SectionSession" renderer-url="/_astro/client.DEGHhFmz.js" props="{}" ssr client="visible" before-hydration-url="/_astro/astro_scripts/before-hydration.js.BZdOL1wD.js" opts="{&quot;name&quot;:&quot;SectionSession&quot;,&quot;value&quot;:true}" await-children><section-session><template shadowroot="open" shadowrootmode="open"><style>
4806    .controls {
4807      display: flex;
4808      flex-wrap: wrap;
4809      font-size: var(--np-core-font-size-s);
4810      padding: var(--np-core-padding-m);
4811      gap: var(--np-core-padding-m);
4812      justify-content: center;
4813    }
4814
4815    .control {
4816      display: flex;
4817      align-items: center;
4818      gap: var(--np-core-padding-s);
4819    }
4820    .control input {
4821      width: 6ch;
4822      background-color: transparent;
4823      text-align: center;
4824      font-weight: var(--np-core-font-weight-l);
4825      border: 1px dotted var(--np-core-color-grey-l);
4826      border-radius: var(--np-core-padding-xs);
4827      padding: var(--np-core-padding-xs);
4828    }
4829
4830    .control label {
4831      color: var(--np-core-color-grey-xs);
4832    }
4833
4834    editor-template {
4835      max-width: calc(100vw - 2em);
4836    }
4837
4838    ui-info {
4839      color: var(--np-core-color-red-m);
4840    }
4841  </style><!--lit-part KPvpzrsZaxk=-->
4842      <!--lit-node 0--><ui-section-nav
4843        
4844        
4845       title="Session Management" desc="Configure the duration of a local session initiated during the login process." defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4846    slot[name="nav"] {
4847      display: flex;
4848      justify-content: center;
4849    }
4850
4851    @media (min-width: 700px) {
4852    }
4853
4854    @media (min-width: 1000px) {
4855    }
4856  </style><!--lit-part f4H8BRlTFb0=--><!--lit-node 0--><ui-section-simple   title="Session Management" desc="Configure the duration of a local session initiated during the login process." defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4857    :host {
4858      margin-top: 4em;
4859      display: flex;
4860      flex-flow: column;
4861      align-items: center;
4862      justify-content: center;
4863    }
4864
4865    section {
4866      display: flex;
4867      width: calc(100% - 2em);
4868      flex-flow: column;
4869      align-items: stretch;
4870      max-width: 1000px;
4871      gap: 2em;
4872      padding: 1em;
4873    }
4874
4875    header {
4876      display: flex;
4877      flex-flow: column;
4878      align-items: center;
4879      gap: 1em;
4880      padding: 1em 0;
4881    }
4882
4883    header :is(h1, p) {
4884      margin: 0;
4885      max-width: 600px;
4886    }
4887
4888    header h1 {
4889      font-size: var(--np-core-font-size-m);
4890      color: var(--np-core-color-grey-xs);
4891      text-align: center;
4892      text-transform: uppercase;
4893      letter-spacing: 0px;
4894      font-weight: var(--np-core-font-weight-xl);
4895    }
4896
4897    header p {
4898      color: var(--np-core-color-grey-xs);
4899      font-size: var(--np-core-font-size-m);
4900      font-weight: var(--np-core-font-weight-l);
4901      text-align: center;
4902    }
4903
4904    main {
4905      display: flex;
4906      flex-flow: column;
4907      align-items: stretch;
4908    }
4909    @media (min-width: 1000px) {
4910    }
4911  </style><!--lit-part nYzDYz3uW7Q=-->
4912      <section>
4913        <header>
4914          <h1><!--lit-part-->Session Management<!--/lit-part--></h1>
4915          <p><!--lit-part-->Configure the duration of a local session initiated during the login process.<!--/lit-part--></p>
4916        </header>
4917        <main><slot></slot></main>
4918      </section>
4919    <!--/lit-part--></template>
4920      <slot name="nav"></slot>
4921      <slot name="main"></slot>
4922    </ui-section-simple><!--/lit-part--></template>
4923        <nav slot="nav">
4924          <!--lit-node 2--><ui-pills   selected="lifetime" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4925    :host {
4926      display: flex;
4927      flex-wrap: nowrap;
4928      overflow-x: scroll;
4929      scroll-behavior: smooth;
4930      border: 1px solid var(--np-core-color-black);
4931      padding: var(--np-core-padding-xs);
4932      border-radius: var(--np-core-border-radius-xl);
4933    }
4934
4935    :host::-webkit-scrollbar {
4936      display: none;
4937    }
4938  </style><!--lit-part Pz0gobCCM4E=--><slot></slot><!--/lit-part--></template>
4939            <!--lit-node 3--><ui-pills-item  name="lifetime" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4940    :host {
4941      display: flex;
4942      --highlight-color-light: var(--ui-pills-highlight-color-light, var(--np-core-color-grey-s));
4943      --highlight-color: var(--ui-pills-highlight-color, var(--np-core-color-black));
4944    }
4945
4946    button {
4947      white-space: nowrap;
4948      padding: var(--np-core-padding-s) var(--np-core-padding-m);
4949      border-radius: var(--np-core-border-radius-xl);
4950      background-color: transparent;
4951      border: none;
4952    }
4953
4954    :host(:not([checked])) button {
4955      color: var(--highlight-color-light);
4956      cursor: pointer;
4957    }
4958
4959    :host(:not([checked])) button:hover {
4960      color: var(--highlight-color);
4961      cursor: pointer;
4962    }
4963
4964    :host([checked]) button {
4965      background-color: var(--highlight-color);
4966      font-weight: var(--np-core-font-weight-l);
4967      color: white;
4968    }
4969  </style><!--lit-part 7Lk+2YMsNqg=--><!--lit-node 0--><button  part="button"><slot></slot></button><!--/lit-part--></template>Lifetime</ui-pills-item>
4970            <!--lit-node 4--><ui-pills-item  name="timeout" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
4971    :host {
4972      display: flex;
4973      --highlight-color-light: var(--ui-pills-highlight-color-light, var(--np-core-color-grey-s));
4974      --highlight-color: var(--ui-pills-highlight-color, var(--np-core-color-black));
4975    }
4976
4977    button {
4978      white-space: nowrap;
4979      padding: var(--np-core-padding-s) var(--np-core-padding-m);
4980      border-radius: var(--np-core-border-radius-xl);
4981      background-color: transparent;
4982      border: none;
4983    }
4984
4985    :host(:not([checked])) button {
4986      color: var(--highlight-color-light);
4987      cursor: pointer;
4988    }
4989
4990    :host(:not([checked])) button:hover {
4991      color: var(--highlight-color);
4992      cursor: pointer;
4993    }
4994
4995    :host([checked]) button {
4996      background-color: var(--highlight-color);
4997      font-weight: var(--np-core-font-weight-l);
4998      color: white;
4999    }
5000  </style><!--lit-part 7Lk+2YMsNqg=--><!--lit-node 0--><button  part="button"><slot></slot></button><!--/lit-part--></template>Idle Timeout</ui-pills-item>
5001          </ui-pills>
5002        </nav>
5003        <main slot="main">
5004          <div class="controls">
5005            <span class="control">
5006              <!--lit-node 8--><input
5007                id="day"
5008                min="0"
5009                max="365"
5010                type="number"
5011                inputmode="numeric"
5012                pattern="[0-9]*"
5013                value="0"
5014                
5015              />
5016              <label for="day"><!--lit-part-->day<!--/lit-part--></label>
5017            </span>
5018            <span class="control">
5019              <!--lit-node 12--><input
5020                id="hour"
5021                min="0"
5022                max="23"
5023                type="number"
5024                inputmode="numeric"
5025                pattern="[0-9]*"
5026                value="0"
5027                
5028              />
5029              <label for="hour"><!--lit-part-->hour<!--/lit-part--></label>
5030            </span>
5031            <span class="control">
5032              <!--lit-node 16--><input
5033                id="min"
5034                min="0"
5035                max="59"
5036                type="number"
5037                inputmode="numeric"
5038                pattern="[0-9]*"
5039                value="0"
5040                
5041              />
5042              <label for="min"><!--lit-part-->minute<!--/lit-part--></label>
5043            </span>
5044            <!--lit-part BRUAAAUVAAA=--><?><!--/lit-part-->
5045          </div>
5046
5047          <!--lit-node 20--><editor-template
5048            
5049            
5050           title="Session Management" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
5051    :host {
5052      display: flex;
5053      flex-flow: column;
5054      border-radius: var(--np-core-font-size-xs);
5055      overflow: hidden;
5056
5057      box-shadow: 8px 8px 30px var(--np-core-color-grey-m),
5058        -8px -8px 30px var(--np-core-color-white);
5059    }
5060
5061    header {
5062      display: flex;
5063      align-items: center;
5064      gap: 0.5em;
5065      padding: 0.5em;
5066      justify-content: space-between;
5067      background-color: var(--np-core-color-grey-xs);
5068      border-bottom: 1px solid var(--np-core-color-grey-m);
5069    }
5070
5071    .window .icon {
5072      width: 0.8em;
5073    }
5074    .window .close {
5075      color: var(--np-core-color-red-s);
5076    }
5077
5078    .window .reduce {
5079      color: var(--np-core-color-orange-m);
5080    }
5081
5082    .window .full {
5083      color: var(--np-core-color-green-m);
5084    }
5085
5086    h1 {
5087      flex: 1;
5088      text-align: center;
5089      margin: 0;
5090      padding: 0.5em 1em;
5091      font-size: var(--np-core-font-size-xs);
5092      font-weight: var(--np-core-font-weight-m);
5093      background-color: var(--np-core-color-grey-s);
5094      color: var(--np-core-color-grey-xl);
5095      border: 1px solid var(--np-core-color-grey-m);
5096      border-radius: var(--np-core-font-size-xs);
5097    }
5098
5099    main {
5100      display: flex;
5101      padding: 1em;
5102      background-color: var(--np-core-color-grey-xs);
5103      color: var(--np-core-color-grey-xl);
5104      font-size: var(--np-core-font-size-s);
5105      overflow-x: scroll;
5106      scroll-behavior: smooth;
5107    }
5108
5109    main::-webkit-scrollbar {
5110      display: none;
5111    }
5112
5113    .icon {
5114      width: 1em;
5115    }
5116
5117    ui-clipboard {
5118      color: var(--np-core-color-grey-l);
5119    }
5120  </style><!--lit-part ph8/fUonEYo=-->
5121      <header>
5122        <span class="window">
5123          <span class="close"><!--lit-part zygiWmBAPRU=--><svg
5124  class="icon icon--circle"
5125  xmlns="http://www.w3.org/2000/svg"
5126  viewBox="0 0 24 24"
5127>
5128  <circle cx="12" cy="12" r="10" fill="currentColor" />
5129</svg><!--/lit-part--></span>
5130          <span class="reduce"><!--lit-part zygiWmBAPRU=--><svg
5131  class="icon icon--circle"
5132  xmlns="http://www.w3.org/2000/svg"
5133  viewBox="0 0 24 24"
5134>
5135  <circle cx="12" cy="12" r="10" fill="currentColor" />
5136</svg><!--/lit-part--></span>
5137          <span class="full"><!--lit-part zygiWmBAPRU=--><svg
5138  class="icon icon--circle"
5139  xmlns="http://www.w3.org/2000/svg"
5140  viewBox="0 0 24 24"
5141>
5142  <circle cx="12" cy="12" r="10" fill="currentColor" />
5143</svg><!--/lit-part--></span>
5144        </span>
5145        <h1><!--lit-part-->Session Management<!--/lit-part--></h1>
5146        <!--lit-node 10--><ui-clipboard  text="&lt;!-- &#39;lifetime&#39; equals to one day (24h) by default --&gt;
5147&lt;np-login&gt;&lt;/np-login&gt;
5148" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
5149    :host,
5150    span {
5151      display: flex;
5152      align-items: center;
5153    }
5154
5155    .icon {
5156      width: 1em;
5157      height: 1em;
5158    }
5159
5160    span.idle {
5161      cursor: pointer;
5162    }
5163
5164    span.busy .icon {
5165      animation: hideIt var(--delay) linear forwards;
5166    }
5167
5168    span.done .icon {
5169      animation: showIt var(--delay) linear forwards;
5170    }
5171
5172    @keyframes hideIt {
5173      from {
5174        transform: scale(1);
5175      }
5176      to {
5177        transform: scale(0);
5178      }
5179    }
5180    @keyframes showIt {
5181      from {
5182        transform: scale(0);
5183      }
5184      50% {
5185        transform: scale(1.4);
5186      }
5187
5188      to {
5189        transform: scale(1);
5190      }
5191    }
5192  </style><!--lit-part BRUAAAUVAAA=--><!--lit-part us4tHPFt+tw=--><!--lit-node 0--><span class="idle" ><!--lit-part kMtQNZeoWhc=--><svg
5193  xmlns="http://www.w3.org/2000/svg"
5194  fill="none"
5195  viewBox="0 0 24 24"
5196  stroke-width="1.5"
5197  stroke="currentColor"
5198  class="icon icon--clipboard-document"
5199>
5200  <path
5201    stroke-linecap="round"
5202    stroke-linejoin="round"
5203    d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z"
5204  />
5205</svg><!--/lit-part--></span><!--/lit-part--><?><!--/lit-part--></template></ui-clipboard>
5206      </header>
5207      <main><slot></slot></main>
5208    <!--/lit-part--></template>
5209            <!--lit-node 21--><code-shiki
5210              
5211              
5212             language="html" code="&lt;!-- &#39;lifetime&#39; equals to one day (24h) by default --&gt;
5213&lt;np-login&gt;&lt;/np-login&gt;
5214" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
5215    :host {
5216      display: flex;
5217      align-items: center;
5218      font-weight: var(--np-core-font-weight-m);
5219    }
5220
5221    pre,
5222    code {
5223      tab-size: 2;
5224      margin: 0;
5225      padding: 0;
5226      /*font-family: Menlo, Consolas, monospace;*/
5227      transform: scale(1);
5228      font-size: 12px;
5229    }
5230
5231    :host::selection {
5232      background-color: #7928ca;
5233      color: white;
5234    }
5235
5236    // Nord theme
5237
5238    .hljs-subst {
5239      color: #d8dee9;
5240    }
5241
5242    .hljs-selector-tag {
5243      color: #81a1c1;
5244    }
5245
5246    .hljs-selector-id {
5247      color: #8fbcbb;
5248      font-weight: bold;
5249    }
5250
5251    .hljs-selector-class {
5252      color: #8fbcbb;
5253    }
5254
5255    .hljs-selector-attr {
5256      color: #8fbcbb;
5257    }
5258
5259    .hljs-property {
5260      color: #88c0d0;
5261    }
5262
5263    .hljs-selector-pseudo {
5264      color: #88c0d0;
5265    }
5266
5267    .hljs-addition {
5268      background-color: rgba(163, 190, 140, 0.5);
5269    }
5270
5271    .hljs-deletion {
5272      background-color: rgba(191, 97, 106, 0.5);
5273    }
5274
5275    .hljs-built_in,
5276    .hljs-type {
5277      color: #8fbcbb;
5278    }
5279
5280    .hljs-class {
5281      color: #8fbcbb;
5282    }
5283
5284    .hljs-function {
5285      color: #88c0d0;
5286    }
5287
5288    .hljs-title.hljs-function,
5289    .hljs-function > .hljs-title {
5290      color: #88c0d0;
5291    }
5292
5293    .hljs-keyword,
5294    .hljs-literal,
5295    .hljs-symbol {
5296      color: #81a1c1;
5297    }
5298
5299    .hljs-number {
5300      color: #b48ead;
5301    }
5302
5303    .hljs-regexp {
5304      color: #ebcb8b;
5305    }
5306
5307    .hljs-string {
5308      color: #a3be8c;
5309    }
5310
5311    .hljs-title {
5312      color: #8fbcbb;
5313    }
5314
5315    .hljs-params {
5316      color: #d8dee9;
5317    }
5318
5319    .hljs-bullet {
5320      color: #81a1c1;
5321    }
5322
5323    .hljs-code {
5324      color: #8fbcbb;
5325    }
5326
5327    .hljs-emphasis {
5328      font-style: italic;
5329    }
5330
5331    .hljs-formula {
5332      color: #8fbcbb;
5333    }
5334
5335    .hljs-strong {
5336      font-weight: bold;
5337    }
5338
5339    .hljs-link:hover {
5340      text-decoration: underline;
5341    }
5342
5343    .hljs-quote {
5344      color: #4c566a;
5345    }
5346
5347    .hljs-comment {
5348      color: #8c96aa;
5349    }
5350
5351    .hljs-doctag {
5352      color: #8fbcbb;
5353    }
5354
5355    .hljs-meta,
5356    .hljs-meta .hljs-keyword {
5357      color: #5e81ac;
5358    }
5359
5360    .hljs-meta .hljs-string {
5361      color: #a3be8c;
5362    }
5363
5364    .hljs-attr {
5365      color: #8fbcbb;
5366    }
5367
5368    .hljs-attribute {
5369      color: #d8dee9;
5370    }
5371
5372    .hljs-name {
5373      color: #81a1c1;
5374    }
5375
5376    .hljs-section {
5377      color: #88c0d0;
5378    }
5379
5380    .hljs-tag {
5381      color: #81a1c1;
5382    }
5383
5384    .hljs-variable {
5385      color: #d8dee9;
5386    }
5387
5388    .hljs-template-variable {
5389      color: #d8dee9;
5390    }
5391
5392    .hljs-template-tag {
5393      color: #5e81ac;
5394    }
5395  </style><!--lit-part ClNCJ8ooUiE=--><pre><code><!--lit-part Ufgk+htzWeg=--><span class="hljs-comment">&lt;!-- &#x27;lifetime&#x27; equals to one day (24h) by default --&gt;</span>
5396<span class="hljs-tag">&lt;<span class="hljs-name">np-login</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">np-login</span>&gt;</span>
5397<!--/lit-part--></code></pre><!--/lit-part--></template></code-shiki>
5398          </editor-template>
5399        </main>
5400      </ui-section-nav>
5401    <!--/lit-part--></template></section-session><!--astro:end--></astro-island> <astro-island uid="Z11zOs7" component-url="/_astro/section-whatsnext.vEmX5Mal.js" component-export="SectionWhatsnext" renderer-url="/_astro/client.DEGHhFmz.js" props="{}" ssr client="visible" before-hydration-url="/_astro/astro_scripts/before-hydration.js.BZdOL1wD.js" opts="{&quot;name&quot;:&quot;SectionWhatsnext&quot;,&quot;value&quot;:true}" await-children><section-wathsnext><template shadowroot="open" shadowrootmode="open"><style>
5402    ul {
5403      display: flex;
5404      gap: 1.5em;
5405      align-items: center;
5406      justify-content: center;
5407      flex-flow: column;
5408      list-style: none;
5409      margin: 0;
5410      padding: 1em 0;
5411    }
5412
5413    a {
5414      text-decoration: none;
5415      color: var(--np-core-color-white);
5416      font-weight: var(--np-core-font-weight-l);
5417      font-size: var(--np-core-font-size-m);
5418      padding: 0.5em 1.5em;
5419      border-radius: 2em;
5420      background-image: linear-gradient(45deg, #3b82f6, #8b5cf6);
5421    }
5422
5423    a.doc {
5424      -webkit-background-clip: text;
5425      background-clip: text;
5426      color: transparent;
5427    }
5428
5429    a.demo {
5430      color: white;
5431    }
5432
5433    .icon {
5434      width: 1em;
5435    }
5436
5437    @media (min-width: 400px) {
5438      ul {
5439        flex-flow: row;
5440      }
5441    }
5442  </style><!--lit-part Dlw/YdcNebc=-->
5443      <!--lit-node 0--><ui-section-simple
5444        
5445        
5446       title="You&#39;re all set!" desc="Step into a Password-Free Future and experience the ease of Passwordless Authentication today!" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
5447    :host {
5448      margin-top: 4em;
5449      display: flex;
5450      flex-flow: column;
5451      align-items: center;
5452      justify-content: center;
5453    }
5454
5455    section {
5456      display: flex;
5457      width: calc(100% - 2em);
5458      flex-flow: column;
5459      align-items: stretch;
5460      max-width: 1000px;
5461      gap: 2em;
5462      padding: 1em;
5463    }
5464
5465    header {
5466      display: flex;
5467      flex-flow: column;
5468      align-items: center;
5469      gap: 1em;
5470      padding: 1em 0;
5471    }
5472
5473    header :is(h1, p) {
5474      margin: 0;
5475      max-width: 600px;
5476    }
5477
5478    header h1 {
5479      font-size: var(--np-core-font-size-m);
5480      color: var(--np-core-color-grey-xs);
5481      text-align: center;
5482      text-transform: uppercase;
5483      letter-spacing: 0px;
5484      font-weight: var(--np-core-font-weight-xl);
5485    }
5486
5487    header p {
5488      color: var(--np-core-color-grey-xs);
5489      font-size: var(--np-core-font-size-m);
5490      font-weight: var(--np-core-font-weight-l);
5491      text-align: center;
5492    }
5493
5494    main {
5495      display: flex;
5496      flex-flow: column;
5497      align-items: stretch;
5498    }
5499    @media (min-width: 1000px) {
5500    }
5501  </style><!--lit-part nYzDYz3uW7Q=-->
5502      <section>
5503        <header>
5504          <h1><!--lit-part-->You&#39;re all set!<!--/lit-part--></h1>
5505          <p><!--lit-part-->Step into a Password-Free Future and experience the ease of Passwordless Authentication today!<!--/lit-part--></p>
5506        </header>
5507        <main><slot></slot></main>
5508      </section>
5509    <!--/lit-part--></template>
5510        <ul>
5511          <li><a href="https://dev.nopwd.io" class="doc">Get Started</a></li>
5512          <li><a href="https://nopwd.rocks" class="demo">See It in Action</a></li>
5513        </ul>
5514      </ui-section-simple>
5515    <!--/lit-part--></template></section-wathsnext><!--astro:end--></astro-island>  <astro-island uid="2rAX4q" component-url="/_astro/app-footer.C-IVBxdU.js" component-export="AppFooter" renderer-url="/_astro/client.DEGHhFmz.js" props="{}" ssr client="idle" before-hydration-url="/_astro/astro_scripts/before-hydration.js.BZdOL1wD.js" opts="{&quot;name&quot;:&quot;AppFooter&quot;,&quot;value&quot;:true}" await-children><app-footer><template shadowroot="open" shadowrootmode="open"><style>
5516    :host {
5517      display: flex;
5518      justify-content: center;
5519      background-color: var(--np-core-color-grey-xs);
5520      padding: 4em 1em;
5521    }
5522
5523    footer {
5524      display: flex;
5525      flex-flow: column;
5526      flex: 1;
5527      justify-content: stretch;
5528      max-width: 1000px;
5529      gap: 2em;
5530    }
5531
5532    .icon {
5533      width: 1em;
5534      height: 1em;
5535    }
5536
5537    a {
5538      text-decoration: none;
5539      color: inherit;
5540    }
5541
5542    aside {
5543      display: flex;
5544      flex-flow: column;
5545      align-items: flex-end;
5546      color: var(--np-core-color-grey-l);
5547      gap: 1em;
5548    }
5549
5550    aside np-status {
5551      font-size: var(--np-core-font-size-xs);
5552    }
5553
5554    aside .copyright {
5555      display: flex;
5556      align-items: center;
5557      gap: 0.2em;
5558      font-size: var(--np-core-font-size-xs);
5559    }
5560
5561    aside .social {
5562      display: flex;
5563      gap: 1em;
5564    }
5565
5566    nav {
5567      display: flex;
5568      flex: 1;
5569      flex-flow: column;
5570      gap: 2em;
5571      padding-right: 1em;
5572    }
5573
5574    nav section {
5575      display: flex;
5576      flex-flow: column;
5577      gap: 1em;
5578    }
5579
5580    section h1 {
5581      margin: 0;
5582      font-size: var(--np-core-font-size-s);
5583      color: var(--np-core-color-grey-l);
5584      font-weight: var(--np-core-font-weight-xs);
5585      text-transform: uppercase;
5586    }
5587
5588    ul {
5589      display: flex;
5590      flex-flow: column;
5591      font-size: var(--np-core-font-size-m);
5592      font-weight: var(--np-core-font-weight-s);
5593      gap: var(--np-core-font-size-m);
5594      margin: 0;
5595      padding: 0;
5596      list-style: none;
5597      color: var(--np-core-color-grey-xl);
5598    }
5599
5600    li {
5601      display: flex;
5602      flex-wrap: nowrap;
5603      font-size: var(--np-core-font-size-s);
5604      gap: 0.2em;
5605      padding-left: var(--np-core-padding-s);
5606      align-items: center;
5607    }
5608
5609    @media (min-width: 500px) {
5610      nav {
5611        display: grid;
5612        grid-template-columns: 1fr 1fr;
5613      }
5614    }
5615
5616    @media (min-width: 700px) {
5617      nav {
5618        display: grid;
5619        grid-template-columns: 1fr 1fr 1fr;
5620      }
5621    }
5622
5623    @media (min-width: 900px) {
5624      footer {
5625        display: flex;
5626        flex: 1;
5627        flex-flow: row;
5628        justify-content: space-between;
5629      }
5630
5631      aside {
5632        align-items: flex-end;
5633      }
5634    }
5635  </style><!--lit-part dI2b60O1xGQ=--><footer>
5636      <nav>
5637        <section>
5638          <h1>Guides</h1>
5639          <ul>
5640            <li><a href="//dev.nopwd.io/guides/email">Email authentication</a></li>
5641            <li><a href="//dev.nopwd.io/guides/passkeys">Passkeys authentication</a></li>
5642            <li><a href="//dev.nopwd.io/guides/session">Session management</a></li>
5643          </ul>
5644        </section>
5645        <section>
5646          <h1>References</h1>
5647          <ul>
5648            <li><a href="//dev.nopwd.io/reference/components">Web components</a></li>
5649            <li><a href="//dev.nopwd.io/reference/api">API</a></li>
5650          </ul>
5651        </section>
5652        <section>
5653          <h1>Legal</h1>
5654          <ul>
5655            <li><a href="//dev.nopwd.io/policies/terms">Terms</a></li>
5656            <li><a href="//dev.nopwd.io/policies/privacy">Privacy</a></li>
5657          </ul>
5658        </section>
5659      </nav>
5660      <aside>
5661        <span class="social"><a href="//github.com/nopwdio" aria-label="github"><!--lit-part m119RJyvzjU=--> <svg
5662  width="98"
5663  height="96"
5664  viewBox="0 0 98 96"
5665  xmlns="http://www.w3.org/2000/svg"
5666  class="icon icon--github"
5667>
5668  <path
5669    fill-rule="evenodd"
5670    clip-rule="evenodd"
5671    d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.3
567162 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
5672    fill="currentColor"
5673  />
5674</svg><!--/lit-part--></a></span>
5675        <span class="copyright">Nopwd © <!--lit-part-->2025<!--/lit-part--></span>
5676        <!--lit-node 31--><np-status state="unknown" defer-hydration><template shadowroot="open" shadowrootmode="open"><style>
5677  :host {
5678    --np-core-color-green-xs: hsla(117, 40%, 36%, 1);
5679    --np-core-color-green-s: hsla(117, 40%, 46%, 1);
5680    --np-core-color-green-m: hsla(117, 40%, 56%, 1);
5681    --np-core-color-green-l: hsla(117, 40%, 66%, 1);
5682    --np-core-color-green-xl: hsla(117, 40%, 76%, 1);
5683
5684    --np-core-color-red-xs: hsla(2, 79%, 49%, 1);
5685    --np-core-color-red-s: hsla(2, 79%, 59%, 1);
5686    --np-core-color-red-m: hsla(2, 79%, 69%, 1);
5687    --np-core-color-red-l: hsla(2, 79%, 79%, 1);
5688    --np-core-color-red-xl: hsla(2, 79%, 89%, 1);
5689
5690    --np-core-color-blue-xs: hsl(208, 80%, 30%);
5691    --np-core-color-blue-s: hsl(208, 80%, 40%);
5692    --np-core-color-blue-m: hsl(208, 80%, 50%);
5693    --np-core-color-blue-l: hsl(208, 80%, 60%);
5694    --np-core-color-blue-xl: hsl(208, 80%, 70%);
5695
5696    --np-core-color-grey-xs: hsla(270, 10%, 10%, 1);
5697    --np-core-color-grey-s: hsla(270, 10%, 30%, 1);
5698    --np-core-color-grey-m: hsla(270, 10%, 50%, 1);
5699    --np-core-color-grey-l: hsla(270, 10%, 70%, 1);
5700    --np-core-color-grey-xl: hsla(270, 10%, 90%, 1);
5701
5702    --np-core-color-black: hsla(270, 10%, 0%, 1);
5703    --np-core-color-white: hsla(270, 10%, 100%, 1);
5704
5705    --np-core-color-purple-xs: hsla(270, 69%, 20%);
5706    --np-core-color-purple-s: hsla(270, 69%, 30%);
5707    --np-core-color-purple-m: hsla(270, 69%, 40%);
5708    --np-core-color-purple-l: hsla(270, 69%, 50%);
5709    --np-core-color-purple-xl: hsla(270, 69%, 60%);
5710
5711    --np-core-color-pink-xs: hsl(330, 100%, 30%, 1);
5712    --np-core-color-pink-s: hsl(330, 100%, 40%, 1);
5713    --np-core-color-pink-m: hsl(330, 100%, 50%, 1);
5714    --np-core-color-pink-l: hsl(330, 100%, 60%, 1);
5715    --np-core-color-pink-xl: hsl(330, 100%, 70%, 1);
5716
5717    --np-core-color-yellow-xs: hsl(70, 100%, 55%, 1);
5718    --np-core-color-yellow-s: hsl(70, 100%, 65%, 1);
5719    --np-core-color-yellow-m: hsl(70, 100%, 75%, 1);
5720    --np-core-color-yellow-l: hsl(70, 100%, 85%, 1);
5721    --np-core-color-yellow-xl: hsl(70, 100%, 96%, 1);
5722
5723    --np-core-color-orange-xs: hsl(39, 89%, 43%, 1);
5724    --np-core-color-orange-s: hsl(39, 89%, 53%, 1);
5725    --np-core-color-orange-m: hsl(39, 89%, 63%, 1);
5726    --np-core-color-orange-l: hsl(39, 89%, 73%, 1);
5727    --np-core-color-orange-xl: hsl(39, 89%, 83%, 1);
5728  }
5729
5730  :host {
5731    --np-core-gradient-purple-pink: linear-gradient(
5732      45deg,
5733      var(--np-core-color-purple-m),
5734      var(--np-core-color-pink-m)
5735    );
5736    --np-core-gradient-blue-green: linear-gradient(
5737      45deg,
5738      var(--np-core-color-blue-m),
5739      var(--np-core-color-green-m)
5740    );
5741  }
5742
5743  :host {
5744    --np-core-padding-xs: 0.2em;
5745    --np-core-padding-s: 0.5em;
5746    --np-core-padding-m: 1em;
5747    --np-core-padding-l: 1.5em;
5748    --np-core-padding-xl: 2em;
5749  }
5750
5751  :host {
5752    --np-core-border-width-xs: 1px;
5753    --np-core-border-width-s: 2px;
5754    --np-core-border-width-m: 3px;
5755    --np-core-border-width-l: 4px;
5756    --np-core-border-width-xl: 5px;
5757  }
5758
5759  :host {
5760    --np-core-border-radius-xs: 0.1em;
5761    --np-core-border-radius-s: 0.2em;
5762    --np-core-border-radius-m: 0.4em;
5763    --np-core-border-radius-l: 0.6em;
5764    --np-core-border-radius-xl: 0.8em;
5765  }
5766
5767  :host {
5768    --np-core-font-size-xs: 0.6em;
5769    --np-core-font-size-s: 0.8em;
5770    --np-core-font-size-m: 1em;
5771    --np-core-font-size-l: 1.2em;
5772    --np-core-font-size-xl: 1.4em;
5773
5774    --np-core-font-weight-xs: 200;
5775    --np-core-font-weight-s: 300;
5776    --np-core-font-weight-m: 400;
5777    --np-core-font-weight-l: 500;
5778    --np-core-font-weight-xl: 600;
5779  }
5780
5781  :host {
5782    --np-core-animation-duration-xs: 100ms;
5783    --np-core-animation-duration-s: 200ms;
5784    --np-core-animation-duration-m: 400ms;
5785    --np-core-animation-duration-l: 800ms;
5786    --np-core-animation-duration-xl: 1600ms;
5787  }
5788
5789  @keyframes scale {
5790    0% {
5791      transform: scale(1);
5792    }
5793    100% {
5794      transform: scale(0.5);
5795    }
5796  }
5797
5798  @keyframes bounce {
5799    0%,
5800    20%,
5801    50%,
5802    80%,
5803    100% {
5804      transform: translateY(0);
5805    }
5806    40% {
5807      transform: translateY(-0.4em);
5808    }
5809    60% {
5810      transform: translateY(-0.2em);
5811    }
5812  }
5813
5814  @keyframes glow {
5815    50% {
5816      opacity: 0.4;
5817      transform: scale(0.8);
5818    }
5819    100% {
5820      opacity: 1;
5821      transform: scale(1);
5822    }
5823  }
5824
5825  :host {
5826    --np-component-padding: var(--np-core-padding-s);
5827
5828    --np-component-border-radius: var(--np-core-border-radius-s);
5829    --np-component-border-width: var(--np-core-border-width-xs);
5830
5831    --np-component-font-size: var(--np-core-font-size-m);
5832    --np-component-font-weight: var(--np-core-font-weight-l);
5833
5834    --np-component-border-width: var(--np-core-border-width-xs);
5835    --np-component-icon-gap: var(--np-core-padding-s);
5836  }
5837
5838  :host {
5839    --np-component-border-color: var(--np-core-color-black);
5840    --np-component-text-color: var(--np-core-color-black);
5841    --np-component-background-color: transparent;
5842  }
5843
5844  .icon {
5845    width: 1em;
5846  }
5847
5848  .icon--busy {
5849    animation: scale var(--np-core-animation-duration-m) ease-out infinite alternate;
5850  }
5851
5852  .icon--envelope {
5853    animation: bounce var(--np-core-animation-duration-l) ease-out 10;
5854  }
5855
5856  :host {
5857    display: flex;
5858  }
5859
5860  a {
5861    display: flex;
5862    flex-grow: 1;
5863
5864    align-items: center;
5865
5866    gap: var(--np-component-icon-gap);
5867
5868    margin: 0;
5869    padding: var(--np-component-padding);
5870
5871    border: solid var(--np-component-border-color) var(--np-component-border-width);
5872    border-radius: var(--np-component-border-radius);
5873
5874    font-size: var(--np-component-font-size);
5875    font-weight: var(--np-component-font-weight);
5876
5877    color: var(--np-component-text-color);
5878    background-color: var(--np-component-background-color);
5879    text-decoration: none;
5880  }
5881
5882  /* button success */
5883  :host([state="operational"]) {
5884    --np-component-border-color: var(--np-core-color-green-m);
5885    --np-component-text-color: var(--np-core-color-green-m);
5886  }
5887
5888  :host([state="offline"]),
5889  :host([state="down"]) {
5890    --np-component-border-color: var(--np-core-color-red-m);
5891    --np-component-text-color: var(--np-core-color-red-m);
5892  }
5893
5894  :host([state="disrupted"]) {
5895    --np-component-border-color: var(--np-core-color-orange-m);
5896    --np-component-text-color: var(--np-core-color-orange-m);
5897  }
5898
5899  :host([state="nodata"]),
5900  :host([state="unknown"]) {
5901    --np-component-border-color: var(--np-core-color-grey-m);
5902    --np-component-text-color: var(--np-core-color-grey-m);
5903  }
5904
5905  :host([state="unknown"]) .icon {
5906    animation: scale var(--np-core-animation-duration-m) ease-out infinite alternate;
5907  }
5908
5909  :host([state="disrupted"]) .icon,
5910  :host([state="operational"]) .icon {
5911    animation: glow var(--np-core-animation-duration-xl) ease-in-out infinite alternate;
5912  }
5913
5914  .icon {
5915    font-size: 0.7em;
5916  }
5917</style><!--lit-part bC3Nym1hOho=--><a href="https://nopwd.io/status" part="link">
5918      <!--lit-part BC99rjuQZhQ=--><!--lit-part 8bSG556GE/Q=--><svg
5919  class="icon icon--loading"
5920  role="img"
5921  xmlns="http://www.w3.org/2000/svg"
5922  viewBox="0 0 512 512"
5923>
5924  <title id="title">Loading</title>
5925  <path
5926    fill="currentColor"
5927    d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z"
5928  />
5929</svg><!--/lit-part--><slot>connecting...</slot><!--/lit-part-->
5930    </a><!--/lit-part--></template></np-status>
5931      </aside>
5932    </footer><!--/lit-part--></template></app-footer><!--astro:end--></astro-island> </body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.