@sondor-technology/sondor-components 1.0.1-develop.13 → 1.0.1-develop.15

package/dist/components/input/input.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, css } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js"; // Helper for optional attributes
+import { ifDefined } from "lit/directives/if-defined.js";
 import { resetStyles } from "../../styles/reset.js";
 let StInput = class StInput extends LitElement {
     constructor() {
@@ -17,43 +17,46 @@ let StInput = class StInput extends LitElement {
         this.placeholder = "";
         this.type = "text";
         this.helpText = "";
-        // Validation Properties
+        this.error = "";
         this.required = false;
         this.disabled = false;
         this.invalid = false;
         this.readonly = false;
         this._internals = this.attachInternals();
-        // 1. Trigger error state if the user clicks away and the field is invalid
         this.addEventListener("focusout", () => {
-            this.invalid = !this._inputEl.validity.valid;
+            this.invalid = !!this.error || !this._inputEl.validity.valid;
         });
-        // 2. Trigger error state if the st-form tries to submit and fails
         this.addEventListener("invalid", () => {
             this.invalid = true;
         });
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        // Sync the value to the form engine
         if (changedProperties.has("value")) {
             this._internals.setFormValue(this.value);
         }
-        // Sync validity whenever properties change (like value or required status)
-        this._syncValidity();
+        if (changedProperties.has("value") || changedProperties.has("error") || changedProperties.has("required")) {
+            this._syncValidity();
+        }
     }
     _syncValidity() {
         if (!this._inputEl)
             return;
-        // setValidity arguments: (ValidityState object, Custom Error Message, Anchor Element for Tooltip)
+        if (this.error) {
+            this._internals.setValidity({ customError: true }, this.error, this._inputEl);
+            this.invalid = true;
+            return;
+        }
         this._internals.setValidity(this._inputEl.validity, this._inputEl.validationMessage, this._inputEl);
+        if (this.invalid && this._inputEl.validity.valid) {
+            this.invalid = false;
+        }
     }
     formResetCallback() {
         this.value = "";
         this._internals.setFormValue("");
-        // Need to wait for the render cycle to finish before checking validity on reset
         this.updateComplete.then(() => this._syncValidity());
     }
-    // Expose standard native methods so external scripts can call them on the component
     checkValidity() {
         return this._internals.checkValidity();
     }
@@ -63,7 +66,7 @@ let StInput = class StInput extends LitElement {
     _handleInput(e) {
         const target = e.target;
         this.value = target.value;
-        if (this.invalid && target.validity.valid) {
+        if (this.invalid && target.validity.valid && !this.error) {
             this.invalid = false;
         }
         this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
@@ -72,6 +75,10 @@ let StInput = class StInput extends LitElement {
         this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
     }
     render() {
+        const descriptionId = this.error ? "error-text" : (this.helpText ? "help-text" : undefined);
+        const isSensitive = this.type === "password" || this.type === "email";
+        const safeSpellcheck = isSensitive ? "false" : undefined;
+        const safeAutocapitalize = isSensitive ? "none" : undefined;
         return html `
       <div class="form-control">
         ${this.label ? html `<label for="input">${this.label}</label>` : ""}
@@ -91,6 +98,11 @@ let StInput = class StInput extends LitElement {
             minlength=${ifDefined(this.minlength)}
             maxlength=${ifDefined(this.maxlength)}
             pattern=${ifDefined(this.pattern)}
+            autocomplete=${ifDefined(this.autocomplete)}
+            spellcheck=${ifDefined(safeSpellcheck)}
+            autocapitalize=${ifDefined(safeAutocapitalize)}
+            aria-invalid=${this.invalid ? "true" : "false"}
+            aria-describedby=${ifDefined(descriptionId)}
             @input=${this._handleInput}
             @change=${this._handleChange}
           />
@@ -98,12 +110,17 @@ let StInput = class StInput extends LitElement {
           <slot name="suffix"></slot>
         </div>
 
-        ${this.helpText ? html `<div class="help-text">${this.helpText}</div>` : ""}
+        ${this.error
+            ? html `<div id="error-text" class="error-text">${this.error}</div>`
+            : this.helpText
+                ? html `<div id="help-text" class="help-text">${this.helpText}</div>`
+                : ""}
       </div>
     `;
     }
 };
 StInput.formAssociated = true;
+StInput.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 StInput.styles = [
     resetStyles,
     css `
@@ -122,41 +139,34 @@ StInput.styles = [
         font-weight: var(--st-font-weight-medium);
         color: var(--st-color-text);
         margin-bottom: 0.5em;
+        cursor: pointer;
       }
 
-      /* 1. The Wrapper acts as the visual input field */
       .input-wrapper {
         display: flex;
         align-items: center;
         gap: var(--st-spacing-sm);
         width: 100%;
-
         background-color: var(--st-color-bg);
         border: 1px solid var(--st-color-border);
         border-radius: 4px;
-
-        /* Horizontal padding on the wrapper, vertical on the input */
         padding: 0 var(--st-spacing-md);
         transition:
           border-color 0.2s ease,
           box-shadow 0.2s ease;
       }
 
-      /* 2. Apply focus ring to the wrapper when the internal input is focused */
       .input-wrapper:focus-within {
         border-color: var(--st-color-primary);
         box-shadow: 0 0 0 1px var(--st-color-primary);
       }
 
-      /* 3. The actual input becomes transparent and fills the wrapper */
       input {
         flex: 1;
         width: 100%;
         border: none;
         background: transparent;
         outline: none;
-
-        /* Vertical padding stretches the wrapper */
         padding: var(--st-spacing-sm) 0;
         font-size: var(--st-font-size-base);
         color: var(--st-color-text);
@@ -166,58 +176,57 @@ StInput.styles = [
         color: var(--st-color-text-muted);
       }
 
-      /* Slotted Icons */
       ::slotted(svg) {
         width: 1.25em;
         height: 1.25em;
-        /* Default icons to the muted text color */
         color: var(--st-color-text-muted);
         fill: currentColor;
         flex-shrink: 0;
       }
 
-      /* Interactive Slotted Elements (like clear buttons) */
       ::slotted(st-button) {
-        /* Pull the button back slightly so it aligns nicely with the input padding */
         margin-right: calc(var(--st-spacing-sm) * -1);
       }
 
-      /* Invalid State */
+      .help-text {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+        margin: 0;
+      }
+
+      /* 🚀 NEW: Explicit error text styling */
+      .error-text {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-error, #dc2626);
+        margin: 0;
+        font-weight: 500;
+      }
+
       :host([invalid]) .input-wrapper {
-        border-color: var(--st-color-error);
+        border-color: var(--st-color-error, #dc2626);
       }
+
       :host([invalid]) .input-wrapper:focus-within {
-        box-shadow: 0 0 0 1px var(--st-color-error);
+        box-shadow: 0 0 0 1px var(--st-color-error, #dc2626);
       }
+
       :host([invalid]) .help-text {
-        color: var(--st-color-error);
+        color: var(--st-color-error, #dc2626);
       }
 
-      /* Disabled & Readonly States */
       :host([disabled]) .input-wrapper {
         opacity: 0.5;
         cursor: not-allowed;
         background-color: var(--st-color-surface);
       }
+
       :host([disabled]) input {
         cursor: not-allowed;
       }
+
       :host([readonly]) .input-wrapper {
         background-color: var(--st-color-surface);
       }
-
-      .help-text {
-        font-size: var(--st-font-size-xs);
-        color: var(--st-color-text-muted);
-        margin: 0;
-      }
-
-      :host([invalid]) .input-wrapper {
-        border-color: var(--st-color-error);
-      }
-      :host([invalid]) .help-text {
-        color: var(--st-color-error);
-      }
     `,
 ];
 __decorate([
@@ -241,6 +250,12 @@ __decorate([
 __decorate([
     property({ attribute: "help-text" })
 ], StInput.prototype, "helpText", void 0);
+__decorate([
+    property({ type: String })
+], StInput.prototype, "error", void 0);
+__decorate([
+    property({ type: String })
+], StInput.prototype, "autocomplete", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], StInput.prototype, "required", void 0);
@@ -266,3 +281,4 @@ StInput = __decorate([
     customElement("st-input")
 ], StInput);
 export { StInput };
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":"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"}

package/dist/components/link/link.d.ts

@@ -1,16 +1,16 @@
-import { LitElement } from 'lit';
+import { LitElement } from "lit";
 export declare class StLink extends LitElement {
     href: string;
-    target: '_blank' | '_self';
-    size: 'sm' | 'md' | 'lg';
-    variant: 'inline' | 'standalone';
-    color: 'default' | 'primary' | 'muted';
+    target: "_blank" | "_self";
+    size: "sm" | "md" | "lg";
+    variant: "inline" | "standalone";
+    color: "default" | "primary" | "muted";
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'st-link': StLink;
+        "st-link": StLink;
     }
 }
 //# sourceMappingURL=link.d.ts.map

package/dist/components/link/link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,SAAO;IACX,MAAM,EAAE,QAAQ,GAAG,OAAO,CAAW;IACtB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,QAAQ,GAAG,YAAY,CAAY;IAC5C,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAa;IAE9F,MAAM,CAAC,MAAM,4BAsEX;IAEF,MAAM,yCAML;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAK1C,qBACa,MAAO,SAAQ,UAAU;IACV,IAAI,SAAO;IACX,MAAM,EAAE,QAAQ,GAAG,OAAO,CAAW;IACtB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,OAAO,EAAE,QAAQ,GAAG,YAAY,CAAY;IAC5C,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAa;IAE5F,MAAM,CAAC,MAAM,4BAqFX;IAEF,MAAM,yCAcL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/link/link.js

@@ -4,21 +4,28 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { resetStyles } from "../../styles/reset.js";
 let StLink = class StLink extends LitElement {
     constructor() {
         super(...arguments);
-        this.href = '#';
-        this.target = '_self';
-        this.size = 'md';
-        this.variant = 'inline';
-        this.color = 'primary';
+        this.href = "#";
+        this.target = "_self";
+        this.size = "md";
+        this.variant = "inline";
+        this.color = "primary";
     }
     render() {
+        // SECURITY: Prevent XSS via javascript: URI injection
+        const sanitizedHref = this.href?.trim().toLowerCase().startsWith("javascript:")
+            ? "#blocked"
+            : this.href;
+        // SECURITY: Prevent Reverse Tabnabbing for external links
+        const secureRel = this.target === "_blank" ? "noopener noreferrer" : undefined;
         return html `
-      <a href="${this.href}" target="${this.target}">
+      <a href="${sanitizedHref}" target="${this.target}" rel="${ifDefined(secureRel)}">
         <slot></slot>
       </a>
     `;
@@ -29,7 +36,8 @@ StLink.styles = [
     css `
       :host {
         display: inline-flex;
-        align-items: center;
+        align-items: baseline; /* Ensures it sits perfectly inside a line of text */
+        vertical-align: baseline;
       }
 
       a {
@@ -38,7 +46,17 @@ StLink.styles = [
         gap: 0.25em;
         text-decoration: none;
         font-weight: 500;
-        transition: color 0.2s ease, opacity 0.2s ease;
+        transition:
+          color 0.2s ease,
+          opacity 0.2s ease,
+          text-decoration-thickness 0.2s ease;
+      }
+
+      /* Accessibility: Clear focus indicators for keyboard navigation */
+      a:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+        border-radius: 2px;
       }
 
       /* ==========================================================
@@ -68,24 +86,28 @@ StLink.styles = [
       /* ==========================================================
          Sizes
          ========================================================== */
-      :host([size="sm"]) a { font-size: 0.875rem; }
-      :host([size="md"]) a { font-size: 1rem; }
-      :host([size="lg"]) a { font-size: 1.125rem; }
+      :host([size="sm"]) a {
+        font-size: 0.875rem;
+      }
+      :host([size="md"]) a {
+        font-size: 1rem;
+      }
+      :host([size="lg"]) a {
+        font-size: 1.125rem;
+      }
 
       /* ==========================================================
          Variants
          ========================================================== */
-      /* inline links live inside paragraphs and underline on hover */
       :host([variant="inline"]) a {
         text-decoration: underline;
         text-underline-offset: 4px;
-        font-weight: inherit; /* Inherits from surrounding paragraph text */
+        font-weight: inherit;
       }
       :host([variant="inline"]) a:hover {
         text-decoration-thickness: 2px;
       }
 
-      /* standalone links (e.g., footers, sidebars) have no underline by default */
       :host([variant="standalone"]) a {
         text-decoration: none;
       }
@@ -93,7 +115,7 @@ StLink.styles = [
         text-decoration: underline;
         text-underline-offset: 4px;
       }
-    `
+    `,
 ];
 __decorate([
     property({ type: String })
@@ -111,6 +133,7 @@ __decorate([
     property({ type: String, reflect: true })
 ], StLink.prototype, "color", void 0);
 StLink = __decorate([
-    customElement('st-link')
+    customElement("st-link")
 ], StLink);
 export { StLink };
+//# sourceMappingURL=link.js.map

package/dist/components/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/components/link/link.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AACvD,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAG3C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QACqB,SAAI,GAAG,GAAG,CAAC;QACX,WAAM,GAAuB,OAAO,CAAC;QACtB,SAAI,GAAuB,IAAI,CAAC;QAChC,YAAO,GAA4B,QAAQ,CAAC;QAC5C,UAAK,GAAoC,SAAS,CAAC;IAwG9F,CAAC;IAfC,MAAM;QACJ,sDAAsD;QACtD,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC;YAC7E,CAAC,CAAC,UAAU;YACZ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;QAEd,0DAA0D;QAC1D,MAAM,SAAS,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;QAE/E,OAAO,IAAI,CAAA;iBACE,aAAa,aAAa,IAAI,CAAC,MAAM,UAAU,SAAS,CAAC,SAAS,CAAC;;;KAG/E,CAAC;IACJ,CAAC;CACF,CAAA;AAtGQ,aAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkFF;CACF,AArFY,CAqFX;AA3FwB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oCAAY;AACX;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;sCAAsC;AACtB;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oCAAiC;AAChC;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uCAA6C;AAC5C;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCAAoD;AALjF,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA6GlB"}

package/dist/components/metadata/metadata.d.ts

@@ -1,10 +1,10 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 export declare class StMetadata extends LitElement {
     pageTitle: string;
     description: string;
     image: string;
     protected createRenderRoot(): this;
-    updated(): void;
+    updated(changedProperties: PropertyValues<this>): void;
     private _updateMetadata;
     private _setMeta;
     private _setCanonical;
@@ -12,7 +12,7 @@ export declare class StMetadata extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'st-metadata': StMetadata;
+        "st-metadata": StMetadata;
     }
 }
 //# sourceMappingURL=metadata.d.ts.map

package/dist/components/metadata/metadata.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../../src/components/metadata/metadata.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,KAAK,CAAC;AAG1C,qBACa,UAAW,SAAQ,UAAU;IACZ,SAAS,SAAM;IACf,WAAW,SAAM;IACjB,KAAK,SAAM;IAEvC,SAAS,CAAC,gBAAgB,SAAmB;IAE7C,OAAO,SAEN;IAED,OAAO,CAAC,eAAe;IAsBvB,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,aAAa;IAUrB,MAAM,WAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"metadata.d.ts","sourceRoot":"","sources":["../../../src/components/metadata/metadata.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAW,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxD,qBACa,UAAW,SAAQ,UAAU;IACd,SAAS,SAAM;IACf,WAAW,SAAM;IACjB,KAAK,SAAM;IAErC,SAAS,CAAC,gBAAgB,SAEzB;IAGQ,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAGvD;IAED,OAAO,CAAC,eAAe;IAoBvB,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,aAAa;IAUrB,MAAM,WAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/metadata/metadata.js

@@ -4,53 +4,55 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
 let StMetadata = class StMetadata extends LitElement {
     constructor() {
         super(...arguments);
-        this.pageTitle = '';
-        this.description = '';
-        this.image = '';
+        this.pageTitle = "";
+        this.description = "";
+        this.image = "";
     }
-    createRenderRoot() { return this; }
-    updated() {
+    createRenderRoot() {
+        return this;
+    }
+    // 🚀 Added strict PropertyValues typing and super call
+    updated(changedProperties) {
+        super.updated(changedProperties);
         this._updateMetadata();
     }
     _updateMetadata() {
-        // Read site name from environment variable (e.g., VITE_SITE_NAME)
-        const siteName = import.meta.env?.VITE_SITE_NAME || '';
+        const siteName = import.meta.env?.VITE_SITE_NAME || "";
         if (this.pageTitle) {
-            // If site name is configured, append it; otherwise use the title standalone
             document.title = siteName ? `${this.pageTitle} - ${siteName}` : this.pageTitle;
-            this._setMeta('property', 'og:title', this.pageTitle);
+            this._setMeta("property", "og:title", this.pageTitle);
         }
         if (this.description) {
-            this._setMeta('name', 'description', this.description);
-            this._setMeta('property', 'og:description', this.description);
+            this._setMeta("name", "description", this.description);
+            this._setMeta("property", "og:description", this.description);
         }
         if (this.image) {
-            this._setMeta('property', 'og:image', this.image);
+            this._setMeta("property", "og:image", this.image);
         }
         this._setCanonical(window.location.href);
     }
     _setMeta(attrName, attrValue, content) {
         let meta = document.head.querySelector(`meta[${attrName}="${attrValue}"]`);
         if (!meta) {
-            meta = document.createElement('meta');
+            meta = document.createElement("meta");
             meta.setAttribute(attrName, attrValue);
             document.head.appendChild(meta);
         }
-        meta.setAttribute('content', content);
+        meta.setAttribute("content", content);
     }
     _setCanonical(url) {
         let link = document.head.querySelector('link[rel="canonical"]');
         if (!link) {
-            link = document.createElement('link');
-            link.setAttribute('rel', 'canonical');
+            link = document.createElement("link");
+            link.setAttribute("rel", "canonical");
             document.head.appendChild(link);
         }
-        link.setAttribute('href', url);
+        link.setAttribute("href", url);
     }
     render() {
         return nothing;
@@ -66,6 +68,7 @@ __decorate([
     property({ type: String })
 ], StMetadata.prototype, "image", void 0);
 StMetadata = __decorate([
-    customElement('st-metadata')
+    customElement("st-metadata")
 ], StMetadata);
 export { StMetadata };
+//# sourceMappingURL=metadata.js.map

package/dist/components/metadata/metadata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metadata.js","sourceRoot":"","sources":["../../../src/components/metadata/metadata.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AACxD,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAGnD,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACqB,cAAS,GAAG,EAAE,CAAC;QACf,gBAAW,GAAG,EAAE,CAAC;QACjB,UAAK,GAAG,EAAE,CAAC;IAuDvC,CAAC;IArDW,gBAAgB;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,uDAAuD;IAC9C,OAAO,CAAC,iBAAuC;QACtD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,eAAe;QACrB,MAAM,QAAQ,GAAI,OAAO,IAAY,CAAC,GAAG,EAAE,cAAc,IAAI,EAAE,CAAC;QAEhE,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,MAAM,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;YAC/E,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACxD,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YACvD,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,gBAAgB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QAChE,CAAC;QAED,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACpD,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC;IAEO,QAAQ,CAAC,QAA6B,EAAE,SAAiB,EAAE,OAAe;QAChF,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,QAAQ,KAAK,SAAS,IAAI,CAAC,CAAC;QAC3E,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACtC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;YACvC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IACxC,CAAC;IAEO,aAAa,CAAC,GAAW;QAC/B,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAChE,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YACtC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;YACtC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;QACD,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,CAAC;IAED,MAAM;QACJ,OAAO,OAAO,CAAC;IACjB,CAAC;CACF,CAAA;AAzD2B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CAAgB;AACf;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;+CAAkB;AACjB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCAAY;AAH1B,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CA0DtB"}

package/dist/components/modal/modal.d.ts

@@ -1,25 +1,13 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 export declare class StModal extends LitElement {
-    /**
-     * Controls whether the modal is open.
-     */
     open: boolean;
-    /**
-     * Title text displayed in the modal header.
-     */
     heading: string;
-    /**
-     * Size of the modal (sm, md, lg, xl, xxl).
-     */
-    size: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-    /**
-     * If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
-     */
+    size: "sm" | "md" | "lg" | "xl" | "xxl";
     static: boolean;
     private dialogEl;
     private isClosing;
     static styles: import("lit").CSSResult[];
-    updated(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues<this>): void;
     private closeWithAnimation;
     private handleClose;
     private handleCancel;
@@ -29,7 +17,7 @@ export declare class StModal extends LitElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'st-modal': StModal;
+        "st-modal": StModal;
     }
 }
 //# sourceMappingURL=modal.d.ts.map

package/dist/components/modal/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAIrE,qBACa,OAAQ,SAAQ,UAAU;IACrC;;OAEG;IACyC,IAAI,UAAS;IAEzD;;OAEG;IACyB,OAAO,SAAM;IAEzC;;OAEG;IACyB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAE3E;;OAEG;IAC0B,MAAM,UAAS;IAE3B,OAAO,CAAC,QAAQ,CAAqB;IAEtD,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,CAAC,MAAM,4BAkHX;IAEF,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAYxC;IAED,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,mBAAmB;IAe3B,MAAM,yCA4BL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAU,MAAM,KAAK,CAAC;AAInE,qBACa,OAAQ,SAAQ,UAAU;IACK,IAAI,UAAS;IAC7B,OAAO,SAAM;IACb,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAC9C,MAAM,UAAS;IAEzB,OAAO,CAAC,QAAQ,CAAqB;IAEtD,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,CAAC,MAAM,4BAiJX;IAGO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAcvD;IAED,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,mBAAmB;IAe3B,MAAM,yCA2CL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}