@progressive-development/pd-forms 0.9.1 → 1.0.0

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

@@ -1,12 +1,84 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    component: string;
-    tags: string[];
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { PdButtonSize, PdButtonType } from './PdButton.js';
+/**
+ * Story arguments interface for pd-button component.
+ * Maps to the component's public API.
+ */
+interface PdButtonArgs {
+    /** The visible button label text */
+    text: string;
+    /** Icon name from pd-icon library */
+    icon: string;
+    /** Position of the icon: "start" or "end" */
+    iconPosition: "start" | "end";
+    /** Primary button styling */
+    primary: boolean;
+    /** Gradient background styling */
+    gradient: boolean;
+    /** Selected/toggle state */
+    selected: boolean;
+    /** Disabled state */
+    disabled: boolean;
+    /** Loading state with spinner */
+    loading: boolean;
+    /** Full width mode */
+    fullWidth: boolean;
+    /** Custom value for button-clicked event */
+    value: string;
+    /** Size preset: sm, md, lg, xl */
+    size: PdButtonSize;
+    /** Native button type */
+    type: PdButtonType;
+}
+/**
+ * ## pd-button
+ *
+ * A simple, accessible button component for form actions and general UI interactions.
+ *
+ * ### Features
+ * - Primary and secondary styles
+ * - Gradient background option
+ * - Selected/toggle state with `aria-pressed`
+ * - Icon support via `icon` property (pd-icon integration)
+ * - Icon-only buttons with proper accessibility
+ * - Loading state with spinner
+ * - Responsive scale system (sm, md, lg, xl)
+ * - Full keyboard accessibility (Enter, Space)
+ * - Native `<button>` element for proper semantics
+ * - CSS parts for external styling
+ * - Prefix and suffix slots for custom content
+ *
+ * ### Accessibility
+ * - Uses native `<button>` element
+ * - Keyboard navigation: Tab to focus, Enter/Space to activate
+ * - `aria-disabled` for disabled state
+ * - `aria-busy` for loading state
+ * - `aria-pressed` for selected/toggle state
+ * - `aria-label` for icon-only buttons
+ * - Focus-visible styling for keyboard users
+ * - Minimum touch target of 44x44px
+ */
+declare const meta: Meta<PdButtonArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const Button: Story;
-export declare const PrimaryButton: Story;
-export declare const DisabledButton: Story;
+type Story = StoryObj<PdButtonArgs>;
+/** Default button with standard styling. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All button variants and states at a glance. */
+export declare const AllVariants: Story;
+/** All size variants displayed together. */
+export declare const AllSizes: Story;
+/** Icon positions and icon-only buttons in one compact overview. */
+export declare const Icons: Story;
+/** Full width button that fills its container. */
+export declare const FullWidth: Story;
+/** Form action buttons — typical submit/cancel pattern. */
+export declare const FormActions: Story;
+/** Buttons using prefix/suffix slots for custom content. */
+export declare const WithSlots: Story;
+/** Interactive toggle button demo. */
+export declare const ToggleButton: Story;
+/** Demonstrates text wrapping behavior with long labels. */
+export declare const TextLengths: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-button.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-button.stories.d.ts","sourceRoot":"","sources":["../../src/pd-button/pd-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAM3D,QAAA,MAAM,IAAI;;;;CAIuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,MAAM,EAAE,KAQpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAK5B,CAAC"}
+{"version":3,"file":"pd-button.stories.d.ts","sourceRoot":"","sources":["../../src/pd-button/pd-button.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAKrE,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAMhE;;;GAGG;AACH,UAAU,YAAY;IACpB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,6CAA6C;IAC7C,YAAY,EAAE,OAAO,GAAG,KAAK,CAAC;IAC9B,6BAA6B;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,4BAA4B;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,qBAAqB;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,OAAO,EAAE,OAAO,CAAC;IACjB,sBAAsB;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,IAAI,EAAE,YAAY,CAAC;IACnB,yBAAyB;IACzB,IAAI,EAAE,YAAY,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,YAAY,CAyG5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;AAMpC,4EAA4E;AAC5E,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAMF,kDAAkD;AAClD,eAAO,MAAM,WAAW,EAAE,KAyDzB,CAAC;AAMF,4CAA4C;AAC5C,eAAO,MAAM,QAAQ,EAAE,KA6CtB,CAAC;AAMF,oEAAoE;AACpE,eAAO,MAAM,KAAK,EAAE,KAgFnB,CAAC;AAMF,kDAAkD;AAClD,eAAO,MAAM,SAAS,EAAE,KAqBvB,CAAC;AAMF,2DAA2D;AAC3D,eAAO,MAAM,WAAW,EAAE,KAezB,CAAC;AAMF,4DAA4D;AAC5D,eAAO,MAAM,SAAS,EAAE,KA+BvB,CAAC;AAMF,sCAAsC;AACtC,eAAO,MAAM,YAAY,EAAE,KA4C1B,CAAC;AAMF,4DAA4D;AAC5D,eAAO,MAAM,WAAW,EAAE,KA4DzB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KAyI3B,CAAC"}

package/dist/pd-button-group/PdButtonGroup.d.ts

@@ -1,9 +1,34 @@
 import { CSSResultGroup, PropertyValues } from 'lit';
 import { PdBaseUI } from '../base/pd-base-ui';
 import { ButtonData } from '../types';
+/**
+ * Button group component for single-selection button sets.
+ *
+ * @tagname pd-button-group
+ * @summary Single-selection button group with horizontal or vertical layout.
+ *
+ * @event pd-button-group-change - Fired when selection changes. Emits `{selected}` detail.
+ *
+ * @cssprop --pd-button-group-direction - Flex direction. Default: `row`.
+ * @cssprop --pd-button-group-width - Group width. Default: `auto`.
+ * @cssprop --pd-radius-md - Border radius for outer corners. Default: `0.5rem`.
+ * @cssprop --pd-button-border-radius - Border radius for child buttons. Default: `0`.
+ * @cssprop --pd-button-width - Width for child buttons. Default: `100%`.
+ */
 export declare class PdButtonGroup extends PdBaseUI {
+    /** Array of button definitions (text, icon, disabled state). */
     buttonList: ButtonData[];
+    /** Array of initially selected button indices. */
     initValue: number[];
+    /** Stack buttons vertically instead of horizontally. */
+    vertical: boolean;
+    /**
+     * Accessible label for the button group.
+     * Required for screen readers to understand the purpose of the group.
+     * Example: "View options", "Time period", "Filter by category"
+     */
+    groupLabel?: string;
+    /** @ignore */
     private _selectedButtons;
     static styles: CSSResultGroup;
     willUpdate(changedProps: PropertyValues<this>): void;

package/dist/pd-button-group/PdButtonGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdButtonGroup.d.ts","sourceRoot":"","sources":["../../src/pd-button-group/PdButtonGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,uCAAuC,CAAC;AAE/C,qBAAa,aAAc,SAAQ,QAAQ;IAEzC,UAAU,EAAE,UAAU,EAAE,CAAM;IAG9B,SAAS,EAAE,MAAM,EAAE,CAAM;IAGzB,OAAO,CAAC,gBAAgB,CAAgB;IAExC,OAAgB,MAAM,EAAE,cAAc,CA2CpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAWtD,KAAK,CAAC,aAAa,EAAE,MAAM;IAIzB,MAAM;IAkBf,OAAO,CAAC,OAAO;CAYhB"}
+{"version":3,"file":"PdButtonGroup.d.ts","sourceRoot":"","sources":["../../src/pd-button-group/PdButtonGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,cAAc,EAAW,MAAM,KAAK,CAAC;AAGzE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,OAAO,2BAA2B,CAAC;AAEnC;;;;;;;;;;;;;GAaG;AACH,qBAAa,aAAc,SAAQ,QAAQ;IACzC,gEAAgE;IAEhE,UAAU,EAAE,UAAU,EAAE,CAAM;IAE9B,kDAAkD;IAElD,SAAS,EAAE,MAAM,EAAE,CAAM;IAEzB,wDAAwD;IAExD,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,cAAc;IAEd,OAAO,CAAC,gBAAgB,CAAgB;IAExC,OAAgB,MAAM,EAAE,cAAc,CAoDpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAWtD,KAAK,CAAC,aAAa,EAAE,MAAM;IAIzB,MAAM;IA2Bf,OAAO,CAAC,OAAO;CAYhB"}

package/dist/pd-button-group/PdButtonGroup.js

@@ -1,7 +1,8 @@
-import { css, html } from 'lit';
+import { css, nothing, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { PdBaseUI } from '../base/pd-base-ui.js';
-import '../pd-panel-button.js';
+import '../pd-button.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -17,6 +18,7 @@ class PdButtonGroup extends PdBaseUI {
     super(...arguments);
     this.buttonList = [];
     this.initValue = [];
+    this.vertical = false;
     this._selectedButtons = [];
   }
   static {
@@ -27,40 +29,49 @@ class PdButtonGroup extends PdBaseUI {
         display: inline-block;
         --group-direction: var(--pd-button-group-direction, row);
         --group-width: var(--pd-button-group-width, auto);
-        /*--pd-icon-button-border-radius: 0;*/
-        --group-border-radius: var(--pd-border-radius, 0.5rem);
+        --group-border-radius: var(--pd-radius-md);
       }
 
       .button-group {
         display: flex;
         flex-direction: var(--group-direction);
         width: var(--group-width);
-        --pd-icon-button-width: 100%;
+        --pd-button-width: 100%;
+        --pd-button-border-radius: 0;
       }
 
-      /*  geht noch nicht */
-      .button-group pd-panel-button:first-child {
-        border-top-left-radius: var(--group-border-radius);
-        border-bottom-left-radius: var(--group-border-radius);
+      /* Horizontal layout (default): rounded left/right edges */
+      .button-group pd-button:first-child {
+        --pd-button-border-radius: var(--group-border-radius) 0 0
+          var(--group-border-radius);
       }
 
-      .button-group pd-panel-button:last-child {
-        border-top-right-radius: var(--group-border-radius);
-        border-bottom-right-radius: var(--group-border-radiusm);
+      .button-group pd-button:last-child {
+        --pd-button-border-radius: 0 var(--group-border-radius)
+          var(--group-border-radius) 0;
       }
 
-      :host([vertical]) .button-group pd-panel-button:first-child {
-        border-top-left-radius: var(--group-border-radius);
-        border-top-right-radius: var(--group-border-radius);
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
+      .button-group pd-button:only-child {
+        --pd-button-border-radius: var(--group-border-radius);
       }
 
-      :host([vertical]) .button-group pd-panel-button:last-child {
-        border-bottom-left-radius: var(--group-border-radius);
-        border-bottom-right-radius: var(--group-border-radius);
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
+      /* Vertical layout: rounded top/bottom edges */
+      .button-group.vertical {
+        flex-direction: column;
+      }
+
+      .button-group.vertical pd-button:first-child {
+        --pd-button-border-radius: var(--group-border-radius)
+          var(--group-border-radius) 0 0;
+      }
+
+      .button-group.vertical pd-button:last-child {
+        --pd-button-border-radius: 0 0 var(--group-border-radius)
+          var(--group-border-radius);
+      }
+
+      .button-group.vertical pd-button:only-child {
+        --pd-button-border-radius: var(--group-border-radius);
       }
     `
     ];
@@ -74,17 +85,25 @@ class PdButtonGroup extends PdBaseUI {
     this._selectedButtons = [selectedValue];
   }
   render() {
+    const groupClasses = {
+      "button-group": true,
+      vertical: this.vertical
+    };
     return html`
-      <div class="button-group">
+      <div
+        class="${classMap(groupClasses)}"
+        role="group"
+        aria-label="${this.groupLabel || nothing}"
+      >
         ${this.buttonList.map(
       (data, index) => html`
-            <pd-panel-button
+            <pd-button
               ?selected="${this._selectedButtons.includes(index)}"
-              buttonText="${data.text || ""}"
-              pdButtonIcon="${data.pdIcon || ""}"
+              text="${data.text || ""}"
+              icon="${data.pdIcon || ""}"
               ?disabled="${data.disabled === true}"
               @button-clicked="${() => this.onClick(index)}"
-            ></pd-panel-button>
+            ></pd-button>
           `
     )}
       </div>
@@ -108,6 +127,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Array })
 ], PdButtonGroup.prototype, "initValue");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdButtonGroup.prototype, "vertical");
+__decorateClass([
+  property({ type: String, attribute: "group-label" })
+], PdButtonGroup.prototype, "groupLabel");
 __decorateClass([
   state()
 ], PdButtonGroup.prototype, "_selectedButtons");

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

@@ -1,20 +1,45 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    component: string;
-    tags: string[];
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { ButtonData } from '../types.js';
+interface PdButtonGroupArgs {
+    buttonList: ButtonData[];
+    initValue: number[];
+}
+/**
+ * ## pd-button-group
+ *
+ * A button group component for single-selection button sets.
+ * Buttons are visually connected with shared borders and rounded outer corners.
+ *
+ * ### Features
+ * - Single-selection mode (radio-button-like behavior)
+ * - Horizontal or vertical layout via `vertical` attribute
+ * - Supports icons, text, or both via `ButtonData` array
+ * - Automatic border-radius handling for first/last/only buttons
+ * - Forwards `--pd-button-scale` to child buttons for consistent sizing
+ * - Custom colors via CSS custom properties
+ * - Emits `pd-button-group-change` event on selection change
+ *
+ * ### Accessibility
+ * - `role="group"` for screen reader grouping
+ * - `group-label` property for accessible group name (aria-label)
+ * - Individual buttons are keyboard navigable
+ * - Selected button has visual distinction (inset shadow)
+ * - Disabled buttons are skipped during selection
+ *
+ */
+declare const meta: Meta<PdButtonGroupArgs>;
 export default meta;
-type Story = StoryObj;
-export declare const DefaultHorizontal: Story;
+type Story = StoryObj<PdButtonGroupArgs>;
+/** Default horizontal button group. Interactive via Controls panel. */
+export declare const Default: Story;
+/** Button group with pre-selected button via initValue. */
 export declare const WithInitialSelection: Story;
-export declare const VerticalGroup: Story;
-export declare const VerticalGroupSized: Story;
-export declare const HorizontalGroupSized: Story;
-export declare const NoInitialSelection: Story;
-export declare const EventLogging: Story;
-export declare const IconGroup: Story;
-export declare const VerticalIconGroup: Story;
-export declare const ColorCustomizedGroup: Story;
-export declare const WithDisabledButtons: Story;
+/** Vertical button group layout. */
+export declare const Vertical: Story;
+/** Overview of all button group variants at a glance. */
+export declare const AllVariants: Story;
+/** Different sizing options using --pd-button-scale and --pd-button-group-width. */
+export declare const Scaling: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-button-group.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pd-button-group.stories.d.ts","sourceRoot":"","sources":["../../src/pd-button-group/pd-button-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,sBAAsB,CAAC;AAgB9B,QAAA,MAAM,IAAI;;;;CAIM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,iBAAiB,EAAE,KAI/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAOlC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAIhC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAS1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAWvB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAmBlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAIjC,CAAC"}
+{"version":3,"file":"pd-button-group.stories.d.ts","sourceRoot":"","sources":["../../src/pd-button-group/pd-button-group.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAIrE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,OAAO,sBAAsB,CAAC;AAM9B,UAAU,iBAAiB;IACzB,UAAU,EAAE,UAAU,EAAE,CAAC;IACzB,SAAS,EAAE,MAAM,EAAE,CAAC;CACrB;AAmCD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAwDjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC;AAMzC,uEAAuE;AACvE,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAMF,2DAA2D;AAC3D,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAMF,oCAAoC;AACpC,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAMF,yDAAyD;AACzD,eAAO,MAAM,WAAW,EAAE,KAwDzB,CAAC;AAMF,oFAAoF;AACpF,eAAO,MAAM,OAAO,EAAE,KAsDrB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KA2G3B,CAAC"}

package/dist/pd-button-select-group/PdButtonSelectGroup.d.ts

@@ -1,18 +1,32 @@
-import { CSSResultGroup, PropertyValues } from 'lit';
+import { CSSResultGroup, PropertyValues, nothing } from 'lit';
 import { PdBaseUI } from '../base/pd-base-ui.js';
 import { ButtonData } from '../types.js';
 /**
+ * Dropdown button selector combining pd-panel-button with pd-button-group.
+ *
  * @tagname pd-button-select-group
+ *
+ * @event pd-button-selection-changed - Fired when selection changes with `{selected}` detail.
+ *
+ * @cssprop --pd-panel-padding - Panel content padding. Default: `0px`.
  */
 export declare class PdButtonSelectGroup extends PdBaseUI {
+    /** Array of selectable button options. */
     options: ButtonData[];
+    /** Initially selected option index */
     initValue: number;
+    /** Accessible label for the button group (announced by screen readers). */
+    groupLabel: string;
+    /** @ignore */
     private _selectedValue;
-    private _buttonGroupEl;
+    /** @ignore */
+    private _buttonGroupEl?;
+    /** @ignore */
+    private _panelButtonEl?;
     static styles: CSSResultGroup;
     willUpdate(changedProps: PropertyValues<this>): void;
     reset(selectedValue: number): void;
-    render(): import('lit').TemplateResult<1> | "";
+    render(): typeof nothing | import('lit').TemplateResult<1>;
     private handleSelectionChange;
 }
 //# sourceMappingURL=PdButtonSelectGroup.d.ts.map

package/dist/pd-button-select-group/PdButtonSelectGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdButtonSelectGroup.d.ts","sourceRoot":"","sources":["../../src/pd-button-select-group/PdButtonSelectGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uCAAuC,CAAC;AAE/C;;GAEG;AACH,qBAAa,mBAAoB,SAAQ,QAAQ;IAE/C,OAAO,EAAE,UAAU,EAAE,CAAM;IAG3B,SAAS,EAAE,MAAM,CAAM;IAGvB,OAAO,CAAC,cAAc,CAAc;IAGpC,OAAO,CAAC,cAAc,CAAM;IAE5B,OAAgB,MAAM,EAAE,cAAc,CAcpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAWtD,KAAK,CAAC,aAAa,EAAE,MAAM;IAOzB,MAAM;IAwBf,OAAO,CAAC,qBAAqB;CAe9B"}
+{"version":3,"file":"PdButtonSelectGroup.d.ts","sourceRoot":"","sources":["../../src/pd-button-select-group/PdButtonSelectGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAGzE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,uCAAuC,CAAC;AAE/C;;;;;;;;GAQG;AACH,qBAAa,mBAAoB,SAAQ,QAAQ;IAC/C,0CAA0C;IAE1C,OAAO,EAAE,UAAU,EAAE,CAAM;IAE3B,sCAAsC;IAEtC,SAAS,EAAE,MAAM,CAAM;IAEvB,2EAA2E;IAE3E,UAAU,SAAM;IAEhB,cAAc;IAEd,OAAO,CAAC,cAAc,CAAc;IAEpC,cAAc;IAEd,OAAO,CAAC,cAAc,CAAC,CAAuB;IAE9C,cAAc;IAEd,OAAO,CAAC,cAAc,CAAC,CAAuB;IAE9C,OAAgB,MAAM,EAAE,cAAc,CASpC;IAEO,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOtD,KAAK,CAAC,aAAa,EAAE,MAAM;IAOzB,MAAM;IA0Bf,OAAO,CAAC,qBAAqB;CAkB9B"}

package/dist/pd-button-select-group/PdButtonSelectGroup.js

@@ -1,4 +1,4 @@
-import { css, html } from 'lit';
+import { css, nothing, html } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { PdBaseUI } from '../base/pd-base-ui.js';
 import '../pd-panel-button.js';
@@ -18,6 +18,7 @@ class PdButtonSelectGroup extends PdBaseUI {
     super(...arguments);
     this.options = [];
     this.initValue = -1;
+    this.groupLabel = "";
     this._selectedValue = -1;
   }
   static {
@@ -27,18 +28,13 @@ class PdButtonSelectGroup extends PdBaseUI {
       :host {
         display: inline-block;
         position: relative;
-        --pd-panel-button-panel-padding: 0px;
-      }
-
-      .button-group-style {
-        --pd-button-group-direction: column;
-        --pd-icon-button-justify: flex-start;
+        --pd-panel-padding: 0px;
       }
     `
     ];
   }
   willUpdate(changedProps) {
-    if (changedProps.has("initValue") && this.initValue > 0 && this._selectedValue === -1) {
+    if (changedProps.has("initValue") && this.initValue >= 0) {
       this._selectedValue = this.initValue;
     }
   }
@@ -50,31 +46,34 @@ class PdButtonSelectGroup extends PdBaseUI {
   }
   render() {
     if (!this.options || this.options.length === 0) {
-      return "";
+      return nothing;
     }
     const selectedData = this.options[this._selectedValue === -1 ? 0 : this._selectedValue];
+    const isIconOnly = !selectedData?.text && !!selectedData?.pdIcon;
     return html`
       <pd-panel-button
-        panelButton
-        hideClose
-        .buttonText=${selectedData?.text ?? ""}
-        .pdButtonIcon=${selectedData?.pdIcon ?? ""}
+        hide-close
+        ?icon-only="${isIconOnly}"
+        .text="${selectedData?.text ?? ""}"
+        .icon="${selectedData?.pdIcon ?? ""}"
       >
         <pd-button-group
           id="buttonGroupId"
-          class="button-group-style"
-          .buttonList=${this.options}
-          .initValue=${[this._selectedValue]}
-          @pd-button-group-change=${this.handleSelectionChange}
+          vertical
+          .buttonList="${this.options}"
+          .initValue="${[this._selectedValue]}"
+          .groupLabel="${this.groupLabel}"
+          @pd-button-group-change="${this.handleSelectionChange}"
         ></pd-button-group>
       </pd-panel-button>
     `;
   }
   handleSelectionChange(e) {
+    e.stopPropagation();
     const [newIndex] = e.detail.selected;
     this._selectedValue = newIndex;
-    e.stopPropagation();
     window.dispatchEvent(new Event("close-button-panel-event"));
+    this._panelButtonEl?.focus();
     this.dispatchEvent(
       new CustomEvent("pd-button-selection-changed", {
         detail: { selected: newIndex },
@@ -82,7 +81,6 @@ class PdButtonSelectGroup extends PdBaseUI {
         composed: true
       })
     );
-    e.stopPropagation();
   }
 }
 __decorateClass([
@@ -91,11 +89,17 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], PdButtonSelectGroup.prototype, "initValue");
+__decorateClass([
+  property({ type: String, attribute: "group-label" })
+], PdButtonSelectGroup.prototype, "groupLabel");
 __decorateClass([
   state()
 ], PdButtonSelectGroup.prototype, "_selectedValue");
 __decorateClass([
   query("#buttonGroupId")
 ], PdButtonSelectGroup.prototype, "_buttonGroupEl");
+__decorateClass([
+  query("pd-panel-button")
+], PdButtonSelectGroup.prototype, "_panelButtonEl");
 
 export { PdButtonSelectGroup };

package/dist/pd-button-select-group/pd-button-select-group.stories.d.ts

@@ -1,21 +1,46 @@
-import { StoryObj } from '@storybook/web-components';
-declare const meta: {
-    title: string;
-    component: string;
-    tags: string[];
-    render: (args: import('@storybook/web-components').Args) => import('lit').TemplateResult<1>;
-    argTypes: {
-        initValue: {
-            control: "number";
-        };
-        options: {
-            control: "object";
-        };
-    };
-};
+import { Meta, StoryObj } from '@storybook/web-components-vite';
+import { ButtonData } from '../types.js';
+/**
+ * Story arguments interface for pd-button-select-group component.
+ * Defines all configurable properties available in Storybook controls.
+ */
+interface PdButtonSelectGroupArgs {
+    /** Array of button options to display in the dropdown */
+    options: ButtonData[];
+    /** Index of the initially selected option (-1 for no selection) */
+    initValue: number;
+    /** Accessible label for the button group */
+    groupLabel: string;
+}
+/**
+ * ## pd-button-select-group
+ *
+ * A dropdown select component that combines a `pd-panel-button` with a
+ * `pd-button-group` to create a compact single-selection dropdown.
+ *
+ * ### Features
+ * - **Single Selection**: Only one option can be selected at a time
+ * - **Dropdown Panel**: Options appear in a panel when the button is clicked
+ * - **Icon Support**: Each option can have an optional icon
+ * - **Disabled Options**: Individual options can be disabled
+ * - **Auto-close**: Panel closes automatically after selection
+ */
+declare const meta: Meta<PdButtonSelectGroupArgs>;
 export default meta;
-type Story = StoryObj;
+type Story = StoryObj<PdButtonSelectGroupArgs>;
+/**
+ * Default configuration with basic options.
+ * Click the button to open the dropdown panel.
+ */
 export declare const Default: Story;
-export declare const WithDisabledButtons: Story;
-export declare const InitSelectionSecond: Story;
+/** Options containing only text, no icons. Useful for simple selection scenarios. */
+export declare const TextOnlyOptions: Story;
+/** Options containing only icons, no text. Useful for compact icon-based controls. */
+export declare const IconOnlyOptions: Story;
+/** Dropdown with one disabled option. The "Word" option cannot be selected. */
+export declare const WithDisabledOption: Story;
+/** Extended list showing behavior with many options. */
+export declare const ManyOptions: Story;
+/** CSS Custom Properties — Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
 //# sourceMappingURL=pd-button-select-group.stories.d.ts.map

package/dist/pd-button-select-group/pd-button-select-group.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pd-button-select-group.stories.d.ts","sourceRoot":"","sources":["../../src/pd-button-select-group/pd-button-select-group.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,6BAA6B,CAAC;AAIrC,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAeM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AActB,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAQjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAQjC,CAAC"}
+{"version":3,"file":"pd-button-select-group.stories.d.ts","sourceRoot":"","sources":["../../src/pd-button-select-group/pd-button-select-group.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAMzC;;;GAGG;AACH,UAAU,uBAAuB;IAC/B,yDAAyD;IACzD,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,mEAAmE;IACnE,SAAS,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC;CACpB;AAiDD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,uBAAuB,CA0EvC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,uBAAuB,CAAC,CAAC;AAM/C;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAMF,qFAAqF;AACrF,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAMF,sFAAsF;AACtF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAMF,+EAA+E;AAC/E,eAAO,MAAM,kBAAkB,EAAE,KAKhC,CAAC;AAMF,wDAAwD;AACxD,eAAO,MAAM,WAAW,EAAE,KAYzB,CAAC;AAMF,+DAA+D;AAC/D,eAAO,MAAM,aAAa,EAAE,KAwF3B,CAAC"}

package/dist/pd-checkbox/PdCheckbox.d.ts

@@ -1,18 +1,39 @@
 import { CSSResultGroup } from 'lit';
 import { PdBaseUIInput } from '../base/pd-base-ui-input';
 /**
+ * Checkbox, radio, or switch input component.
+ *
  * @tagname pd-checkbox
+ * @summary Checkbox, radio button, or switch toggle input.
+ *
+ * @event pd-form-element-change - Fired when value changes. Detail: `{ value, name, parsedValue, state }`.
+ * @event enter-pressed - Fired when Enter key is pressed.
+ *
+ * @slot - Label text for the checkbox.
+ *
+ * @cssprop --pd-cb-col - Checked icon color.
+ * @cssprop --pd-cb-bg-col - Checked background color.
+ * @cssprop --pd-cb-unset-bg-col - Unchecked background color.
+ * @cssprop --pd-cb-border-col - Border color.
+ * @cssprop --pd-cb-border-col-readonly - Readonly border color.
+ * @cssprop --pd-cb-border-radius - Border radius.
+ * @cssprop --pd-cb-font-col - Label text color.
+ * @cssprop --pd-cb-font-col-readonly - Readonly label color.
+ * @cssprop --pd-cb-font-col-disabled - Disabled label color.
+ * @cssprop --pd-cb-switch-height - Switch variant height.
+ * @cssprop --pd-cb-switch-paddle-col - Switch paddle background.
  */
 export declare class PdCheckbox extends PdBaseUIInput {
+    /** Display type: CHECK (default), RADIO, or SWITCH. */
     checkType: "CHECK" | "RADIO" | "SWITCH";
     static styles: CSSResultGroup;
     constructor();
     setCheckedState(newValue: "true" | "false"): void;
     render(): import('lit').TemplateResult<1>;
     private _onClick;
-    private _onKeyPress;
-    private _onLinkClick;
+    private _onKeyDown;
     protected _getInitialValue(reset?: boolean): string;
     clear(): void;
+    _getParsedValue(): boolean;
 }
 //# sourceMappingURL=PdCheckbox.d.ts.map

package/dist/pd-checkbox/PdCheckbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdCheckbox.d.ts","sourceRoot":"","sources":["../../src/pd-checkbox/PdCheckbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,aAAa,EAAoB,MAAM,0BAA0B,CAAC;AAG3E;;GAEG;AACH,qBAAa,UAAW,SAAQ,aAAa;IAE3C,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAW;IAElD,OAAgB,MAAM,EAAE,cAAc,CAiMpC;;IAOK,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAI/C,MAAM;IAuCf,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;IAIpB,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM;IAM5C,KAAK,IAAI,IAAI;CAGrB"}
+{"version":3,"file":"PdCheckbox.d.ts","sourceRoot":"","sources":["../../src/pd-checkbox/PdCheckbox.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,aAAa,EAAoB,MAAM,0BAA0B,CAAC;AAG3E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,UAAW,SAAQ,aAAa;IAC3C,uDAAuD;IAEvD,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAW;IAElD,OAAgB,MAAM,EAAE,cAAc,CA0OpC;;IAOK,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAI/C,MAAM;IAsDf,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,UAAU;IAqBlB,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM;IAM5C,KAAK,IAAI,IAAI;IAIX,eAAe;CAIzB"}