@skdx/web-components-blocks 0.1.0

package/dist/page-container/PageContainer.js

@@ -0,0 +1,29 @@
+var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var r=(o,a,i,s)=>{for(var t=s>1?void 0:s?m(a,i):a,l=o.length-1,d;l>=0;l--)(d=o[l])&&(t=(s?d(a,i,t):d(t))||t);return s&&t&&p(a,i,t),t};import{html as c,LitElement as u,nothing as b}from"lit";import{property as n}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{placeSlotted as h}from"../internal/slots.js";import"@skdx/web-components/breadcrumb";import"@skdx/web-components/heading";import"@skdx/web-components/toolbar";var k="data-skdx-page-container-generated",v=0,e=class extends u{constructor(){super(...arguments);this.headingLevel=1;this.breadcrumbLabel="Breadcrumb";this.actionsLabel="Page actions";this.titleId=`skdx-page-container-title-${++v}`}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),queueMicrotask(()=>this.requestUpdate())}get hasActions(){return this.querySelector('[slot="actions"]')!==null}region(i){return this.querySelector(`.skdx-page-container__${i}`)}updated(){h(this,k,{actions:this.region("actions")},this.region("content"))}render(){return c`
+      <header
+        class="skdx-page-container__header"
+        data-skdx-page-container-generated
+        role="none"
+      >
+        ${this.breadcrumbs?.length?c`<skdx-breadcrumb
+                class="skdx-page-container__breadcrumbs"
+                label=${this.breadcrumbLabel}
+                .items=${this.breadcrumbs}
+              ></skdx-breadcrumb>`:b}
+        <div class="skdx-page-container__heading-row">
+          <skdx-heading
+            class="skdx-page-container__title"
+            as=${`h${this.headingLevel}`}
+            id=${this.titleId}
+            >${this.title??""}</skdx-heading
+          >
+          ${this.hasActions?c`<skdx-toolbar
+                  class="skdx-page-container__actions"
+                  aria-label=${this.actionsLabel}
+                ></skdx-toolbar>`:b}
+        </div>
+      </header>
+      <div
+        class="skdx-page-container__content"
+        data-skdx-page-container-generated
+      ></div>
+    `}};r([n({type:String})],e.prototype,"title",2),r([n({type:Number,attribute:"heading-level"})],e.prototype,"headingLevel",2),r([n({attribute:!1})],e.prototype,"breadcrumbs",2),r([n({type:String,attribute:"breadcrumb-label"})],e.prototype,"breadcrumbLabel",2),r([n({type:String,attribute:"actions-label"})],e.prototype,"actionsLabel",2),e=r([g("skdx-page-container","page-container","root")],e);export{e as SkdxPageContainer};

package/dist/page-container/index.cjs

@@ -0,0 +1 @@
+"use strict";var o=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var k=(r,e)=>{for(var n in e)o(r,n,{get:e[n],enumerable:!0})},m=(r,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of g(e))!i.call(r,a)&&a!==n&&o(r,a,{get:()=>e[a],enumerable:!(t=x(e,a))||t.enumerable});return r};var p=r=>m(o({},"__esModule",{value:!0}),r);var C={};k(C,{SkdxPageContainer:()=>d.SkdxPageContainer});module.exports=p(C);var d=require("./PageContainer.cjs");0&&(module.exports={SkdxPageContainer});

package/dist/page-container/index.d.cts

@@ -0,0 +1 @@
+export { SkdxPageContainer, type SkdxPageContainerBreadcrumb } from './PageContainer.cjs';

package/dist/page-container/index.d.ts

@@ -0,0 +1 @@
+export { SkdxPageContainer, type SkdxPageContainerBreadcrumb } from './PageContainer.js';

package/dist/page-container/index.js

@@ -0,0 +1 @@
+import{SkdxPageContainer as a}from"./PageContainer.js";export{a as SkdxPageContainer};

package/dist/sign-in-page/SignInPage.cjs

@@ -0,0 +1,63 @@
+"use strict";var m=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var f=(s,r)=>{for(var e in r)m(s,e,{get:r[e],enumerable:!0})},_=(s,r,e,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of x(r))!h.call(s,t)&&t!==e&&m(s,t,{get:()=>r[t],enumerable:!(i=c(r,t))||i.enumerable});return s};var L=s=>_(m({},"__esModule",{value:!0}),s),l=(s,r,e,i)=>{for(var t=i>1?void 0:i?c(r,e):r,p=s.length-1,a;p>=0;p--)(a=s[p])&&(t=(i?a(r,e,t):a(t))||t);return i&&t&&m(r,e,t),t};var y={};f(y,{SkdxSignInPage:()=>d,defaultProviderLabel:()=>k});module.exports=L(y);var n=require("lit"),o=require("lit/decorators.js"),v=require("../internal/define.cjs"),g=require("../internal/events.cjs"),E=require("@skdx/web-components/alert"),S=require("@skdx/web-components/button"),I=require("@skdx/web-components/divider"),R=require("@skdx/web-components/field"),T=require("@skdx/web-components/form"),D=require("@skdx/web-components/heading"),q=require("@skdx/web-components/password-input"),M=require("@skdx/web-components/text-field");function k(s){return`Sign in with ${s.name}`}var u=new Set(["credentials","magic-link"]),$=0,d=class extends n.LitElement{constructor(){super(...arguments);this.title="Sign in";this.emailLabel="Email";this.passwordLabel="Password";this.submitLabel="Sign in";this.magicLinkLabel="Send magic link";this.titleId=`skdx-sign-in-page-title-${++$}`;this.handleSubmit=e=>{let i=e.target?.closest("skdx-form[data-provider]");if(!i)return;e.preventDefault();let t=i.getAttribute("data-provider")??"",p=b(i,"email");(0,g.emit)(this,"sign-in",t==="credentials"?{providerId:t,email:p,password:b(i,"password")}:{providerId:t,email:p})}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit)}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}signInWithProvider(e){(0,g.emit)(this,"sign-in",{providerId:e})}signInForm(e){let i=e.id==="credentials";return n.html`<skdx-form
+      class="skdx-sign-in-page__form"
+      data-provider=${e.id}
+    >
+      <form>
+        <skdx-field
+          class="skdx-sign-in-page__field"
+          label=${this.emailLabel}
+          required
+        >
+          <skdx-text-field
+            name="email"
+            type="email"
+            required
+          >
+            <skdx-text-field-input
+              type="email"
+              autocomplete="email"
+            ></skdx-text-field-input>
+          </skdx-text-field>
+        </skdx-field>
+        ${i?n.html`<skdx-field
+                class="skdx-sign-in-page__field"
+                label=${this.passwordLabel}
+                required
+              >
+                <skdx-password-input
+                  name="password"
+                  required
+                ></skdx-password-input>
+              </skdx-field>`:n.nothing}
+        <skdx-button
+          class="skdx-sign-in-page__submit"
+          type="submit"
+          >${i?this.submitLabel:this.magicLinkLabel}</skdx-button
+        >
+      </form>
+    </skdx-form>`}render(){let e=this.providers??[],i=e.filter(a=>!u.has(a.id)),t=e.filter(a=>u.has(a.id)),p=this.getProviderLabel??k;return n.html`
+      <div class="skdx-sign-in-page__panel">
+        <skdx-heading
+          class="skdx-sign-in-page__title"
+          as="h1"
+          id=${this.titleId}
+          >${this.title}</skdx-heading
+        >
+        ${this.error?n.html`<skdx-alert
+                class="skdx-sign-in-page__error"
+                data-status="danger"
+                >${this.error}</skdx-alert
+              >`:n.nothing}
+        ${i.length?n.html`<div class="skdx-sign-in-page__providers">
+                ${i.map(a=>n.html`<skdx-button
+                      class="skdx-sign-in-page__provider"
+                      type="button"
+                      data-provider=${a.id}
+                      @click=${()=>this.signInWithProvider(a.id)}
+                      >${p(a)}</skdx-button
+                    >`)}
+              </div>`:n.nothing}
+        ${i.length&&t.length?n.html`<skdx-divider class="skdx-sign-in-page__divider"></skdx-divider>`:n.nothing}
+        ${t.map(a=>this.signInForm(a))}
+      </div>
+    `}};l([(0,o.property)({type:String})],d.prototype,"title",2),l([(0,o.property)({attribute:!1})],d.prototype,"providers",2),l([(0,o.property)({type:String})],d.prototype,"error",2),l([(0,o.property)({type:String,attribute:"email-label"})],d.prototype,"emailLabel",2),l([(0,o.property)({type:String,attribute:"password-label"})],d.prototype,"passwordLabel",2),l([(0,o.property)({type:String,attribute:"submit-label"})],d.prototype,"submitLabel",2),l([(0,o.property)({type:String,attribute:"magic-link-label"})],d.prototype,"magicLinkLabel",2),l([(0,o.property)({attribute:!1})],d.prototype,"getProviderLabel",2),d=l([(0,v.customElement)("skdx-sign-in-page","sign-in-page","root")],d);function b(s,r){return s.querySelector(`[name="${r}"]`)?.value??""}0&&(module.exports={SkdxSignInPage,defaultProviderLabel});

package/dist/sign-in-page/SignInPage.d.cts

@@ -0,0 +1,101 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/alert';
+import '@skdx/web-components/button';
+import '@skdx/web-components/divider';
+import '@skdx/web-components/field';
+import '@skdx/web-components/form';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/password-input';
+import '@skdx/web-components/text-field';
+/** One way to sign in, rendered as a provider button or as one of the two forms. */
+export interface SkdxSignInProvider {
+    /** The provider's id; `'credentials'` and `'magic-link'` render forms, anything else a button. */
+    id: string;
+    /** The provider's display name, which the default button label reads. */
+    name: string;
+}
+/** What a `sign-in` event carries: the chosen provider, plus the values of the form that submitted. */
+export interface SkdxSignInDetail {
+    /** The `id` of the provider the user chose. */
+    providerId: string;
+    /** The email the submitted form held; absent for a provider button. */
+    email?: string;
+    /** The password the credentials form held; absent otherwise. */
+    password?: string;
+}
+/** Default provider button text, reading "Sign in with Google" for a provider named Google. */
+export declare function defaultProviderLabel(provider: SkdxSignInProvider): string;
+/**
+ * Sign-in block: provider buttons, an email and password form, and a magic-link form.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-sign-in-page` on the host, then `__panel`, `__title`,
+ * `__error`, `__providers`, `__provider`, `__divider`, `__form`, `__field`
+ * and `__submit`.
+ *
+ * @example
+ * ```html
+ * <skdx-sign-in-page id="sign-in"></skdx-sign-in-page>
+ * <script>
+ *   const page = document.getElementById('sign-in');
+ *   page.providers = [{ id: 'credentials', name: 'Email' }];
+ *   page.addEventListener('sign-in', (event) => console.log(event.detail));
+ * </script>
+ * ```
+ *
+ * @fires sign-in - Fires with `{ providerId, email?, password? }` when a provider button is activated or a form submits with valid fields.
+ */
+export declare class SkdxSignInPage extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Sign in'
+     */
+    title: string;
+    /** The ways to sign in, in render order; `'credentials'` and `'magic-link'` render their forms. */
+    providers: readonly SkdxSignInProvider[];
+    /**
+     * Message rendered into a derived error Alert above the providers. The block never clears it.
+     * @default undefined — no alert renders.
+     */
+    error?: string;
+    /**
+     * Label of the email field in both forms.
+     * @default 'Email'
+     */
+    emailLabel: string;
+    /**
+     * Label of the password field in the credentials form.
+     * @default 'Password'
+     */
+    passwordLabel: string;
+    /**
+     * Text of the credentials form submit button.
+     * @default 'Sign in'
+     */
+    submitLabel: string;
+    /**
+     * Text of the magic-link form submit button.
+     * @default 'Send magic link'
+     */
+    magicLinkLabel: string;
+    /**
+     * Formats a provider button's text from its entry.
+     * @default defaultProviderLabel — reads "Sign in with Google".
+     */
+    getProviderLabel?: (provider: SkdxSignInProvider) => string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleSubmit;
+    private signInWithProvider;
+    private signInForm;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-sign-in-page': SkdxSignInPage;
+    }
+}

package/dist/sign-in-page/SignInPage.d.ts

@@ -0,0 +1,101 @@
+import { LitElement, type TemplateResult } from 'lit';
+import '@skdx/web-components/alert';
+import '@skdx/web-components/button';
+import '@skdx/web-components/divider';
+import '@skdx/web-components/field';
+import '@skdx/web-components/form';
+import '@skdx/web-components/heading';
+import '@skdx/web-components/password-input';
+import '@skdx/web-components/text-field';
+/** One way to sign in, rendered as a provider button or as one of the two forms. */
+export interface SkdxSignInProvider {
+    /** The provider's id; `'credentials'` and `'magic-link'` render forms, anything else a button. */
+    id: string;
+    /** The provider's display name, which the default button label reads. */
+    name: string;
+}
+/** What a `sign-in` event carries: the chosen provider, plus the values of the form that submitted. */
+export interface SkdxSignInDetail {
+    /** The `id` of the provider the user chose. */
+    providerId: string;
+    /** The email the submitted form held; absent for a provider button. */
+    email?: string;
+    /** The password the credentials form held; absent otherwise. */
+    password?: string;
+}
+/** Default provider button text, reading "Sign in with Google" for a provider named Google. */
+export declare function defaultProviderLabel(provider: SkdxSignInProvider): string;
+/**
+ * Sign-in block: provider buttons, an email and password form, and a magic-link form.
+ *
+ * Renders light DOM, so its parts are classes rather than shadow `::part()`
+ * targets: `.skdx-sign-in-page` on the host, then `__panel`, `__title`,
+ * `__error`, `__providers`, `__provider`, `__divider`, `__form`, `__field`
+ * and `__submit`.
+ *
+ * @example
+ * ```html
+ * <skdx-sign-in-page id="sign-in"></skdx-sign-in-page>
+ * <script>
+ *   const page = document.getElementById('sign-in');
+ *   page.providers = [{ id: 'credentials', name: 'Email' }];
+ *   page.addEventListener('sign-in', (event) => console.log(event.detail));
+ * </script>
+ * ```
+ *
+ * @fires sign-in - Fires with `{ providerId, email?, password? }` when a provider button is activated or a form submits with valid fields.
+ */
+export declare class SkdxSignInPage extends LitElement {
+    /** Light DOM, so `@skdx/skins` and consumer CSS reach the composed core elements. */
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    /**
+     * Heading text, rendered into a derived `<h1>` that names the section.
+     * @default 'Sign in'
+     */
+    title: string;
+    /** The ways to sign in, in render order; `'credentials'` and `'magic-link'` render their forms. */
+    providers: readonly SkdxSignInProvider[];
+    /**
+     * Message rendered into a derived error Alert above the providers. The block never clears it.
+     * @default undefined — no alert renders.
+     */
+    error?: string;
+    /**
+     * Label of the email field in both forms.
+     * @default 'Email'
+     */
+    emailLabel: string;
+    /**
+     * Label of the password field in the credentials form.
+     * @default 'Password'
+     */
+    passwordLabel: string;
+    /**
+     * Text of the credentials form submit button.
+     * @default 'Sign in'
+     */
+    submitLabel: string;
+    /**
+     * Text of the magic-link form submit button.
+     * @default 'Send magic link'
+     */
+    magicLinkLabel: string;
+    /**
+     * Formats a provider button's text from its entry.
+     * @default defaultProviderLabel — reads "Sign in with Google".
+     */
+    getProviderLabel?: (provider: SkdxSignInProvider) => string;
+    /** Generated title id, published as the section's `aria-labelledby`. */
+    private readonly titleId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleSubmit;
+    private signInWithProvider;
+    private signInForm;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-sign-in-page': SkdxSignInPage;
+    }
+}

package/dist/sign-in-page/SignInPage.js

@@ -0,0 +1,63 @@
+var b=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var n=(l,o,t,e)=>{for(var i=e>1?void 0:e?v(o,t):o,a=l.length-1,r;a>=0;a--)(r=l[a])&&(i=(e?r(o,t,i):r(i))||i);return e&&i&&b(o,t,i),i};import{html as p,LitElement as k,nothing as m}from"lit";import{property as d}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{emit as g}from"../internal/events.js";import"@skdx/web-components/alert";import"@skdx/web-components/button";import"@skdx/web-components/divider";import"@skdx/web-components/field";import"@skdx/web-components/form";import"@skdx/web-components/heading";import"@skdx/web-components/password-input";import"@skdx/web-components/text-field";function h(l){return`Sign in with ${l.name}`}var c=new Set(["credentials","magic-link"]),f=0,s=class extends k{constructor(){super(...arguments);this.title="Sign in";this.emailLabel="Email";this.passwordLabel="Password";this.submitLabel="Sign in";this.magicLinkLabel="Send magic link";this.titleId=`skdx-sign-in-page-title-${++f}`;this.handleSubmit=t=>{let e=t.target?.closest("skdx-form[data-provider]");if(!e)return;t.preventDefault();let i=e.getAttribute("data-provider")??"",a=u(e,"email");g(this,"sign-in",i==="credentials"?{providerId:i,email:a,password:u(e,"password")}:{providerId:i,email:a})}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.setAttribute("role","region"),this.setAttribute("aria-labelledby",this.titleId),this.addEventListener("submit",this.handleSubmit)}disconnectedCallback(){this.removeEventListener("submit",this.handleSubmit),super.disconnectedCallback()}signInWithProvider(t){g(this,"sign-in",{providerId:t})}signInForm(t){let e=t.id==="credentials";return p`<skdx-form
+      class="skdx-sign-in-page__form"
+      data-provider=${t.id}
+    >
+      <form>
+        <skdx-field
+          class="skdx-sign-in-page__field"
+          label=${this.emailLabel}
+          required
+        >
+          <skdx-text-field
+            name="email"
+            type="email"
+            required
+          >
+            <skdx-text-field-input
+              type="email"
+              autocomplete="email"
+            ></skdx-text-field-input>
+          </skdx-text-field>
+        </skdx-field>
+        ${e?p`<skdx-field
+                class="skdx-sign-in-page__field"
+                label=${this.passwordLabel}
+                required
+              >
+                <skdx-password-input
+                  name="password"
+                  required
+                ></skdx-password-input>
+              </skdx-field>`:m}
+        <skdx-button
+          class="skdx-sign-in-page__submit"
+          type="submit"
+          >${e?this.submitLabel:this.magicLinkLabel}</skdx-button
+        >
+      </form>
+    </skdx-form>`}render(){let t=this.providers??[],e=t.filter(r=>!c.has(r.id)),i=t.filter(r=>c.has(r.id)),a=this.getProviderLabel??h;return p`
+      <div class="skdx-sign-in-page__panel">
+        <skdx-heading
+          class="skdx-sign-in-page__title"
+          as="h1"
+          id=${this.titleId}
+          >${this.title}</skdx-heading
+        >
+        ${this.error?p`<skdx-alert
+                class="skdx-sign-in-page__error"
+                data-status="danger"
+                >${this.error}</skdx-alert
+              >`:m}
+        ${e.length?p`<div class="skdx-sign-in-page__providers">
+                ${e.map(r=>p`<skdx-button
+                      class="skdx-sign-in-page__provider"
+                      type="button"
+                      data-provider=${r.id}
+                      @click=${()=>this.signInWithProvider(r.id)}
+                      >${a(r)}</skdx-button
+                    >`)}
+              </div>`:m}
+        ${e.length&&i.length?p`<skdx-divider class="skdx-sign-in-page__divider"></skdx-divider>`:m}
+        ${i.map(r=>this.signInForm(r))}
+      </div>
+    `}};n([d({type:String})],s.prototype,"title",2),n([d({attribute:!1})],s.prototype,"providers",2),n([d({type:String})],s.prototype,"error",2),n([d({type:String,attribute:"email-label"})],s.prototype,"emailLabel",2),n([d({type:String,attribute:"password-label"})],s.prototype,"passwordLabel",2),n([d({type:String,attribute:"submit-label"})],s.prototype,"submitLabel",2),n([d({type:String,attribute:"magic-link-label"})],s.prototype,"magicLinkLabel",2),n([d({attribute:!1})],s.prototype,"getProviderLabel",2),s=n([x("skdx-sign-in-page","sign-in-page","root")],s);function u(l,o){return l.querySelector(`[name="${o}"]`)?.value??""}export{s as SkdxSignInPage,h as defaultProviderLabel};

package/dist/sign-in-page/index.cjs

@@ -0,0 +1 @@
+"use strict";var S=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var o=Object.prototype.hasOwnProperty;var x=(d,e)=>{for(var n in e)S(d,n,{get:e[n],enumerable:!0})},k=(d,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of g(e))!o.call(d,i)&&i!==n&&S(d,i,{get:()=>e[i],enumerable:!(t=a(e,i))||t.enumerable});return d};var l=d=>k(S({},"__esModule",{value:!0}),d);var p={};x(p,{SkdxSignInPage:()=>r.SkdxSignInPage,defaultProviderLabel:()=>r.defaultProviderLabel});module.exports=l(p);var r=require("./SignInPage.cjs");0&&(module.exports={SkdxSignInPage,defaultProviderLabel});

package/dist/sign-in-page/index.d.cts

@@ -0,0 +1 @@
+export { defaultProviderLabel, SkdxSignInPage, type SkdxSignInDetail, type SkdxSignInProvider, } from './SignInPage.cjs';

package/dist/sign-in-page/index.d.ts

@@ -0,0 +1 @@
+export { defaultProviderLabel, SkdxSignInPage, type SkdxSignInDetail, type SkdxSignInProvider, } from './SignInPage.js';

package/dist/sign-in-page/index.js

@@ -0,0 +1 @@
+import{defaultProviderLabel as i,SkdxSignInPage as n}from"./SignInPage.js";export{n as SkdxSignInPage,i as defaultProviderLabel};

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@skdx/web-components-blocks",
+  "version": "0.1.0",
+  "description": "Web Components blocks for the SkandaDX design system — page-level compositions of @skdx/web-components styled by @skdx/skins",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://github.com/SkandaDX/ui.skdx/tree/main/packages/web-components-blocks#readme",
+  "repository": {
+    "directory": "packages/web-components-blocks",
+    "type": "git",
+    "url": "git+https://github.com/SkandaDX/ui.skdx.git"
+  },
+  "bugs": {
+    "url": "https://github.com/SkandaDX/ui.skdx/issues"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=18.18.0"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "customElements": "custom-elements.json",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./dashboard-layout": {
+      "import": {
+        "types": "./dist/dashboard-layout/index.d.ts",
+        "default": "./dist/dashboard-layout/index.js"
+      },
+      "require": {
+        "types": "./dist/dashboard-layout/index.d.cts",
+        "default": "./dist/dashboard-layout/index.cjs"
+      }
+    },
+    "./package.json": "./package.json",
+    "./page-container": {
+      "import": {
+        "types": "./dist/page-container/index.d.ts",
+        "default": "./dist/page-container/index.js"
+      },
+      "require": {
+        "types": "./dist/page-container/index.d.cts",
+        "default": "./dist/page-container/index.cjs"
+      }
+    },
+    "./sign-in-page": {
+      "import": {
+        "types": "./dist/sign-in-page/index.d.ts",
+        "default": "./dist/sign-in-page/index.js"
+      },
+      "require": {
+        "types": "./dist/sign-in-page/index.d.cts",
+        "default": "./dist/sign-in-page/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "custom-elements.json",
+    "!dist/**/*.md",
+    "!dist/**/*.test.*",
+    "!dist/**/*.map"
+  ],
+  "sideEffects": [
+    "./dist/dashboard-layout/DashboardLayout.cjs",
+    "./dist/dashboard-layout/DashboardLayout.js",
+    "./dist/dashboard-layout/index.cjs",
+    "./dist/dashboard-layout/index.js",
+    "./dist/index.cjs",
+    "./dist/index.js",
+    "./dist/page-container/PageContainer.cjs",
+    "./dist/page-container/PageContainer.js",
+    "./dist/page-container/index.cjs",
+    "./dist/page-container/index.js",
+    "./dist/sign-in-page/SignInPage.cjs",
+    "./dist/sign-in-page/SignInPage.js",
+    "./dist/sign-in-page/index.cjs",
+    "./dist/sign-in-page/index.js"
+  ],
+  "peerDependencies": {
+    "lit": "^3.3.0",
+    "@skdx/web-components": "^0.33.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@vitest/coverage-v8": "^4.1.10",
+    "axe-core": "^4.12.1",
+    "jsdom": "^29.1.1",
+    "lit": "^3.3.0",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10",
+    "@skdx/web-components": "0.33.0"
+  },
+  "scripts": {
+    "lint": "eslint . --cache --cache-location node_modules/.cache/eslint/",
+    "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsup && tsc -p tsconfig.build.json --emitDeclarationOnly && node ../../scripts/declarations-cjs.mjs",
+    "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.test.ts\" --outdir .",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit --incremental --tsBuildInfoFile node_modules/.cache/tsc/typecheck.tsbuildinfo",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}