@pine-ds/core 2.1.0 → 2.1.2

package/dist/pine-core/svg/user-star.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="pdsicon"><path d="M22.012 16.26h-4.38a4 4 0 0 1-1.34 2.57c-1.35-1.39-1.05-4.24-.25-5.73a15.5 15.5 0 0 1 2.61-3.5c.39-.43.3-1.09-.4-1.09h-4.56a1 1 0 0 0-.74.32l-4.08 4.28 3-9h-4.7l-5.16 15.25a.4.4 0 0 0 .27.52h-.05a.3.3 0 0 0 .16 0h4.73a1.26 1.26 0 0 0 .94-.43l3.22-3.76c-.18 1.88.29 3.52 1.93 4l.21.05h.27q.347.06.7.07h2.78c3.28-.07 4.51-1.86 4.84-3.55"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="pdsicon"><path fill-rule="evenodd" d="M1.293 21.707A1 1 0 0 0 3 21a10 10 0 0 1 .13-2.37 3 3 0 0 1 2-2 10 10 0 0 1 2.37-.13h4.55a1 1 0 0 0 0-2h-4.5a10.7 10.7 0 0 0-3 .21 5 5 0 0 0-3.33 3.34A10.2 10.2 0 0 0 1 21a1 1 0 0 0 .293.707m5.651-9.634A5.5 5.5 0 0 0 10 13a5.51 5.51 0 0 0 5.5-5.5 5.5 5.5 0 1 0-8.556 4.573M8.056 4.59a3.5 3.5 0 1 1 3.888 5.82 3.5 3.5 0 0 1-3.888-5.82M18.78 14.878a.5.5 0 0 1 .23.052.54.54 0 0 1 .23.22q.061.102.11.21l.77 1.55 1.72.26h.23a.52.52 0 0 1 .42.58.46.46 0 0 1-.14.29l-.16.17-1.24 1.21.29 1.71q.006.12 0 .24a.55.55 0 0 1-.05.31.54.54 0 0 1-.69.23l-.21-.11-1.54-.8-1.47.89-.21.11a.6.6 0 0 1-.32 0 .54.54 0 0 1-.34-.32.57.57 0 0 1-.06-.31 2 2 0 0 1 0-.24l.29-1.71-1.24-1.21-.17-.17a.6.6 0 0 1-.14-.29.52.52 0 0 1 .15-.43.5.5 0 0 1 .28-.15h.23l1.69-.26.77-1.55a1 1 0 0 1 .11-.21.5.5 0 0 1 .23-.22.5.5 0 0 1 .23-.053"/></svg>

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

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * @part button - The main button element that represents the button component.
  * @part caret - The caret icon element that appears when the button variant is 'disclosure'.
@@ -35,6 +36,7 @@ export declare class PdsButton {
      * Sets button variant styles as outlined in Figma documentation
      */
     variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled';
+    pdsClick: EventEmitter;
     private handleClick;
     private classNames;
     render(): any;

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

@@ -4,32 +4,32 @@ export declare class PdsChip {
      * A unique identifier used for the underlying component `id` attribute.
      */
     componentId: string;
-    /**
-     * Sets the color scheme of the chip.
-     * @defaultValue 'neutral'
-     */
-    sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
     /**
      * Determines whether a dot should be displayed on the chip.
      * @defaultValue false
      */
     dot: boolean;
     /**
-     *  Sets the text label content of the chip.
+     * Sets the text label content of the chip.
      */
     label: string;
     /**
-     * Determines whether the chip should be rendered in a larger size.
+     * Determines whether the chip should be displayed in a larger size.
      * @defaultValue false
      */
     large: boolean;
+    /**
+     * Defines the color scheme of the chip.
+     * @defaultValue 'neutral'
+     */
+    sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
     /**
      * Sets the style variant of the chip.
      * @defaultValue 'text'
      */
     variant: 'text' | 'tag' | 'dropdown';
     /**
-     * Event when close button is clicked on tag variant.
+     * Event emitted when the close button is clicked on a tag variant chip.
      */
     pdsTagCloseClick: EventEmitter;
     private handleCloseClick;

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class PdsCopytext {
     /**
-     * Determines whether `copytext` should have a border.
+     * Determines whether `copytext` should have a visible border.
      * @defaultValue true
      */
     border: boolean;
@@ -20,11 +20,11 @@ export declare class PdsCopytext {
      */
     truncate: boolean;
     /**
-     * String that is displayed and that is also copied to the clipboard upon interaction.
+     * The string displayed that is also copied to the clipboard upon interaction.
      */
     value: string;
     /**
-     * Event when copyText button is clicked.
+     * Event fired when copyText button is clicked.
      */
     pdsCopyTextClick: EventEmitter;
     private copyToClipboard;

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

@@ -8,7 +8,7 @@ export declare class PdsDivider {
      */
     offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
     /**
-     * Sets divider to display vertically
+     * Sets divider to display vertically.
      * @defaultValue false
      */
     vertical: boolean;

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

@@ -1,7 +1,9 @@
 export declare class PdsImage {
     /**
      * The image's alt tag. If none is provided,
-     * it will default to an empty string.
+     * it will default to an empty string, which is desired for
+     * decorative images.
+     * @defaultValue ''
      */
     alt?: string;
     /**
@@ -16,11 +18,12 @@ export declare class PdsImage {
     height?: number;
     /**
      * Indicates how the browser should load the image.
+     * @defaultValue eager
      */
     loading?: 'eager' | 'lazy';
     /**
      * Determines the intended display size of an image
-     * within certian breakpoints. Has no effect if `srcset`
+     * within certain breakpoints. Has no effect if `srcset`
      * is not set or value has no width descriptor.
      */
     sizes?: string;
@@ -29,7 +32,8 @@ export declare class PdsImage {
      */
     src: string;
     /**
-     * A set of image sources for the browser to use.
+     * A set of image sources for the browser to use
+     * for responsiveness.
      */
     srcset?: string;
     /**

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

@@ -1,5 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class PdsInput {
+    /**
+     * Specifies if and how the browser provides `autocomplete` assistance for the field.
+     */
+    autocomplete: string;
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */

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

@@ -1,6 +1,6 @@
 /**
- * @part link - The main link element that represents the link component.
- * @slot - Content is placed between the opening closing tags.
+ * @part link - Link element styles.
+ * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
  */
 export declare class PdsLink {
     /**
@@ -8,26 +8,22 @@ export declare class PdsLink {
      */
     componentId: string;
     /**
-     * When enabled, opens link in a new tab.
+     * Determines whether the link should open in a new tab.
      * @defaultValue false
      */
     external: boolean;
     /**
-     *
-     * Modifies the look of the link
+     * Sets the link variant styles.
+     * @defaultValue inline
      */
     variant: 'inline' | 'plain';
     /**
-     *
-     * The Font size follows t-shirt model
-     * sm: 12px
-     * md: 14px
-     * lg: 16px
+     * The font size of the link's text.
      * @defaultValue lg
      */
     fontSize: 'sm' | 'md' | 'lg';
     /**
-     * The URL that the hyperlink points to.
+     * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.
      */
     href: string;
     private classNames;

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

@@ -0,0 +1,45 @@
+import { PlacementType } from "../../utils/types";
+export declare class PdsPopover {
+    /**
+     * Reference to the Host element
+     */
+    el: HTMLPdsPopoverElement;
+    /**
+     * Determines when the popover is active
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * 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 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 used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Text that appears on the trigger element
+     */
+    text: string;
+    /**
+     * Sets the maximum width of the popover content
+     * @defaultValue 352
+     */
+    maxWidth?: number;
+    /**
+     * Determines the preferred position of the popover
+     * @defaultValue "right"
+     */
+    placement: PlacementType;
+    componentWillRender(): void;
+    handleClick(): void;
+    handleScroll(): void;
+    private handlePopoverPositioning;
+    render(): any;
+}

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

@@ -5,32 +5,32 @@ export declare class PdsRadio {
      * @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 error message text describing an invalid state.
      */
     errorMessage: string;
     /**
-     * Determines whether or not the radio is invalid.
-     * @defaultValue false
+     * Displays helper message text below radio.
      */
-    invalid: boolean;
+    helperMessage: string;
     /**
-     * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
-     */
-    componentId: string;
+   * Determines whether or not the radio is invalid.
+   * @defaultValue false
+   */
+    invalid: boolean;
     /**
      * String used for label text next to radio.
      */
     label: string;
-    /**
-     * String used for helper message below radio.
-     */
-    helperMessage: string;
     /**
      * String used for radio `name` attribute.
      */

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

@@ -0,0 +1,91 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PdsSelect {
+    private selectEl;
+    private slotContainer;
+    /**
+     * Specifies if and how the browser provides `autocomplete` assistance for the field.
+     */
+    autocomplete: string;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Indicates whether or not the select field is disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Displays error message text describing an invalid state.
+     */
+    errorMessage: string;
+    /**
+     * Displays helper message text below select.
+     */
+    helperMessage: string;
+    /**
+     * Determines whether or not the select is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Text to be displayed as the select label.
+     */
+    label: string;
+    /**
+     * Indicates whether multiple options can be selected.
+     * @defaultValue false
+     */
+    multiple: boolean;
+    /**
+     * Specifies the name. Submitted with the form name/value pair.
+     */
+    name: string;
+    /**
+     * Indicates whether or not the select field is required.
+     * @defaultValue false
+     */
+    required: boolean;
+    /**
+     * The value(s) of the selected option(s).
+     *
+     */
+    value?: string | string[];
+    /**
+     * Emitted when a keyboard input occurs.
+     */
+    pdsSelectChange: EventEmitter<InputEvent>;
+    /**
+     * Handles the change in the value of the select component.
+     * This method is called whenever the value of the select component changes.
+     * It updates the selected option accordingly.
+     */
+    valueChanged(): void;
+    componentWillLoad(): void;
+    /**
+     * Updates the selected option in the select element based on the current value.
+     *
+     * This method iterates through all the options of the select element and sets the
+     * 'selected' attribute on the option that matches the current value. If an option
+     * does not match the current value, the 'selected' attribute is removed.
+     *
+     * @private
+     * @returns {void}
+     */
+    private updateSelectedOption;
+    /**
+     * Emits an event on input change.
+    */
+    private onSelectUpdate;
+    /**
+     * Handles the change event for the slot element.
+     * This method is triggered when the slot content changes.
+     * It updates the inner HTML of the select element by cloning and appending
+     * the assigned <option> elements from the slot.
+     */
+    private handleSlotChange;
+    private getHelperMessage;
+    private getErrorMessage;
+    private renderMessages;
+    private classNames;
+    render(): any;
+}

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

@@ -6,54 +6,46 @@ export declare class PdsSwitch {
      */
     componentId: string;
     /**
-     * Determines the input 'checked' state
+     * Determines the input 'checked' state.
      */
     checked: boolean;
     /**
-     * Determines the input 'disabled' state, preventing user interaction
+     * Determines the input 'disabled' state, preventing user interaction.
      */
     disabled?: boolean;
     /**
-     * Displays message text describing an invalid state
+     * Displays message text describing an invalid state.
      */
     errorMessage?: string;
     /**
-     * Displays help text for additional description of an input
+     * Displays help text for additional description of an input.
      */
     helperMessage: string;
     /**
-     * Determines the input 'invalid' state, signifying an error is present
+     * Determines the input 'invalid' state, signifying an error is present.
      */
     invalid?: boolean;
     /**
-     * Displays text to describe the input
+     * Displays text to describe the input.
      */
     label: string;
     /**
-     * Identifies form data and unifies a group of radio inputs for toggling a single property/value
+     * Identifies form data and unifies a group of radio inputs for toggling a single property/value.
      */
     name: string;
     /**
-     * Determines the 'required' state of the input
+     * Determines the 'required' state of the input.
      */
     required?: boolean;
     /**
-     * Specifies the underlying input element type
-     * @defaultValue 'checkbox'
-     */
-    type: 'checkbox' | 'radio';
-    /**
-     * Provides input with a string submitted in form data, and can be used to distinguish radio inputs
+     * Provides input with a string submitted in form data.
      */
     value: string;
     /**
-     * Emits an event on input change
-    */
+     * Emits an event on input change.
+     */
     pdsSwitchChange: EventEmitter<InputEvent>;
     private onSwitchUpdate;
-    /**
-     * Generate switch classes
-     */
     private switchClassNames;
     render(): any;
 }

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

@@ -0,0 +1,27 @@
+export declare class PdsText {
+    /**
+     * Sets the text alignment.
+     */
+    align?: 'start' | 'center' | 'end' | 'justify';
+    /**
+     * Sets the text color.
+     */
+    color?: 'primary' | 'secondary' | 'neutral' | 'accent' | 'danger' | 'info' | 'success' | 'warning';
+    /**
+     * Set the bottom margin for the text.
+     */
+    gutter?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
+    /**
+     * Sets the font size.
+     */
+    size?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
+    /**
+     * Sets the font weight.
+     */
+    weight?: 'extra-light' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold';
+    /**
+     * Determines what semantic text tag to render.
+     */
+    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'code' | 'pre' | 'strong' | 'em';
+    render(): any;
+}

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

@@ -2,6 +2,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { TextareaChangeEventDetail } from './textarea-interface';
 export declare class PdsTextarea {
     el: HTMLPdsTextareaElement;
+    /**
+     * Specifies if and how the browser provides `autocomplete` assistance for the field.
+     */
+    autocomplete: string;
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */

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

@@ -1,4 +1,3 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * @slot (default) - The tooltip's target element
  * @slot content - HTML content for the tooltip
@@ -37,20 +36,17 @@ export declare class PdsTooltip {
      * @defaultValue "right"
      */
     placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    /**
+     * Sets the maximum width of the tooltip content
+     * @defaultValue "352px"
+     */
+    maxWidth: string;
     /**
      * Determines whether or not the tooltip is visible
      * @defaultValue false
      */
     opened: boolean;
     handleOpenToggle(): void;
-    /**
-     * Emitted after a tooltip is closed
-     */
-    pdsTooltipHide: EventEmitter;
-    /**
-     * Emitted after a tooltip is shown
-     */
-    pdsTooltipShow: EventEmitter;
     componentWillLoad(): void;
     componentDidUpdate(): void;
     componentDidRender(): void;