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

package/src/components/page-layout/page-layout.ts

@@ -1,41 +1,44 @@
-import { LitElement, html, css, PropertyValues } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
 
-export type LayoutVariant = 'app-shell' | 'content-sidebar' | 'single-column' | 'three-column';
+export type LayoutVariant = "app-shell" | "content-sidebar" | "single-column" | "three-column";
 
-@customElement('st-page-layout')
+@customElement("st-page-layout")
 export class StPageLayout extends LitElement {
   /**
    * Defines the structural layout variant to render.
    */
-  @property({ type: String, reflect: true })
-  variant: LayoutVariant = 'single-column';
+  @property({type: String, reflect: true})
+  variant: LayoutVariant = "single-column";
 
   /**
    * Maximum width for the left sidebar section (e.g., '20rem', '300px').
    */
-  @property({ type: String, attribute: 'sidebar-width' })
-  sidebarWidth = '';
+  @property({type: String, attribute: "sidebar-width"})
+  sidebarWidth = "";
 
   /**
    * Maximum width for the right sidebar section (e.g., '16rem', '250px').
    */
-  @property({ type: String, attribute: 'right-sidebar-width' })
-  rightSidebarWidth = '';
+  @property({type: String, attribute: "right-sidebar-width"})
+  rightSidebarWidth = "";
 
   /**
    * Optional maximum width for the main content area (e.g., '48rem', '800px').
    */
-  @property({ type: String, attribute: 'main-max-width' })
-  mainMaxWidth = '';
+  @property({type: String, attribute: "main-max-width"})
+  mainMaxWidth = "";
 
   /**
    * When true, expands the main content area to fill 100% of the available width between sidebars.
    */
-  @property({ type: Boolean, attribute: 'fill-main', reflect: true })
+  @property({type: Boolean, attribute: "fill-main", reflect: true})
   fillMain = false;
 
+  @property({type: Boolean, attribute: "clear-footer-padding", reflect: true})
+  clearFooterPadding = false;
+
   @state()
   private _mobileMenuOpen = false;
 
@@ -46,27 +49,27 @@ export class StPageLayout extends LitElement {
   override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('sidebarWidth')) {
+    if (changedProperties.has("sidebarWidth")) {
       if (this.sidebarWidth) {
-        this.style.setProperty('--layout-sidebar-width', this.sidebarWidth);
+        this.style.setProperty("--layout-sidebar-width", this.sidebarWidth);
       } else {
-        this.style.removeProperty('--layout-sidebar-width');
+        this.style.removeProperty("--layout-sidebar-width");
       }
     }
 
-    if (changedProperties.has('rightSidebarWidth')) {
+    if (changedProperties.has("rightSidebarWidth")) {
       if (this.rightSidebarWidth) {
-        this.style.setProperty('--layout-right-sidebar-width', this.rightSidebarWidth);
+        this.style.setProperty("--layout-right-sidebar-width", this.rightSidebarWidth);
       } else {
-        this.style.removeProperty('--layout-right-sidebar-width');
+        this.style.removeProperty("--layout-right-sidebar-width");
       }
     }
 
-    if (changedProperties.has('mainMaxWidth')) {
+    if (changedProperties.has("mainMaxWidth")) {
       if (this.mainMaxWidth) {
-        this.style.setProperty('--layout-main-max-width', this.mainMaxWidth);
+        this.style.setProperty("--layout-main-max-width", this.mainMaxWidth);
       } else {
-        this.style.removeProperty('--layout-main-max-width');
+        this.style.removeProperty("--layout-main-max-width");
       }
     }
   }
@@ -82,9 +85,9 @@ export class StPageLayout extends LitElement {
   // Only close if an actual navigation link/item was clicked
   private _handleNavClick = (e: MouseEvent) => {
     const path = e.composedPath();
-    const clickedLink = path.some(node => {
+    const clickedLink = path.some((node) => {
       const el = node as HTMLElement;
-      return el.tagName === 'A' || el.tagName === 'ST-VERTICAL-NAV-ITEM';
+      return el.tagName === "A" || el.tagName === "ST-VERTICAL-NAV-ITEM";
     });
 
     if (clickedLink) {
@@ -97,7 +100,7 @@ export class StPageLayout extends LitElement {
     this._touchStartX = e.touches[0].clientX;
     this._isDragging = true;
     const sidebar = e.currentTarget as HTMLElement;
-    sidebar.style.transition = 'none';
+    sidebar.style.transition = "none";
   };
 
   private _handleTouchMove = (e: TouchEvent) => {
@@ -116,13 +119,13 @@ export class StPageLayout extends LitElement {
     if (!this._isDragging || window.innerWidth >= 768) return;
     this._isDragging = false;
     const sidebar = e.currentTarget as HTMLElement;
-    sidebar.style.transition = '';
+    sidebar.style.transition = "";
 
     if (this._currentTranslateX < -70) {
       this._closeMobileMenu();
-      sidebar.style.transform = '';
+      sidebar.style.transform = "";
     } else {
-      sidebar.style.transform = '';
+      sidebar.style.transform = "";
     }
     this._currentTranslateX = 0;
   };
@@ -135,12 +138,12 @@ export class StPageLayout extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    window.addEventListener('resize', this._resizeListener);
+    window.addEventListener("resize", this._resizeListener);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    window.removeEventListener('resize', this._resizeListener);
+    window.removeEventListener("resize", this._resizeListener);
   }
 
   static styles = [
@@ -158,7 +161,9 @@ export class StPageLayout extends LitElement {
         --layout-nav-height: 4rem;
       }
 
-      *, *::before, *::after {
+      *,
+      *::before,
+      *::after {
         box-sizing: inherit;
       }
 
@@ -283,7 +288,7 @@ export class StPageLayout extends LitElement {
         overflow: hidden;
         background-color: var(--layout-surface-color);
       }
-      
+
       .app-shell-sidebar {
         display: none;
         border-right: 1px solid var(--layout-border-color);
@@ -294,14 +299,14 @@ export class StPageLayout extends LitElement {
         flex: 1;
         overflow-y: auto;
       }
-      
+
       .app-shell-content {
         display: flex;
         flex-direction: column;
         flex: 1;
         width: 100%;
       }
-      
+
       .app-shell-nav {
         height: var(--layout-nav-height);
         border-bottom: 1px solid var(--layout-border-color);
@@ -310,13 +315,13 @@ export class StPageLayout extends LitElement {
         align-items: center;
         padding: 0 var(--st-spacing-md);
       }
-      
+
       .app-shell-main {
         flex: 1;
         overflow-y: auto;
         padding: var(--st-spacing-lg);
       }
-      
+
       .app-shell-footer {
         background: var(--layout-bg-color);
         border-top: 1px solid var(--layout-border-color);
@@ -342,12 +347,12 @@ export class StPageLayout extends LitElement {
         flex-direction: column;
         background: var(--layout-bg-color);
       }
-      
+
       .content-sidebar-nav {
         border-bottom: 1px solid var(--layout-border-color);
         background: var(--layout-bg-color);
       }
-      
+
       .content-sidebar-container {
         flex: 1;
         width: 100%;
@@ -358,17 +363,17 @@ export class StPageLayout extends LitElement {
         flex-direction: column;
         gap: var(--st-spacing-xl);
       }
-      
+
       .content-sidebar-main {
         flex: 1;
         max-width: 48rem;
       }
-      
+
       .content-sidebar-aside {
         width: 100%;
         flex-shrink: 0;
       }
-      
+
       .content-sidebar-footer {
         margin-top: auto;
         border-top: 1px solid var(--layout-border-color);
@@ -399,7 +404,7 @@ export class StPageLayout extends LitElement {
         flex-direction: column;
         background: var(--layout-bg-color);
       }
-      
+
       .single-column-nav {
         position: sticky;
         top: 0;
@@ -408,13 +413,13 @@ export class StPageLayout extends LitElement {
         background: var(--layout-bg-color);
         border-bottom: 1px solid var(--layout-border-color);
       }
-      
+
       .single-column-main {
         flex: 1;
         display: flex;
         flex-direction: column;
       }
-      
+
       .single-column-footer {
         margin-top: auto;
       }
@@ -502,6 +507,10 @@ export class StPageLayout extends LitElement {
         padding: var(--st-spacing-lg);
       }
 
+      :host([clear-footer-padding]) footer {
+        padding: 0;
+      }
+
       @media (min-width: 768px) {
         .three-column-sidebar-left {
           display: block;
@@ -548,19 +557,23 @@ export class StPageLayout extends LitElement {
           overflow-y: auto;
         }
       }
-    `
+    `,
   ];
 
   render() {
     const backdrop = html`
-      <div 
-        class="mobile-backdrop ${this._mobileMenuOpen ? 'open' : ''}" 
+      <div
+        class="mobile-backdrop ${this._mobileMenuOpen ? "open" : ""}"
         @click=${this._closeMobileMenu}
       ></div>
     `;
 
     const hamburgerBtn = html`
-      <button class="mobile-menu-btn" @click=${this._toggleMobileMenu} aria-label="Open Navigation Menu">
+      <button
+        class="mobile-menu-btn"
+        @click=${this._toggleMobileMenu}
+        aria-label="Open Navigation Menu"
+      >
         <svg viewBox="0 0 24 24"><path d="M3 12h18M3 6h18M3 18h18"></path></svg>
       </button>
     `;
@@ -568,18 +581,23 @@ export class StPageLayout extends LitElement {
     const drawerHeader = html`
       <div class="mobile-drawer-header">
         <span class="mobile-drawer-title">Menu</span>
-        <button class="mobile-close-btn" @click=${this._closeMobileMenu} aria-label="Close Navigation Menu">
+        <button
+          class="mobile-close-btn"
+          @click=${this._closeMobileMenu}
+          aria-label="Close Navigation Menu"
+        >
           <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"></path></svg>
         </button>
       </div>
     `;
 
-    if (this.variant === 'app-shell') {
+    if (this.variant === "app-shell") {
       return html`
         ${backdrop}
         <div class="layout-app-shell">
-          <aside 
-            class="app-shell-sidebar ${this._mobileMenuOpen ? 'open' : ''}" 
+          <aside
+            class="app-shell-sidebar ${this._mobileMenuOpen ? "open" : ""}"
+            aria-label="Primary Sidebar"
             @click=${this._handleNavClick}
             @touchstart=${this._handleTouchStart}
             @touchmove=${this._handleTouchMove}
@@ -590,17 +608,17 @@ export class StPageLayout extends LitElement {
               <slot name="sidebar"></slot>
             </div>
           </aside>
-          
+
           <div class="app-shell-content">
             <header class="app-shell-nav">
               ${hamburgerBtn}
               <slot name="nav"></slot>
             </header>
-            
+
             <main class="app-shell-main">
               <slot></slot>
             </main>
-            
+
             <footer class="app-shell-footer">
               <slot name="footer"></slot>
             </footer>
@@ -609,27 +627,29 @@ export class StPageLayout extends LitElement {
       `;
     }
 
-    if (this.variant === 'content-sidebar') {
+    if (this.variant === "content-sidebar") {
       return html`
         <div class="layout-content-sidebar">
           <header class="content-sidebar-nav">
-            <div style="display: flex; align-items: center; padding: 0 var(--st-spacing-md); height: var(--layout-nav-height);">
+            <div
+              style="display: flex; align-items: center; padding: 0 var(--st-spacing-md); height: var(--layout-nav-height);"
+            >
               <slot name="nav"></slot>
             </div>
           </header>
-          
+
           <div class="content-sidebar-container">
             <main class="content-sidebar-main">
               <slot></slot>
             </main>
-            
-            <aside class="content-sidebar-aside">
+
+            <aside class="content-sidebar-aside" aria-label="Related Content">
               <div class="content-sidebar-aside-inner">
                 <slot name="aside"></slot>
               </div>
             </aside>
           </div>
-          
+
           <footer class="content-sidebar-footer">
             <slot name="footer"></slot>
           </footer>
@@ -637,7 +657,7 @@ export class StPageLayout extends LitElement {
       `;
     }
 
-    if (this.variant === 'three-column') {
+    if (this.variant === "three-column") {
       return html`
         ${backdrop}
         <div class="layout-three-column">
@@ -647,8 +667,9 @@ export class StPageLayout extends LitElement {
           </header>
 
           <div class="three-column-body">
-            <aside 
-              class="three-column-sidebar-left ${this._mobileMenuOpen ? 'open' : ''}" 
+            <aside
+              class="three-column-sidebar-left ${this._mobileMenuOpen ? "open" : ""}"
+              aria-label="Primary Sidebar"
               @click=${this._handleNavClick}
               @touchstart=${this._handleTouchStart}
               @touchmove=${this._handleTouchMove}
@@ -664,7 +685,7 @@ export class StPageLayout extends LitElement {
               <slot></slot>
             </main>
 
-            <aside class="three-column-sidebar-right">
+            <aside class="three-column-sidebar-right" aria-label="Secondary Sidebar">
               <div class="three-column-sidebar-right-inner">
                 <slot name="sidebar-right"></slot>
               </div>
@@ -681,16 +702,20 @@ export class StPageLayout extends LitElement {
     return html`
       <div class="layout-single-column">
         <header class="single-column-nav">
-          <div style="display: flex; align-items: center; padding: 0 var(--st-spacing-md); height: var(--layout-nav-height);">
+          <div
+            style="display: flex; align-items: center; padding: 0 var(--st-spacing-md); height: var(--layout-nav-height);"
+          >
             <slot name="nav"></slot>
           </div>
         </header>
-        
+
         <main class="single-column-main">
           <slot></slot>
         </main>
-        
-        <footer class="single-column-footer">
+
+        <footer
+          class="single-column-footer ${this.clearFooterPadding ? "clear-footer-padding" : ""}"
+        >
           <slot name="footer"></slot>
         </footer>
       </div>
@@ -700,6 +725,6 @@ export class StPageLayout extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-page-layout': StPageLayout;
+    "st-page-layout": StPageLayout;
   }
-}
+}

package/src/components/radio/radio.ts

@@ -1,13 +1,15 @@
 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";
 
 @customElement("st-radio")
 export class StRadio extends LitElement {
+  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
+
   @property({type: String}) value = "";
   @property({type: Boolean, reflect: true}) checked = false;
   @property({type: Boolean, reflect: true}) disabled = false;
-
   @property({attribute: "aria-label"}) ariaLabel = "";
 
   static styles = [
@@ -28,7 +30,6 @@ export class StRadio extends LitElement {
         font-size: var(--st-font-size-base);
       }
 
-      /* Hide the native input visually, but keep it accessible for screen readers */
       input {
         position: absolute;
         width: 1px;
@@ -41,7 +42,6 @@ export class StRadio extends LitElement {
         border-width: 0;
       }
 
-      /* Custom Radio Circle */
       .control {
         display: flex;
         align-items: center;
@@ -55,45 +55,42 @@ export class StRadio extends LitElement {
         flex-shrink: 0;
       }
 
-      /* Inner Dot (Hidden by default) */
       .control::after {
         content: "";
         width: 0.625rem;
         height: 0.625rem;
         border-radius: 50%;
-        background-color: var(--st-color-bg); /* Matches the dot color to background initially */
+        background-color: var(--st-color-bg);
         transition:
           transform 0.2s ease,
           background-color 0.2s ease;
         transform: scale(0);
       }
 
-      /* Hover State */
       label:hover .control {
         border-color: var(--st-color-primary-hover);
       }
 
-      /* Focus State (Driven by the hidden input) */
       input:focus-visible + .control {
         box-shadow:
           0 0 0 2px var(--st-color-bg),
           0 0 0 4px var(--st-color-primary);
       }
 
-      /* Checked State */
       :host([checked]) .control {
         border-color: var(--st-color-primary);
         background-color: var(--st-color-primary);
       }
+
       :host([checked]) .control::after {
-        background-color: var(--st-white); /* White dot inside the primary circle */
+        background-color: #ffffff; /* Explicitly white for contrast */
         transform: scale(1);
       }
 
-      /* Disabled State */
       :host([disabled]) {
         pointer-events: none;
       }
+
       :host([disabled]) label {
         opacity: 0.5;
         cursor: not-allowed;
@@ -102,11 +99,9 @@ export class StRadio extends LitElement {
   ];
 
   private _handleChange(e: Event) {
-    // Prevent the native change event from leaking out
     e.stopPropagation();
 
     if (!this.disabled) {
-      // Dispatch a custom event to tell the parent group this radio was selected
       this.dispatchEvent(
         new CustomEvent("st-radio-select", {
           detail: {value: this.value},
@@ -122,7 +117,7 @@ export class StRadio extends LitElement {
       <label>
         <input
           type="radio"
-          aria-label=${this.ariaLabel || ""}
+          aria-label=${ifDefined(this.ariaLabel || undefined)}
           .value=${this.value}
           .checked=${this.checked}
           ?disabled=${this.disabled}

package/src/components/radio-group/radio-group.ts

@@ -12,23 +12,23 @@ export class StRadioGroup extends LitElement {
   @property({type: String}) value = "";
   @property({type: String}) label = "";
   @property({attribute: "help-text"}) helpText = "";
+  @property({type: String, reflect: true}) layout: "vertical" | "horizontal" = "vertical";
+  @property({type: Boolean, reflect: true}) required = false;
   @property({type: Boolean, reflect: true}) disabled = false;
   @property({type: Boolean, reflect: true}) invalid = false;
 
-  // Grabs all slotted st-radio components automatically
   @queryAssignedElements({selector: "st-radio"})
   private _radios!: StRadio[];
 
   constructor() {
     super();
     this._internals = this.attachInternals();
+    this._internals.role = "radiogroup";
 
-    // 1. Trigger error state if the user clicks away and the field is invalid
     this.addEventListener("change", () => {
       this.invalid = !this._internals.validity.valid;
     });
 
-    // 2. Trigger error state if the st-form tries to submit and fails
     this.addEventListener("invalid", () => {
       this.invalid = true;
     });
@@ -64,7 +64,6 @@ export class StRadioGroup extends LitElement {
         gap: var(--st-spacing-sm);
       }
 
-      /* Horizontal layout modifier */
       :host([layout="horizontal"]) .options {
         flex-direction: row;
         gap: var(--st-spacing-md);
@@ -76,36 +75,40 @@ export class StRadioGroup extends LitElement {
         margin: 0;
       }
 
-      :host([invalid]) .help-text {
-        color: var(--st-color-error);
-      }
+      :host([invalid]) .help-text,
       :host([invalid]) legend {
         color: var(--st-color-error);
       }
     `,
   ];
 
+  private _handleRadioSelect = (e: Event) => {
+    if (this.disabled) return;
+
+    const customEvent = e as CustomEvent<{value: string}>;
+    this.value = customEvent.detail.value;
+
+    // 🚀 THE FIX: Clear the invalid visual state as soon as the user makes a selection
+    if (this.invalid) {
+      this.invalid = false;
+    }
+
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  };
+
   connectedCallback() {
     super.connectedCallback();
-    // Listen for selections from child radios
-    this.addEventListener("st-radio-select", this._handleRadioSelect as EventListener);
+    this.addEventListener("st-radio-select", this._handleRadioSelect);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("st-radio-select", this._handleRadioSelect as EventListener);
-  }
-
-  private _handleRadioSelect(e: CustomEvent<{value: string}>) {
-    if (this.disabled) return;
-    this.value = e.detail.value;
-    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+    this.removeEventListener("st-radio-select", this._handleRadioSelect);
   }
 
   override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
-    // When the group's value changes, sync the form and update all child radios
     if (changedProperties.has("value")) {
       this._internals.setFormValue(this.value);
       this._syncRadios();
@@ -114,9 +117,20 @@ export class StRadioGroup extends LitElement {
     if (changedProperties.has("disabled")) {
       this._syncRadios();
     }
+
+    if (changedProperties.has("value") || changedProperties.has("required")) {
+      this._syncValidity();
+    }
+  }
+
+  private _syncValidity() {
+    if (this.required && !this.value) {
+      this._internals.setValidity({valueMissing: true}, "Please select an option.");
+    } else {
+      this._internals.setValidity({});
+    }
   }
 
-  // Loops through children and unchecks/checks them based on the group's current value
   private _syncRadios() {
     if (!this._radios) return;
 
@@ -128,11 +142,21 @@ export class StRadioGroup extends LitElement {
     });
   }
 
-  // Fired natively by the browser if the parent <form> is reset
   formResetCallback() {
-    this.value = "";
-    this._internals.setFormValue("");
+    const initialValue = this.getAttribute("value") || "";
+    this.value = initialValue;
+    this._internals.setFormValue(initialValue);
     this._syncRadios();
+    this.updateComplete.then(() => this._syncValidity());
+  }
+
+  // Expose standard native methods
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+
+  reportValidity() {
+    return this._internals.reportValidity();
   }
 
   render() {