@progressive-development/pd-forms 1.0.1 → 1.0.3

package/dist/pd-input-image/pd-input-image.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2021 PD Progressive Development UG. All rights reserved.
+ */
+export declare const pdInputImageStyles: import('lit').CSSResult;
+//# sourceMappingURL=pd-input-image.styles.d.ts.map

package/dist/pd-input-image/pd-input-image.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input-image.styles.d.ts","sourceRoot":"","sources":["../../src/pd-input-image/pd-input-image.styles.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,eAAO,MAAM,kBAAkB,yBAuS9B,CAAC"}

package/dist/pd-input-image/pd-input-image.styles.js

@@ -0,0 +1,300 @@
+import { css } from 'lit';
+
+const pdInputImageStyles = css`
+  :host {
+    --pd-input-field-width: 100%;
+    display: block;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .image-area {
+    width: var(--pd-input-field-width, 300px);
+    max-width: 100%;
+  }
+
+  .image-container {
+    width: 100%;
+    min-height: 160px;
+    border: var(--pd-input-field-border, 1px solid var(--pd-default-light-col));
+    border-bottom: var(
+      --pd-input-field-border-bottom,
+      2px solid var(--pd-default-col)
+    );
+    border-radius: var(--pd-radius-md);
+    background: var(--pd-input-field-bg-col, var(--pd-default-bg-col));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  .image-container:not(.has-images) {
+    cursor: pointer;
+  }
+
+  .image-container:not(.has-images):hover {
+    border-color: var(
+      --pd-input-field-border-col-hover,
+      var(--pd-default-hover-col)
+    );
+  }
+
+  .image-container.has-images {
+    min-height: auto;
+  }
+
+  .image-container.error {
+    border: 1px solid var(--pd-default-error-col);
+    background-color: var(--pd-default-error-light-col);
+  }
+
+  .image-container.valid {
+    border: 1px solid var(--pd-default-success-col);
+    background-color: var(--pd-default-success-light-col);
+  }
+
+  .image-container[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Placeholder (empty state) */
+  .placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    color: var(--pd-default-font-muted-col, #999);
+    font-size: 0.85rem;
+    padding: 24px;
+    text-align: center;
+  }
+
+  .placeholder-icon {
+    --pd-icon-size: 2rem;
+    opacity: 0.5;
+  }
+
+  /* Thumbnail layout */
+  .thumb-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--pd-input-image-grid-gap, var(--pd-spacing-sm, 8px));
+    padding: var(--pd-spacing-sm, 8px);
+  }
+
+  .thumb-item {
+    position: relative;
+    width: var(--pd-input-image-thumb-size, 120px);
+    height: var(--pd-input-image-thumb-size, 120px);
+    border-radius: var(--pd-input-image-thumb-radius, var(--pd-radius-md, 4px));
+    overflow: hidden;
+  }
+
+  .thumb-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* Selectable mode */
+  .thumb-item.selectable {
+    cursor: pointer;
+    border: 3px solid transparent;
+    transition:
+      opacity 0.15s ease,
+      border-color 0.15s ease,
+      box-shadow 0.15s ease;
+  }
+
+  .thumb-item.selectable:not(.selected) {
+    opacity: 0.7;
+  }
+
+  .thumb-item.selectable:not(.selected):hover {
+    opacity: 0.9;
+    border-color: var(--pd-default-light-col);
+  }
+
+  .thumb-item.selectable.selected {
+    border-color: var(--pd-default-col);
+    box-shadow: 0 0 0 2px var(--pd-default-lighter-col);
+  }
+
+  /* Selection checkmark indicator (bottom-right) */
+  .thumb-select-indicator {
+    position: absolute;
+    bottom: 4px;
+    right: 4px;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.3);
+    transition: background 0.15s ease;
+  }
+
+  .thumb-item.selected .thumb-select-indicator {
+    background: var(--pd-default-col);
+  }
+
+  .check-icon {
+    --pd-icon-size: 16px;
+    --my-icon-fill-col: #fff;
+  }
+
+  /* Preview button in selectable mode (top-left) */
+  .thumb-preview-btn {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    cursor: pointer;
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .thumb-item:hover .thumb-preview-btn {
+    opacity: 1;
+  }
+
+  /* Hover overlay on thumbnails (eye icon) */
+  .thumb-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+    cursor: pointer;
+  }
+
+  .thumb-item:hover .thumb-overlay {
+    opacity: 1;
+  }
+
+  .preview-icon {
+    --pd-icon-size: 1.5rem;
+    --my-icon-fill-col: #fff;
+  }
+
+  /* Remove icon on thumbnails (pd-icon with .round) */
+  .thumb-remove {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    cursor: pointer;
+    z-index: 1;
+  }
+
+  /* Action row */
+  .action-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
+    width: var(--pd-input-field-width, 300px);
+    max-width: 100%;
+  }
+
+  .image-count {
+    font-size: 0.8rem;
+    color: var(--pd-default-font-muted-col, #999);
+  }
+
+  .max-hint {
+    font-size: 0.8rem;
+    color: var(--pd-default-font-muted-col, #999);
+    font-style: italic;
+  }
+
+  /* URL input row */
+  .url-input-row {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    margin-top: 4px;
+    width: var(--pd-input-field-width, 300px);
+    max-width: 100%;
+  }
+
+  .url-input-row pd-input {
+    flex: 1;
+    --pd-input-field-width: 100%;
+  }
+
+  /* URL badge on thumbnails */
+  .thumb-url-badge {
+    position: absolute;
+    bottom: 4px;
+    left: 4px;
+    font-size: 0.6rem;
+    font-weight: 600;
+    color: #fff;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 3px;
+    padding: 1px 4px;
+    line-height: 1.2;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  /* Hidden file input */
+  .file-input-hidden {
+    position: absolute;
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+  }
+
+  /* Fullscreen preview overlay */
+  .image-preview-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--pd-popup-z-index, 100);
+    background: var(
+      --pd-popup-modal-bg-rgba,
+      var(--pd-modal-overlay-col, rgba(0, 0, 0, 0.7))
+    );
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--pd-spacing-lg, 24px);
+  }
+
+  .image-preview-container {
+    position: relative;
+    display: flex;
+    gap: var(--pd-spacing-lg, 24px);
+    max-width: 90vw;
+    max-height: 90vh;
+  }
+
+  .image-preview-main img {
+    max-width: 90vw;
+    max-height: 85vh;
+    object-fit: contain;
+    border-radius: var(--pd-radius-md);
+  }
+
+  .image-preview-close {
+    position: absolute;
+    top: -12px;
+    right: -12px;
+    cursor: pointer;
+  }
+`;
+
+export { pdInputImageStyles };

package/dist/pd-input-image.d.ts

@@ -0,0 +1,2 @@
+export * from './pd-input-image/pd-input-image'
+export {}

package/dist/pd-input-image.js

@@ -0,0 +1,8 @@
+import { PdInputImage } from './pd-input-image/PdInputImage.js';
+
+const tag = "pd-input-image";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdInputImage);
+}
+
+export { PdInputImage };

package/dist/pd-range/PdRange.d.ts

@@ -27,6 +27,8 @@ export declare class PdRange extends PdBaseUIInput {
     step: number;
     /** Map of values to display labels. */
     optionValueMapper: Record<string, string>;
+    /** Hide tick marks below the slider. */
+    noTicks: boolean;
     /** Form field name. */
     name: string;
     protected _input: HTMLInputElement | null | undefined;

package/dist/pd-range/PdRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdRange.d.ts","sourceRoot":"","sources":["../../src/pd-range/PdRange.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhE,OAAO,EAAE,aAAa,EAAoB,MAAM,6BAA6B,CAAC;AAE9E;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,OAAQ,SAAQ,aAAa;IACxC,qBAAqB;IAErB,GAAG,EAAE,MAAM,CAAK;IAEhB,qBAAqB;IAErB,GAAG,EAAE,MAAM,CAAM;IAEjB,sBAAsB;IAEtB,IAAI,SAAK;IAET,uCAAuC;IAEvC,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAE/C,uBAAuB;IAEvB,IAAI,SAAM;IAEV,SAAS,CAAC,MAAM,EAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;IAEvD,OAAgB,MAAM,EAAE,cAAc,CA0JpC;;IAOO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOhD,YAAY,IAAI,IAAI;IAK7B,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAInC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI;IAgBtC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI;IAcvC,KAAK,IAAI,IAAI;IAIJ,MAAM;IA6CN,gBAAgB,IAAI,MAAM;IAI5B,KAAK,IAAI,IAAI;CAGrB"}
+{"version":3,"file":"PdRange.d.ts","sourceRoot":"","sources":["../../src/pd-range/PdRange.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhE,OAAO,EAAE,aAAa,EAAoB,MAAM,6BAA6B,CAAC;AAE9E;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,OAAQ,SAAQ,aAAa;IACxC,qBAAqB;IAErB,GAAG,EAAE,MAAM,CAAK;IAEhB,qBAAqB;IAErB,GAAG,EAAE,MAAM,CAAM;IAEjB,sBAAsB;IAEtB,IAAI,SAAK;IAET,uCAAuC;IAEvC,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAE/C,wCAAwC;IAExC,OAAO,UAAS;IAEhB,uBAAuB;IAEvB,IAAI,SAAM;IAEV,SAAS,CAAC,MAAM,EAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;IAEvD,OAAgB,MAAM,EAAE,cAAc,CA0JpC;;IAOO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOhD,YAAY,IAAI,IAAI;IAK7B,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAInC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI;IAgBtC,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,KAAK,GAAG,IAAI;IAcvC,KAAK,IAAI,IAAI;IAIJ,MAAM;IA+CN,gBAAgB,IAAI,MAAM;IAI5B,KAAK,IAAI,IAAI;CAGrB"}

package/dist/pd-range/PdRange.js

@@ -19,6 +19,7 @@ class PdRange extends PdBaseUIInput {
     this.max = 10;
     this.step = 1;
     this.optionValueMapper = {};
+    this.noTicks = false;
     this.name = "";
     this._inputType = INPUT_TYPE_RANGE;
   }
@@ -48,7 +49,7 @@ class PdRange extends PdBaseUIInput {
         background: transparent;
         background-color: var(--pd-range-bg-col, var(--pd-default-col));
         padding: 0.5rem;
-        height: var(--pd-input-field-range-height, 1.7rem);
+        height: var(--pd-input-field-height, 2.5rem);
         box-sizing: border-box;
         border-radius: 0.75rem;
       }
@@ -253,14 +254,14 @@ class PdRange extends PdBaseUIInput {
           @blur="${this._onBlur}"
           @focus="${this._onFocus}"
         />
-        <div
-          class="ticks ${this.disabled ? "disabled" : "enabled"}"
-          aria-hidden="true"
-        >
-          ${Array.from({ length: this.max - this.min + 1 }).map(
+        ${this.noTicks ? "" : html`<div
+              class="ticks ${this.disabled ? "disabled" : "enabled"}"
+              aria-hidden="true"
+            >
+              ${Array.from({ length: this.max - this.min + 1 }).map(
       () => html`<span class="tick">|</span>`
     )}
-        </div>
+            </div>`}
       </div>
       ${this._renderErrorMsg()}
     `;
@@ -284,6 +285,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Object })
 ], PdRange.prototype, "optionValueMapper");
+__decorateClass([
+  property({ type: Boolean, attribute: "no-ticks" })
+], PdRange.prototype, "noTicks");
 __decorateClass([
   property({ type: String })
 ], PdRange.prototype, "name");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progressive-development/pd-forms",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Webcomponents library 'pd-forms' for form input elements.",
   "author": "PD Progressive Development",
   "license": "MIT",
@@ -18,12 +18,14 @@
     "./pd-panel-button": "./dist/pd-panel-button.js",
     "./pd-button-select-group": "./dist/pd-button-select-group.js",
     "./pd-checkbox": "./dist/pd-checkbox.js",
+    "./pd-color-picker": "./dist/pd-color-picker.js",
     "./pd-form-container": "./dist/pd-form-container.js",
     "./pd-form-field": "./dist/pd-form-field.js",
     "./pd-form-row": "./dist/pd-form-row.js",
     "./pd-hover-box": "./dist/pd-hover-box.js",
     "./pd-input-area": "./dist/pd-input-area.js",
     "./pd-input-file": "./dist/pd-input-file.js",
+    "./pd-input-image": "./dist/pd-input-image.js",
     "./pd-input-time": "./dist/pd-input-time.js",
     "./pd-input": "./dist/pd-input.js",
     "./pd-radio-group": "./dist/pd-radio-group.js",
@@ -46,9 +48,9 @@
     "@lit/localize": "^0.12.2",
     "@lit-labs/motion": "^1.0.8",
     "tslib": "^2.8.1",
-    "@progressive-development/pd-icon": "1.0.1",
-    "@progressive-development/pd-model": "1.1.0",
-    "@progressive-development/pd-shared-styles": "0.3.2"
+    "@progressive-development/pd-icon": "1.0.2",
+    "@progressive-development/pd-shared-styles": "0.3.2",
+    "@progressive-development/pd-model": "1.1.1"
   },
   "customElements": "custom-elements.json",
   "scripts": {

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

@@ -1,84 +0,0 @@
-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<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 +0,0 @@
-{"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/pd-button-group.stories.d.ts

@@ -1,45 +0,0 @@
-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<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;
-/** 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 +0,0 @@
-{"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/pd-button-select-group.stories.d.ts

@@ -1,46 +0,0 @@
-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<PdButtonSelectGroupArgs>;
-/**
- * Default configuration with basic options.
- * Click the button to open the dropdown panel.
- */
-export declare const Default: 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 +0,0 @@
-{"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/pd-checkbox.stories.d.ts

@@ -1,45 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components-vite';
-/**
- * Story arguments interface for pd-checkbox component.
- * Defines all configurable properties available in Storybook controls.
- */
-interface PdCheckboxArgs {
-    /** The label text displayed next to the checkbox */
-    label: string;
-    /** The name attribute for form submission */
-    valueName: string;
-    /** Initial checked state ("true" or "false") */
-    initValue: string;
-    /** Type of checkbox control: CHECK, RADIO, or SWITCH */
-    checkType: "CHECK" | "RADIO" | "SWITCH";
-    /** Whether the checkbox is disabled */
-    disabled: boolean;
-    /** Whether the checkbox is read-only */
-    readonly: boolean;
-    /** Whether the checkbox is required */
-    required: boolean;
-}
-/**
- * ## pd-checkbox
- *
- * A versatile checkbox component supporting three visual styles:
- * standard checkbox, radio button, and toggle switch.
- *
- * ### Features
- * - **Three Check Types**: CHECK (standard checkbox), RADIO (radio button style), SWITCH (toggle switch)
- * - **States**: Supports checked, unchecked, disabled, readonly, and required states
- * - **Accessibility**: Keyboard navigation with Space/Enter support
- * - **Form Integration**: Works with pd-form-container for validation
- */
-declare const meta: Meta<PdCheckboxArgs>;
-export default meta;
-type Story = StoryObj<PdCheckboxArgs>;
-/** Default unchecked checkbox with a label. Interactive via Controls panel. */
-export declare const Default: Story;
-/** All check types and states at a glance. */
-export declare const AllVariants: Story;
-/** Required checkbox with form validation pattern. */
-export declare const Required: Story;
-/** CSS Custom Properties -- Branded and Redesigned variants. */
-export declare const CustomStyling: Story;
-//# sourceMappingURL=pd-checkbox.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pd-checkbox.stories.d.ts","sourceRoot":"","sources":["../../src/pd-checkbox/pd-checkbox.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAErE,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AAMnC;;;GAGG;AACH,UAAU,cAAc;IACtB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,SAAS,EAAE,MAAM,CAAC;IAClB,wDAAwD;IACxD,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IACxC,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAMD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,cAAc,CAuF9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;AAMtC,+EAA+E;AAC/E,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAMF,8CAA8C;AAC9C,eAAO,MAAM,WAAW,EAAE,KA+IzB,CAAC;AAMF,sDAAsD;AACtD,eAAO,MAAM,QAAQ,EAAE,KA0CtB,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAsK3B,CAAC"}