@progressive-development/pd-forms 0.9.1 → 1.0.0

package/dist/pd-panel-button/PdPanelButton.js

@@ -1,9 +1,7 @@
-import { css, html } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import '@progressive-development/pd-icon/pd-icon';
-import { PdBaseUI } from '../base/pd-base-ui.js';
-import { PdColorStyles, PdFontStyles } from '@progressive-development/pd-shared-styles';
+import { css, html, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
 import { pdIcons } from '@progressive-development/pd-icon';
+import { PdButton } from '../pd-button/PdButton.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -14,174 +12,58 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class PdPanelButton extends PdBaseUI {
+let panelIdCounter = 0;
+class PdPanelButton extends PdButton {
   constructor() {
     super(...arguments);
-    this.buttonText = "Ok";
-    this.panelButton = false;
-    this.loading = false;
-    this.selected = false;
-    this.primary = false;
-    this.disableOnClickTime = -1;
     this.hideClose = false;
-    this._timerDisabled = false;
+    this.up = false;
+    this.right = false;
     this._panelOpen = false;
-    this._closePanel = () => {
-      this._panelOpen = false;
-    };
+    /** @ignore - Unique ID for aria-controls */
+    this._panelId = `pd-panel-${++panelIdCounter}`;
+    /** @ignore - Bound method reference for event listener cleanup */
+    this._boundClosePanel = this._closePanel.bind(this);
+    /** @ignore - Bound method reference for keyboard event listener */
+    this._boundHandleKeyDown = this._handlePanelKeyDown.bind(this);
   }
   static {
+    // ============================================================================
+    // STYLES (Panel-specific only - Button styles inherited from PdButton)
+    // ============================================================================
     this.styles = [
-      PdColorStyles,
-      PdFontStyles,
+      PdButton.styles,
       css`
       :host {
-        display: inline-block; /* Verhindert, dass :host die volle Breite bekommt */
         position: relative;
       }
 
-      :host([disabled]),
-      :host([_timerDisabled]) {
-        pointer-events: none;
+      /* Toggle arrow icon styling - inherits color from .button-icon in PdButton */
+      .toggle-icon {
+        margin-left: calc(0.25rem * var(--pd-button-scale, 1));
       }
 
-      .icon-button-style {
-        --pd-icon-size: var(--pd-icon-button-size, 32px);
-        box-sizing: border-box;
-        width: var(--pd-icon-button-width, auto);
-        z-index: 6;
-
-        display: inline-flex;
-        align-items: center;
-        justify-content: var(--pd-icon-button-justify, center);
-        gap: var(--pd-icon-button-gap, 0.5rem);
-
-        height: var(--pd-icon-button-height, auto);
-        line-height: var(--pd-icon-button-line-height, 1);
-        padding: var(--pd-icon-button-padding, 0 1rem);
-
-        background: var(
-          --pd-icon-button-bg,
-          #58a linear-gradient(hsla(0, 0%, 100%, 0.2), transparent)
-        );
-        background-color: var(--pd-icon-button-bgcol, var(--pd-default-col));
-        border: 1px solid
-          var(--pd-icon-button-bordercol, var(--pd-default-dark-col));
-        border-radius: var(--pd-icon-button-border-radius, 0.2em);
-        transition: background-color 0.3s ease;
-
-        vertical-align: middle;
-        text-align: center;
-
-        color: var(--pd-icon-button-txtcol, var(--pd-secondary-light-col));
-        --pd-icon-col: var(
-          --pd-icon-button-txtcol,
-          var(--pd-secondary-light-col)
-        );
-        --pd-icon-col-active: var(
-          --pd-icon-button-txtcol,
-          var(--pd-secondary-light-col)
-        );
-      }
-
-      .button-text {
-        text-shadow: 0 -0.05em 0.05em rgba(0, 0, 0, 0.5);
-        font-size: var(--pd-icon-button-font-size, 1.5rem);
-        font-weight: bold;
-        font-family: var(--pd-default-font-title-family);
-        padding: 0.55rem 0;
-      }
-
-      .button-icon {
-        padding: 0.3rem 0;
-      }
-
-      .toggle-button {
-        padding-left: var(--pd-icon-button-gap, 0.5rem);
-      }
-
-      .loader {
-        border: 12px solid var(--pd-secondary-col);
-        border-top: 12px solid var(--pd-secondary-light-col);
-        border-radius: 50%;
-        width: 10px;
-        height: 10px;
-        animation: spin 2s linear infinite;
-
-        margin: 0.3rem 0.1rem 0.3rem 0;
-      }
-
-      :host(:not([disabled]):not([_timerDisabled])) .icon-button-style:hover {
-        background-color: var(
-          --pd-icon-button-bgcol-hover,
-          var(--pd-default-hover-col)
-        );
-        cursor: pointer;
-      }
-
-      :host([disabled]) .icon-button-style,
-      :host([_timerDisabled]) .icon-button-style {
-        background: linear-gradient(
-          to bottom,
-          #e0e0e0,
-          #c4c4c4
-        ); /* Matte, deaktivierte Optik */
-        color: var(--pd-default-disabled-dark-col);
-        --pd-icon-col: var(--pd-default-disabled-dark-col);
-        --pd-icon-col-active: var(--pd-default-disabled-dark-col);
-        border-color: var(--pd-default-disabled-col);
-        cursor: not-allowed;
-        opacity: 0.6; /* Leichter "inaktiv"-Effekt */
-        text-shadow: none;
-      }
-
-      :host(:not([disabled]):not([_timerDisabled])[primary])
-        .icon-button-style {
-        background-color: var(
-          --pd-icon-button-primary-bgcol,
-          var(--pd-secondary-col)
-        );
-        color: var(--pd-icon-button-primary-txtcol, var(--pd-default-dark-col));
-        --pd-icon-col: var(
-          --pd-icon-button-primary-txtcol,
-          var(--pd-default-dark-col)
-        );
-        --pd-icon-col-active: var(
-          --pd-icon-button-primary-txtcol,
-          var(--pd-default-dark-col)
-        );
-      }
-
-      :host(:not([disabled]):not([_timerDisabled])[primary])
-        .icon-button-style:hover {
-        background-color: var(--pd-default-hover-col);
-        cursor: pointer;
+      /* Icon-only panel button: reduce padding since we have icon + toggle arrow */
+      :host([icon-only]) button {
+        padding: calc(0.5rem * var(--pd-button-scale, 1));
+        aspect-ratio: auto;
+        min-width: auto;
       }
 
+      /* Panel container */
       .panel {
         position: absolute;
-
-        min-width: var(
-          --pd-icon-button-panel-min-width,
-          auto
-        ); /* Panel wird so breit wie der Button */
-        max-width: var(
-          --pd-icon-button-panel-max-width,
-          300px
-        ); /* Optional: Maximale Breite */
-
+        min-width: var(--pd-panel-min-width, auto);
+        max-width: var(--pd-panel-max-width, 300px);
         transform: scaleY(0);
-        background: var(
-          --pd-icon-button-panel-bg-col,
-          var(--pd-default-bg-col)
-        );
-        border-radius: 5px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        background: var(--pd-panel-bg-col, var(--pd-default-bg-col));
+        border-radius: var(--pd-radius-lg);
+        box-shadow: var(--pd-shadow-md);
         transition:
           transform 0.2s ease-out,
           opacity 0.2s ease-out;
         opacity: 0;
-        z-index: 5;
+        z-index: var(--pd-panel-z-index, 100);
       }
 
       .panel.open {
@@ -190,10 +72,11 @@ class PdPanelButton extends PdBaseUI {
       }
 
       .panel-content {
-        padding: var(--pd-panel-button-panel-padding, 1rem);
+        padding: var(--pd-panel-padding, 1rem);
         min-height: 50px;
       }
 
+      /* Close button in panel */
       .close-button {
         position: absolute;
         top: 5px;
@@ -208,103 +91,107 @@ class PdPanelButton extends PdBaseUI {
         transition: color 0.2s ease-in-out;
       }
 
-      .close-button:hover {
-        color: var(--pd-default-darkest-col);
+      button.close-button:hover:not(:disabled) {
+        background: transparent;
+        color: var(--pd-default-hover-col);
       }
 
-      /* Standard (nach unten öffnend, linksbündig) */
+      /* Panel positioning variants */
+
+      /* Default: opens downward, left-aligned */
       :host(:not([right]):not([up])) .panel {
-        left: 0; /* Panel beginnt exakt unter dem Button */
-        top: 100%; /* Panel öffnet sich nach unten */
-        transform-origin: top; /* Wächst nach unten */
+        left: 0;
+        top: 100%;
+        transform-origin: top;
       }
 
-      /* Standard (nach unten öffnend, rechtsbündig) */
+      /* Right-aligned, opens downward */
       :host([right]:not([up])) .panel {
-        right: 0; /* Panel beginnt rechtsbündig am Button */
+        right: 0;
         top: 100%;
         transform-origin: top right;
       }
 
-      /* Panel öffnet sich nach OBEN (links ausgerichtet) */
+      /* Left-aligned, opens upward */
       :host(:not([right])[up]) .panel {
         left: 0;
-        bottom: 100%; /* Panel öffnet sich nach oben */
+        bottom: 100%;
         transform-origin: bottom;
       }
 
-      /* Panel öffnet sich nach OBEN (rechts ausgerichtet) */
+      /* Right-aligned, opens upward */
       :host([right][up]) .panel {
         right: 0;
-        bottom: 100%; /* Panel öffnet sich nach oben */
+        bottom: 100%;
         transform-origin: bottom right;
       }
-
-      :host([selected]:not([disabled]):not([_timerDisabled]))
-        .icon-button-style {
-        background-color: var(
-          --pd-icon-button-selected-bgcol,
-          var(--pd-secondary-light-col)
-        );
-        color: var(--pd-icon-button-selected-txtcol, var(--pd-default-col));
-        --pd-icon-col: var(
-          --pd-icon-button-selected-txtcol,
-          var(--pd-default-col)
-        );
-        box-shadow: var(
-          --pd-icon-button-selected-shadow,
-          inset 0 2px 6px rgba(0, 0, 0, 0.4),
-          0 0 0 2px rgba(0, 0, 0, 0.1)
-        );
-        text-shadow: none;
-      }
-
-      @keyframes spin {
-        0% {
-          transform: rotate(0deg);
-        }
-        100% {
-          transform: rotate(360deg);
-        }
-      }
     `
     ];
   }
+  // ============================================================================
+  // LIFECYCLE
+  // ============================================================================
   connectedCallback() {
     super.connectedCallback();
-    window.addEventListener("close-button-panel-event", this._closePanel);
+    window.addEventListener("close-button-panel-event", this._boundClosePanel);
+    window.addEventListener("keydown", this._boundHandleKeyDown);
   }
   disconnectedCallback() {
-    window.removeEventListener("close-button-panel-event", this._closePanel);
+    window.removeEventListener(
+      "close-button-panel-event",
+      this._boundClosePanel
+    );
+    window.removeEventListener("keydown", this._boundHandleKeyDown);
     super.disconnectedCallback();
   }
-  // ${this._daySyncDisabled ? "element-hint" : ""} => for div class
-  render() {
+  // ============================================================================
+  // ARIA ATTRIBUTE OVERRIDES
+  // ============================================================================
+  get buttonAriaExpanded() {
+    return this._panelOpen ? "true" : "false";
+  }
+  get buttonAriaHasPopup() {
+    return "true";
+  }
+  get buttonAriaControls() {
+    return this._panelId;
+  }
+  // ============================================================================
+  // RENDER OVERRIDES
+  // ============================================================================
+  /**
+   * Renders the toggle arrow inside the button (as suffix content).
+   * Uses activeIcon to switch between up/down arrow states.
+   * activeIcon=true shows arrow up (panel open), activeIcon=false shows arrow down (panel closed).
+   */
+  renderSuffixContent() {
+    return html`
+      <pd-icon
+        icon="${pdIcons.ICON_TOOGLE_ARROW}"
+        ?activeIcon="${!this._panelOpen}"
+        class="button-icon toggle-icon"
+      ></pd-icon>
+    `;
+  }
+  /**
+   * Renders the dropdown panel after the button.
+   */
+  renderAfterButton() {
     return html`
       <div
-        class="icon-button-style"
-        role="button"
-        tabindex="0"
-        @click="${this._buttonClicked}"
-        @keydown="${this._onKeyDown}"
+        id="${this._panelId}"
+        class="panel ${this._panelOpen ? "open" : ""}"
+        role="menu"
+        aria-hidden="${!this._panelOpen}"
+        ?inert="${!this._panelOpen}"
       >
-        ${this.loading ? html`<div class="loader"></div>` : this.pdButtonIcon ? html`
-                <pd-icon
-                  class="button-icon action-icon-color"
-                  icon="${this.pdButtonIcon}"
-                ></pd-icon>
-              ` : ""}
-        ${this.buttonText ? html`<span class="button-text">${this.buttonText}</span>` : ""}
-        ${this.panelButton ? html` <pd-icon
-              icon=${pdIcons.ICON_TOOGLE_ARROW}
-              ?activeIcon=${!this._panelOpen}
-              class="small toggle-button"
-            ></pd-icon>` : ""}
-      </div>
-
-      <div class="panel ${this._panelOpen ? "open" : ""}">
-        ${this.hideClose ? "" : html`
-              <button class="close-button" @click="${this._togglePanel}">
+        ${this.hideClose ? nothing : html`
+              <button
+                class="close-button"
+                @click="${this._togglePanel}"
+                @keydown="${this._handleCloseButtonKeyDown}"
+                aria-label="Close panel"
+              >
                 &times;
               </button>
             `}
@@ -314,72 +201,69 @@ class PdPanelButton extends PdBaseUI {
       </div>
     `;
   }
-  _onKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      this._buttonClicked();
-    }
-  }
-  _buttonClicked() {
-    if (this.panelButton) {
+  // ============================================================================
+  // EVENT HANDLERS (Override)
+  // ============================================================================
+  /**
+   * Override: Click toggles the panel instead of emitting button-clicked.
+   */
+  handleClick() {
+    if (!this.disabled && !this.loading) {
       this._togglePanel();
-    } else {
-      if (this.disableOnClickTime > 0) {
-        this._timerDisabled = true;
-        window.setTimeout(() => {
-          this._timerDisabled = false;
-        }, this.disableOnClickTime);
-      }
-      this.dispatchEvent(
-        new CustomEvent("button-clicked", {
-          detail: this.value,
-          bubbles: true,
-          composed: true
-        })
-      );
     }
   }
+  // ============================================================================
+  // PUBLIC METHODS
+  // ============================================================================
+  /** Focuses the internal button element. */
+  focus() {
+    this._buttonEl?.focus();
+  }
+  // ============================================================================
+  // PRIVATE METHODS
+  // ============================================================================
+  _closePanel() {
+    this._panelOpen = false;
+  }
   _togglePanel() {
     this._panelOpen = !this._panelOpen;
     this.dispatchEvent(
       new CustomEvent("panel-button-toggled", {
-        detail: { open: this._panelOpen }
+        detail: { open: this._panelOpen },
+        bubbles: true,
+        composed: true
       })
     );
   }
+  /** Handles Escape key to close the panel */
+  _handlePanelKeyDown(e) {
+    if (e.key === "Escape" && this._panelOpen) {
+      this._closePanel();
+      this._buttonEl?.focus();
+    }
+  }
+  /** Handles keyboard events on the close button */
+  _handleCloseButtonKeyDown(e) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this._togglePanel();
+    }
+  }
 }
 __decorateClass([
-  property({ type: String })
-], PdPanelButton.prototype, "pdButtonIcon");
-__decorateClass([
-  property({ type: String })
-], PdPanelButton.prototype, "buttonText");
-__decorateClass([
-  property({ type: String })
-], PdPanelButton.prototype, "value");
-__decorateClass([
-  property({ type: Boolean })
-], PdPanelButton.prototype, "panelButton");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], PdPanelButton.prototype, "loading");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], PdPanelButton.prototype, "selected");
+  property({ type: Boolean, attribute: "hide-close" })
+], PdPanelButton.prototype, "hideClose");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], PdPanelButton.prototype, "primary");
-__decorateClass([
-  property({ type: Number })
-], PdPanelButton.prototype, "disableOnClickTime");
-__decorateClass([
-  property({ type: Boolean })
-], PdPanelButton.prototype, "hideClose");
+], PdPanelButton.prototype, "up");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], PdPanelButton.prototype, "_timerDisabled");
+], PdPanelButton.prototype, "right");
 __decorateClass([
   state()
 ], PdPanelButton.prototype, "_panelOpen");
+__decorateClass([
+  query("button")
+], PdPanelButton.prototype, "_buttonEl");
 
 export { PdPanelButton };

package/dist/pd-panel-button/pd-panel-button.stories.d.ts

@@ -1,27 +1,57 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    component: string;
-    render: (args: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    tags: string[];
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+interface PdPanelButtonArgs {
+    text: string;
+    icon: string;
+    primary: boolean;
+    disabled: boolean;
+    loading: boolean;
+    selected: boolean;
+    right: boolean;
+    up: boolean;
+    hideClose: boolean;
+    fullWidth: boolean;
+    iconPosition: string;
+    value: string;
+    size: "sm" | "md" | "lg" | "xl";
+}
+/**
+ * ## pd-panel-button
+ *
+ * A button with dropdown panel functionality. Extends pd-button with panel support.
+ *
+ * ### Features
+ * - Inherits all pd-button features (icons, states, sizing)
+ * - Dropdown panel with configurable position (up/down, left/right)
+ * - Toggle arrow indicator
+ * - Auto-close via global event
+ * - Keyboard accessible (Enter/Space/Escape)
+ *
+ * ### Accessibility
+ * - Inherits all pd-button accessibility features
+ * - Panel can be closed via close button, Escape key, or global event
+ *
+ * ### Usage
+ * ```html
+ * <pd-panel-button text="Options" icon="settings">
+ *   <div>Panel content here</div>
+ * </pd-panel-button>
+ * ```
+ */
+declare const meta: Meta<PdPanelButtonArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const DefaultButton: Story;
-export declare const DefaulIcontButton: Story;
-export declare const DefaulIcontButtonDisabled: Story;
-export declare const DefaulIcontButtonTimerDisabled: Story;
-export declare const DefaulIcontButtonLoading: Story;
-export declare const DefaulIcontButtonPrimary: Story;
-export declare const DefaulIcontButtonPrimaryWithPanel: Story;
-export declare const DefaulIcontButtonPrimaryDisabled: Story;
-export declare const DefaulTextIcontButton: Story;
-export declare const PanelButton: Story;
-export declare const PanelButtonWithContent: Story;
-export declare const PanelButtonWithContentRight: Story;
-export declare const PanelButtonWithContentUp: Story;
-export declare const PanelButtonWithContentRightUp: Story;
-export declare const ButtonSelected: Story;
-export declare const ButtonSelectedWithIcon: Story;
-export declare const ButtonTransparent: Story;
+type Story = StoryObj<PdPanelButtonArgs>;
+/** Default panel button with text. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All panel button variants and states at a glance. */
+export declare const AllVariants: Story;
+/** All size variants displayed together. */
+export declare const AllSizes: Story;
+/** Panel positioning options: right-aligned and upward. */
+export declare const PanelPositions: Story;
+/** Panel with hidden close button. */
+export declare const HiddenCloseButton: Story;
+/** Panel with rich slotted content. */
+export declare const RichContent: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-panel-button.stories.d.ts.map

package/dist/pd-panel-button/pd-panel-button.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-panel-button.stories.d.ts","sourceRoot":"","sources":["../../src/pd-panel-button/pd-panel-button.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,sBAAsB,CAAC;AAI9B,QAAA,MAAM,IAAI;;;;;CAoBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAGtB,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,KAO/B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAQvC,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,KAQ5C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAQtC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAQtC,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,KAQ/C,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,KAS9C,CAAC;AAGF,eAAO,MAAM,qBAAqB,EAAE,KAMnC,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAGF,eAAO,MAAM,sBAAsB,EAAE,KAgBpC,CAAC;AAGF,eAAO,MAAM,2BAA2B,EAAE,KAiBzC,CAAC;AAGF,eAAO,MAAM,wBAAwB,EAAE,KAiBtC,CAAC;AAGF,eAAO,MAAM,6BAA6B,EAAE,KAkB3C,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAuB5B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAwBpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAgH/B,CAAC"}
+{"version":3,"file":"pd-panel-button.stories.d.ts","sourceRoot":"","sources":["../../src/pd-panel-button/pd-panel-button.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,sBAAsB,CAAC;AAM9B,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,EAAE,EAAE,OAAO,CAAC;IACZ,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACjC;AAMD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAyGjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,sEAAsE;AACtE,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAMF,wDAAwD;AACxD,eAAO,MAAM,WAAW,EAAE,KAuEzB,CAAC;AAMF,4CAA4C;AAC5C,eAAO,MAAM,QAAQ,EAAE,KAqDtB,CAAC;AAMF,2DAA2D;AAC3D,eAAO,MAAM,cAAc,EAAE,KAgD5B,CAAC;AAMF,sCAAsC;AACtC,eAAO,MAAM,iBAAiB,EAAE,KA2B/B,CAAC;AAMF,uCAAuC;AACvC,eAAO,MAAM,WAAW,EAAE,KA4BzB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAuF3B,CAAC"}

package/dist/pd-radio-group/PdRadioGroup.d.ts

@@ -1,12 +1,26 @@
 import { CSSResultGroup } from 'lit';
 import { PdBaseUIInput } from '../base/pd-base-ui-input.js';
 /**
+ * Radio group container for pd-checkbox elements with radio behavior.
+ *
  * @tagname pd-radio-group
+ *
+ * @event validate-form - Fired when selection changes for validation.
+ * @event field-change - Fired when selection changes.
+ *
+ * @slot - pd-checkbox elements to display as radio options.
+ *
+ * @cssprop --pd-cb-group-gap - Gap between radio options. Default: `20px`.
+ * @cssprop --pd-cb-group-direction - Flex direction for layout. Default: `row`.
+ * @cssprop --pd-input-label-padding - Label padding. Default: `0`.
+ * @cssprop --pd-cb-border-col - Border color for child checkboxes in readonly state. Default: `var(--pd-default-col)`.
+ * @cssprop --pd-cb-border-col-readonly - Readonly border color forwarded to child checkboxes. Default: `var(--pd-cb-border-col, var(--pd-default-col))`.
  */
 export declare class PdRadioGroup extends PdBaseUIInput {
     static styles: CSSResultGroup;
     firstUpdated(): void;
     render(): import('lit').TemplateResult<1>;
+    private _onKeyDown;
     private _onInternalBlur;
     private _onInternalFocus;
     private _onInternalChange;

package/dist/pd-radio-group/PdRadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdRadioGroup.d.ts","sourceRoot":"","sources":["../../src/pd-radio-group/PdRadioGroup.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D;;GAEG;AACH,qBAAa,YAAa,SAAQ,aAAa;IAC7C,OAAgB,MAAM,EAAE,cAAc,CAmBpC;IAEO,YAAY,IAAI,IAAI;IAyBpB,MAAM;IAmBf,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,qBAAqB;CAmB9B"}
+{"version":3,"file":"PdRadioGroup.d.ts","sourceRoot":"","sources":["../../src/pd-radio-group/PdRadioGroup.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAa,SAAQ,aAAa;IAC7C,OAAgB,MAAM,EAAE,cAAc,CAmBpC;IAEO,YAAY,IAAI,IAAI;IAyBpB,MAAM;IAwBf,OAAO,CAAC,UAAU;IAkDlB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,qBAAqB;CAmB9B"}