@progressive-development/pd-forms 0.9.2 → 1.0.0

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

@@ -1,57 +1,191 @@
-import { CSSResultGroup } from 'lit';
+import { CSSResultGroup, nothing, TemplateResult } from 'lit';
 import { PdBaseUI } from '../base/pd-base-ui';
 /**
- * A reusable button component for primary and secondary actions.
+ * Button size presets for the responsive scale system.
+ * Each size maps to a scale factor that proportionally adjusts all dimensions.
+ */
+export type PdButtonSize = "sm" | "md" | "lg" | "xl";
+/**
+ * Button type attribute for native button behavior.
+ */
+export type PdButtonType = "button" | "submit" | "reset";
+/**
+ * A simple, accessible button component for form actions and general UI interactions.
  *
  * @tagname pd-button
- * pd-calendar-cell
+ * @summary Button for form actions with icon support, loading state, and responsive scaling.
  *
- * @summary
- * The `pd-button` component provides a styled button element with support for
- * primary and gradient styles, disabled state, and customizable appearance via CSS custom properties.
+ * @event button-clicked - Fired when clicked or activated via keyboard. Emits `value` as detail.
  *
- * @property {boolean} primary - Displays the button with a primary style (e.g. highlighted).
- * @property {boolean} gradient - Applies a linear gradient background to the button.
- * @property {boolean} disabled - Disables the button and prevents interaction.
- * @property {string} text - The visible button label. Default is `"Ok"`.
- * @property {string} value - A custom value that is emitted as part of the `button-clicked` event.
+ * @slot prefix - Content before the button text.
+ * @slot suffix - Content after the button text.
  *
- * @event button-clicked - Fired when the button is clicked (not when disabled). Emits the `value` as `event.detail`.
+ * @csspart button - The native button element.
+ * @csspart label - The text label span.
+ * @csspart loader - The loading spinner (when loading=true).
+ * @csspart icon - The pd-icon element (when icon is set).
  *
- * @cssprop --pd-button-width - The button's width. Default: `140px`.
- * @cssprop --pd-button-height - The button's height. Default: `2rem`.
- * @cssprop --pd-button-bg-col - Background color of the button.
- * @cssprop --pd-button-font-col - Font color of the button.
- * @cssprop --pd-button-border - Border of the button.
- * @cssprop --pd-button-box-shadow - Box shadow styling of the button.
- * @cssprop --pd-button-box-shadow-hover - Hover box shadow effect.
- * @cssprop --pd-button-bg-col-hover - Hover background color.
- * @cssprop --pd-button-font-col-hover - Hover font color.
- * @cssprop --pd-button-border-hover - Border style on hover.
- * @cssprop --pd-button-primary-bg-col - Background color for primary buttons.
- * @cssprop --pd-button-primary-font-col - Font color for primary buttons.
- * @cssprop --pd-button-primary-bg-col-hover - Hover background for primary buttons.
- * @cssprop --pd-button-primary-font-col-hover - Hover font color for primary buttons.
- * @cssprop --pd-button-bg-col-disabled - Background color for disabled state.
- * @cssprop --pd-button-font-col-disabled - Font color for disabled state.
- * @cssprop --pd-button-border-disabled - Border style for disabled state.
- * @cssprop --pd-button-font-size - Font size of the text inside the button.
- * @cssprop --pd-button-font-weight - Font weight of the button text.
- * @cssprop --pd-border-radius - Border radius of the button.
- *
- * @slot default - The default slot renders the button label. Usually set via the `text` property.
+ * @cssprop --pd-button-scale - Scale factor for sizing. Default: `1`.
+ * @cssprop --pd-button-min-width - Minimum width. Default: `auto`.
+ * @cssprop --pd-button-width - Button width. Default: `auto`.
+ * @cssprop --pd-button-height - Button height. Default: `calc(2.5rem * scale)`.
+ * @cssprop --pd-button-min-height - Button min height. Default: 44px (god practice as min for for touch).
+ * @cssprop --pd-button-padding - Horizontal padding. Default: `calc(1rem * scale)`.
+ * @cssprop --pd-button-font-size - Font size. Default: `calc(1rem * scale)`.
+ * @cssprop --pd-button-border-radius - Border radius. Default: `var(--pd-radius-md)`.
+ * @cssprop --pd-button-gap - Gap between elements. Default: `calc(0.5rem * scale)`.
+ * @cssprop --pd-button-bg-col - Background color.
+ * @cssprop --pd-button-font-col - Text color.
+ * @cssprop --pd-button-border-col - Border color.
+ * @cssprop --pd-button-bg-col-hover - Hover background.
+ * @cssprop --pd-button-font-col-hover - Hover text color.
+ * @cssprop --pd-button-primary-bg-col - Primary background.
+ * @cssprop --pd-button-primary-font-col - Primary text color.
+ * @cssprop --pd-button-primary-bg-col-hover - Primary hover background.
+ * @cssprop --pd-button-bg-col-disabled - Disabled background.
+ * @cssprop --pd-button-font-col-disabled - Disabled text color.
+ * @cssprop --pd-button-selected-bg-col - Selected background.
+ * @cssprop --pd-button-selected-font-col - Selected text color.
+ * @cssprop --pd-button-selected-shadow - Selected shadow.
+ * @cssprop --pd-button-gradient-start - Gradient start color.
+ * @cssprop --pd-button-gradient-end - Gradient end color.
+ * @cssprop --pd-button-icon-size - Icon size.
+ * @cssprop --pd-button-white-space - Text wrapping behavior. Default: `nowrap`.
+ * @cssprop --pd-button-font-weight - Font weight for button text. Default: `600`.
  */
 export declare class PdButton extends PdBaseUI {
     /**
-     * @event button-clicked
+     * Displays the button with primary/highlighted styling.
+     * Use for the main action in a form or dialog.
      */
     primary: boolean;
+    /**
+     * Applies a linear gradient background to the button.
+     * Customize gradient colors via `--pd-button-gradient-start` and `--pd-button-gradient-end`.
+     */
     gradient: boolean;
+    /**
+     * Indicates toggle/selected state for toggle buttons.
+     * When true, the button displays with selected styling and sets `aria-pressed="true"`.
+     * Use for toggle buttons, filter buttons, or any button that maintains a selected state.
+     */
+    selected: boolean;
+    /**
+     * Disables the button and prevents all interaction.
+     * Disabled buttons are removed from tab order.
+     */
     disabled: boolean;
+    /**
+     * Shows a loading spinner and prevents interaction.
+     * Use when an async operation is in progress.
+     */
+    loading: boolean;
+    /**
+     * Makes the button expand to fill its container width.
+     */
+    fullWidth: boolean;
+    /**
+     * The visible button label text.
+     * Set to empty string for icon-only buttons.
+     * @default "Ok"
+     */
     text: string;
+    /**
+     * Icon name from the pd-icon library.
+     * When set, displays the icon before the text (or after if iconPosition="end").
+     * For icon-only buttons, set text="" and provide just the icon.
+     */
+    icon?: string;
+    /**
+     * Accessible label for icon-only buttons.
+     * When set, this value is used as aria-label instead of the icon name.
+     * Required for accessible icon-only buttons (e.g., "Close", "Edit", "Delete").
+     */
+    iconLabel?: string;
+    /**
+     * Position of the icon relative to the text.
+     * @default "start"
+     */
+    iconPosition: "start" | "end";
+    /**
+     * A custom value emitted as `event.detail` with the `button-clicked` event.
+     */
     value?: string;
+    /**
+     * Predefined size preset for responsive scaling.
+     * Values: "sm", "md", "lg", "xl"
+     */
+    size: PdButtonSize;
+    /**
+     * Native button type attribute.
+     * @default "button"
+     */
+    type: PdButtonType;
+    /**
+     * Grid span value for use within pd-form-row.
+     * Supports semantic values: "quarter", "third", "half", "two-thirds", "three-quarters", "full"
+     * or numeric values: "1" through "12".
+     */
+    span?: string;
+    /** Tracks active/pressed state for visual feedback.
+     * @ignore */
+    private _isPressed;
     static styles: CSSResultGroup;
-    render(): import('lit').TemplateResult<1>;
-    private _handleClick;
+    render(): TemplateResult<1>;
+    /**
+     * Override point for aria-expanded attribute on the button.
+     * Used by PdPanelButton to indicate panel open state.
+     */
+    protected get buttonAriaExpanded(): "true" | "false" | "undefined";
+    /**
+     * Override point for aria-haspopup attribute on the button.
+     * Used by PdPanelButton to indicate dropdown behavior.
+     */
+    protected get buttonAriaHasPopup(): "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog";
+    /**
+     * Override point for aria-controls attribute on the button.
+     * Used by PdPanelButton to link button with panel.
+     */
+    protected get buttonAriaControls(): string | typeof nothing;
+    /**
+     * Override point for suffix content inside the button.
+     * Used by PdPanelButton for the toggle arrow.
+     */
+    protected renderSuffixContent(): TemplateResult | typeof nothing;
+    /**
+     * Override point for content rendered after the button element.
+     * Used by PdPanelButton for the dropdown panel.
+     */
+    protected renderAfterButton(): TemplateResult | typeof nothing;
+    /**
+     * Renders the icon element. Protected for subclass access.
+     */
+    protected renderIcon(): TemplateResult | typeof nothing;
+    /**
+     * Handles click events on the button.
+     * Protected so subclasses like PdPanelButton can override.
+     */
+    protected handleClick(): void;
+    /**
+     * Handles mousedown for visual pressed state.
+     */
+    private _handleMouseDown;
+    /**
+     * Handles mouseup/mouseleave to reset pressed state.
+     */
+    private _handleMouseUp;
+    /**
+     * Handles keydown events for keyboard activation.
+     */
+    private _handleKeyDown;
+    /**
+     * Handles keyup events to complete keyboard activation.
+     */
+    private _handleKeyUp;
+    /**
+     * Dispatches the button-clicked event.
+     * @fires button-clicked
+     */
+    private _emitButtonClicked;
 }
 //# sourceMappingURL=PdButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PdButton.d.ts","sourceRoot":"","sources":["../../src/pd-button/PdButton.ts"],"names":[],"mappings":"AACA;;;IAGI;AAEJ,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBAAa,QAAS,SAAQ,QAAQ;IACpC;;OAEG;IAGH,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAQ;IAGZ,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,OAAgB,MAAM,EAAE,cAAc,CA4FpC;IAEO,MAAM;IAQf,OAAO,CAAC,YAAY;CAWrB"}
+{"version":3,"file":"PdButton.d.ts","sourceRoot":"","sources":["../../src/pd-button/PdButton.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGzE,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,0CAA0C,CAAC;AAElD;;;GAGG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBAAa,QAAS,SAAQ,QAAQ;IAKpC;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;;OAIG;IAEH,IAAI,SAAQ;IAEZ;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,YAAY,EAAE,OAAO,GAAG,KAAK,CAAW;IAExC;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,IAAI,EAAE,YAAY,CAAQ;IAE1B;;;OAGG;IAEH,IAAI,EAAE,YAAY,CAAY;IAE9B;;;;OAIG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAMd;iBACa;IAEb,OAAO,CAAC,UAAU,CAAS;IAM3B,OAAgB,MAAM,EAAE,cAAc,CAsVpC;IAMO,MAAM;IAgEf;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAAI,MAAM,GAAG,OAAO,GAAG,WAAW,CAEjE;IAED;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAC5B,MAAM,GACN,OAAO,GACP,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,CAEX;IAED;;;OAGG;IACH,SAAS,KAAK,kBAAkB,IAAI,MAAM,GAAG,OAAO,OAAO,CAE1D;IAED;;;OAGG;IACH,SAAS,CAAC,mBAAmB,IAAI,cAAc,GAAG,OAAO,OAAO;IAIhE;;;OAGG;IACH,SAAS,CAAC,iBAAiB,IAAI,cAAc,GAAG,OAAO,OAAO;IAI9D;;OAEG;IACH,SAAS,CAAC,UAAU,IAAI,cAAc,GAAG,OAAO,OAAO;IAWvD;;;OAGG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAM7B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;OAEG;IACH,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;OAEG;IACH,OAAO,CAAC,YAAY;IAUpB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;CAS3B"}