@pine-ds/core 3.0.3 → 3.2.0

package/dist/collection/components/pds-button/pds-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-button.js","sourceRoot":"","sources":["../../../src/components/pds-button/pds-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part button-content - Exposes the button content for styling.\n * @part button-text - Exposes the button text for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrls: ['pds-button.scss'],\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines the button's disabled state.\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Determines if the button should take up the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth? = false;\n\n  /**\n   * If provided, renders the component as an anchor (`<a>`) element instead of a button.\n   * When using href, button-specific props (type, name, value, loading) will be ignored.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Displays an icon in the button.\n   * @defaultValue null\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * When true, displays only the icon and visually hides the text (keeping it accessible).\n   */\n  @Prop() iconOnly? = false;\n\n  /**\n   * Determines if the button is in a loading state.\n   * When true, displays a loader and hides the button text.\n   * @defaultValue false\n   */\n  @Prop() loading? = false;\n\n  /**\n   * Provides the button with a submittable name.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies where to open the linked document when href is provided.\n   * Only applies when href is set.\n   */\n  @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Provides button with a type.\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Sets the style variant of the button.\n   * @defaultValue primary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  @Event() pdsClick: EventEmitter;\n\n  private handleClick = (ev: Event) => {\n    if (this.loading) {\n      ev.preventDefault();\n      return;\n    }\n\n    if (!this.href && this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form');\n        if (form) {\n          ev.preventDefault();\n\n          const fakeButton = document.createElement('button');\n          fakeButton.type = this.type;\n          fakeButton.style.display = 'none';\n          form.appendChild(fakeButton);\n          fakeButton.click();\n          fakeButton.remove();\n        }\n      }\n    }\n    this.pdsClick.emit(ev);\n  };\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    if (this.iconOnly) {\n      classNames.push('pds-button--icon-only');\n    }\n\n    if (this.loading) {\n      classNames.push('pds-button--loading');\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    // Common props for both button and anchor elements\n    const commonProps = {\n      class: this.classNames(),\n      part: 'button',\n    };\n\n    const attributes = () => {\n      if (this.href) {\n        return {\n          // Anchor element props\n          ...commonProps,\n          href: this.disabled ? null : this.href,\n          target: this.target,\n        };\n      }\n\n      return {\n        // Button element props\n        ...commonProps,\n        'aria-busy': this.loading ? 'true' : null,\n        'aria-live': this.loading ? 'polite' : null,\n        'disabled': this.disabled,\n        'name': this.name,\n        'type': this.type,\n        'value': this.value,\n      };\n    };\n\n    const ContentElement = this.href ? 'a' : 'button';\n\n    // Hide text when loading or iconOnly is true\n    const hideText = this.loading || this.iconOnly;\n\n    const content = (\n      <div class=\"pds-button__content\" part=\"button-content\">\n        {this.icon && this.variant !== 'disclosure' &&\n          <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} name={this.icon} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n        }\n\n        <span class={`pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`} part=\"button-text\">\n          <slot />\n        </span>\n\n        {this.loading && (\n          <span class=\"pds-button__loader\">\n            <pds-loader is-loading={true} size=\"var(--pine-font-size-body-2xl)\" variant=\"spinner\">\n              Loading...\n            </pds-loader>\n          </span>\n        )}\n\n        {this.variant === 'disclosure' &&\n          <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={caretDown} part=\"caret\" aria-hidden=\"true\"></pds-icon>\n        }\n      </div>\n    );\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <ContentElement {...attributes()}>\n          {content}\n        </ContentElement>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-button.js","sourceRoot":"","sources":["../../../src/components/pds-button/pds-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part button-content - Exposes the button content for styling.\n * @part button-text - Exposes the button text for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n * @slot (default) - Button text.\n * @slot start - Content to display before the button text.\n * @slot end - Content to display after the button text.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrls: ['pds-button.scss'],\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines the button's disabled state.\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Determines if the button should take up the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth? = false;\n\n  /**\n   * If provided, renders the component as an anchor (`<a>`) element instead of a button.\n   * When using href, button-specific props (type, name, value, loading) will be ignored.\n   */\n  @Prop() href?: string;\n\n  /**\n   * Displays a leading icon in the button. DEPRECATED.\n   * @defaultValue null\n   * @deprecated Use `start` slot instead.\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * When true, displays only the icon and visually hides the text (keeping it accessible).\n   */\n  @Prop() iconOnly? = false;\n\n  /**\n   * Determines if the button is in a loading state.\n   * When true, displays a loader and hides the button text.\n   * @defaultValue false\n   */\n  @Prop() loading? = false;\n\n  /**\n   * Provides the button with a submittable name.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies where to open the linked document when href is provided.\n   * Only applies when href is set.\n   */\n  @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Provides button with a type.\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Sets the style variant of the button.\n   * @defaultValue primary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  @Event() pdsClick: EventEmitter;\n\n  private handleClick = (ev: Event) => {\n    if (this.loading) {\n      ev.preventDefault();\n      return;\n    }\n\n    if (!this.href && this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form');\n        if (form) {\n          ev.preventDefault();\n\n          const fakeButton = document.createElement('button');\n          fakeButton.type = this.type;\n          fakeButton.style.display = 'none';\n          form.appendChild(fakeButton);\n          fakeButton.click();\n          fakeButton.remove();\n        }\n      }\n    }\n    this.pdsClick.emit(ev);\n  };\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    if (this.iconOnly) {\n      classNames.push('pds-button--icon-only');\n    }\n\n    if (this.loading) {\n      classNames.push('pds-button--loading');\n    }\n\n    return classNames.join(' ');\n  }\n\n  private hasSlotContent(slotName: string): boolean {\n    const elements = this.el.querySelectorAll(`[slot=\"${slotName}\"]`);\n    return elements.length > 0;\n  }\n\n  private renderStartContent() {\n    const hasIcon = this.icon && this.variant !== 'disclosure';\n    const hasStartSlot = this.hasSlotContent('start');\n\n    if (Boolean(hasIcon)) {\n      return (\n        <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} name={this.icon} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n      );\n    } else if (Boolean(hasStartSlot)) {\n      return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"start\" /></span>;\n    }\n\n    return null;\n  }\n\n  private renderEndContent() {\n    if (this.iconOnly) {\n      return null;\n    }\n\n    if (this.variant === 'disclosure') {\n      return (\n        <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={caretDown} part=\"caret\" aria-hidden=\"true\"></pds-icon>\n      );\n    } else if (this.hasSlotContent('end')) {\n      return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"end\" /></span>;\n    }\n\n    return null;\n  }\n\n  render() {\n    // Common props for both button and anchor elements\n    const commonProps = {\n      class: this.classNames(),\n      part: 'button',\n    };\n\n    const attributes = () => {\n      if (this.href) {\n        return {\n          // Anchor element props\n          ...commonProps,\n          href: this.disabled ? null : this.href,\n          target: this.target,\n        };\n      }\n\n      return {\n        // Button element props\n        ...commonProps,\n        'aria-busy': this.loading ? 'true' : null,\n        'aria-live': this.loading ? 'polite' : null,\n        'disabled': this.disabled,\n        'name': this.name,\n        'type': this.type,\n        'value': this.value,\n      };\n    };\n\n    const ContentElement = this.href ? 'a' : 'button';\n\n    // Hide text when loading or iconOnly is true\n    const hideText = this.loading || this.iconOnly;\n\n    const content = (\n      <div class=\"pds-button__content\" part=\"button-content\">\n        {this.renderStartContent()}\n\n        <span class={`pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`} part=\"button-text\">\n          <slot />\n        </span>\n\n        {this.loading && (\n          <span class=\"pds-button__loader\">\n            <pds-loader is-loading={true} size=\"var(--pine-font-size-body-2xl)\" variant=\"spinner\">\n              Loading...\n            </pds-loader>\n          </span>\n        )}\n\n        {this.renderEndContent()}\n      </div>\n    );\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <ContentElement {...attributes()}>\n          {content}\n        </ContentElement>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-button/stories/pds-button.stories.js

@@ -30,8 +30,10 @@ const BaseTemplate = (args) => html`
     value=${args.value}
     variant=${args.variant}
   >
-      ${args.slot}
-    </pds-button> `;
+    ${args.slot?.start}
+    ${args.slot?.default}
+    ${args.slot?.end}
+  </pds-button>`;
 
 export const Accent = BaseTemplate.bind();
 Accent.args = {
@@ -39,7 +41,9 @@ Accent.args = {
   fullWidth: false,
   iconOnly: false,
   loading: false,
-  slot: 'Accent',
+  slot: {
+    default: 'Accent',
+  },
   type: 'button',
   variant: 'accent',
 };
@@ -51,7 +55,9 @@ ButtonLink.args = {
   href: 'https://pine-design-system.netlify.app/',
   iconOnly: false,
   loading: false,
-  slot: 'Link Button',
+  slot: {
+    default: 'Link Button',
+  },
   target: '_blank',
   variant: 'primary',
 };
@@ -62,7 +68,9 @@ Destructive.args = {
   fullWidth: false,
   iconOnly: false,
   loading: false,
-  slot: 'Destructive',
+  slot: {
+    default: 'Destructive',
+  },
   type: 'button',
   variant: 'destructive',
 }
@@ -73,7 +81,9 @@ Disclosure.args = {
   fullWidth: false,
   iconOnly: false,
   loading: false,
-  slot: 'Disclosure',
+  slot: {
+    default: 'Disclosure',
+  },
   type: 'button',
   variant: 'disclosure'
 }
@@ -89,7 +99,24 @@ FullWidth.args = {
   fullWidth: true,
   iconOnly: false,
   loading: false,
-  slot: 'Full Width',
+  slot: {
+    default: 'Full Width',
+  },
+  type: 'button',
+  variant: 'primary'
+}
+
+export const StartAndEndSlots = BaseTemplate.bind({});
+StartAndEndSlots.args = {
+  disabled: false,
+  fullWidth: false,
+  iconOnly: false,
+  loading: false,
+  slot: {
+    start: html`<pds-icon slot="start" name="favorite"></pds-icon>`,
+    default: 'Button with Icons',
+    end: html`<pds-icon slot="end" name="add-image"></pds-icon>`
+  },
   type: 'button',
   variant: 'primary'
 }
@@ -101,7 +128,9 @@ IconOnly.args = {
   icon: 'favorite',
   iconOnly: true,
   loading: false,
-  slot: 'Icon Only',
+  slot: {
+    default: 'Icon Only',
+  },
   type: 'button',
   variant: 'secondary',
 };
@@ -112,7 +141,9 @@ Loading.args = {
   fullWidth: false,
   iconOnly: false,
   loading: true,
-  slot: 'Loading',
+  slot: {
+    default: 'Loading',
+  },
   type: 'button',
   variant: 'primary',
 }
@@ -123,7 +154,9 @@ Primary.args = {
   fullWidth: false,
   iconOnly: false,
   loading: false,
-  slot: 'Primary',
+  slot: {
+    default: 'Primary',
+  },
   type: 'button',
   variant: 'primary'
 }
@@ -134,7 +167,9 @@ Secondary.args = {
   fullWidth: false,
   iconOnly: false,
   loading: false,
-  slot: 'Secondary',
+  slot: {
+    default: 'Secondary',
+  },
   type: 'button',
   variant: 'secondary',
 }

package/dist/collection/components/pds-checkbox/pds-checkbox.js

@@ -1,8 +1,10 @@
 import { h, Host } from "@stencil/core";
 import { assignDescription, messageId } from "../../utils/form";
 import { danger } from "@pine-ds/icons/icons";
+import { inheritAriaAttributes } from "../../utils/attributes";
 export class PdsCheckbox {
     constructor() {
+        this.inheritedAttributes = {};
         /**
          * It determines whether or not the checkbox is checked.
          */
@@ -41,10 +43,13 @@ export class PdsCheckbox {
         }
         return classNames.join('  ');
     }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
+    }
     render() {
-        return (h(Host, { key: '794592fc5d1ab9b5d8efcc7b0708d0c008c0a62b', class: this.classNames() }, h("label", { key: 'f3f9c70f1a09685b1ce982bf4ec75d2386b98c99', htmlFor: this.componentId }, h("input", { key: 'c3d1c366b3c1e5e742971e12371ad609eddd9644', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }), h("span", { key: 'f7a85767dce55d15eaf087cc1ca072a4b5014aac', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: 'fc93320dcc90533a3b31b10bf1b7d8415d38781f', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '1cfc39921da6bb9103650a367eca38d7eb68da1e', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'e449ff1c84a1262a09b08369161a731574568f4c', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'a60ffb7c96f1d15735f263cb55cd982fbfcbe729', class: this.classNames() }, h("label", { key: '6ed2c8670cded5165761374362d9f1e9f386a4d2', htmlFor: this.componentId }, h("input", Object.assign({ key: '0661b30a9af3bd8ee83b2f3ceb249810a78f19a5', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), h("span", { key: 'b16d78ead4da7ebdffb0f37127bdacf8b1538f86', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '78e88b11ba9e2759264e08ff0ce9e16c9cf67170', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: '0ba7d2bd2b4f6c996eecdd103abe3fb6497e4376', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '65a94316603638e5230de0644fc8ca60e9543b63', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -336,6 +341,7 @@ export class PdsCheckbox {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "checked",

package/dist/collection/components/pds-checkbox/pds-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() hideLabel: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <label htmlFor={this.componentId}>\n          <input\n            type=\"checkbox\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            id={this.componentId}\n            indeterminate={this.indeterminate}\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onChange={this.handleCheckboxChange}\n            onInput={this.handleInput}\n          />\n          <span class={this.hideLabel ? 'visually-hidden' : ''}>\n            {this.label}\n          </span>\n        </label>\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-checkbox.js","sourceRoot":"","sources":["../../../src/components/pds-checkbox/pds-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n  shadow: true,\n})\nexport class PdsCheckbox {\n  private inheritedAttributes: Attributes = {};\n\n  @Element() el: HTMLPdsCheckboxElement;\n\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() hideLabel: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <label htmlFor={this.componentId}>\n          <input\n            type=\"checkbox\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            id={this.componentId}\n            indeterminate={this.indeterminate}\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onChange={this.handleCheckboxChange}\n            onInput={this.handleInput}\n            {...this.inheritedAttributes}\n          />\n          <span class={this.hideLabel ? 'visually-hidden' : ''}>\n            {this.label}\n          </span>\n        </label>\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-chip/pds-chip.js

@@ -48,7 +48,7 @@ export class PdsChip {
         return chipContent;
     }
     render() {
-        return (h(Host, { key: '965c426e2acb5bbd9d9dfb8a6b985127c5d8f7ca', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: '8520d64334e93add5b44c4524f0629e8e4bbdf86', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '6cf276e3efd146ed63201b5854ffb3e2037fad9c', icon: remove, size: "12px" })))));
+        return (h(Host, { key: 'b1987e434a5b9dcc4a5536660822bcb9c1f79e4f', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { key: '8f658cd564e86297a9b988d6080135e6d612be36', class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { key: '32266c84697e0ffa3ff5d2e554cdf6b7e598d0e6', icon: remove, size: "12px" })))));
     }
     static get is() { return "pds-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-chip/stories/pds-chip.stories.js

@@ -8,7 +8,7 @@ export default {
   decorators: [withActions],
   parameters: {
     actions: {
-      handles: ['onclick', 'pdsTagCloseClick'],
+      handles: ['pdsTagCloseClick'],
     },
   },
   title: 'components/Chip'

package/dist/collection/components/pds-copytext/pds-copytext.css

@@ -60,7 +60,7 @@
   width: 100%;
 }
 :host(.pds-copytext):host(.pds-copytext--full-width) pds-button span, :host(.pds-copytext):host(.pds-copytext--truncated) pds-button span {
-  text-align: left;
+  text-align: start;
   width: 100%;
 }
 :host(.pds-copytext):host(.pds-copytext--full-width) pds-button {

package/dist/collection/components/pds-copytext/pds-copytext.js

@@ -46,7 +46,7 @@ export class PdsCopytext {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '1d8bc5dd4e234f7ae3f1700d4ad58816422ff967', class: this.classNames(), id: this.componentId }, h("pds-button", { key: 'f1c42d6745efe6faff34ac0e538b589e1d709e41', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '2ba277f52661fe3852cf07b089b6f0b978f513f9' }, this.value), h("pds-icon", { key: '5730e7ad241b5ff56733db90c3580d1751c8ec4a', icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '46c38faeba9b70d2e510a4b6af08866577936478', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '6e28c11a9a7a57f4c256b0283b64ec655a897f65', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '6818451171f85fd6ad63f07c69871082d3fcba4e' }, this.value), h("pds-icon", { key: '05e683d7b28575d924d6af482e6ce4c3cfee3f05', icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-divider/pds-divider.js

@@ -19,7 +19,7 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '320aa3a83547a773630fbb1a1d8d9e57d3f54477', id: this.componentId }, h("hr", { key: '1d1b7aaf8c783ecad6a1b5ad91bd258acb21046b', class: this.classNames() })));
+        return (h(Host, { key: 'ee48ee45e0463abbd3cb7aa686f8d86928830ccb', id: this.componentId }, h("hr", { key: '4af739f85e502a7d9bff1b3581c283cb6ee53a0e', class: this.classNames() })));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.css

@@ -0,0 +1,68 @@
+:host {
+  cursor: pointer;
+  display: flex;
+  width: 100%; /* Ensure the host takes full width */
+}
+
+/* Make the disabled styles more specific and add !important to ensure they apply */
+:host(.is-disabled) {
+  cursor: not-allowed !important;
+  opacity: 0.5 !important;
+}
+:host(.is-disabled) .pds-dropdown-menu-item__content {
+  cursor: not-allowed !important;
+  pointer-events: none !important;
+}
+
+.pds-dropdown-menu-item__content {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--pine-dimension-xs);
+  display: flex;
+  flex-grow: 1; /* Make it grow to fill available space */
+  font: var(--pine-typography-body-medium);
+  gap: var(--pine-dimension-xs);
+  margin: calc(var(--pine-border-width) + 2px);
+  padding: var(--pine-dimension-xs);
+  text-align: start; /* Ensure text aligns properly */
+  width: 100%; /* Ensure full width */
+  /* Focus styles applied via class + browser focus */
+}
+.pds-dropdown-menu-item__content:hover {
+  background-color: var(--pine-color-grey-150);
+  color: var(--pine-color-text-hover);
+}
+.pds-dropdown-menu-item__content:focus, .pds-dropdown-menu-item__content:focus-visible, .pds-dropdown-menu-item__content.has-focus {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
+}
+
+:host(.destructive) .pds-dropdown-menu-item__content {
+  align-items: center;
+  color: var(--pine-color-danger);
+}
+:host(.destructive) .pds-dropdown-menu-item__content:hover {
+  background-color: var(--pine-color-danger-disabled);
+  color: var(--pine-color-danger-hover);
+}
+:host(.destructive) .pds-dropdown-menu-item__content:focus, :host(.destructive) .pds-dropdown-menu-item__content:focus-visible, :host(.destructive) .pds-dropdown-menu-item__content.has-focus {
+  background-color: var(--pine-color-danger-disabled);
+  outline: var(--pine-outline-focus-danger);
+  outline-offset: var(--pine-border-width);
+}
+
+/* Remove outline on contained links using the custom property */
+pds-link::part(link):focus,
+pds-link::part(link):focus-visible {
+  box-shadow: none;
+  outline: none;
+}
+
+pds-link::part(link) {
+  display: block;
+  margin-inline: calc(var(--pine-dimension-xs) * -1);
+  padding-inline: var(--pine-dimension-xs);
+  width: 100%;
+}

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js

@@ -0,0 +1,219 @@
+import { h, Host } from "@stencil/core";
+export class PdsDropdownMenuItem {
+    constructor() {
+        /**
+         * It determines whether or not the dropdown-item is destructive.
+         * @defaultValue false
+         */
+        this.destructive = false;
+        /**
+         * It determines whether or not the dropdown-item is disabled.
+         * @defaultValue false
+         */
+        this.disabled = false;
+        this.hasFocus = false;
+        this.handleFocus = () => {
+            this.hasFocus = true;
+        };
+        this.handleBlur = () => {
+            this.hasFocus = false;
+        };
+        this.handleKeyDown = (event) => {
+            // Handle keyboard events
+            if (!this.disabled && (event.key === 'Enter')) {
+                // Only prevent default for button elements or Space key
+                // For links with Enter key, we want the default navigation behavior
+                if (!this.href) {
+                    event.preventDefault();
+                }
+                this.handleClick();
+            }
+        };
+    }
+    /**
+     * Trigger the click event
+     */
+    async clickItem() {
+        this.handleClick();
+    }
+    ;
+    handleClick() {
+        var _a;
+        // Filter only pds-dropdown-menu-item elements and find the index of the current item
+        const menuItems = Array.from(this.host.parentNode.children).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
+        const itemIndex = menuItems.indexOf(this.host);
+        // Get the text content from the slotted content
+        const content = ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+        this.pdsClick.emit({
+            itemIndex,
+            item: this.host,
+            content
+        });
+    }
+    renderElement() {
+        if (this.href !== undefined) {
+            return (h("pds-link", { href: this.disabled ? null : this.href, class: {
+                    'pds-dropdown-menu-item__content': true,
+                    'has-focus': this.hasFocus
+                }, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
+        }
+        return (h("button", { class: {
+                'pds-dropdown-menu-item__content': true,
+                'has-focus': this.hasFocus
+            }, tabIndex: this.disabled ? -1 : 0, type: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
+    }
+    render() {
+        return (h(Host, { key: 'b27f62c0f1cfe56e777b1a875b93954d4c9da00d', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+    }
+    static get is() { return "pds-dropdown-menu-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-dropdown-menu-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-dropdown-menu-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "destructive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "It determines whether or not the dropdown-item is destructive."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "destructive",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "It determines whether or not the dropdown-item is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "href",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsClick",
+                "name": "pdsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dropdown-item is clicked."
+                },
+                "complexType": {
+                    "original": "{itemIndex: number, item: HTMLPdsDropdownMenuItemElement, content: string}",
+                    "resolved": "{ itemIndex: number; item: HTMLPdsDropdownMenuItemElement; content: string; }",
+                    "references": {
+                        "HTMLPdsDropdownMenuItemElement": {
+                            "location": "global",
+                            "id": "global::HTMLPdsDropdownMenuItemElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "clickItem": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Trigger the click event",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=pds-dropdown-menu-item.js.map

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-dropdown-menu-item.js","sourceRoot":"","sources":["../../../../src/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\n\n@Component({\n  tag: 'pds-dropdown-menu-item',\n  styleUrl: 'pds-dropdown-menu-item.scss',\n  shadow: true,\n})\nexport class PdsDropdownMenuItem implements BasePdsProps {\n  @Element() host: HTMLPdsDropdownMenuItemElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * It determines whether or not the dropdown-item is destructive.\n   * @defaultValue false\n   */\n  @Prop() destructive: boolean = false;\n\n  /**\n   * It determines whether or not the dropdown-item is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled: boolean = false;\n\n\n  /**\n   *  If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Emitted when the dropdown-item is clicked.\n   *\n   */\n  @Event() pdsClick: EventEmitter<{itemIndex: number, item: HTMLPdsDropdownMenuItemElement, content: string}>;\n\n  /**\n   * Trigger the click event\n   */\n  @Method()\n  async clickItem() {\n    this.handleClick();\n  };\n\n\n  private handleClick() {\n    // Filter only pds-dropdown-menu-item elements and find the index of the current item\n    const menuItems = Array.from(this.host.parentNode.children).filter(\n      (child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item'\n    );\n    const itemIndex = menuItems.indexOf(this.host);\n\n    // Get the text content from the slotted content\n    const content = this.host.textContent?.trim() || '';\n\n    this.pdsClick.emit({\n      itemIndex,\n      item: this.host,\n      content\n    });\n  }\n\n  @State() hasFocus: boolean = false;\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n  }\n\n  private renderElement() {\n    if (this.href !== undefined) {\n      return (\n        <pds-link\n          href={this.disabled ? null : this.href}\n          class={{\n            'pds-dropdown-menu-item__content': true,\n            'has-focus': this.hasFocus\n          }}\n          tabIndex={this.disabled ? -1 : 0}\n          onKeyDown={this.handleKeyDown}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          <slot></slot>\n        </pds-link>\n      );\n    }\n\n    return (\n      <button\n        class={{\n          'pds-dropdown-menu-item__content': true,\n          'has-focus': this.hasFocus\n        }}\n        tabIndex={this.disabled ? -1 : 0}\n        type=\"button\"\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        disabled={this.disabled}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Handle keyboard events\n    if (!this.disabled && (event.key === 'Enter')) {\n      // Only prevent default for button elements or Space key\n      // For links with Enter key, we want the default navigation behavior\n      if (!this.href) {\n        event.preventDefault();\n      }\n      this.handleClick();\n    }\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}\n        class={{ 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }}\n        onClick={() => !this.disabled && this.handleClick()}\n        role=\"none\"\n        tabIndex={-1}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n          {this.renderElement()}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.css

@@ -0,0 +1,4 @@
+:host hr {
+  border: 1px solid var(--pine-color-border);
+  margin-block: var(--pine-dimension-xs);
+}