@pine-ds/core 3.0.3 → 3.2.0

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

@@ -0,0 +1,198 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot actions - Slot for alert actions.
+ */
+export class PdsAlert {
+    constructor() {
+        /**
+         * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.
+         */
+        this.small = false;
+        /**
+         * If true, shows the dismiss button. If false, the dismiss button is hidden.
+         * @defaultValue false
+         */
+        this.dismissible = false;
+        /**
+         * Sets the style variant of the alert.
+         * @defaultValue 'default'
+         */
+        this.variant = 'default';
+        this.hasActionsContent = false;
+        this.handleCloseClick = () => {
+            this.pdsAlertDismissClick.emit();
+        };
+    }
+    componentWillRender() {
+        // Check if the actions slot has any content.
+        // If not, hide the actions container to prevent empty space.
+        const actionsSlot = this.el.querySelector('[slot="actions"]');
+        this.hasActionsContent = !!actionsSlot;
+    }
+    renderActions(isSmall) {
+        return (h("pds-box", { class: isSmall ? "pds-alert__actions--small" : "pds-alert__actions", gap: "sm", flex: isSmall ? "none" : undefined, "align-items": isSmall ? undefined : "center" }, h("slot", { name: "actions" })));
+    }
+    renderContent() {
+        if (this.small) {
+            return (h("pds-box", { display: "flex", gap: "md", "align-items": "center" }, h("pds-text", { truncate: this.small, class: "pds-alert__description--small", color: "var(--pds-alert-color-text)", tag: "p" }, h("slot", null)), this.hasActionsContent && this.renderActions(true)));
+        }
+        return (h("div", null, h("pds-text", { class: "pds-alert__description", color: "var(--pds-alert-color-text)", tag: "p" }, h("slot", null)), this.hasActionsContent && this.renderActions(false)));
+    }
+    render() {
+        const iconMap = {
+            danger: 'warning-filled',
+            default: 'info-circle-filled',
+            info: 'info-circle-filled',
+            success: 'check-circle-filled',
+            warning: 'info-circle-filled',
+        };
+        // Get the icon name based on the current variant
+        const iconName = iconMap[this.variant] || iconMap.default;
+        return (h(Host, { key: 'ccb4b954c20b4fedfe1336737a412753bf3c78a2', class: "pds-alert", id: this.componentId, variant: this.variant }, h("pds-box", { key: '6feafdc553ab9854542cb53035486a0caa1f3348', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block", padding: "md" }, h("pds-box", { key: '86b160e97ac4724434b09cd832f7cdc61834a520', gap: "sm", display: "flex" }, h("pds-icon", { key: 'c2f61f894b3f63915259e298dd9d973b719880c9', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" }), h("pds-box", { key: '07926a4d7d6a1795edd2055ce9ae3d853982fe98', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (h("pds-text", { key: '2267241b05890cb4b955cd5418b26f30abd0503c', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (h("button", { key: 'bdc435db71e60d9233e97821ea10012f509cae26', class: "pds-alert__dismiss", type: "button", "aria-label": "Dismiss alert", onClick: this.handleCloseClick }, h("pds-icon", { key: '22f013acfafafa6c32da9aa696bef8a8d3c633c0', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
+    }
+    static get is() { return "pds-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-alert.tokens.scss", "pds-alert.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-alert.tokens.css", "pds-alert.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
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text displayed as the heading of the alert."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "heading",
+                "reflect": false
+            },
+            "small": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "small",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "If true, shows the dismiss button. If false, the dismiss button is hidden."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dismissible",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'danger' | 'info' | 'success' | 'warning'",
+                    "resolved": "\"danger\" | \"default\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'default'"
+                        }],
+                    "text": "Sets the style variant of the alert."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasActionsContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsAlertDismissClick",
+                "name": "pdsAlertDismissClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the dismiss button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pds-alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-alert.js","sourceRoot":"","sources":["../../../src/components/pds-alert/pds-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\n\n/**\n * @slot actions - Slot for alert actions.\n */\n\n@Component({\n  tag: 'pds-alert',\n  styleUrls: ['pds-alert.tokens.scss', 'pds-alert.scss'],\n  shadow: true,\n})\nexport class PdsAlert {\n\n  @Element() el: HTMLPdsAlertElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text displayed as the heading of the alert.\n   */\n  @Prop() heading: string;\n\n  /**\n   * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.\n   */\n  @Prop() small = false;\n\n  /**\n   * If true, shows the dismiss button. If false, the dismiss button is hidden.\n   * @defaultValue false\n   */\n  @Prop() dismissible = false;\n\n  /**\n   * Sets the style variant of the alert.\n   * @defaultValue 'default'\n   */\n  @Prop() variant: 'default' | 'danger' | 'info' | 'success' | 'warning' = 'default';\n\n  /**\n   * Event emitted when the dismiss button is clicked.\n   */\n  @Event() pdsAlertDismissClick: EventEmitter<void>;\n\n  @State() hasActionsContent = false;\n\n  private handleCloseClick = () => {\n    this.pdsAlertDismissClick.emit();\n  };\n\n  componentWillRender() {\n    // Check if the actions slot has any content.\n    // If not, hide the actions container to prevent empty space.\n    const actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n    this.hasActionsContent = !!actionsSlot;\n  }\n\n  private renderActions(isSmall: boolean) {\n    return (\n      <pds-box class={isSmall ? \"pds-alert__actions--small\" : \"pds-alert__actions\"} gap=\"sm\" flex={isSmall ? \"none\" : undefined} align-items={isSmall ? undefined : \"center\"}>\n        <slot name=\"actions\"></slot>\n      </pds-box>\n    );\n  }\n\n  private renderContent() {\n    if (this.small) {\n      return (\n        <pds-box display=\"flex\" gap=\"md\" align-items=\"center\">\n          <pds-text\n            truncate={this.small}\n            class=\"pds-alert__description--small\"\n            color=\"var(--pds-alert-color-text)\"\n            tag=\"p\"\n          >\n            <slot></slot>\n          </pds-text>\n          {this.hasActionsContent && this.renderActions(true)}\n        </pds-box>\n      );\n    }\n\n    return (\n      <div>\n        <pds-text class=\"pds-alert__description\" color=\"var(--pds-alert-color-text)\" tag=\"p\">\n          <slot></slot>\n        </pds-text>\n        {this.hasActionsContent && this.renderActions(false)}\n      </div>\n    );\n  }\n\n  render() {\n    const iconMap = {\n      danger: 'warning-filled',\n      default: 'info-circle-filled',\n      info: 'info-circle-filled',\n      success: 'check-circle-filled',\n      warning: 'info-circle-filled',\n    };\n\n    // Get the icon name based on the current variant\n    const iconName = iconMap[this.variant] || iconMap.default;\n\n    return (\n      <Host class=\"pds-alert\" id={this.componentId} variant={this.variant}>\n        <pds-box\n          class={`pds-alert__container pds-alert__container--${this.variant}`}\n          background-color=\"var(--pds-alert-background)\"\n          border-color=\"var(--pds-alert-border-color)\"\n          border-radius=\"md\"\n          border\n          display=\"block\"\n          padding=\"md\"\n        >\n          <pds-box gap=\"sm\" display=\"flex\">\n            <pds-icon\n              class={`pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`}\n              color=\"var(--pds-alert-color-icon)\"\n              icon={iconName}\n              size=\"var(--pds-alert-icon-size)\"\n            />\n            <pds-box class=\"pds-alert__content-wrapper\" direction=\"column\" gap=\"xs\" flex=\"grow\">\n              {this.heading && !this.small && (\n                <pds-text class=\"pds-alert__heading\" color=\"var(--pds-alert-color-text)\" size=\"h5\" tag=\"h3\" weight=\"medium\">\n                  {this.heading}\n                </pds-text>\n              )}\n\n              {this.renderContent()}\n            </pds-box>\n\n            {this.dismissible && (\n              <button class=\"pds-alert__dismiss\" type=\"button\" aria-label=\"Dismiss alert\" onClick={this.handleCloseClick}>\n                <pds-icon icon=\"remove\" size=\"var(--pds-alert-icon-size)\" aria-hidden=\"true\" color=\"var(--pds-alert-color-dismiss)\" />\n              </button>\n            )}\n          </pds-box>\n        </pds-box>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-alert/pds-alert.tokens.css

@@ -0,0 +1,32 @@
+:host {
+  --pine-alert-color-background: var(--pine-color-grey-150);
+  --pine-alert-color-border: var(--pine-color-grey-300);
+  --pine-alert-color-dismiss: var(--pine-color-grey-900);
+  --pine-alert-color-dismiss-hover: var(--pine-color-grey-300);
+  --pine-alert-color-icon: var(--pine-color-grey-700);
+  --pine-alert-color-text: var(--pine-color-grey-950);
+  --pine-alert-color-danger-background: var(--pine-color-red-150);
+  --pine-alert-color-danger-border: var(--pine-color-red-300);
+  --pine-alert-color-danger-dismiss: var(--pine-color-red-900);
+  --pine-alert-color-danger-dismiss-hover: var(--pine-color-red-300);
+  --pine-alert-color-danger-icon: var(--pine-color-red-700);
+  --pine-alert-color-danger-text: var(--pine-color-red-950);
+  --pine-alert-color-info-background: var(--pine-color-blue-150);
+  --pine-alert-color-info-border: var(--pine-color-blue-300);
+  --pine-alert-color-info-dismiss: var(--pine-color-blue-900);
+  --pine-alert-color-info-dismiss-hover: var(--pine-color-blue-300);
+  --pine-alert-color-info-icon: var(--pine-color-blue-700);
+  --pine-alert-color-info-text: var(--pine-color-blue-950);
+  --pine-alert-color-success-background: var(--pine-color-green-150);
+  --pine-alert-color-success-border: var(--pine-color-green-300);
+  --pine-alert-color-success-dismiss: var(--pine-color-green-900);
+  --pine-alert-color-success-dismiss-hover: var(--pine-color-green-300);
+  --pine-alert-color-success-icon: var(--pine-color-green-700);
+  --pine-alert-color-success-text: var(--pine-color-green-950);
+  --pine-alert-color-warning-background: var(--pine-color-yellow-150);
+  --pine-alert-color-warning-border: var(--pine-color-yellow-300);
+  --pine-alert-color-warning-dismiss: var(--pine-color-yellow-900);
+  --pine-alert-color-warning-dismiss-hover: var(--pine-color-yellow-300);
+  --pine-alert-color-warning-icon: var(--pine-color-yellow-700);
+  --pine-alert-color-warning-text: var(--pine-color-yellow-950);
+}

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

@@ -0,0 +1,97 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-alert'),
+  component: 'pds-alert',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onclick', 'pdsAlertDismissClick'],
+    },
+  },
+  title: 'components/Alert',
+};
+
+const BaseTemplate = (args) => html` <pds-alert
+  component-id="${args.componentId}"
+  variant="${args.variant}"
+  heading="${args.heading}"
+  small="${args.small}"
+  dismissible="${args.dismissible}"
+>${args.description}</pds-alert>`;
+
+const ActionsTemplate = (args) => html` <pds-alert
+  component-id="${args.componentId}"
+  variant="${args.variant}"
+  heading="${args.heading}"
+  small="${args.small}"
+  dismissible="${args.dismissible}"
+>
+  ${args.description}
+  <pds-button slot="actions" variant="primary">Button</pds-button>
+  <pds-link slot="actions" variant="plain" href="#">Link</pds-link>
+</pds-alert>`;
+
+const SmallActionsTemplate = (args) => html` <pds-alert
+  component-id="${args.componentId}"
+  variant="${args.variant}"
+  heading="${args.heading}"
+  small="${args.small}"
+  dismissible="${args.dismissible}"
+>
+  ${args.description}
+  <pds-link slot="actions" variant="plain" href="#">Link</pds-link>
+  <pds-link slot="actions" variant="plain" href="#">Link</pds-link>
+</pds-alert>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'default-alert',
+  variant: 'default',
+  heading: 'Default alert heading',
+  description: 'Alerts can also have description text that can be used to provide more information about the alert.',
+  small: false,
+  dismissible: false,
+};
+
+export const Small = BaseTemplate.bind();
+Small.args = {
+  componentId: 'small-alert',
+  variant: 'default',
+  heading: 'Small alert heading',
+  description: 'Small alerts use the description to provide more information about the alert, but are truncated when the text becomes too long for the alert to fit the screen.',
+  small: true,
+  dismissible: true,
+};
+
+export const Actions = ActionsTemplate.bind();
+Actions.args = {
+  componentId: 'actions-alert',
+  variant: 'default',
+  heading: 'Alert with actions',
+  description: 'This alert includes action button and link in the actions slot.',
+  small: false,
+  dismissible: true,
+};
+
+export const SmallActions = SmallActionsTemplate.bind();
+SmallActions.args = {
+  componentId: 'small-actions-alert',
+  variant: 'default',
+  heading: 'Small alert with actions',
+  description: 'This small alert has an inline action link which is displayed on the same line as the description.',
+  small: true,
+  dismissible: false,
+};
+
+export const Dismissible = BaseTemplate.bind();
+Dismissible.args = {
+  componentId: 'dismissible-alert',
+  variant: 'success',
+  heading: 'Dismissible alert',
+  description: 'This alert can be dismissed by the user.',
+  small: false,
+  dismissible: true,
+};

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

@@ -82,7 +82,7 @@ export class PdsAvatar {
         }
     }
     render() {
-        return (h(Host, { key: '6c013c87792c77cf63a321d4b194b241c8c8f7f5', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
+        return (h(Host, { key: 'c19584898e4613085f6e6b8e227e7181eb4c8f1b', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
     }
     static get is() { return "pds-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,8 +47,8 @@ export class PdsBox {
             this.sizeLg == undefined &&
             this.sizeXl == undefined ? 'pds-box' : ''}
     `;
-        const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.backgroundColor && { '--color-background-box': this.backgroundColor })), (this.borderColor && { '--color-border-box': this.borderColor })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-height-box': this.minWidth }));
-        return (h(Host, { key: '1beaea19e8828cb42b1ab21ffeaeceade3610682', class: boxClasses, style: boxInlineStyles }));
+        const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.backgroundColor && { '--color-background-box': this.backgroundColor })), (this.borderColor && { '--color-border-box': this.borderColor })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-width-box': this.minWidth }));
+        return (h(Host, { key: '5a16a73506e9322444b85626dc71dceacbfac263', class: boxClasses, style: boxInlineStyles }));
     }
     static get is() { return "pds-box"; }
     static get originalStyleUrls() {
@@ -827,7 +827,7 @@ export class PdsBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Size of the column for all screen sizes that are not explicitly set."
+                    "text": "Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger."
                 },
                 "getter": false,
                 "setter": false,
@@ -852,7 +852,7 @@ export class PdsBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "At screen sizes less than the `XS` breakpoint, this will take the number of columns specified."
+                    "text": "At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range."
                 },
                 "getter": false,
                 "setter": false,
@@ -877,7 +877,7 @@ export class PdsBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified."
+                    "text": "At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs."
                 },
                 "getter": false,
                 "setter": false,
@@ -902,7 +902,7 @@ export class PdsBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified."
+                    "text": "At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up."
                 },
                 "getter": false,
                 "setter": false,
@@ -927,7 +927,7 @@ export class PdsBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified."
+                    "text": "At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up."
                 },
                 "getter": false,
                 "setter": false,
@@ -952,7 +952,7 @@ export class PdsBox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified."
+                    "text": "At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1 +1 @@
-{"version":3,"file":"pds-box.js","sourceRoot":"","sources":["../../../src/components/pds-box/pds-box.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';\n\n@Component({\n  tag: 'pds-box',\n  styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n  /**\n   * Defines how items within the box are aligned.\n   * @defaultValue start\n  */\n  @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n  /**\n   * Defines how the box is aligned within its container.\n   * @defaultValue start\n  */\n  @Prop() alignSelf?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n  /**\n   * If `true`, the box will be sized to fit its contents.\n   */\n  @Prop() auto?: boolean;\n\n  /**\n   *  Defines the background-color of the box.\n   */\n  @Prop() backgroundColor?: string;\n\n  /**\n   * If `true`, the box will have a border.\n   */\n  @Prop() border? = false;\n\n  /**\n   *  Defines the border color of the box.\n   */\n  @Prop() borderColor?: string;\n\n  /**\n   * Defines how rounded the box corners are.\n   * @defaultValue none\n   */\n  @Prop() borderRadius?: `none` | `xs`| `sm` | `md` | `lg` | `circle`;\n\n  /**\n   * Defines the orientation of the box items.\n   * @defaultValue row\n   */\n  @Prop() direction?: `row` | `column`;\n\n  /**\n   * Defines the display style of the box.\n   * @defaultValue flex\n  */\n  @Prop() display?: `flex` | `inline-flex` | `block` | `inline-block`;\n\n  /**\n   * If `true`, sets the box `max-width` to `100%`.\n   */\n  @Prop() fit?: boolean;\n\n  /**\n   * Defines the spacing between the box items.\n   * @defaultValue none\n  */\n  @Prop() gap?: BoxTShirtSizeType;\n\n  /**\n   * Defines how a box will grow or shrink to fit the space available in its container.\n   * @defaultValue none\n   */\n  @Prop() flex?: `none` | `grow` | `shrink`;\n\n  /**\n   * Defines the horizontal alignment of the box items.\n   * @defaultValue start\n  */\n  @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n  /**\n   * Defines the box's outer top spacing.\n   * @defaultValue none\n  */\n  @Prop() marginBlockStart?: BoxTShirtSizeType;\n\n  /**\n   * Defines the box's outer left spacing.\n   * @defaultValue none\n  */\n  @Prop() marginInlineStart?: BoxTShirtSizeType;\n\n  /**\n   * Defines the box's outer right spacing.\n   * @defaultValue none\n  */\n  @Prop() marginInlineEnd?: BoxTShirtSizeType;\n\n  /**\n   * Defines the box's outer bottom spacing.\n   * @defaultValue none\n  */\n  @Prop() marginBlockEnd?: BoxTShirtSizeType;\n\n  /**\n   * The minimum height of the row. Used in conjunction with alignment props\n   */\n  @Prop() minHeight?: string;\n\n  /**\n   * The minimum width of the row. Used in conjunction with alignment props\n   */\n  @Prop() minWidth?: string;\n\n  /**\n   * Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n   */\n  @Prop() offset?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetXs?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetSm?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetMd?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetLg?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetXl?: BoxColumnType;\n\n  /**\n   * Defines the spacing between the box items.\n   * @defaultValue none\n  */\n  @Prop() padding?: BoxTShirtSizeType;\n\n\n  /**\n   * Defines the top spacing.\n   * @defaultValue none\n  */\n  @Prop() paddingBlockStart?: BoxTShirtSizeType;\n\n  /**\n   * Defines the bottom spacing.\n   * @defaultValue none\n  */\n  @Prop() paddingBlockEnd?: BoxTShirtSizeType;\n\n  /**\n   * Defines the left spacing.\n   * @defaultValue none\n  */\n  @Prop() paddingInlineStart?: BoxTShirtSizeType;\n\n  /**\n   * Defines the right spacing.\n   * @defaultValue none\n  */\n  @Prop() paddingInlineEnd?: BoxTShirtSizeType;\n\n  /**\n   * Defines the box shadow.\n   * @defaultValue none\n  */\n  @Prop() shadow?: BoxShadowSizeType;\n\n  /**\n   * Size of the column for all screen sizes that are not explicitly set.\n   */\n  @Prop() size?: BoxColumnType;\n\n  /**\n   * At screen sizes less than the `XS` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeXs?: BoxColumnType;\n\n  /**\n   * At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeSm?: BoxColumnType;\n\n  /**\n   * At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeMd?: BoxColumnType;\n\n  /**\n   * At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeLg?: BoxColumnType;\n\n  /**\n   * At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeXl?: BoxColumnType;\n\n  render() {\n    const boxClasses = `\n    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n    ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}\n    ${this.auto ? 'pds-box--auto' : ''}\n    ${this.border ? 'pds-box--border' : ''}\n    ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n    ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n    ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n    ${this.fit ? 'pds-box--fit' : ''}\n    ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n    ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}\n    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n    ${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}\n    ${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}\n    ${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}\n    ${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}\n    ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n    ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n    ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n    ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n    ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n    ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n    ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n    ${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}\n    ${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}\n    ${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}\n    ${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}\n    ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n    ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n    ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n    ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n    ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n    ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n    ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n    ${this.size == undefined &&\n      this.sizeSm == undefined &&\n      this.sizeMd == undefined &&\n      this.sizeLg == undefined &&\n      this.sizeXl == undefined ? 'pds-box' : ''}\n    `;\n\n    const boxInlineStyles = {\n      ...(this.backgroundColor && { '--color-background-box': this.backgroundColor }),\n      ...(this.borderColor && { '--color-border-box': this.borderColor }),\n      ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n      ...(this.minWidth && { '--sizing-min-height-box': this.minWidth }),\n    };\n\n    return (\n      <Host class={boxClasses} style={boxInlineStyles}>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-box.js","sourceRoot":"","sources":["../../../src/components/pds-box/pds-box.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';\n\n@Component({\n  tag: 'pds-box',\n  styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n  /**\n   * Defines how items within the box are aligned.\n   * @defaultValue start\n  */\n  @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n  /**\n   * Defines how the box is aligned within its container.\n   * @defaultValue start\n  */\n  @Prop() alignSelf?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n  /**\n   * If `true`, the box will be sized to fit its contents.\n   */\n  @Prop() auto?: boolean;\n\n  /**\n   *  Defines the background-color of the box.\n   */\n  @Prop() backgroundColor?: string;\n\n  /**\n   * If `true`, the box will have a border.\n   */\n  @Prop() border? = false;\n\n  /**\n   *  Defines the border color of the box.\n   */\n  @Prop() borderColor?: string;\n\n  /**\n   * Defines how rounded the box corners are.\n   * @defaultValue none\n   */\n  @Prop() borderRadius?: `none` | `xs`| `sm` | `md` | `lg` | `circle`;\n\n  /**\n   * Defines the orientation of the box items.\n   * @defaultValue row\n   */\n  @Prop() direction?: `row` | `column`;\n\n  /**\n   * Defines the display style of the box.\n   * @defaultValue flex\n  */\n  @Prop() display?: `flex` | `inline-flex` | `block` | `inline-block`;\n\n  /**\n   * If `true`, sets the box `max-width` to `100%`.\n   */\n  @Prop() fit?: boolean;\n\n  /**\n   * Defines the spacing between the box items.\n   * @defaultValue none\n  */\n  @Prop() gap?: BoxTShirtSizeType;\n\n  /**\n   * Defines how a box will grow or shrink to fit the space available in its container.\n   * @defaultValue none\n   */\n  @Prop() flex?: `none` | `grow` | `shrink`;\n\n  /**\n   * Defines the horizontal alignment of the box items.\n   * @defaultValue start\n  */\n  @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n  /**\n   * Defines the box's outer top spacing.\n   * @defaultValue none\n  */\n  @Prop() marginBlockStart?: BoxTShirtSizeType;\n\n  /**\n   * Defines the box's outer left spacing.\n   * @defaultValue none\n  */\n  @Prop() marginInlineStart?: BoxTShirtSizeType;\n\n  /**\n   * Defines the box's outer right spacing.\n   * @defaultValue none\n  */\n  @Prop() marginInlineEnd?: BoxTShirtSizeType;\n\n  /**\n   * Defines the box's outer bottom spacing.\n   * @defaultValue none\n  */\n  @Prop() marginBlockEnd?: BoxTShirtSizeType;\n\n  /**\n   * The minimum height of the row. Used in conjunction with alignment props\n   */\n  @Prop() minHeight?: string;\n\n  /**\n   * The minimum width of the row. Used in conjunction with alignment props\n   */\n  @Prop() minWidth?: string;\n\n  /**\n   * Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n   */\n  @Prop() offset?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetXs?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetSm?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetMd?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetLg?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetXl?: BoxColumnType;\n\n  /**\n   * Defines the spacing between the box items.\n   * @defaultValue none\n  */\n  @Prop() padding?: BoxTShirtSizeType;\n\n\n  /**\n   * Defines the top spacing.\n   * @defaultValue none\n  */\n  @Prop() paddingBlockStart?: BoxTShirtSizeType;\n\n  /**\n   * Defines the bottom spacing.\n   * @defaultValue none\n  */\n  @Prop() paddingBlockEnd?: BoxTShirtSizeType;\n\n  /**\n   * Defines the left spacing.\n   * @defaultValue none\n  */\n  @Prop() paddingInlineStart?: BoxTShirtSizeType;\n\n  /**\n   * Defines the right spacing.\n   * @defaultValue none\n  */\n  @Prop() paddingInlineEnd?: BoxTShirtSizeType;\n\n  /**\n   * Defines the box shadow.\n   * @defaultValue none\n  */\n  @Prop() shadow?: BoxShadowSizeType;\n\n  /**\n   * Sets the default column width for the component. This value applies from the smallest screen size (XS) upwards, unless overridden by a breakpoint-specific size prop at that breakpoint or larger.\n   */\n  @Prop() size?: BoxColumnType;\n\n  /**\n   * At the XS breakpoint, this prop will take the number of columns specified. This overrides the base size prop for this specific range.\n   */\n  @Prop() sizeXs?: BoxColumnType;\n\n  /**\n   * At screen sizes from the SM breakpoint and larger (576px and up), this will take the specified number of columns. This overrides any value set by size or sizeXs.\n   */\n  @Prop() sizeSm?: BoxColumnType;\n\n  /**\n   * At screen sizes from the MD breakpoint and larger (768px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n   */\n  @Prop() sizeMd?: BoxColumnType;\n\n  /**\n   * At screen sizes from the LG breakpoint and larger (992px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n   */\n  @Prop() sizeLg?: BoxColumnType;\n\n  /**\n   * At screen sizes from the XL breakpoint and larger (1200px and up), this will take the specified number of columns. This overrides any value set by size, sizeXs, and up.\n   */\n  @Prop() sizeXl?: BoxColumnType;\n\n\n\n  render() {\n    const boxClasses = `\n    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n    ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}\n    ${this.auto ? 'pds-box--auto' : ''}\n    ${this.border ? 'pds-box--border' : ''}\n    ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n    ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n    ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n    ${this.fit ? 'pds-box--fit' : ''}\n    ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n    ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}\n    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n    ${this.marginBlockStart !== undefined && this.marginBlockStart.trim() !== '' ? `pds-margin-block-start-${this.marginBlockStart}` : ''}\n    ${this.marginInlineStart !== undefined && this.marginInlineStart.trim() !== '' ? `pds-margin-inline-start-${this.marginInlineStart}` : ''}\n    ${this.marginInlineEnd !== undefined && this.marginInlineEnd.trim() !== '' ? `pds-margin-inline-end-${this.marginInlineEnd}` : ''}\n    ${this.marginBlockEnd !== undefined && this.marginBlockEnd.trim() !== '' ? `pds-margin-block-end-${this.marginBlockEnd}` : ''}\n    ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n    ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n    ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n    ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n    ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n    ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n    ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n    ${this.paddingBlockStart !== undefined && this.paddingBlockStart.trim() !== '' ? `pds-padding-block-start-${this.paddingBlockStart}` : ''}\n    ${this.paddingBlockEnd !== undefined && this.paddingBlockEnd.trim() !== '' ? `pds-padding-block-end-${this.paddingBlockEnd}` : ''}\n    ${this.paddingInlineStart !== undefined && this.paddingInlineStart.trim() !== '' ? `pds-padding-inline-start-${this.paddingInlineStart}` : ''}\n    ${this.paddingInlineEnd !== undefined && this.paddingInlineEnd.trim() !== '' ? `pds-padding-inline-end-${this.paddingInlineEnd}` : ''}\n    ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n    ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n    ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n    ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n    ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n    ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n    ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n    ${this.size == undefined &&\n      this.sizeSm == undefined &&\n      this.sizeMd == undefined &&\n      this.sizeLg == undefined &&\n      this.sizeXl == undefined ? 'pds-box' : ''}\n    `;\n\n    const boxInlineStyles = {\n      ...(this.backgroundColor && { '--color-background-box': this.backgroundColor }),\n      ...(this.borderColor && { '--color-border-box': this.borderColor }),\n      ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n      ...(this.minWidth && { '--sizing-min-width-box': this.minWidth }),\n    };\n\n    return (\n      <Host class={boxClasses} style={boxInlineStyles}>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -51,7 +51,6 @@
 .pds-button pds-icon {
   color: currentColor;
   fill: currentColor;
-  margin-inline-end: var(--pine-dimension-xs);
 }
 .pds-button:hover {
   background-color: var(--color-background-hover);
@@ -127,11 +126,6 @@
   background-color: var(--pine-color-secondary-hover);
 }
 
-.pds-button--disclosure pds-icon {
-  margin-inline-end: var(--pine-dimension-none);
-  margin-inline-start: var(--pine-dimension-xs);
-}
-
 .pds-button--unstyled {
   --color-background-default: transparent;
   --color-background-hover: transparent;
@@ -148,17 +142,22 @@
 .pds-button__content {
   align-items: center;
   display: inline-flex;
+  gap: var(--pine-dimension-xs);
   position: relative;
   width: 100%;
 }
 
+.pds-button__icon {
+  display: inline-flex;
+}
+
 .pds-button__text {
   align-items: center;
   display: inline-flex;
 }
 
-.pds-button__text--hidden,
-.pds-button__icon--hidden {
+.pds-button__icon--hidden,
+.pds-button__text--hidden {
   opacity: 0;
 }
 
@@ -194,9 +193,6 @@
   justify-content: center;
   width: 100%;
 }
-.pds-button--icon-only pds-icon {
-  margin: 0;
-}
 .pds-button--icon-only .pds-button__text--hidden {
   border: 0;
   clip: rect(0 0 0 0);

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

@@ -7,6 +7,9 @@ import { caretDown } from "@pine-ds/icons/icons";
  * @part button-text - Exposes the button text for styling.
  * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.
  * @part icon - Exposes the icon component for styling.
+ * @slot (default) - Button text.
+ * @slot start - Content to display before the button text.
+ * @slot end - Content to display after the button text.
 */
 export class PdsButton {
     constructor() {
@@ -21,8 +24,9 @@ export class PdsButton {
          */
         this.fullWidth = false;
         /**
-         * Displays an icon in the button.
+         * Displays a leading icon in the button. DEPRECATED.
          * @defaultValue null
+         * @deprecated Use `start` slot instead.
          */
         this.icon = null;
         /**
@@ -81,6 +85,33 @@ export class PdsButton {
         }
         return classNames.join(' ');
     }
+    hasSlotContent(slotName) {
+        const elements = this.el.querySelectorAll(`[slot="${slotName}"]`);
+        return elements.length > 0;
+    }
+    renderStartContent() {
+        const hasIcon = this.icon && this.variant !== 'disclosure';
+        const hasStartSlot = this.hasSlotContent('start');
+        if (Boolean(hasIcon)) {
+            return (h("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', name: this.icon, part: "icon", "aria-hidden": "true" }));
+        }
+        else if (Boolean(hasStartSlot)) {
+            return h("span", { class: `pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}` }, h("slot", { name: "start" }));
+        }
+        return null;
+    }
+    renderEndContent() {
+        if (this.iconOnly) {
+            return null;
+        }
+        if (this.variant === 'disclosure') {
+            return (h("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', icon: caretDown, part: "caret", "aria-hidden": "true" }));
+        }
+        else if (this.hasSlotContent('end')) {
+            return h("span", { class: `pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}` }, h("slot", { name: "end" }));
+        }
+        return null;
+    }
     render() {
         // Common props for both button and anchor elements
         const commonProps = {
@@ -96,9 +127,7 @@ export class PdsButton {
         const ContentElement = this.href ? 'a' : 'button';
         // Hide text when loading or iconOnly is true
         const hideText = this.loading || this.iconOnly;
-        const content = (h("div", { class: "pds-button__content", part: "button-content" }, this.icon && this.variant !== 'disclosure' &&
-            h("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', name: this.icon, part: "icon", "aria-hidden": "true" }), h("span", { class: `pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`, part: "button-text" }, h("slot", null)), this.loading && (h("span", { class: "pds-button__loader" }, h("pds-loader", { "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner" }, "Loading..."))), this.variant === 'disclosure' &&
-            h("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', icon: caretDown, part: "caret", "aria-hidden": "true" })));
+        const content = (h("div", { class: "pds-button__content", part: "button-content" }, this.renderStartContent(), h("span", { class: `pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`, part: "button-text" }, h("slot", null)), this.loading && (h("span", { class: "pds-button__loader" }, h("pds-loader", { "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner" }, "Loading..."))), this.renderEndContent()));
         return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h(ContentElement, Object.assign({}, attributes()), content)));
     }
     static get is() { return "pds-button"; }
@@ -213,8 +242,11 @@ export class PdsButton {
                     "tags": [{
                             "name": "defaultValue",
                             "text": "null"
+                        }, {
+                            "name": "deprecated",
+                            "text": "Use `start` slot instead."
                         }],
-                    "text": "Displays an icon in the button."
+                    "text": "Displays a leading icon in the button. DEPRECATED."
                 },
                 "getter": false,
                 "setter": false,