@pine-ds/core 1.3.0-dev.2 → 1.3.0-dev.4

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

@@ -0,0 +1,93 @@
+:host {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pine-spacing-100);
+}
+
+:host(.pds-loader--hidden),
+.pds-loader--hidden {
+  border-width: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.pds-loader--spinner svg {
+  --color-background-spinner: var(--pine-color-blue-300);
+  --number-spinner-timing: 2s;
+  --number-spinner-path-timing: 1.5s;
+  animation: rotate var(--number-spinner-timing) linear infinite;
+  block-size: var(--sizing-spinner);
+  color: var(--color-background-spinner);
+  inline-size: var(--sizing-spinner);
+}
+
+.pds-loader__spinner-path {
+  stroke-width: 8px;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.pds-loader--typing {
+  --border-radius-typing: var(--pine-border-radius-200);
+  --border-radius-typing-dot: var(--pine-border-radius-round);
+  --box-shadow-typing: var(--pine-box-shadow-sm);
+  --color-background-typing-default: var(--pine-color-grey-200);
+  --color-background-typing-dot-default: var(--pine-color-grey-500);
+  --number-typing-timing: 1s;
+  --opacity-typing-dot-default: 0.4;
+  --opacity-typing-dot-active: 1;
+  --sizing-typing-dot: calc(var(--pine-spacing-150) / 2);
+  --spacing-typing-gap: var(--pine-spacing-050);
+  --spacing-typing-margin-block: var(--pine-spacing-0);
+  --spacing-typing-margin-inline: auto;
+  --spacing-typing-padding-block: 15px;
+  --spacing-typing-padding-inline: var(--pine-spacing-250);
+  align-items: center;
+  background-color: var(--color-background-typing-default);
+  border-radius: var(--border-radius-typing);
+  box-shadow: var(--box-shadow-typing);
+  display: inline-flex;
+  gap: var(--spacing-typing-gap);
+  margin-block: var(--spacing-typing-margin-block);
+  margin-inline: var(--spacing-typing-margin-inline);
+  padding-block: var(--spacing-typing-padding-block);
+  padding-inline: var(--spacing-typing-padding-inline);
+  position: relative;
+}
+.pds-loader--typing span {
+  background-color: var(--color-background-typing-dot-default);
+  block-size: var(--sizing-typing-dot);
+  border-radius: var(--border-radius-typing-dot);
+  inline-size: var(--sizing-typing-dot);
+  opacity: var(--opacity-typing-dot-default);
+}
+.pds-loader--typing span:nth-of-type(1) {
+  animation: var(--number-typing-timing) typing infinite 0.3333s;
+}
+.pds-loader--typing span:nth-of-type(2) {
+  animation: var(--number-typing-timing) typing infinite 0.6666s;
+}
+.pds-loader--typing span:nth-of-type(3) {
+  animation: var(--number-typing-timing) typing infinite 0.9999s;
+}
+
+@keyframes typing {
+  50% {
+    opacity: var(--opacity-typing-dot-active);
+    transform: scale(1.2);
+  }
+}
+.pds-loader__label {
+  --typography-label-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);
+  font: var(--typography-label-default);
+}

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

@@ -0,0 +1,127 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot label - Default slot for Loader label text.
+ */
+export class PdsLoader {
+    constructor() {
+        this.style = () => {
+            if (this.size !== undefined) {
+                return {
+                    height: this.loaderSize(),
+                    width: this.loaderSize(),
+                };
+            }
+        };
+        this.isLoading = true;
+        this.showLabel = false;
+        this.size = 'md';
+        this.variant = 'spinner';
+    }
+    loaderSize() {
+        const sizes = {
+            xs: '24px',
+            sm: '32px',
+            md: '48px',
+            lg: '64px',
+            xl: '80px',
+        };
+        if (sizes[this.size]) {
+            return sizes[this.size];
+        }
+        else {
+            return this.size;
+        }
+    }
+    render() {
+        return (h(Host, { key: '325b4512d1455cb90d4897e91453c4ec2370ddcb', 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: 'eed858cd8518769874e7ca6d5265f3e1e77164f3', class: "pds-loader--spinner" }, h("svg", { key: 'fc821517a5923628ef96c8e37b9987c0ba3b987b', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, h("defs", { key: 'f477b8f7be973a6a5b068b6758d6f549404e64c4' }, h("linearGradient", { key: '4979634cfecdca7ef5818f23577b401aa8991389', id: "spinner-secondHalf" }, h("stop", { key: 'ae4667b10205baa8dec8b7affd34d78273ad9667', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '3d66bc5180831487e9e2591cc2b436f9b8cc855e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '1c99e9057a86d4b850348543826fb6da163f4eb9', id: "spinner-firstHalf" }, h("stop", { key: '271c14abb61bb9bc01ac72f43d1cc8580b89b6c0', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '4b8de0ac98a1b44ec3bbba4aa0002957e44c976c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'b12aaf6168c8428999d020b46c99faf918c45f07', class: "pds-loader__spinner-path" }, h("path", { key: '4443446af5cf8c73d3352fa90d580e914c469028', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'ca4edec218d03a74d12ce43a86ef55fbedaea39f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: 'af6ed9732a9fdd2047f100d2465b27782d2a0b02', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '96aa15066aa426d53481bddd5b665181d9bcd0bd', class: "pds-loader--typing" }, h("span", { key: 'a0bb9722a2dbaf843afc9a50a1f42c46758d1b5e' }), h("span", { key: '0efc9cf2f132f358f58561ccbc7027c57f252df2' }), h("span", { key: 'b8b73b864c7dfefe26ac3aa33099d2f2f3737614' }))), h("div", { key: '3c921244741289e7b67228caedf6e5e13fac1d63', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '423a30358e6f662a0b80cef445c4a20db3dd36f9', name: "label" }, "Loading..."))));
+    }
+    static get is() { return "pds-loader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-loader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If false, the loader will be hidden."
+                },
+                "attribute": "is-loading",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the loader should display a label."
+                },
+                "attribute": "show-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the size of the spinner loader. Value can be preset or custom."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'spinner' | 'typing'",
+                    "resolved": "\"spinner\" | \"typing\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the type of loader."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'spinner'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pds-loader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-loader.js","sourceRoot":"","sources":["../../../src/components/pds-loader/pds-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAOH,MAAM,OAAO,SAAS;;QA2CZ,UAAK,GAAG,GAAG,EAAE;YACnB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;gBAC5B,OAAO;oBACL,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;oBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;iBACzB,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;yBA9C2B,IAAI;yBAKH,KAAK;oBAWxB,IAAI;uBAKyB,SAAS;;IAEzC,UAAU;QAChB,MAAM,KAAK,GAA8B;YACvC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAC;QAEF,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YACrB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC;IACH,CAAC;IAWD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE,iBAAe,CAAC,IAAI,CAAC,SAAS,eAAa,IAAI,CAAC,SAAS,eAAY,QAAQ;YACjJ,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,CAC7B,4DAAK,KAAK,EAAC,qBAAqB;gBAC9B,4DAAK,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM;oBACzD;wBACE,uEAAgB,EAAE,EAAC,oBAAoB;4BACrC,6DAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG;4BAC/D,6DAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD;wBACjB,uEAAgB,EAAE,EAAC,mBAAmB;4BACpC,6DAAM,MAAM,EAAC,IAAI,kBAAc,GAAG,gBAAY,cAAc,GAAG;4BAC/D,6DAAM,MAAM,EAAC,MAAM,kBAAc,KAAK,gBAAY,cAAc,GAAG,CACpD,CACZ;oBAEP,0DAAG,KAAK,EAAC,0BAA0B;wBACjC,6DAAM,MAAM,EAAC,0BAA0B,EAAC,CAAC,EAAC,+BAA+B,GAAG;wBAC5E,6DAAM,MAAM,EAAC,yBAAyB,EAAC,CAAC,EAAC,+BAA+B,GAAG;wBAE3E,6DAAM,MAAM,EAAC,cAAc,oBAAgB,OAAO,EAAC,CAAC,EAAC,4BAA4B,GAAG,CAClF,CACA,CACF,CACP;YAEA,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,CAC5B,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,8DAAa;gBACb,8DAAa;gBACb,8DAAa,CACT,CACP;YAED,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;gBAC3E,6DAAM,IAAI,EAAC,OAAO,iBAAkB,CAChC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot label - Default slot for Loader label text.\n */\n\n@Component({\n  tag: 'pds-loader',\n  styleUrl: 'pds-loader.scss',\n  shadow: true,\n})\nexport class PdsLoader {\n  /**\n   * If false, the loader will be hidden.\n   */\n  @Prop() isLoading: boolean = true;\n\n  /**\n   * Determines whether the loader should display a label.\n   */\n  @Prop() showLabel?: boolean = false;\n\n  /**\n   * Sets the size of the spinner loader. Value can be preset or custom.\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string = 'md';\n\n  /**\n   * Determines the type of loader.\n   */\n  @Prop() variant: 'spinner' | 'typing' = 'spinner';\n\n  private loaderSize() {\n    const sizes: { [key: string]: string } = {\n      xs: '24px',\n      sm: '32px',\n      md: '48px',\n      lg: '64px',\n      xl: '80px',\n    };\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  private style = () => {\n    if (this.size !== undefined) {\n      return {\n        height: this.loaderSize(),\n        width: this.loaderSize(),\n      };\n    }\n  };\n\n  render() {\n    return (\n      <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n        {this.variant === 'spinner' && (\n          <div class=\"pds-loader--spinner\">\n            <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\">\n              <defs>\n                <linearGradient id=\"spinner-secondHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n                <linearGradient id=\"spinner-firstHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n              </defs>\n\n              <g class=\"pds-loader__spinner-path\">\n                <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n                <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n                <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n              </g>\n            </svg>\n          </div>\n        )}\n\n        {this.variant === 'typing' && (\n          <div class=\"pds-loader--typing\">\n            <span></span>\n            <span></span>\n            <span></span>\n          </div>\n        )}\n\n        <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n          <slot name=\"label\">Loading...</slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,36 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+
+export default {
+  argTypes: extractArgTypes('pds-loader'),
+  component: 'pds-loader',
+  title: 'components/Loader',
+  args: {
+    isLoading: true,
+    showLabel: false,
+  },
+}
+
+const BaseTemplate = (args) => html`
+  <pds-loader
+    is-loading="${args.isLoading}"
+    show-label="${args.showLabel}"
+    size="${args.size}"
+    variant="${args.variant}"
+  >
+    <span slot="label">${args.label}</span>
+  </pds-loader>
+`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  size: '100px',
+  showLabel: true,
+  label: "Now loading...",
+  variant: 'spinner'
+};
+
+export const Typing = BaseTemplate.bind();
+Typing.args = {
+  variant: 'typing'
+};

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

@@ -0,0 +1,79 @@
+:host {
+  --color-progress-fill: var(--pine-color-blue-300);
+  --sizing-progress-bar-height: 8px;
+  --sizing-progress-bar-width: 100%;
+  align-items: center;
+  display: flex;
+  width: var(--sizing-progress-bar-width);
+}
+
+@keyframes progressBar {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: var(--sizing-progress-bar-width);
+  }
+}
+.pds-progress {
+  --border-radius: var(--pine-border-radius-050);
+  --color-progress-bar-background: var(--pine-color-grey-300);
+  align-items: center;
+  background-color: var(--color-progress-bar-background);
+  border-radius: var(--border-radius);
+  display: flex;
+  flex-direction: row;
+  height: var(--sizing-progress-bar-height);
+  position: relative;
+  width: 100%;
+}
+
+:host(.is-animated) progress,
+:host(.is-animated) progress::-webkit-progress-bar {
+  animation: progressBar 3s ease;
+  animation-fill-mode: forwards;
+}
+
+progress,
+progress::-webkit-progress-bar {
+  background-color: transparent;
+  border: 0;
+  height: var(--sizing-progress-bar-height);
+  width: 100%;
+}
+
+progress::-webkit-progress-value {
+  --border-radius: var(--pine-border-radius-050);
+  --color-background: var(--pine-color-blue-300);
+  background-color: var(--color-progress-fill, var(--color-background));
+  border-radius: var(--border-radius);
+}
+
+progress::-moz-progress-bar {
+  --color-background: var(--pine-color-blue-300);
+  --border-radius: var(--pine-border-radius-050);
+  background-color: var(--color-progress-fill, var(--color-background));
+  border-radius: var(--border-radius);
+}
+
+.pds-progress__label {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.pds-progress__percentage {
+  --font-size: var(--pine-font-size-087);
+  --font-weight: var(--pine-font-weight-medium);
+  --line-height: var(--pine-line-height-150);
+  --spacing-inline-start-margin: var(--pine-spacing-300);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  margin-inline-start: calc(var(--spacing-inline-start-margin) / 2);
+}

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

@@ -0,0 +1,148 @@
+import { Host, h } from "@stencil/core";
+export class PdsProgress {
+    constructor() {
+        this.animated = false;
+        this.componentId = undefined;
+        this.fillColor = undefined;
+        this.label = undefined;
+        this.percent = 0;
+        this.showPercent = false;
+    }
+    render() {
+        return (h(Host, { key: 'a11c3d67af0621981d2f13ad673e11999926b3c1', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'bb480c5ce1fc9c56fce1022a26783d5729eb30dc', class: "pds-progress" }, h("label", { key: '02fec27f268262889b514aef4d8344bbb9a9484c', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '122d2639d7630f28fd98adf9bc003eeed6c9ebef', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'ba7262e0627a2848b3da03a9a32882510bf2628c', class: "pds-progress__percentage" }, this.percent, "%")));
+    }
+    static get is() { return "pds-progress"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-progress.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-progress.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not progress is animated."
+                },
+                "attribute": "animated",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "fillColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'var(--pine-color-blue-300)'"
+                        }],
+                    "text": "Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."
+                },
+                "attribute": "fill-color",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for label text. Label is visually hidden but required for better accessibility."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "percent": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "0"
+                        }],
+                    "text": "Sets the progress fill pecentage and visually displayed when `show-percentage=true`."
+                },
+                "attribute": "percent",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "showPercent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the percent value should be displayed as text."
+                },
+                "attribute": "show-percent",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pds-progress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-progress.js","sourceRoot":"","sources":["../../../src/components/pds-progress/pds-progress.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;;wBAKH,KAAK;;;;uBAsBN,CAAC;2BAMG,KAAK;;IAE3B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE;YAChE,4DAAK,KAAK,EAAC,cAAc;gBACvB,8DAAO,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACzD,IAAI,CAAC,KAAK,CACL;gBACR,iEACE,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,uBAAuB,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EACxE,KAAK,EAAE,IAAI,CAAC,OAAO,GAEV,CACP;YACL,IAAI,CAAC,WAAW,IAAI,4DAAK,KAAK,EAAC,0BAA0B;gBAAE,IAAI,CAAC,OAAO;oBAAQ,CAC3E,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-progress',\n  styleUrl: 'pds-progress.scss',\n  shadow: true,\n})\nexport class PdsProgress {\n  /**\n  * Determines whether or not progress is animated.\n  * @defaultValue false\n  */\n  @Prop() animated = false;\n\n  /**\n  * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n  */\n  @Prop() componentId!: string;\n\n  /**\n  * Sets the progress fill color. Accepts a color token or a [valid color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).\n  * @defaultValue 'var(--pine-color-blue-300)'\n  */\n  @Prop() fillColor: string;\n\n  /**\n  * String used for label text. Label is visually hidden but required for better accessibility.\n  */\n  @Prop() label!: string;\n\n  /**\n  * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.\n  * @defaultValue 0\n  */\n  @Prop() percent = 0;\n\n  /**\n  * Determines whether or not the percent value should be displayed as text.\n  * @defaultValue false\n  */\n  @Prop() showPercent = false;\n\n  render() {\n    return (\n      <Host class={this.animated ? { 'is-animated': this.animated } : ''}>\n        <div class=\"pds-progress\">\n          <label class=\"pds-progress__label\" htmlFor={this.componentId}>\n            {this.label}\n          </label>\n          <progress\n            id={this.componentId}\n            max=\"100\"\n            style={this.fillColor ? { '--color-progress-fill': this.fillColor } : {}}\n            value={this.percent}\n          >\n          </progress>\n        </div>\n        {this.showPercent && <div class=\"pds-progress__percentage\">{this.percent}%</div>}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,65 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+
+export default {
+  argTypes: extractArgTypes('pds-progress'),
+  component: 'pds-progress',
+  title: 'components/Progress'
+}
+
+const BaseTemplate = (args) =>
+  html`<pds-progress
+    animated=${args.animated}
+    component-id=${args.componentId}
+    fill-color=${args.fillColor}
+    label=${args.label}
+    percent=${args.percent}
+    show-percent=${args.showPercent}
+  ></pds-progress>`;
+
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  animated: false,
+  componentId: 'default',
+  label: 'Default label',
+  percent: 0,
+  showPercent: false,
+};
+
+export const Percent = BaseTemplate.bind();
+Percent.args = {
+  animated: false,
+  componentId: 'percentage',
+  label: 'Percentage label',
+  percent: 50,
+  showPercent: false,
+};
+
+export const showPercent = BaseTemplate.bind();
+showPercent.args = {
+  animated: false,
+  componentId: 'show-percentage',
+  label: 'Show percentage label',
+  percent: 50,
+  showPercent: true,
+};
+
+export const Animated = BaseTemplate.bind();
+Animated.args = {
+  animated: true,
+  componentId: 'animated',
+  label: 'Animated label',
+  percent: 75,
+  showPercent: false,
+};
+
+export const fillColor = BaseTemplate.bind();
+fillColor.args = {
+  animated: false,
+  componentId: 'fillcolor',
+  label: 'Color label',
+  percent: 95,
+  showPercent: false,
+  fillColor: '#86D5BC',
+};

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

@@ -0,0 +1,104 @@
+:host {
+  --border-interactive-default: var(--pine-border-width-thin) solid var( --pine-color-grey-400);
+  --border-radius: 50%;
+  --box-shadow-focus: 0 0 0 2px var(--color-focus);
+  --box-shadow-focus-error: 0 0 0 2px var(--color-invalid-focus);
+  --color: var(--pine-color-charcoal-200);
+  --color-background: var(--pine-color-white);
+  --color-background-hover: var(--pine-color-grey-100);
+  --color-background-disabled: var(--pine-color-grey-200);
+  --color-border-hover: var(--pine-color-grey-500);
+  --color-border-disabled: var(--pine-color-grey-300);
+  --color-checked: var(--pine-color-charcoal-500);
+  --color-disabled: var(---pine-color-grey-500);
+  --color-focus: var(--pine-color-blue-200);
+  --color-invalid: var(--pine-color-red-300);
+  --color-invalid-focus: var(--pine-color-red-200);
+  --font-size: var(--pine-font-size-087);
+  --sizing-check-size: 6px;
+  --sizing-input-size: 16px;
+  --sizing-margin-block-start: 6px;
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+}
+
+:host(.is-invalid) input {
+  border-color: var(--color-invalid);
+}
+:host(.is-invalid) input:checked {
+  background: var(--color-invalid);
+}
+:host(.is-invalid) input:focus-visible {
+  box-shadow: var(--box-shadow-focus-error);
+  outline: none;
+}
+:host(.is-invalid) label,
+:host(.is-invalid) .pds-radio__message--error {
+  color: var(--color-invalid);
+}
+
+input {
+  appearance: none;
+  border: var(--border-interactive-default);
+  border-radius: var(--border-radius);
+  height: var(--sizing-input-size);
+  margin: 0;
+  position: relative;
+  width: var(--sizing-input-size);
+}
+input:hover {
+  background: var(--color-background-hover);
+  border-color: var(--color-border-hover);
+}
+input:checked {
+  background: var(--color-checked);
+  border-color: var(--color-checked);
+}
+input:checked::after {
+  background: var(--color-background);
+  border-radius: 50%;
+  content: "";
+  display: block;
+  height: var(--sizing-check-size);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--sizing-check-size);
+}
+input:disabled {
+  background: var(--color-background-disabled);
+  border-color: var(--color-border-disabled);
+  cursor: not-allowed;
+}
+input:disabled:checked {
+  background: var(--color-disabled);
+  border-color: var(--color-border-disabled);
+}
+input:disabled:checked::after {
+  border-color: var(--color-border-disabled);
+}
+input:disabled + label {
+  color: var(--color-border-hover);
+  cursor: not-allowed;
+}
+input:disabled ~ .pds-radio__message {
+  color: var(--color-disabled);
+}
+input:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+
+label {
+  margin-inline-start: 10px;
+}
+
+.pds-radio__message {
+  color: var(--color);
+  font-size: var(--font-size);
+  margin-block-start: var(--sizing-margin-block-start);
+  margin-inline-start: 26px;
+  width: 100%;
+}