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="{"name":"AppHeader","value":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="{"name":"SectionHero","value":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="{"id":[0,"section-magiclink"]}" ssr client="idle" before-hydration-url="/_astro/astro_scripts/before-hydration.js.BZdOL1wD.js" opts="{"name":"SectionMagiclink","value":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><<!--lit-part-->np-login<!--/lit-part-->></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="<h1>MyApp Login Form</h1> 1021 1022<np-login></np-login> 1023 1024<script type="module"> 1025 const input = document.querySelector("np-login"); 1026 1027 input.addEventListener("np:login", async (e) => { 1028 // You are authenticated ð 1029 const { expires_at, token } = await e.target.getSession(); 1030 }); 1031</script>" 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="<h1>MyApp Login Form</h1> 1093 1094<np-login></np-login> 1095 1096<script type="module"> 1097 const input = document.querySelector("np-login"); 1098 1099 input.addEventListener("np:login", async (e) => { 1100 // You are authenticated ð 1101 const { expires_at, token } = await e.target.getSession(); 1102 }); 1103</script>" 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"><<span class="hljs-name">h1</span>></span>MyApp Login Form<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> 1285 1286<span class="hljs-tag"><<span class="hljs-name">np-login</span>></span><span class="hljs-tag"></<span class="hljs-name">np-login</span>></span> 1287 1288<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></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">"np-login"</span>); 1290 1291 input.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">"np:login"</span>, <span class="hljs-title function_">async</span> (e) => { 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"></<span class="hljs-name">script</span>></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>◀ 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="{"id":[0,"section-passkeys"]}" ssr client="idle" before-hydration-url="/_astro/astro_scripts/before-hydration.js.BZdOL1wD.js" opts="{"name":"SectionPasskey","value":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'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'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><<!--lit-part-->np-login<!--/lit-part-->></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="<np-login></np-login> 2290 2291<script type="module"> 2292 const npLogin = document.querySelector("np-login"); 2293 2294 npLogin.addEventListner("np:login", async (e) => { 2295 // Your are authenticated ð 2296 const { expires_at, token } = await e.target.getSession(); 2297 }); 2298</script>" 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="<np-login></np-login> 2360 2361<script type="module"> 2362 const npLogin = document.querySelector("np-login"); 2363 2364 npLogin.addEventListner("np:login", async (e) => { 2365 // Your are authenticated ð 2366 const { expires_at, token } = await e.target.getSession(); 2367 }); 2368</script>" 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"><<span class="hljs-name">np-login</span>></span><span class="hljs-tag"></<span class="hljs-name">np-login</span>></span> 2550 2551<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"module"</span>></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">"np-login"</span>); 2553 2554 npLogin.<span class="hljs-title function_">addEventListner</span>(<span class="hljs-string">"np:login"</span>, <span class="hljs-title function_">async</span> (e) => { 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"></<span class="hljs-name">script</span>></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="{"name":"SectionCustomize","value":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="{"name":"SectionLocalization","value":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="<np-logout> 4548 Log out 4549 <span slot="loggingout">Logging out...</span> 4550 <span slot="loggedout">Congratulations</span> 4551</np-logout>" 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="<np-logout> 4613 Log out 4614 <span slot="loggingout">Logging out...</span> 4615 <span slot="loggedout">Congratulations</span> 4616</np-logout>" 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"><<span class="hljs-name">np-logout</span>></span> 4798 Log out 4799 <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"loggingout"</span>></span>Logging out...<span class="hljs-tag"></<span class="hljs-name">span</span>>
4799</span> 4800 <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"loggedout"</span>></span>Congratulations<span class="hljs-tag"></<span class="hljs-name">span</span>></span> 4801<span class="hljs-tag"></<span class="hljs-name">np-logout</span>></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="{"name":"SectionSession","value":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="<!-- 'lifetime' equals to one day (24h) by default --> 5147<np-login></np-login> 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="<!-- 'lifetime' equals to one day (24h) by default --> 5213<np-login></np-login> 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"><!-- 'lifetime' equals to one day (24h) by default --></span> 5396<span class="hljs-tag"><<span class="hljs-name">np-login</span>></span><span class="hljs-tag"></<span class="hljs-name">np-login</span>></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="{"name":"SectionWhatsnext","value":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'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'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="{"name":"AppFooter","value":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.