@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/types/components/pds-popover/pds-popover.d.ts

@@ -0,0 +1,292 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { PlacementType, PopoverPaddingType } from "../../utils/types";
+import { PdsPopoverEventDetail } from './popover-interface';
+/**
+ * @slot trigger - The trigger element for the popover
+ * @slot (default) - The content to display inside the popover
+ */
+export declare class PdsPopover {
+    /**
+     * Reference to the Host element
+     */
+    el: HTMLPdsPopoverElement;
+    /**
+     * Determines when the popover is active
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Tracks if the component is still mounted to prevent memory leaks
+     */
+    private isComponentMounted;
+    /**
+     * Set once `componentDidLoad` has built the portal, so a later reconnect knows to rebuild it
+     */
+    private hasLoaded;
+    /**
+     * A popover without a componentId keeps one generated portal id, even when the portal is rebuilt
+     */
+    private generatedPortalId;
+    /**
+     * Reference to the trigger element
+     */
+    private triggerEl;
+    /**
+     * Puts the trigger's ARIA back when something else removes or changes it
+     */
+    private triggerObserver;
+    /**
+     * Portal element: in document.body, or in the open dialog the popover is in
+     */
+    private portalEl;
+    /**
+     * Stops floating-ui's autoUpdate, which repositions the open panel as its trigger or the page moves or resizes
+     */
+    private stopAutoUpdate;
+    /**
+     * Counts positioning runs, so a run that resolves after a newer one started is dropped
+     */
+    private positioningRun;
+    /**
+     * The latest positioning run, which pdsPopoverOpen waits for so the panel's side is set when it fires
+     */
+    private positioning;
+    /**
+     * Set while show() waits to emit pdsPopoverOpen, so a hide() in the meantime emits it first
+     */
+    private openEventPending;
+    /**
+     * Track moved nodes and their placeholders for restoration
+     */
+    private movedNodes;
+    /**
+     * Timestamp when popover was opened (for preventing immediate close)
+     */
+    private openTimestamp;
+    /**
+     * Set while hover holds the popover open, until a click pins it or it closes
+     */
+    private hoverOpened;
+    private hoverOpenTimer?;
+    private hoverCloseTimer?;
+    /**
+     * Set when the pointer left while focus was in the panel, so focus leaving it closes it instead
+     */
+    private closeWhenFocusLeaves;
+    /**
+     * How far the pointer was from the panel at its last move after leaving the trigger
+     */
+    private panelDistance;
+    /**
+     * Stands in for the panel in the Tab order, right after the trigger, while the popover is open
+     */
+    private tabGuardEl;
+    /**
+     * Set while focus passes through the guard on its way out of the panel
+     */
+    private leavingPanel;
+    /**
+     * The direction of the Tab key being handled, until its default action has run
+     */
+    private tabDirection;
+    /**
+     * Instance counter for unique IDs
+     */
+    private static instanceCounter;
+    /**
+     * Bound handlers for cleanup
+     */
+    private boundClickOutsideHandler;
+    private boundEscapeKeyHandler;
+    /**
+     * Emitted when the popover is opened
+     */
+    pdsPopoverOpen: EventEmitter<PdsPopoverEventDetail>;
+    /**
+     * Emitted when the popover is closed
+     */
+    pdsPopoverClose: EventEmitter<PdsPopoverEventDetail>;
+    /**
+     * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
+     * @defaultValue "show"
+     */
+    popoverTargetAction: 'show' | 'toggle' | 'hide';
+    /**
+     * Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes
+     * when the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way.
+     * @defaultValue "click"
+     */
+    openOn?: 'click' | 'hover';
+    protected openOnChanged(): void;
+    /**
+     * Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
+     * Manual popovers require the consumer to handle the visibility of the popover.
+     */
+    popoverType: 'auto' | 'manual';
+    /**
+     * A unique identifier for this component instance, used to build its portal element's `id`.
+     * Does not set the host element's `id` attribute — set `id` directly if you need one.
+     */
+    componentId: string;
+    /**
+     * Sets the maximum width of the popover, in pixels, including its padding.
+     * @defaultValue 400
+     */
+    maxWidth?: number;
+    /**
+     * Sets the padding of the popover content
+     * @defaultValue "md"
+     */
+    padding?: PopoverPaddingType;
+    applyPadding(): void;
+    private paddingToken;
+    /**
+     * Determines the preferred position of the popover
+     * @defaultValue "right"
+     */
+    placement: PlacementType;
+    restorePlacementDefault(newValue: typeof this.placement): void;
+    componentDidLoad(): void;
+    /**
+     * Handles changes to the trigger slot
+     */
+    private handleTriggerSlotChange;
+    private observeTrigger;
+    private linkTriggerToPortal;
+    /**
+     * Handles changes to the default slot (popover content)
+     * When the popover is active, re-sync content with portal to handle dynamic updates
+     */
+    private handleContentSlotChange;
+    /**
+     * Handles clicks on the trigger element
+     */
+    private handleTriggerClick;
+    private listenForHover;
+    private stopListeningForHover;
+    private handleHoverEnter;
+    private handleHoverLeave;
+    private handleMoveTowardPanel;
+    private distanceToPanel;
+    private handleHoverFocusOut;
+    private closeFromHover;
+    /**
+     * Keeps a popover that hover opened open, closing from then on as one opened by a click does. A
+     * manual one gives up Escape again, which it took only while hover held it.
+     */
+    private pin;
+    private clearHoverTimers;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private createPortal;
+    /**
+     * Adds Pine design system focus styles and dark mode border to the portal element
+     * Uses CSS variables from Pine's design tokens
+     */
+    private addPortalFocusStyles;
+    /**
+     * Moves slot content into portal (preserves event handlers and component instances)
+     */
+    private updatePortalContent;
+    /**
+     * Restores moved nodes back to their original positions
+     */
+    private restorePortalContent;
+    /** The focus style copied into a shadow root the panel opened in, which `document.head` can't reach. */
+    private shadowFocusStyle;
+    private copyFocusStylesInto;
+    private removePortal;
+    /**
+     * Opens the popover programmatically
+     */
+    show(): Promise<void>;
+    private emitOpenEvent;
+    /**
+     * Closes the popover programmatically
+     */
+    hide(): Promise<void>;
+    /**
+     * Toggles the popover open/closed state programmatically
+     */
+    toggle(): Promise<void>;
+    /**
+     * Puts the panel where it shows above everything around the popover. In an open dialog, it goes
+     * inside it: a modal dialog sits in the top layer above the body and makes the rest of the page
+     * inert, and a non-modal one sits above it by z-index. Right after the popover, it's next in the
+     * Tab order. In another component's slot, though, it would have no slot to render in, and in a
+     * form its buttons would submit it, so there it goes at the end of the dialog.
+     */
+    private placePortal;
+    private forgetOpen;
+    /**
+     * Whether an Escape is this popover's. One from a dialog the popover isn't in belongs to that
+     * dialog when it's above it: a top-layer dialog or a pds-modal. A plain non-modal dialog inside
+     * the popover's modal doesn't close on Escape, so the popover takes it.
+     */
+    private takesEscapeFrom;
+    /**
+     * Adds light dismiss listeners (click outside and escape key)
+     */
+    private addLightDismissListeners;
+    /** The dialog the panel was opened in, closed along with it. */
+    private watchedDialog;
+    private onDialogClose;
+    /** Closes the popover when the dialog it opened in closes, so it isn't left open inside. */
+    private watchDialogClose;
+    private unwatchDialogClose;
+    /**
+     * Removes light dismiss listeners
+     */
+    private removeLightDismissListeners;
+    /**
+     * Inside a dialog, the panel can sit in a form that wraps the dialog, which a body portal never
+     * did. A submit from the panel (a button in it, or Enter in a field in it) is stopped, so the
+     * panel behaves as it does in the body.
+     */
+    private handleSubmitFromPanel;
+    /**
+     * The panel's controls that Tab reaches through the guard. None when the panel sits right after
+     * the popover, in a dialog, where it's already next in the Tab order.
+     */
+    private guardedTabbables;
+    private syncTabGuard;
+    private endTabKey;
+    private handleTabGuardFocus;
+    private isAfterPopover;
+    private handleTabFromPanel;
+    /**
+     * Moves focus to the guard without preventing the Tab, so the browser's Tab carries on from there.
+     * Inert until then, the panel can't be where it lands.
+     */
+    private leavePanel;
+    private finishLeavingPanel;
+    private releasePanel;
+    /**
+     * Adds scroll and resize listeners for repositioning
+     */
+    private addScrollAndResizeListeners;
+    /**
+     * Removes scroll and resize listeners
+     */
+    private removeScrollAndResizeListeners;
+    /**
+     * Handles clicks outside the popover for light dismiss (auto type only)
+     */
+    private handleClickOutside;
+    /**
+     * Returns focus to the trigger element with visible focus indicator
+     * This ensures focus rings/outlines are shown as they would be with keyboard navigation
+     */
+    private returnFocusToTrigger;
+    /**
+     * Handles escape key press to close the popover
+     * Mirrors native Popover API: Escape closes and returns focus to trigger
+     */
+    private handleEscapeKey;
+    /**
+     * Positions the popover relative to its trigger element, flipping to the opposite side when only that side has
+     * room and shifting to stay 8px inside the viewport. The side it takes goes on the panel's `data-pds-popover-placement`.
+     */
+    private handlePopoverPositioning;
+    render(): any;
+}

package/dist/types/components/pds-popover/popover-interface.d.ts

@@ -0,0 +1,4 @@
+export interface PdsPopoverEventDetail {
+    componentId: string;
+    popoverType: 'auto' | 'manual';
+}

package/dist/types/components/pds-progress/pds-progress.d.ts

@@ -1,4 +1,8 @@
 export declare class PdsProgress {
+    el: HTMLPdsProgressElement;
+    private hostKeeper;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
     * Determines whether or not progress is animated.
     * @defaultValue false
@@ -10,7 +14,7 @@ export declare class PdsProgress {
     componentId: string;
     /**
     * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
-    * @defaultValue 'var(--pine-color-blue-300)'
+    * @defaultValue 'var(--pine-color-primary)'
     */
     fillColor: string;
     /**
@@ -18,7 +22,7 @@ export declare class PdsProgress {
     */
     label: string;
     /**
-    * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.
+    * Sets the progress fill percentage (0–100). Shown as text when `show-percent` is set.
     * @defaultValue 0
     */
     percent: number;

package/dist/types/components/pds-property/pds-property.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @slot (default) - The property text content.
+ */
+export declare class PdsProperty {
+    /**
+     * A unique identifier for this component instance. Does not set the host element's `id` attribute — set `id` directly if you need one.
+     */
+    componentId: string;
+    /**
+     * The name of the icon to display before the property text.
+     */
+    icon: string;
+    render(): any;
+}

package/dist/types/components/pds-radio/pds-radio.d.ts

@@ -1,36 +1,54 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot image - Custom image content to display instead of the default radio input. Ignored when `variant` is `pill`.
+ * @part image-container - The container for the image
+ * @lightDom renders-markup
+ */
 export declare class PdsRadio {
+    private readonly _type;
+    el: HTMLPdsRadioElement;
+    private hostKeeper;
+    private _hasImage;
     /**
-     * Determines whether or not the radio is checked.
+     * Determines whether or not the radio is checked. It keeps the value you set and doesn't change when the user picks a radio.
      * @defaultValue false
      */
     checked: boolean;
+    /**
+     * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
+     */
+    componentId: string;
     /**
      * Determines whether or not the radio is disabled.
      * @defaultValue false
      */
     disabled: boolean;
     /**
-     * Displays message text describing an invalid state.
+     * Displays an error message below the radio. It becomes the radio's accessible description only while `invalid` is set.
      */
     errorMessage: string;
     /**
-     * Determines whether or not the radio is invalid.
-     * @defaultValue false
+     * Displays a message or hint below the radio.
      */
-    invalid: boolean;
+    helperMessage: string;
     /**
-     * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
+     * Adds a border around the radio component for better visual separation. Ignored when `variant` is `pill`.
+     * @defaultValue false
      */
-    componentId: string;
+    hasBorder: boolean;
+    /**
+   * Determines whether or not the radio is invalid.
+   * @defaultValue false
+   */
+    invalid: boolean;
     /**
-     * String used for label text next to radio.
+     * Text to be displayed as the radio label.
      */
     label: string;
     /**
-     * String used for helper message below radio.
+     * Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers. Ignored when `variant` is `pill`.
      */
-    helperMessage: string;
+    hideLabel: boolean;
     /**
      * String used for radio `name` attribute.
      */
@@ -45,10 +63,23 @@ export declare class PdsRadio {
      */
     value: string;
     /**
-     * Emits a boolean indicating whether the checkbox is currently checked or unchecked.
+     * Sets the style variant of the radio. `pill` renders the label as a pill-shaped choice; the native input still handles keyboard, form, and screen reader behavior.
+     * @defaultValue default
+     */
+    variant: 'default' | 'pill';
+    /**
+     * Emitted with `true` when the user checks the radio, by a click or an arrow key. The radio is `event.target`, so read its `value` there.
+     * Not emitted when picking another radio unchecks this one. Not emitted inside `pds-radio-group` either; listen for `pdsRadioGroupChange` there.
      */
     pdsRadioChange: EventEmitter<boolean>;
     private handleRadioChange;
+    private hasImageSlot;
+    private hasImage;
+    private isPill;
     private classNames;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidRender(): void;
     render(): any;
 }

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

@@ -0,0 +1,84 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RadioGroupChangeEventDetail } from './radio-group-interface';
+/**
+ * @slot (default) - Child pds-radio components
+ * @lightDom renders-markup
+ */
+export declare class PdsRadioGroup {
+    el: HTMLPdsRadioGroupElement;
+    /**
+     * A unique identifier for this component instance, used to build its helper and error message `id`s.
+     * Does not set the host element's `id` attribute — set `id` directly if you need one.
+     */
+    componentId: string;
+    /**
+     * Stable group ID generated once during component initialization.
+     * Used to maintain DOM stability and accessibility relationships across re-renders.
+     */
+    private _groupId;
+    /**
+     * Layout direction for the radio group.
+     * @defaultValue column
+     */
+    direction: 'row' | 'column';
+    /**
+     * Displays an error message below the radio group. It's part of the group's accessible description, with or without `invalid`.
+     */
+    errorMessage: string;
+    /**
+     * Displays a message or hint below the radio group.
+     */
+    helperMessage: string;
+    /**
+     * Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.).
+     * @defaultValue xs
+     */
+    gap: string;
+    /**
+     * Determines whether or not the radio group is disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Determines whether or not the radio group is invalid.
+     * @defaultValue false
+     */
+    invalid: boolean;
+    /**
+     * Text to be displayed as the radio group label. It also names the group, unless you set `aria-label` or `aria-labelledby` on it.
+     */
+    groupLabel: string;
+    /**
+     * String used for radio `name` attribute. Applied to all child radios.
+     * Required for proper radio group behavior (mutual exclusivity and form submission).
+     */
+    name: string;
+    /**
+     * Determines whether or not the radio group is required.
+     * @defaultValue false
+     */
+    required: boolean;
+    /**
+     * Emitted when the user checks a radio in the group, by a click or an arrow key. `detail` has that radio's `value`
+     * and `componentId`, and `checked`, which is always `true`.
+     */
+    pdsRadioGroupChange: EventEmitter<RadioGroupChangeEventDetail>;
+    handlePropsChange(): void;
+    handleRadioChange(event: Event): void;
+    private updateChildRadios;
+    private hostKeeper;
+    private hostAriaObserver?;
+    private renderedLabelledBy?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncName;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    private classNames;
+    private getGapValue;
+    private get labelId();
+    private getAriaLabelledBy;
+    private getAriaDescribedBy;
+    render(): any;
+}

package/dist/types/components/pds-radio-group/radio-group-interface.d.ts

@@ -0,0 +1,5 @@
+export interface RadioGroupChangeEventDetail {
+    checked: boolean;
+    value?: string;
+    componentId?: string;
+}

package/dist/types/components/pds-row/pds-row.d.ts

@@ -1,5 +1,12 @@
-import { BoxTShirtSizeType } from '../../utils/types';
+import { BoxSpacingType } from '../../utils/types';
+/**
+ * @lightDom host-only
+ */
 export declare class PdsRow {
+    el: HTMLPdsRowElement;
+    private hostKeeper;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * Defines the vertical alignment of the row items.
      * @defaultValue start
@@ -12,7 +19,15 @@ export declare class PdsRow {
     /**
      * Defines the spacing between the row items.
      */
-    colGap?: BoxTShirtSizeType | null;
+    colGap?: BoxSpacingType | null;
+    /**
+     * Defines the spacing between the row items vertically.
+     */
+    colGapBlock?: BoxSpacingType | null;
+    /**
+     * Defines the spacing between the row items horizontally.
+     */
+    colGapInline?: BoxSpacingType | null;
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */