@pine-ds/core 3.0.0-mercury.0 → 3.0.1

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

@@ -0,0 +1,246 @@
+import { Host, h } from "@stencil/core";
+export class PdsPopover {
+    constructor() {
+        /**
+         * Determines when the popover is active
+         * @defaultValue false
+         */
+        this.active = false;
+        /**
+         * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
+         * @defaultValue "show"
+         */
+        this.popoverTargetAction = 'show';
+        /**
+         * Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
+         * Manual popovers require the consumer to handle the visibility of the popover.
+         */
+        this.popoverType = 'auto';
+        /**
+         * Sets the maximum width of the popover content
+         * @defaultValue 352
+         */
+        this.maxWidth = 352;
+        /**
+         * Determines the preferred position of the popover
+         * @defaultValue "right"
+         */
+        this.placement = 'right';
+    }
+    componentWillRender() {
+        this.handlePopoverPositioning();
+    }
+    handleClick() {
+        this.active = !this.active;
+    }
+    handleScroll() {
+        if (this.active) {
+            this.handlePopoverPositioning();
+        }
+    }
+    handlePopoverPositioning() {
+        const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger');
+        const popoverEl = this.el.shadowRoot.querySelector('div[popover]');
+        if (!triggerEl || !popoverEl)
+            return;
+        const triggerRect = triggerEl.getBoundingClientRect();
+        const popoverRect = popoverEl.getBoundingClientRect();
+        let top = 0;
+        let left = 0;
+        const offset = 8;
+        switch (this.placement) {
+            case 'top':
+                top = triggerRect.top - popoverRect.height - offset;
+                left = triggerRect.left;
+                break;
+            case 'right':
+                top = triggerRect.top;
+                left = triggerRect.right + offset;
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + offset;
+                left = triggerRect.left;
+                break;
+            case 'left':
+                top = triggerRect.top;
+                left = triggerRect.left - popoverRect.width - offset;
+                break;
+        }
+        popoverEl.style.top = `${top}px`;
+        popoverEl.style.left = `${left}px`;
+    }
+    render() {
+        return (h(Host, { key: '3bed0c38e97500efb2bffcef8321a6b38215c434' }, h("button", { key: '0db59e1815568cb980ce0bbe5ef3502177015a1d', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), h("div", { key: 'd8c70cd36614cb3fc83669a843b00af0d18b03d4', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: 'e7408b199525e88c0e975f9cc3e96200f82ea23e' }))));
+    }
+    static get is() { return "pds-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "popoverTargetAction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'show' | 'toggle' | 'hide'",
+                    "resolved": "\"hide\" | \"show\" | \"toggle\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "\"show\""
+                        }],
+                    "text": "Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "popover-target-action",
+                "reflect": false,
+                "defaultValue": "'show'"
+            },
+            "popoverType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'manual'",
+                    "resolved": "\"auto\" | \"manual\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\nManual popovers require the consumer to handle the visibility of the popover."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "popover-type",
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that appears on the trigger element"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "text",
+                "reflect": false
+            },
+            "maxWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "352"
+                        }],
+                    "text": "Sets the maximum width of the popover content"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-width",
+                "reflect": false,
+                "defaultValue": "352"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PlacementType",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "PlacementType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::PlacementType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "\"right\""
+                        }],
+                    "text": "Determines the preferred position of the popover"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placement",
+                "reflect": true,
+                "defaultValue": "'right'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "active": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "scroll",
+                "method": "handleScroll",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=pds-popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pds-popover.js","sourceRoot":"","sources":["../../../src/components/pds-popover/pds-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Listen, h, Prop, State } from '@stencil/core';\nimport { PlacementType } from '@utils/types';\n\n@Component({\n  tag: 'pds-popover',\n  styleUrl: 'pds-popover.scss',\n  shadow: true,\n})\nexport class PdsPopover {\n  /**\n   * Reference to the Host element\n   */\n  @Element() el: HTMLPdsPopoverElement;\n\n  /**\n   * Determines when the popover is active\n   * @defaultValue false\n   */\n  @State() active = false;\n\n  /**\n   * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.\n   * @defaultValue \"show\"\n   */\n  @Prop() popoverTargetAction: 'show' | 'toggle' | 'hide' = 'show';\n\n  /**\n   * Determines the type of popover. Auto popovers can be \"light dismissed\" by clicking outside of the popover.\n   * Manual popovers require the consumer to handle the visibility of the popover.\n   */\n  @Prop() popoverType: 'auto' | 'manual' = 'auto';\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text that appears on the trigger element\n   */\n  @Prop() text: string;\n\n  /**\n   * Sets the maximum width of the popover content\n   * @defaultValue 352\n   */\n  @Prop() maxWidth?: number = 352;\n\n  /**\n   * Determines the preferred position of the popover\n   * @defaultValue \"right\"\n   */\n  @Prop({ reflect: true }) placement: PlacementType = 'right';\n\n  componentWillRender() {\n    this.handlePopoverPositioning();\n  }\n\n  @Listen('click', {\n    capture: true\n  })\n  handleClick() {\n    this.active = !this.active;\n  }\n\n  @Listen('scroll', {\n    target: 'window',\n    capture: true\n  })\n  handleScroll() {\n    if (this.active) {\n      this.handlePopoverPositioning();\n    }\n  }\n\n  private handlePopoverPositioning() {\n    const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger') as HTMLElement;\n    const popoverEl = this.el.shadowRoot.querySelector('div[popover]') as HTMLElement;\n\n    if (!triggerEl || !popoverEl) return;\n\n    const triggerRect = triggerEl.getBoundingClientRect();\n    const popoverRect = popoverEl.getBoundingClientRect();\n\n    let top = 0;\n    let left = 0;\n    const offset = 8\n\n    switch (this.placement) {\n      case 'top':\n        top = triggerRect.top - popoverRect.height - offset;\n        left = triggerRect.left;\n        break;\n      case 'right':\n        top = triggerRect.top;\n        left = triggerRect.right + offset;\n        break;\n      case 'bottom':\n        top = triggerRect.bottom + offset;\n        left = triggerRect.left;\n        break;\n      case 'left':\n        top = triggerRect.top;\n        left = triggerRect.left - popoverRect.width - offset;\n        break;\n    }\n\n    popoverEl.style.top = `${top}px`;\n    popoverEl.style.left = `${left}px`;\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class=\"pds-popover__trigger\"\n          popoverTarget={this.componentId}\n          popoverTargetAction={this.popoverTargetAction}\n          onClick={this.handleClick}\n        >\n          {this.text}\n        </button>\n        <div\n          class={`pds-popover ${this.active ? 'pds-popover--active' : ''}`}\n          id={this.componentId}\n          popover={this.popoverType}\n          style={{ maxWidth: `${this.maxWidth}px` }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,45 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+	argTypes: extractArgTypes('pds-popover'),
+	args: {
+		popoverTargetAction: 'show',
+		popoverType: 'auto',
+	},
+	component: 'pds-popover',
+	decorators: [withActions],
+	parameters: {
+		actions: {
+			handles: ['mouseEnter', 'mouseLeave', 'hidePdsPopover', 'showPdsPopover'],
+		},
+	},
+	title: 'components/Popover'
+}
+
+const BaseTemplate = (args) => html`
+<pds-popover component-id=${args.componentId}  popover-type=${args.popoverType} popover-target-action=${args.popoverTargetAction} text=${args.text} max-width=${args.maxWidth} placement=${args.placement}>
+	${args.slot}
+</pds-popover>
+`;
+
+export const Default = BaseTemplate.bind({});
+Default.args = {
+	componentId: 'popover-1',
+  placement: "right",
+  text: "Show popover",
+	slot: html`<p>Popover content</p>
+    <p>Popover content</p>`
+};
+
+export const Toggle = BaseTemplate.bind({});
+Toggle.args = {
+	componentId: 'popover-1',
+  placement: "bottom",
+	popoverType: "manual",
+	popoverTargetAction: "toggle",
+  text: "Toggle popover",
+	slot: html`<p>Popover content</p>
+    <p>Popover content</p>`
+};

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

@@ -1,6 +1,5 @@
 :host {
-  --color-progress-fill: var(--pine-color-blue-300);
-  --sizing-progress-bar-height: 8px;
+  --color-progress-fill: var(--pine-color-brand);
   --sizing-progress-bar-width: 100%;
   align-items: center;
   display: flex;
@@ -16,14 +15,12 @@
   }
 }
 .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);
+  background-color: var(--pine-color-background-container-disabled);
+  border-radius: var(--pine-dimension-2xs);
   display: flex;
   flex-direction: row;
-  height: var(--sizing-progress-bar-height);
+  height: var(--pine-dimension-xs);
   position: relative;
   width: 100%;
 }
@@ -38,22 +35,18 @@ progress,
 progress::-webkit-progress-bar {
   background-color: transparent;
   border: 0;
-  height: var(--sizing-progress-bar-height);
+  height: var(--pine-dimension-xs);
   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);
+  background-color: var(--color-progress-fill, var(--pine-color-brand));
+  border-radius: var(--pine-dimension-2xs);
 }
 
 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);
+  background-color: var(--color-progress-fill, var(--pine-color-brand));
+  border-radius: var(--pine-dimension-2xs);
 }
 
 .pds-progress__label {
@@ -68,12 +61,6 @@ progress::-moz-progress-bar {
 }
 
 .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);
+  font-weight: var(--pine-font-weight-medium);
+  margin-inline-start: calc(var(--pine-dimension-md) / 2);
 }

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

@@ -1,15 +1,24 @@
 import { Host, h } from "@stencil/core";
 export class PdsProgress {
     constructor() {
+        /**
+        * Determines whether or not progress is animated.
+        * @defaultValue false
+        */
         this.animated = false;
-        this.componentId = undefined;
-        this.fillColor = undefined;
-        this.label = undefined;
+        /**
+        * Sets the progress fill pecentage and visually displayed when `show-percentage=true`.
+        * @defaultValue 0
+        */
         this.percent = 0;
+        /**
+        * Determines whether or not the percent value should be displayed as text.
+        * @defaultValue false
+        */
         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, "%")));
+        return (h(Host, { key: 'a0a7cde165c1acc884366dfe7a368db5d7c4150e', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'c2a8f262e0a6393448a0bc8a05dc49f30c451754', class: "pds-progress" }, h("label", { key: '422c51d5b06ef6d99e23cb2721b861ba9611b1df', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '57081cc95c8bb44d6fa26cd7d1f7933108982165', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '37b88967a8584b43407314b0ba70faf4e43a9e5a', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }
@@ -42,6 +51,8 @@ export class PdsProgress {
                         }],
                     "text": "Determines whether or not progress is animated."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "animated",
                 "reflect": false,
                 "defaultValue": "false"
@@ -60,6 +71,8 @@ export class PdsProgress {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "component-id",
                 "reflect": false
             },
@@ -80,6 +93,8 @@ export class PdsProgress {
                         }],
                     "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)."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "fill-color",
                 "reflect": false
             },
@@ -97,6 +112,8 @@ export class PdsProgress {
                     "tags": [],
                     "text": "String used for label text. Label is visually hidden but required for better accessibility."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -117,6 +134,8 @@ export class PdsProgress {
                         }],
                     "text": "Sets the progress fill pecentage and visually displayed when `show-percentage=true`."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "percent",
                 "reflect": false,
                 "defaultValue": "0"
@@ -138,6 +157,8 @@ export class PdsProgress {
                         }],
                     "text": "Determines whether or not the percent value should be displayed as text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "show-percent",
                 "reflect": false,
                 "defaultValue": "false"

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

@@ -1 +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"]}
+{"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;IALxB;QAME;;;UAGE;QACM,aAAQ,GAAG,KAAK,CAAC;QAkBzB;;;UAGE;QACM,YAAO,GAAG,CAAC,CAAC;QAEpB;;;UAGE;QACM,gBAAW,GAAG,KAAK,CAAC;KAqB7B;IAnBC,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  styleUrls: ['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-radio/pds-radio.css

@@ -1,22 +1,6 @@
 :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-input-size: var(--pine-dimension-sm);
   --sizing-margin-block-start: 6px;
   align-items: center;
   display: flex;
@@ -24,40 +8,50 @@
 }
 
 :host(.is-invalid) input {
-  border-color: var(--color-invalid);
+  border-color: var(--pine-color-border-danger);
 }
 :host(.is-invalid) input:checked {
-  background: var(--color-invalid);
+  background: var(--pine-color-border-danger);
+}
+:host(.is-invalid) input:checked:hover {
+  background: var(--pine-color-border-danger-hover);
+  border-color: var(--pine-color-border-danger-hover);
 }
 :host(.is-invalid) input:focus-visible {
-  box-shadow: var(--box-shadow-focus-error);
-  outline: none;
+  outline-color: var(--pine-color-focus-ring-danger);
 }
 :host(.is-invalid) label,
 :host(.is-invalid) .pds-radio__message--error {
-  color: var(--color-invalid);
+  color: var(--pine-color-text-message-danger);
 }
 
 input {
   appearance: none;
-  border: var(--border-interactive-default);
-  border-radius: var(--border-radius);
+  background: var(--pine-color-background-container);
+  border: var(--pine-border);
+  border-radius: var(--pine-border-radius-full);
+  flex: none;
   height: var(--sizing-input-size);
   margin: 0;
+  margin-block-start: var(--pine-dimension-025);
   position: relative;
   width: var(--sizing-input-size);
 }
 input:hover {
-  background: var(--color-background-hover);
-  border-color: var(--color-border-hover);
+  background: var(--pine-color-background-container-hover);
+  border: var(--pine-border-hover);
 }
 input:checked {
-  background: var(--color-checked);
-  border-color: var(--color-checked);
+  background: var(--pine-color-accent);
+  border-color: var(--pine-color-accent);
+}
+input:checked:hover {
+  background: var(--pine-color-accent-hover);
+  border-color: var(--pine-color-accent-hover);
 }
 input:checked::after {
-  background: var(--color-background);
-  border-radius: 50%;
+  background: var(--pine-color-background-container);
+  border-radius: var(--pine-border-radius-full);
   content: "";
   display: block;
   height: var(--sizing-check-size);
@@ -68,37 +62,57 @@ input:checked::after {
   width: var(--sizing-check-size);
 }
 input:disabled {
-  background: var(--color-background-disabled);
-  border-color: var(--color-border-disabled);
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
   cursor: not-allowed;
 }
 input:disabled:checked {
-  background: var(--color-disabled);
-  border-color: var(--color-border-disabled);
+  background-color: var(--pine-color-accent-disabled);
+  border-color: var(--pine-color-border-disabled);
 }
 input:disabled:checked::after {
-  border-color: var(--color-border-disabled);
+  border-color: var(--pine-color-border-disabled);
 }
 input:disabled + label {
-  color: var(--color-border-hover);
   cursor: not-allowed;
 }
 input:disabled ~ .pds-radio__message {
-  color: var(--color-disabled);
+  color: var(--pine-color-text-message-disabled);
 }
 input:focus-visible {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
+  outline: var(--pine-outline-focus);
 }
 
 label {
-  margin-inline-start: 10px;
+  display: flex;
+  gap: var(--pine-dimension-xs);
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0 0, 0 0, 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
 }
 
 .pds-radio__message {
-  color: var(--color);
-  font-size: var(--font-size);
+  color: var(--pine-color-text-message);
   margin-block-start: var(--sizing-margin-block-start);
-  margin-inline-start: 26px;
+  margin-inline-start: var(--pine-dimension-md);
   width: 100%;
+}
+
+.pds-radio__message--error {
+  display: flex;
+  font-size: var(--pine-font-size-body-sm);
+  gap: var(--pine-dimension-2xs);
+}
+.pds-radio__message--error pds-icon {
+  margin-block-start: var(--pine-dimension-025);
 }