@pine-ds/core 0.0.2-alpha.0

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

@@ -0,0 +1,186 @@
+import { Host, h } from "@stencil/core";
+export class PdsCopytext {
+    constructor() {
+        this.copyToClipboard = async (value) => {
+            try {
+                if (navigator.clipboard) {
+                    await navigator.clipboard.writeText(value);
+                    this.pdsCopyTextClick.emit('Copied to clipboard');
+                }
+                else {
+                    // falback for safari
+                    const el = document.createElement('textarea');
+                    el.value = value;
+                    el.setAttribute('readonly', '');
+                    el.style.position = 'absolute';
+                    el.style.left = '-9999px';
+                    document.body.appendChild(el);
+                    el.focus();
+                    el.setSelectionRange(0, el.value.length);
+                    document.execCommand('copy');
+                    document.body.removeChild(el);
+                    this.pdsCopyTextClick.emit('Copied to clipboard');
+                }
+            }
+            catch (err) {
+                this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);
+            }
+        };
+        this.handleClick = () => {
+            this.copyToClipboard(this.value);
+        };
+        this.border = true;
+        this.componentId = undefined;
+        this.fullWidth = false;
+        this.truncate = false;
+        this.value = undefined;
+    }
+    classNames() {
+        const classNames = ['pds-copytext'];
+        if (this.border) {
+            classNames.push('pds-copytext--bordered');
+        }
+        if (this.fullWidth) {
+            classNames.push('pds-copytext--full-width');
+        }
+        if (this.truncate) {
+            classNames.push('pds-copytext--truncated');
+        }
+        return classNames.join('  ');
+    }
+    render() {
+        return (h(Host, { class: this.classNames(), id: this.componentId }, h("pds-button", { type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", null, this.value), h("pds-icon", { name: "copy", size: "16px" }))));
+    }
+    static get is() { return "pds-copytext"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-copytext.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-copytext.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "border": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "true"
+                        }],
+                    "text": "Determines whether `copytext` should have a border."
+                },
+                "attribute": "border",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "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."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether `copytext` should expand to the full width of its container."
+                },
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "truncate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether the `value` should truncate and display with an ellipsis."
+                },
+                "attribute": "truncate",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String that is displayed and that is also copied to the clipboard upon interaction."
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsCopyTextClick",
+                "name": "pdsCopyTextClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when copyText button is clicked."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=pds-copytext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-copytext.js","sourceRoot":"","sources":["../../../../src/components/pds-copytext/pds-copytext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,WAAW;;QAkCd,oBAAe,GAAG,KAAK,EAAE,KAAa,EAAE,EAAE;YAChD,IAAI;gBACF,IAAI,SAAS,CAAC,SAAS,EAAE;oBACvB,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;oBAC3C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;iBACnD;qBAAM;oBACL,qBAAqB;oBACrB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;oBAC9C,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC;oBACjB,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;oBAChC,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;oBAC/B,EAAE,CAAC,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;oBAC1B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;oBAC9B,EAAE,CAAC,KAAK,EAAE,CAAC;oBACX,EAAE,CAAC,iBAAiB,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;oBACzC,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;oBAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;oBAC9B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;iBACnD;aACF;YAAC,OAAO,GAAG,EAAE;gBACZ,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,oCAAoC,GAAG,EAAE,CAAC,CAAC;aACvE;QACH,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;sBAvDgC,IAAI;;yBAWlB,KAAK;wBAMN,KAAK;;;IAwChB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;SAC3C;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;SAC7C;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;SAC5C;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,kBAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;gBACpE,gBAAO,IAAI,CAAC,KAAK,CAAQ;gBACzB,gBAAU,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,GAAY,CAClC,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrl: 'pds-copytext.scss',\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * String that is displayed and that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (navigator.clipboard) {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      } else {\n        // falback for safari\n        const el = document.createElement('textarea');\n        el.value = value;\n        el.setAttribute('readonly', '');\n        el.style.position = 'absolute';\n        el.style.left = '-9999px';\n        document.body.appendChild(el);\n        el.focus();\n        el.setSelectionRange(0, el.value.length);\n        document.execCommand('copy');\n        document.body.removeChild(el);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon name=\"copy\" size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,57 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  argTypes: extractArgTypes('pds-copytext'),
+  component: 'pds-copytext',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onclick', 'pdsCopyTextClick'],
+    },
+  },
+  title: 'components/Copy Text',
+}
+
+const BaseTemplate = (args) => html`
+  <pds-copytext
+    border="${args.border}"
+    full-width="${args.fullWidth}"
+    component-id=${args.componentId}
+    onClick=${args.onClick}
+    truncate="${args.truncate}"
+    value="${args.value}">
+  </pds-copytext>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  border: true,
+  fullWidth: false,
+  truncate: false,
+  value: 'Default copy text',
+};
+
+export const Borderless = BaseTemplate.bind();
+Borderless.args = {
+  border: false,
+  fullWidth: false,
+  truncate: false,
+  value: 'Borderless copy text',
+};
+
+export const FullWidth = BaseTemplate.bind();
+FullWidth.args = {
+  border: true,
+  fullWidth: true,
+  truncate: false,
+  value: 'Full width copy text',
+};
+
+export const Truncate = BaseTemplate.bind();
+Truncate.args = {
+  border: true,
+  fullWidth: false,
+  truncate: true,
+  value: 'Copy all of this really long text that should be truncated in the UI, but will still be copied to the clipboard. This can be used in cases where the text is too long to fit in the UI, but the user still needs to copy the full text.',
+};

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

@@ -0,0 +1,92 @@
+:host {
+  --background-color: var(--pine-color-neutral-grey-400);
+  --offset-xxs: var(--pine-spacing-xxs);
+  --offset-xs: var(--pine-spacing-xs);
+  --offset-sm: var(--pine-spacing-sm);
+  --offset-md: var(--pine-spacing-md);
+  --offset-lg: var(--pine-spacing-lg);
+  --offset-xxl: var(--pine-spacing-2xl);
+}
+
+.pds-divider {
+  background: var(--background-color);
+  border: 0;
+  display: flex;
+  height: 1px;
+  margin: 0;
+  width: 100%;
+}
+
+.pds-divider--vertical {
+  height: 100%;
+  width: 1px;
+}
+
+.pds-divider--offset-xxs {
+  margin: 0 calc(var(--offset-xxs) * -1);
+  padding: 0 var(--offset-xxs);
+}
+.pds-divider--offset-xxs.pds-divider--vertical {
+  margin: calc(var(--offset-xxs) * -1) 0;
+  padding: var(--offset-xxs) 0;
+}
+
+.pds-divider--offset-xs {
+  margin: 0 calc(var(--offset-xs) * -1);
+  padding: 0 var(--offset-xs);
+}
+.pds-divider--offset-xs.pds-divider--vertical {
+  margin: calc(var(--offset-xs) * -1) 0;
+  padding: var(--offset-xs) 0;
+}
+
+.pds-divider--offset-sm {
+  margin: 0 calc(var(--offset-sm) * -1);
+  padding: 0 var(--offset-sm);
+}
+.pds-divider--offset-sm.pds-divider--vertical {
+  margin: calc(var(--offset-sm) * -1) 0;
+  padding: var(--offset-sm) 0;
+}
+
+.pds-divider--offset-md {
+  margin: 0 calc(var(--offset-md) * -1);
+  padding: 0 var(--offset-md);
+}
+.pds-divider--offset-md.pds-divider--vertical {
+  margin: calc(var(--offset-md) * -1) 0;
+  padding: var(--offset-md) 0;
+}
+
+.pds-divider--offset-lg {
+  margin: 0 calc(var(--offset-lg) * -1);
+  padding: 0 var(--offset-lg);
+}
+.pds-divider--offset-lg.pds-divider--vertical {
+  margin: calc(var(--offset-lg) * -1) 0;
+  padding: var(--offset-lg) 0;
+}
+
+.pds-divider--offset-xl {
+  margin: 0 calc(var(--offset-xl) * -1);
+  padding: 0 var(--offset-xl);
+}
+.pds-divider--offset-xl.pds-divider--vertical {
+  margin: calc(var(--offset-xl) * -1) 0;
+  padding: var(--offset-xl) 0;
+}
+
+.pds-divider--offset-xxl {
+  margin: 0 calc(var(--offset-xxl) * -1);
+  padding: 0 var(--offset-xxl);
+}
+.pds-divider--offset-xxl.pds-divider--vertical {
+  margin: calc(var(--offset-xxl) * -1) 0;
+  padding: var(--offset-xxl) 0;
+}
+
+@media (max-width: 767px) {
+  .pds-divider--vertical {
+    display: none;
+  }
+}

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

@@ -0,0 +1,94 @@
+import { Host, h } from "@stencil/core";
+export class PdsDivider {
+    constructor() {
+        this.componentId = undefined;
+        this.offset = undefined;
+        this.vertical = false;
+    }
+    classNames() {
+        const classNames = ['pds-divider'];
+        if (this.vertical) {
+            classNames.push('pds-divider--vertical');
+        }
+        if (this.offset) {
+            const offsetClassName = 'pds-divider--offset-' + this.offset;
+            classNames.push(offsetClassName);
+        }
+        return classNames.join(' ');
+    }
+    render() {
+        return (h(Host, { id: this.componentId }, h("hr", { class: this.classNames() })));
+    }
+    static get is() { return "pds-divider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-divider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-divider.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."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "offset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider."
+                },
+                "attribute": "offset",
+                "reflect": false
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Sets divider to display vertically"
+                },
+                "attribute": "vertical",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pds-divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-divider.js","sourceRoot":"","sources":["../../../../src/components/pds-divider/pds-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,UAAU;;;;wBAeF,KAAK;;IAEhB,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,aAAa,CAAC,CAAC;QAEnC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;SAC1C;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,MAAM,eAAe,GAAG,sBAAsB,GAAG,IAAI,CAAC,MAAM,CAAC;YAC7D,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAClC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACxB,UAAI,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,GAAI,CAC3B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'pds-divider',\n  styleUrl: 'pds-divider.scss',\n  shadow: true,\n})\nexport class PdsDivider {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Adds offset margin/padding to expand the width (horizontal) or the height (vertical) of divider.\n   */\n  @Prop() offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\n  /**\n   * Sets divider to display vertically\n   * @defaultValue false\n   */\n  @Prop() vertical = false;\n\n  private classNames() {\n    const classNames = ['pds-divider'];\n\n    if (this.vertical) {\n      classNames.push('pds-divider--vertical');\n    }\n\n    if (this.offset) {\n      const offsetClassName = 'pds-divider--offset-' + this.offset;\n      classNames.push(offsetClassName);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr class={this.classNames()} />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,25 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+
+export default {
+  argTypes: extractArgTypes('pds-divider'),
+  component: 'pds-divider',
+  title: 'components/Divider'
+}
+
+const BaseTemplate = (args) => html`
+  <pds-divider
+    component-id=${args.componentId}
+    offset=${args.offset}
+    vertical=${args.vertical}
+  />`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  vertical: false,
+}
+
+export const Vertical = BaseTemplate.bind();
+Vertical.args = {
+  vertical: true,
+}

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

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+
+import { customArgsWithIconControl } from "../../../stories/_helpers";
+
+export default {
+  argTypes: customArgsWithIconControl({component: 'pds-icon', property: 'name'}),
+  component: 'pds-icon',
+  title: 'components/Icon'
+}
+
+const BaseTemplate = (args) => html`<pds-icon color=${args.color} name=${args.name} size=${args.size}></pds-icon>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  name: 'upload'
+};

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

@@ -0,0 +1,13 @@
+:host {
+  /**
+   * @prop --image-aspect-ratio: The image's aspect ratio.
+  */
+  --image-aspect-ratio: auto;
+  display: inline-block;
+}
+
+img {
+  aspect-ratio: var(--image-aspect-ratio);
+  height: auto;
+  width: 100%;
+}

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

@@ -0,0 +1,173 @@
+import { Host, h } from "@stencil/core";
+export class PdsImage {
+    constructor() {
+        this.alt = '';
+        this.componentId = undefined;
+        this.height = undefined;
+        this.loading = 'eager';
+        this.sizes = undefined;
+        this.src = undefined;
+        this.srcset = undefined;
+        this.width = undefined;
+    }
+    render() {
+        return (h(Host, { class: {
+                'pds-image': true,
+            }, id: this.componentId }, h("img", { alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+    }
+    static get is() { return "pds-image"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-image.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-image.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The image's alt tag. If none is provided,\nit will default to an empty string."
+                },
+                "attribute": "alt",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "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."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "height": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The height of the image in pixels. Setting this will\ndevote space in the layout to prevent layout\nshifts when the image is loaded."
+                },
+                "attribute": "height",
+                "reflect": false
+            },
+            "loading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'eager' | 'lazy'",
+                    "resolved": "\"eager\" | \"lazy\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates how the browser should load the image."
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "'eager'"
+            },
+            "sizes": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the intended display size of an image\nwithin certian breakpoints. Has no effect if `srcset`\nis not set or value has no width descriptor."
+                },
+                "attribute": "sizes",
+                "reflect": false
+            },
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The image's source."
+                },
+                "attribute": "src",
+                "reflect": false
+            },
+            "srcset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A set of image sources for the browser to use."
+                },
+                "attribute": "srcset",
+                "reflect": false
+            },
+            "width": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The width of the image in pixels. Setting this will\ndevote space in the layout to prevent layout\nshifts when the image is loaded."
+                },
+                "attribute": "width",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=pds-image.js.map