@pine-ds/core 3.1.0 → 3.3.0

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

@@ -11,6 +11,12 @@ export default {
     errorMessage: null,
     helperMessage: null,
     invalid: false,
+    max: null,
+    maxlength: null,
+    min: null,
+    minlength: null,
+    pattern: null,
+    step: null,
     name: null,
     placeholder: null,
     readonly: false,
@@ -46,6 +52,10 @@ const BaseTemplate = (args) => html`<pds-input
   required="${args.required}"
   type="${args.type}"
   value="${args.value}">
+  ${args.prefix}
+  ${args.suffix}
+  ${args.prepend}
+  ${args.append}
 </pds-input>`;
 
 export const Text = BaseTemplate.bind({});
@@ -124,3 +134,77 @@ Autocomplete.args = {
   type: 'text',
   autocomplete: 'given-name',
 };
+
+export const withPrefixIcon = BaseTemplate.bind({});
+withPrefixIcon.args = {
+  componentId: 'pds-input-prefix-icon',
+  label: 'Email',
+  type: 'email',
+  prefix: html`<pds-icon slot="prefix" name="mail" size="small"></pds-icon>`,
+};
+
+export const withSuffixButton = BaseTemplate.bind({});
+withSuffixButton.args = {
+  componentId: 'pds-input-suffix-button',
+  label: 'Search',
+  type: 'text',
+  suffix: html`<pds-button slot="suffix" variant="unstyled" class="pds-input__suffix"><pds-icon name="search" size="small"></pds-icon></pds-button>`,
+};
+
+export const withPrependSelect = BaseTemplate.bind({});
+withPrependSelect.args = {
+  componentId: 'pds-input-prepend-select',
+  label: 'Amount',
+  type: 'text',
+  prepend: html`
+    <pds-select hide-label label="Currency" slot="prepend" class="pds-input__prepend">
+      <option value="USD">USD</option>
+      <option value="EUR">EUR</option>
+      <option value="GBP">GBP</option>
+    </pds-select>
+  `,
+};
+
+export const withAppendSelect = BaseTemplate.bind({});
+withAppendSelect.args = {
+  componentId: 'pds-input-append-select',
+  label: 'Phone',
+  type: 'tel',
+  append: html`
+    <pds-select hide-label slot="append" class="pds-input__append">
+      <option value="mobile">Mobile</option>
+      <option value="home">Home</option>
+      <option value="work">Work</option>
+    </pds-select>
+  `,
+};
+
+export const withPrefixAndAppend = BaseTemplate.bind({});
+withPrefixAndAppend.args = {
+  componentId: 'pds-input-prefix-append',
+  label: 'Amount',
+  type: 'text',
+  prefix: html`<pds-icon name="dollar" size="small"></pds-icon>`,
+  append: html`
+    <pds-select hide-label slot="append" class="pds-input__append">
+      <option value="USD">USD</option>
+      <option value="EUR">EUR</option>
+      <option value="GBP">GBP</option>
+    </pds-select>
+  `,
+};
+
+export const withPrependAndSuffix = BaseTemplate.bind({});
+withPrependAndSuffix.args = {
+  componentId: 'pds-input-prepend-suffix',
+  label: 'Amount',
+  type: 'text',
+  prepend: html`
+    <pds-select hide-label slot="prepend" class="pds-input__prepend">
+      <option value="USD">USD</option>
+      <option value="EUR">EUR</option>
+      <option value="GBP">GBP</option>
+    </pds-select>
+  `,
+  suffix: html`<pds-button slot="suffix" variant="unstyled" class="pds-input__suffix"><pds-icon name="remove-circle" size="small"></pds-icon></pds-button>`,
+};

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

@@ -7,7 +7,7 @@
 
 .pds-link {
   align-items: center;
-  color: var(--pine-color-text);
+  color: var(--color, var(--pine-color-text));
   display: inline-flex;
   font-weight: var(--pine-font-weight-medium);
 }
@@ -18,8 +18,27 @@
   position: relative;
 }
 .pds-link:hover {
+  color: var(--color, var(--pine-color-text-hover));
   text-decoration: none;
 }
+:host([color=secondary]) .pds-link {
+  color: var(--pine-color-text-primary);
+}
+:host([color=secondary]) .pds-link:hover {
+  color: var(--pine-color-grey-150);
+}
+:host([color=accent]) .pds-link {
+  color: var(--pine-color-accent);
+}
+:host([color=accent]) .pds-link:hover {
+  color: var(--pine-color-accent-hover);
+}
+:host([color=danger]) .pds-link {
+  color: var(--pine-color-danger);
+}
+:host([color=danger]) .pds-link:hover {
+  color: var(--pine-color-danger-hover);
+}
 
 .pds-link--sm {
   font-size: var(--pine-font-size-body-xs);

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { setColor } from "../../utils/utils";
 import { launch } from "@pine-ds/icons/icons";
 /**
  * @part link - Link element styles.
@@ -32,9 +33,20 @@ export class PdsLink {
         }
         return classNames.join(' ');
     }
+    setLinkStyles() {
+        if (!this.color)
+            return;
+        const linkColors = {
+            secondary: 'var(--pine-color-text-primary)',
+            accent: 'var(--pine-color-accent)',
+            danger: 'var(--pine-color-danger)',
+        };
+        const linkStyles = setColor(this.color, linkColors);
+        return linkStyles;
+    }
     render() {
-        return (h("a", { key: '7ac75452091305e238c20ef1fc2055fe2f34fb04', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '8f21b34931f85867b91e7c6c3fcc1952b9c430cd' }, this.href), this.external &&
-            h("pds-icon", { key: '60f1d607df5bf4cac7a9786f1560702719e73ff5', icon: launch, size: this.fontSize })));
+        return (h("a", { key: 'f2b3e7f26b833f7b187fce6f36c392415e2499df', class: this.classNames(), href: this.href, id: this.componentId, part: "link", target: this.external ? '_blank' : undefined, style: this.setLinkStyles() }, h("slot", { key: 'c85c0add786ab8a90f7cb0d12b75d65a51b8e313' }, this.href), this.external &&
+            h("pds-icon", { key: '2ce9fa8d29168659546bc95b0633815978142bbb', icon: launch, size: this.fontSize })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -50,6 +62,25 @@ export class PdsLink {
     }
     static get properties() {
         return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the link color."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false
+            },
             "componentId": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"pds-link.js","sourceRoot":"","sources":["../../../src/components/pds-link/pds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;GAGG;AAMH,MAAM,OAAO,OAAO;IALpB;QAWE;;;WAGG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;;WAGG;QACK,YAAO,GAAuB,QAAQ,CAAC;QAE/C;;;WAGG;QACK,aAAQ,GAAuB,IAAI,CAAC;KAsC7C;IA/BS,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QAEJ,OAAO,CACL,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC5C,IAAI,EAAC,MAAM;YAEX,+DAAO,IAAI,CAAC,IAAI,CAAQ;YACvB,IAAI,CAAC,QAAQ;gBACZ,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrls: ['pds-link.scss'],\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the link should open in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   * Sets the link variant styles.\n   * @defaultValue inline\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   * The font size of the link's text.\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        target={this.external ? '_blank' : undefined}\n        part=\"link\"\n      >\n        <slot>{this.href}</slot>\n        {this.external &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-link.js","sourceRoot":"","sources":["../../../src/components/pds-link/pds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;GAGG;AAMH,MAAM,OAAO,OAAO;IALpB;QAgBE;;;WAGG;QACK,aAAQ,GAAG,KAAK,CAAC;QAEzB;;;WAGG;QACK,YAAO,GAAuB,QAAQ,CAAC;QAE/C;;;WAGG;QACK,aAAQ,GAAuB,IAAI,CAAC;KAqD7C;IA9CS,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,CAAC;QAED,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO;QAExB,MAAM,UAAU,GAAG;YACjB,SAAS,EAAE,gCAAgC;YAC3C,MAAM,EAAE,0BAA0B;YAClC,MAAM,EAAE,0BAA0B;SACnC,CAAA;QAED,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;QAEpD,OAAO,UAAU,CAAC;IACpB,CAAC;IAED,MAAM;QAEJ,OAAO,CACL,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC5C,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;YAE3B,+DAAO,IAAI,CAAC,IAAI,CAAQ;YACvB,IAAI,CAAC,QAAQ;gBACZ,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrls: ['pds-link.scss'],\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * Sets the link color.\n   */\n  @Prop() color?: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the link should open in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   * Sets the link variant styles.\n   * @defaultValue inline\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   * The font size of the link's text.\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private setLinkStyles() {\n    if (!this.color) return;\n\n    const linkColors = {\n      secondary: 'var(--pine-color-text-primary)',\n      accent: 'var(--pine-color-accent)',\n      danger: 'var(--pine-color-danger)',\n    }\n\n    const linkStyles = setColor(this.color, linkColors);\n\n    return linkStyles;\n  }\n\n  render() {\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        part=\"link\"\n        target={this.external ? '_blank' : undefined}\n        style={this.setLinkStyles()}\n      >\n        <slot>{this.href}</slot>\n        {this.external &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"]}

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

@@ -4,12 +4,25 @@ import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
 export default {
   argTypes: extractArgTypes('pds-link'),
   args: { href: '#some-anchor' },
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['inline', 'plain'],
+    },
+  },
   component: 'pds-link',
   title: 'components/Link'
 }
 
-const BaseTemplate = (args) => html`<pds-link external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}></pds-link>`;
-const BaseTemplateWithSlot = (args) => html` <pds-link external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}>${args.slot}</pds-link>`;
+const BaseTemplate = (args) => html`<pds-link color=${args.color} external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}></pds-link>`;
+const BaseTemplateWithSlot = (args) => html` <pds-link color=${args.color} external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}>${args.slot}</pds-link>`;
+
+export const Colors = BaseTemplate.bind();
+Colors.args = {
+  color: 'danger',
+  external: false,
+  fontSize: 'lg',
+};
 
 export const External = BaseTemplate.bind();
 External.args = {

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

@@ -45,7 +45,7 @@ export class PdsLoader {
         }
     }
     render() {
-        return (h(Host, { key: 'c01b34ac171a5581e1456737f17043cf8b47af8e', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: 'ffd9e050fef503f1614c06896b8d888202df8656', class: "pds-loader--spinner" }, h("svg", { key: '056b84ca6f89f6dc93f72d115c9cad3efa9f468d', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: '85bfeab6bc686de25e4156154273067fbcb3ba0b' }, h("linearGradient", { key: 'd32d0c03f7f851cd56365af16298c4da0db74ec8', id: "spinner-secondHalf" }, h("stop", { key: '1113756349854bc4ab581c0ce282dcd54def3891', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '0f649b9e828409cab1b67a26d9a35d35e9fe7b0a', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '4aabb11799007ae40d7e112696809b35b652bb46', id: "spinner-firstHalf" }, h("stop", { key: '9624d9de9eaba0f29264d3b76bc27287bbc1b68b', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '37fd5de86c5db30731b4dc39b1cd2cb6afbe7393', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '06ccf17d191612cd5566714e69299a9e749618da', class: "pds-loader__spinner-path" }, h("path", { key: '9b5556b7c20e3c0f7effaa6d09120baa0b07e614', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'aacb689fcace08aa9bee3c3eb2ee1b571ed1b9ee', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '875a3faf04e718f095d616db6a2cd1c7bcde2f14', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '515a530c8acd7807d45c3f54ff1d264002e3e627', class: "pds-loader--typing" }, h("span", { key: 'bbb55e71064ab200ca388360a8a0986eda5b2008' }), h("span", { key: '77f42ba8124be61565479f21ed9253d928da49b3' }), h("span", { key: 'f8ef81fc9a9bf1a24f0bb3501c49291fe5028c5a' }))), h("div", { key: 'fd73795dfb15359ff655ed6abf4b2e41faa079a7', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'cdfb46d54431a84b3ceaaaf94d48f69c42956c8d', name: "label" }, "Loading..."))));
+        return (h(Host, { key: '5f9677b6338e4b1d7df0ab3182c91ecae4c5c857', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: '5083b0fd6d468439dd0faa4375107c2cddc49812', class: "pds-loader--spinner" }, h("svg", { key: '689659c659901091215e3745e1778613dc8c64dc', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: '2f20b260a1155a966abb9f8d0541374d707d4c09' }, h("linearGradient", { key: '2049a48645d6c02c3e5b4a659cb3767af297172a', id: "spinner-secondHalf" }, h("stop", { key: '8a51fd7117b39505d6e40ded168c1a323f19d791', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '7a5273675a64eb794b8bbe513fa3fbfddb2b8b6b', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '12ea88879ebbd8c207e9d5e5838505796c747fd6', id: "spinner-firstHalf" }, h("stop", { key: '08a2198273017b0feeb16ec93a1a1daed34ada94', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '02ac704dd21ba49f579f0f305123b53333ae669e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'feb3d05f93da9f8d67181864d318678d2930b1dd', class: "pds-loader__spinner-path" }, h("path", { key: 'dde73e34e0a78bdd87f33212eb21a25e0c212b4f', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'ce0c541df6294f6b08772d89cf791f0e6342ec0b', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '25fae107003b2c9172131b54a97ecd9780ac4e42', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '7b467d87b5d4c0dbd96a277868bc587544259cff', class: "pds-loader--typing" }, h("span", { key: '1e0833eec5fc48e990bbfa7ce4e724a1eee019ad' }), h("span", { key: 'ef517f1aafca68e77fed199552a7a468ac8b37b2' }), h("span", { key: 'b6379ba5b3e1fb88c5ce0478bb51bf4471bd6dd1' }))), h("div", { key: '6148a67bddb3749b8778f5a97d381f01096fda23', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '774fd7274d111b17afe9ef0740e64448c6fcd8d4', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.css

@@ -0,0 +1,27 @@
+pds-modal-content {
+  display: block;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  width: 100%;
+}
+pds-modal-content:has(.pds-modal-content--border-none) {
+  border: 0;
+}
+pds-modal-content:has(.pds-modal-content--border-both) {
+  border-block-end: 1px solid var(--pine-color-grey-200);
+  border-block-start: 1px solid var(--pine-color-grey-200);
+}
+pds-modal-content:has(.pds-modal-content--border-top) {
+  border-block-start: 1px solid var(--pine-color-grey-200);
+}
+pds-modal-content:has(.pds-modal-content--border-bottom) {
+  border-block-end: 1px solid var(--pine-color-grey-200);
+}
+
+.pds-modal-content {
+  display: block;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  width: 100%;
+}

package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js

@@ -0,0 +1,125 @@
+import { h, Host } from "@stencil/core";
+export class PdsModalContent {
+    constructor() {
+        /**
+         * The border style for the content area. Automatically set based on available space of the modal content.
+         * @default 'none'
+         */
+        this.border = 'none';
+        this.contentMaxHeight = '60vh';
+    }
+    componentDidLoad() {
+        const slotContent = this.el.firstElementChild;
+        const isScrollable = slotContent.scrollHeight > slotContent.clientHeight;
+        this.border = isScrollable ? 'both' : 'none';
+        this.calculateMaxHeight();
+        window.addEventListener('resize', this.calculateMaxHeight.bind(this));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.calculateMaxHeight.bind(this));
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    /**
+     * Calculates the max-height based on header and footer heights
+     */
+    calculateMaxHeight() {
+        // Find the modal element (parent of this component)
+        const modalElement = this.el.closest('pds-modal');
+        if (!modalElement)
+            return;
+        setTimeout(() => {
+            // Find header and footer elements
+            const headerElement = modalElement.querySelector('pds-modal-header');
+            const footerElement = modalElement.querySelector('pds-modal-footer');
+            // Get header and footer heights
+            const headerHeight = headerElement ? headerElement.offsetHeight : 0;
+            const footerHeight = footerElement ? footerElement.offsetHeight : 0;
+            // Set the max-height as a calculation
+            if (headerHeight > 0 || footerHeight > 0) {
+                // Calculate the available height by subtracting:
+                // 1. Header and footer heights
+                // 2. Modal padding (48px)
+                // 3. Additional space for modal positioning (6vh)
+                // 4. Extra adjustment for perfect fit (50px)
+                const viewportAdjustment = Math.round(window.innerHeight * 0.06); // 6vh approximation
+                const totalReduction = headerHeight + footerHeight + 48 + viewportAdjustment + 50;
+                // Set the content max height
+                this.contentMaxHeight = `calc(100vh - ${totalReduction}px)`;
+                // Apply the style directly to ensure it takes effect
+                const contentElement = this.el.querySelector('.pds-modal-content');
+                if (contentElement) {
+                    contentElement.style.maxHeight = this.contentMaxHeight;
+                }
+            }
+            else {
+                this.contentMaxHeight = '60vh'; // Default fallback
+            }
+        }, 100); // Delay to ensure DOM is fully rendered
+        // Set up mutation observer if not already done
+        if (!this.mutationObserver && modalElement) {
+            this.mutationObserver = new MutationObserver(() => {
+                this.calculateMaxHeight();
+            });
+            // Observe changes to the modal's children
+            this.mutationObserver.observe(modalElement, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                attributeFilter: ['style', 'class']
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: '6b214e3462d8e1e1cb58d6c0075b3143e0db2d51' }, h("div", { key: '2f6a2daeb09a99f096cd46230813fe1b9a6950e9', class: {
+                'pds-modal-content': true,
+                [`pds-modal-content--border-${this.border}`]: true
+            }, style: { maxHeight: this.contentMaxHeight }, tabindex: "-1" }, h("slot", { key: '8392cc48a2dba0f32d4a83e642bd3f295832251b' }))));
+    }
+    static get is() { return "pds-modal-content"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-modal-content.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-modal-content.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "border": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'both' | 'top' | 'bottom'",
+                    "resolved": "\"both\" | \"bottom\" | \"none\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'none'"
+                        }],
+                    "text": "The border style for the content area. Automatically set based on available space of the modal content."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "border",
+                "reflect": true,
+                "defaultValue": "'none'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "contentMaxHeight": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pds-modal-content.js.map

package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-modal-content.js","sourceRoot":"","sources":["../../../../src/components/pds-modal/pds-modal-content/pds-modal-content.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Host, Prop, Element, State } from '@stencil/core';\n\ndeclare global {\n  interface HTMLPdsModalContentElement extends HTMLElement {\n    border: 'none' | 'both';\n  }\n}\n\n@Component({\n  tag: 'pds-modal-content',\n  styleUrl: 'pds-modal-content.scss',\n})\nexport class PdsModalContent {\n\n  @Element() el: HTMLPdsModalContentElement;\n\n  /**\n   * The border style for the content area. Automatically set based on available space of the modal content.\n   * @default 'none'\n   */\n  @Prop({ reflect: true }) border: 'none' | 'both' | 'top' | 'bottom' = 'none';\n\n  @State() contentMaxHeight: string = '60vh';\n\n  componentDidLoad() {\n    const slotContent = this.el.firstElementChild as HTMLElement;\n    const isScrollable = slotContent.scrollHeight > slotContent.clientHeight;\n    this.border = isScrollable ? 'both' : 'none';\n\n    this.calculateMaxHeight();\n\n    window.addEventListener('resize', this.calculateMaxHeight.bind(this));\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.calculateMaxHeight.bind(this));\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  /**\n   * Calculates the max-height based on header and footer heights\n   */\n  private mutationObserver: MutationObserver;\n\n  /**\n   * Calculates the max-height based on header and footer heights\n   */\n  private calculateMaxHeight() {\n    // Find the modal element (parent of this component)\n    const modalElement = this.el.closest('pds-modal');\n    if (!modalElement) return;\n\n    setTimeout(() => {\n      // Find header and footer elements\n      const headerElement = modalElement.querySelector('pds-modal-header');\n      const footerElement = modalElement.querySelector('pds-modal-footer');\n\n      // Get header and footer heights\n      const headerHeight = headerElement ? headerElement.offsetHeight : 0;\n      const footerHeight = footerElement ? footerElement.offsetHeight : 0;\n\n      // Set the max-height as a calculation\n      if (headerHeight > 0 || footerHeight > 0) {\n        // Calculate the available height by subtracting:\n        // 1. Header and footer heights\n        // 2. Modal padding (48px)\n        // 3. Additional space for modal positioning (6vh)\n        // 4. Extra adjustment for perfect fit (50px)\n        const viewportAdjustment = Math.round(window.innerHeight * 0.06); // 6vh approximation\n        const totalReduction = headerHeight + footerHeight + 48 + viewportAdjustment + 50;\n\n        // Set the content max height\n        this.contentMaxHeight = `calc(100vh - ${totalReduction}px)`;\n\n        // Apply the style directly to ensure it takes effect\n        const contentElement = this.el.querySelector('.pds-modal-content') as HTMLElement;\n        if (contentElement) {\n          contentElement.style.maxHeight = this.contentMaxHeight;\n        }\n      } else {\n        this.contentMaxHeight = '60vh'; // Default fallback\n      }\n    }, 100); // Delay to ensure DOM is fully rendered\n\n    // Set up mutation observer if not already done\n    if (!this.mutationObserver && modalElement) {\n      this.mutationObserver = new MutationObserver(() => {\n        this.calculateMaxHeight();\n      });\n\n      // Observe changes to the modal's children\n      this.mutationObserver.observe(modalElement, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n        attributeFilter: ['style', 'class']\n      });\n    }\n  }\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'pds-modal-content': true,\n            [`pds-modal-content--border-${this.border}`]: true\n          }}\n          style={{ maxHeight: this.contentMaxHeight }}\n          tabindex=\"-1\"\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}"]}

package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.css

@@ -0,0 +1,8 @@
+pds-modal-footer {
+  display: block;
+  width: 100%;
+}
+
+.pds-modal__footer {
+  width: 100%;
+}

package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js

@@ -0,0 +1,18 @@
+import { h } from "@stencil/core";
+export class PdsModalFooter {
+    render() {
+        return (h("footer", { key: '63d1121b84d10ea99354d07b029b7625d52d9095', class: "pds-modal__footer" }, h("slot", { key: 'dd08fc600f122e422ccd3161bc558f3b9cc075f9' })));
+    }
+    static get is() { return "pds-modal-footer"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-modal-footer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-modal-footer.css"]
+        };
+    }
+}
+//# sourceMappingURL=pds-modal-footer.js.map

package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-modal-footer.js","sourceRoot":"","sources":["../../../../src/components/pds-modal/pds-modal-footer/pds-modal-footer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,cAAc;IACzB,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAC,mBAAmB;YAC/B,8DAAa,CACN,CACV,CAAC;IACJ,CAAC;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-modal-footer',\n  styleUrl: 'pds-modal-footer.scss',\n  shadow: false,\n})\nexport class PdsModalFooter {\n  render() {\n    return (\n      <footer class=\"pds-modal__footer\">\n        <slot></slot>\n      </footer>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.css

@@ -0,0 +1,8 @@
+pds-modal-header {
+  display: block;
+  width: 100%;
+}
+
+.pds-modal__header {
+  width: 100%;
+}

package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js

@@ -0,0 +1,18 @@
+import { h } from "@stencil/core";
+export class PdsModalHeader {
+    render() {
+        return (h("header", { key: 'c832013aee204170c29336e931d36f1eda667f11', class: "pds-modal__header" }, h("slot", { key: '19a76b689a8d8bf116f7061fd7c32415da4299e1' })));
+    }
+    static get is() { return "pds-modal-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-modal-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-modal-header.css"]
+        };
+    }
+}
+//# sourceMappingURL=pds-modal-header.js.map

package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-modal-header.js","sourceRoot":"","sources":["../../../../src/components/pds-modal/pds-modal-header/pds-modal-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAO7C,MAAM,OAAO,cAAc;IACzB,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAC,mBAAmB;YAC/B,8DAAa,CACN,CACV,CAAC;IACJ,CAAC;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-modal-header',\n  styleUrl: 'pds-modal-header.scss',\n  shadow: false,\n})\nexport class PdsModalHeader {\n  render() {\n    return (\n      <header class=\"pds-modal__header\">\n        <slot></slot>\n      </header>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,79 @@
+.pds-modal__backdrop {
+  align-items: flex-start;
+  background-color: rgba(0, 0, 0, 0.4);
+  border: 0;
+  display: flex;
+  height: 100%;
+  inset: 0;
+  justify-content: center;
+  margin: 0;
+  max-height: 100%;
+  max-width: 100%;
+  opacity: 0;
+  padding: 0;
+  position: fixed;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  visibility: hidden;
+  width: 100%;
+  z-index: 1000;
+}
+@supports (backdrop-filter: blur(3px)) {
+  .pds-modal__backdrop {
+    backdrop-filter: blur(3px);
+  }
+}
+pds-modal .pds-modal__backdrop {
+  z-index: 1001;
+}
+.pds-modal__backdrop::backdrop {
+  background: transparent;
+}
+.pds-modal__backdrop.open {
+  opacity: 1;
+  visibility: visible;
+}
+
+.pds-modal {
+  background: var(--pine-color-background-container);
+  border-radius: var(--pine-dimension-sm);
+  box-shadow: var(--pine-box-shadow-400);
+  display: flex;
+  flex-direction: column;
+  margin: var(--pine-dimension-md);
+  max-height: calc(100vh - (6vh + 96px));
+  width: 100%;
+}
+@media (min-width: 992px) {
+  .pds-modal {
+    margin-block-start: 6vh;
+  }
+}
+@media (min-width: 1200px) {
+  .pds-modal {
+    margin-block-start: 8vh;
+  }
+}
+
+.pds-modal--sm {
+  max-width: 520px;
+}
+
+.pds-modal--md {
+  max-width: 700px;
+}
+
+.pds-modal--lg {
+  max-width: 900px;
+}
+
+.pds-modal--fullscreen {
+  border-radius: 0;
+  height: 100%;
+  margin: 0;
+  max-height: 100vh;
+  max-width: 100%;
+}
+
+.pds-modal--fullscreen .pds-modal-content {
+  flex: 1;
+}