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

package/dist/components/page-layout/page-layout.js

@@ -4,32 +4,33 @@ 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, state } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
 let StPageLayout = class StPageLayout extends LitElement {
     constructor() {
         super(...arguments);
         /**
          * Defines the structural layout variant to render.
          */
-        this.variant = 'single-column';
+        this.variant = "single-column";
         /**
          * Maximum width for the left sidebar section (e.g., '20rem', '300px').
          */
-        this.sidebarWidth = '';
+        this.sidebarWidth = "";
         /**
          * Maximum width for the right sidebar section (e.g., '16rem', '250px').
          */
-        this.rightSidebarWidth = '';
+        this.rightSidebarWidth = "";
         /**
          * Optional maximum width for the main content area (e.g., '48rem', '800px').
          */
-        this.mainMaxWidth = '';
+        this.mainMaxWidth = "";
         /**
          * When true, expands the main content area to fill 100% of the available width between sidebars.
          */
         this.fillMain = false;
+        this.clearFooterPadding = false;
         this._mobileMenuOpen = false;
         this._touchStartX = 0;
         this._currentTranslateX = 0;
@@ -43,9 +44,9 @@ let StPageLayout = class StPageLayout extends LitElement {
         // Only close if an actual navigation link/item was clicked
         this._handleNavClick = (e) => {
             const path = e.composedPath();
-            const clickedLink = path.some(node => {
+            const clickedLink = path.some((node) => {
                 const el = node;
-                return el.tagName === 'A' || el.tagName === 'ST-VERTICAL-NAV-ITEM';
+                return el.tagName === "A" || el.tagName === "ST-VERTICAL-NAV-ITEM";
             });
             if (clickedLink) {
                 this._closeMobileMenu();
@@ -57,7 +58,7 @@ let StPageLayout = class StPageLayout extends LitElement {
             this._touchStartX = e.touches[0].clientX;
             this._isDragging = true;
             const sidebar = e.currentTarget;
-            sidebar.style.transition = 'none';
+            sidebar.style.transition = "none";
         };
         this._handleTouchMove = (e) => {
             if (!this._isDragging || window.innerWidth >= 768)
@@ -75,13 +76,13 @@ let StPageLayout = class StPageLayout extends LitElement {
                 return;
             this._isDragging = false;
             const sidebar = e.currentTarget;
-            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;
         };
@@ -93,65 +94,74 @@ let StPageLayout = class StPageLayout extends LitElement {
     }
     updated(changedProperties) {
         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");
             }
         }
     }
     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);
     }
     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>
     `;
         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}
@@ -162,17 +172,17 @@ let StPageLayout = 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>
@@ -180,34 +190,36 @@ let StPageLayout = class StPageLayout extends LitElement {
         </div>
       `;
         }
-        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>
         </div>
       `;
         }
-        if (this.variant === 'three-column') {
+        if (this.variant === "three-column") {
             return html `
         ${backdrop}
         <div class="layout-three-column">
@@ -217,8 +229,9 @@ let StPageLayout = 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}
@@ -234,7 +247,7 @@ let StPageLayout = 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>
@@ -250,16 +263,20 @@ let StPageLayout = 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>
@@ -281,7 +298,9 @@ StPageLayout.styles = [
         --layout-nav-height: 4rem;
       }
 
-      *, *::before, *::after {
+      *,
+      *::before,
+      *::after {
         box-sizing: inherit;
       }
 
@@ -406,7 +425,7 @@ StPageLayout.styles = [
         overflow: hidden;
         background-color: var(--layout-surface-color);
       }
-      
+
       .app-shell-sidebar {
         display: none;
         border-right: 1px solid var(--layout-border-color);
@@ -417,14 +436,14 @@ StPageLayout.styles = [
         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);
@@ -433,13 +452,13 @@ StPageLayout.styles = [
         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);
@@ -465,12 +484,12 @@ StPageLayout.styles = [
         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%;
@@ -481,17 +500,17 @@ StPageLayout.styles = [
         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);
@@ -522,7 +541,7 @@ StPageLayout.styles = [
         flex-direction: column;
         background: var(--layout-bg-color);
       }
-      
+
       .single-column-nav {
         position: sticky;
         top: 0;
@@ -531,13 +550,13 @@ StPageLayout.styles = [
         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;
       }
@@ -625,6 +644,10 @@ StPageLayout.styles = [
         padding: var(--st-spacing-lg);
       }
 
+      :host([clear-footer-padding]) footer {
+        padding: 0;
+      }
+
       @media (min-width: 768px) {
         .three-column-sidebar-left {
           display: block;
@@ -671,27 +694,31 @@ StPageLayout.styles = [
           overflow-y: auto;
         }
       }
-    `
+    `,
 ];
 __decorate([
     property({ type: String, reflect: true })
 ], StPageLayout.prototype, "variant", void 0);
 __decorate([
-    property({ type: String, attribute: 'sidebar-width' })
+    property({ type: String, attribute: "sidebar-width" })
 ], StPageLayout.prototype, "sidebarWidth", void 0);
 __decorate([
-    property({ type: String, attribute: 'right-sidebar-width' })
+    property({ type: String, attribute: "right-sidebar-width" })
 ], StPageLayout.prototype, "rightSidebarWidth", void 0);
 __decorate([
-    property({ type: String, attribute: 'main-max-width' })
+    property({ type: String, attribute: "main-max-width" })
 ], StPageLayout.prototype, "mainMaxWidth", void 0);
 __decorate([
-    property({ type: Boolean, attribute: 'fill-main', reflect: true })
+    property({ type: Boolean, attribute: "fill-main", reflect: true })
 ], StPageLayout.prototype, "fillMain", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "clear-footer-padding", reflect: true })
+], StPageLayout.prototype, "clearFooterPadding", void 0);
 __decorate([
     state()
 ], StPageLayout.prototype, "_mobileMenuOpen", void 0);
 StPageLayout = __decorate([
-    customElement('st-page-layout')
+    customElement("st-page-layout")
 ], StPageLayout);
 export { StPageLayout };
+//# sourceMappingURL=page-layout.js.map

package/dist/components/page-layout/page-layout.js.map

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

package/dist/components/radio/radio.d.ts

@@ -1,5 +1,13 @@
 import { LitElement } from "lit";
 export declare class StRadio extends LitElement {
+    static shadowRootOptions: {
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry | null;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        delegatesFocus: boolean;
+    };
     value: string;
     checked: boolean;
     disabled: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,qBACa,OAAQ,SAAQ,UAAU;IACX,KAAK,SAAM;IACK,OAAO,UAAS;IAChB,QAAQ,UAAS;IAEtB,SAAS,SAAM;IAEpD,MAAM,CAAC,MAAM,4BAyFX;IAEF,OAAO,CAAC,aAAa;IAgBrB,MAAM,yCAeL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAK1C,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,iBAAiB;;;;;;;MAA2D;IAEzD,KAAK,SAAM;IACK,OAAO,UAAS;IAChB,QAAQ,UAAS;IACtB,SAAS,SAAM;IAEpD,MAAM,CAAC,MAAM,4BAoFX;IAEF,OAAO,CAAC,aAAa;IAcrB,MAAM,yCAeL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/radio/radio.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 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 StRadio = class StRadio extends LitElement {
     constructor() {
@@ -16,10 +17,8 @@ let StRadio = class StRadio extends LitElement {
         this.ariaLabel = "";
     }
     _handleChange(e) {
-        // 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 },
                 bubbles: true,
@@ -32,7 +31,7 @@ let StRadio = 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}
@@ -44,6 +43,7 @@ let StRadio = class StRadio extends LitElement {
     `;
     }
 };
+StRadio.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 StRadio.styles = [
     resetStyles,
     css `
@@ -62,7 +62,6 @@ StRadio.styles = [
         font-size: var(--st-font-size-base);
       }
 
-      /* Hide the native input visually, but keep it accessible for screen readers */
       input {
         position: absolute;
         width: 1px;
@@ -75,7 +74,6 @@ StRadio.styles = [
         border-width: 0;
       }
 
-      /* Custom Radio Circle */
       .control {
         display: flex;
         align-items: center;
@@ -89,45 +87,42 @@ StRadio.styles = [
         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;
@@ -150,3 +145,4 @@ StRadio = __decorate([
     customElement("st-radio")
 ], StRadio);
 export { StRadio };
+//# sourceMappingURL=radio.js.map

package/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.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,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAGqB,UAAK,GAAG,EAAE,CAAC;QACK,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QACtB,cAAS,GAAG,EAAE,CAAC;IAsHtD,CAAC;IA9BS,aAAa,CAAC,CAAQ;QAC5B,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;gBACjC,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC;gBAC3B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;uBAIQ,SAAS,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC;mBAC1C,IAAI,CAAC,KAAK;qBACR,IAAI,CAAC,OAAO;sBACX,IAAI,CAAC,QAAQ;oBACf,IAAI,CAAC,aAAa;;;;;KAKjC,CAAC;IACJ,CAAC;CACF,CAAA;AA3HQ,yBAAiB,GAAG,EAAC,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAC,AAA1D,CAA2D;AAO5E,cAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFF;CACF,AApFY,CAoFX;AAzFwB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;sCAAY;AACK;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAiB;AAChB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAkB;AACtB;IAApC,QAAQ,CAAC,EAAC,SAAS,EAAE,YAAY,EAAC,CAAC;0CAAgB;AANzC,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA4HnB"}

package/dist/components/radio-group/radio-group.d.ts

@@ -6,17 +6,22 @@ export declare class StRadioGroup extends LitElement {
     value: string;
     label: string;
     helpText: string;
+    layout: "vertical" | "horizontal";
+    required: boolean;
     disabled: boolean;
     invalid: boolean;
     private _radios;
     constructor();
     static styles: import("lit").CSSResult[];
+    private _handleRadioSelect;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private _handleRadioSelect;
     updated(changedProperties: PropertyValues<this>): void;
+    private _syncValidity;
     private _syncRadios;
     formResetCallback(): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/dist/components/radio-group/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAK1D,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAEI,IAAI,SAAM;IACzB,KAAK,SAAM;IACX,KAAK,SAAM;IACD,QAAQ,SAAM;IACR,QAAQ,UAAS;IACjB,OAAO,UAAS;IAI1D,OAAO,CAAC,OAAO,CAAa;IAE5B,cAaC;IAED,MAAM,CAAC,MAAM,4BAiDX;IAEF,iBAAiB,SAIhB;IAED,oBAAoB,SAGnB;IAED,OAAO,CAAC,kBAAkB;IAMjB,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAYvD;IAGD,OAAO,CAAC,WAAW;IAYnB,iBAAiB,SAIhB;IAED,MAAM,yCAYL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAK1D,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAEI,IAAI,SAAM;IACzB,KAAK,SAAM;IACX,KAAK,SAAM;IACD,QAAQ,SAAM;IACT,MAAM,EAAE,UAAU,GAAG,YAAY,CAAc;IAC9C,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAG1D,OAAO,CAAC,OAAO,CAAa;IAE5B,cAYC;IAED,MAAM,CAAC,MAAM,4BA8CX;IAEF,OAAO,CAAC,kBAAkB,CAYxB;IAEF,iBAAiB,SAGhB;IAED,oBAAoB,SAGnB;IAEQ,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAevD;IAED,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,WAAW;IAWnB,iBAAiB,SAMhB;IAGD,aAAa,YAEZ;IAED,cAAc,YAEb;IAED,MAAM,yCAYL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}