@pine-ds/core 4.0.0-mercury.0 → 4.0.0

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

@@ -1,16 +1,35 @@
 import { h } from "@stencil/core";
+import { setColor } from "../../utils/utils";
 import { launch } from "@pine-ds/icons/icons";
 /**
- * @part link - The main link element that represents the link component.
- * @slot - Content is placed between the opening closing tags.
+ * @part link - Link element styles.
+ * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
  */
 export class PdsLink {
     constructor() {
-        this.componentId = undefined;
+        /**
+         * Marks the link as the current/active navigation item — for tab strips and
+         * nav rails built from links. Applies the active treatment (persistent
+         * underline + strong text) and sets `aria-current="page"`.
+         * @defaultValue false
+         */
+        this.active = false;
+        /**
+         * Determines whether the link should open in a new tab.
+         * @defaultValue false
+         * @deprecated Consider using the `target` prop for more control. This prop will be maintained for backward compatibility.
+         */
         this.external = false;
+        /**
+         * Sets the link variant styles.
+         * @defaultValue inline
+         */
         this.variant = 'inline';
+        /**
+         * The font size of the link's text.
+         * @defaultValue lg
+         */
         this.fontSize = 'lg';
-        this.href = undefined;
     }
     classNames() {
         const classNames = ['pds-link'];
@@ -22,9 +41,23 @@ export class PdsLink {
         }
         return classNames.join(' ');
     }
+    setLinkStyles() {
+        if (!this.color)
+            return;
+        const linkColors = {
+            secondary: 'var(--pine-color-text-primary)',
+            accent: 'var(--pine-color-accent)',
+            danger: 'var(--pine-color-danger)',
+        };
+        const linkStyles = setColor(this.color, linkColors);
+        return linkStyles;
+    }
     render() {
-        return (h("a", { key: 'de51c27a4c7e3ab6f105f40b683f7c8d1561049c', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '3c4fbcff6544a604d81dd4388a504a902d6ee130' }, this.href), this.external &&
-            h("pds-icon", { key: 'fd1acc513efd16134c062ad3845d44be20a911cf', icon: launch, size: this.fontSize })));
+        const targetValue = this.target || (this.external ? '_blank' : undefined);
+        const showExternalIcon = this.external;
+        const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
+        return (h("a", { key: '5d0c5a0a5b8b80a8cdff802a3d78dad85a9ccdc4', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: '06b7be14d867eae1b7acba8570f1e94bdf840fbb' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: '678414f7d20fd20b6931cc401163180c3ad0094c', icon: launch, size: this.fontSize })));
     }
     static get is() { return "pds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -40,6 +73,67 @@ export class PdsLink {
     }
     static get properties() {
         return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Marks the link as the current/active navigation item \u2014 for tab strips and\nnav rails built from links. Applies the active treatment (persistent\nunderline + strong text) and sets `aria-current=\"page\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the link color."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "download": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Prompts the user to save the linked URL instead of navigating to it.\nIt can be used without a value to download with the default filename,\nor with a string value to suggest a specific filename for the download."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "download"
+            },
             "componentId": {
                 "type": "string",
                 "mutable": false,
@@ -54,8 +148,10 @@ export class PdsLink {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "external": {
                 "type": "boolean",
@@ -71,13 +167,43 @@ export class PdsLink {
                     "tags": [{
                             "name": "defaultValue",
                             "text": "false"
+                        }, {
+                            "name": "deprecated",
+                            "text": "Consider using the `target` prop for more control. This prop will be maintained for backward compatibility."
                         }],
-                    "text": "When enabled, opens link in a new tab."
+                    "text": "Determines whether the link should open in a new tab."
                 },
-                "attribute": "external",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "external",
                 "defaultValue": "false"
             },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_self' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "undefined"
+                        }, {
+                            "name": "example",
+                            "text": "<pds-link href=\"https://example.com\" target=\"_blank\">Opens in new tab</pds-link>"
+                        }],
+                    "text": "Specifies where to open the linked document."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -89,11 +215,16 @@ export class PdsLink {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "\nModifies the look of the link"
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "inline"
+                        }],
+                    "text": "Sets the link variant styles."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'inline'"
             },
             "fontSize": {
@@ -111,10 +242,12 @@ export class PdsLink {
                             "name": "defaultValue",
                             "text": "lg"
                         }],
-                    "text": "\nThe Font size follows t-shirt model\nsm: 12px\nmd: 14px\nlg: 16px"
+                    "text": "The font size of the link's text."
                 },
-                "attribute": "font-size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "font-size",
                 "defaultValue": "'lg'"
             },
             "href": {
@@ -129,12 +262,165 @@ export class PdsLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The URL that the hyperlink points to."
+                    "text": "The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "turbo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables or disables Turbo Drive for this link.\nMaps to the `data-turbo` attribute on the inner anchor element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "turbo"
+            },
+            "turboFrame": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the Turbo Frame to target for navigation.\nMaps to the `data-turbo-frame` attribute on the inner anchor element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "turbo-frame"
+            },
+            "turboAction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'advance' | 'replace'",
+                    "resolved": "\"advance\" | \"replace\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the Turbo visit action type.\nMaps to the `data-turbo-action` attribute on the inner anchor element."
                 },
-                "attribute": "href",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "turbo-action"
+            },
+            "turboMethod": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'get' | 'post' | 'put' | 'patch' | 'delete'",
+                    "resolved": "\"delete\" | \"get\" | \"patch\" | \"post\" | \"put\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Changes the HTTP method for the link request.\nMaps to the `data-turbo-method` attribute on the inner anchor element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "turbo-method"
+            },
+            "turboConfirm": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays a confirmation dialog before navigating.\nMaps to the `data-turbo-confirm` attribute on the inner anchor element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "turbo-confirm"
+            },
+            "turboStream": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepts Turbo Stream responses for GET requests.\nMaps to the `data-turbo-stream` attribute on the inner anchor element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "turbo-stream"
+            },
+            "turboPrefetch": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls link prefetching on hover.\nMaps to the `data-turbo-prefetch` attribute on the inner anchor element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "turbo-prefetch"
+            },
+            "turboPreload": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Eagerly preloads the link's destination into cache.\nMaps to the `data-turbo-preload` attribute on the inner anchor element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "turbo-preload"
             }
         };
     }
 }
-//# sourceMappingURL=pds-link.js.map

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

@@ -1,15 +1,26 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
 
 export default {
-  argTypes: extractArgTypes('pds-link'),
   args: { href: '#some-anchor' },
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['inline', 'plain'],
+    },
+  },
   component: 'pds-link',
   title: 'components/Link'
 }
 
-const BaseTemplate = (args) => html`<pds-link external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}></pds-link>`;
-const BaseTemplateWithSlot = (args) => html` <pds-link external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}>${args.slot}</pds-link>`;
+const BaseTemplate = (args) => html`<pds-link color=${args.color} ?external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}></pds-link>`;
+const BaseTemplateWithSlot = (args) => html` <pds-link color=${args.color} ?external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}>${args.slot}</pds-link>`;
+
+export const Colors = BaseTemplate.bind();
+Colors.args = {
+  color: 'danger',
+  external: false,
+  fontSize: 'lg',
+};
 
 export const External = BaseTemplate.bind();
 External.args = {
@@ -47,3 +58,17 @@ WithoutCustomTextInSlot.args = {
   fontSize: 'lg',
   variant: 'inline'
 };
+
+// A per-URL tab strip built from links (pds-tabs is an in-page panel switcher,
+// not navigation). `active` marks the current destination — persistent underline
+// + strong text, and `aria-current="page"`, which is the correct ARIA token for
+// links that navigate to distinct pages.
+export const NavTabs = {
+  render: () => html`
+    <nav aria-label="Club sections" style="display: flex; gap: var(--pine-dimension-md);">
+      <pds-link href="/clubs/1/chat" font-size="md" ?active=${true}>Chat</pds-link>
+      <pds-link href="/clubs/1/resources" font-size="md" variant="plain">Resources</pds-link>
+      <pds-link href="/clubs/1/members" font-size="md" variant="plain">Members</pds-link>
+    </nav>
+  `,
+};

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

@@ -1,8 +1,9 @@
 :host {
+  --loader-color: var(--pine-color-primary);
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: var(--pine-spacing-100);
+  gap: var(--pine-dimension-xs);
 }
 
 :host(.pds-loader--hidden),
@@ -19,13 +20,10 @@
 }
 
 .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);
+  color: var(--loader-color);
 }
 
 .pds-loader__spinner-path {
@@ -38,37 +36,26 @@
   }
 }
 .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);
+  background-color: var(--pine-color-background-muted);
+  border-radius: var(--pine-dimension-sm);
+  box-shadow: var(--pine-box-shadow);
   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);
+  gap: var(--pine-dimension-2xs);
+  margin-block: var(--pine-dimension-none);
+  margin-inline: auto;
+  padding-block: 15px;
+  padding-inline: 20px;
   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);
+  background-color: var(--pine-color-border-hover);
+  block-size: 6px;
+  border-radius: var(--pine-border-radius-full);
+  inline-size: 6px;
   opacity: var(--opacity-typing-dot-default);
 }
 .pds-loader--typing span:nth-of-type(1) {
@@ -84,10 +71,10 @@
 @keyframes typing {
   50% {
     opacity: var(--opacity-typing-dot-active);
-    transform: scale(1.2);
+    transform: scale(1.25);
   }
 }
 .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);
+  --typography-label-default: var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);
   font: var(--typography-label-default);
 }

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

@@ -1,10 +1,27 @@
 import { Host, h } from "@stencil/core";
 /**
+ * @part loader-svg - Exposes the spinner SVG element for color customization.
  * @slot label - Default slot for Loader label text.
  */
 export class PdsLoader {
     constructor() {
-        this.style = () => {
+        /**
+         * If false, the loader will be hidden.
+         */
+        this.isLoading = true;
+        /**
+         * Determines whether the loader should display a label.
+         */
+        this.showLabel = false;
+        /**
+         * Sets the size of the spinner loader. Value can be preset or custom.
+         */
+        this.size = 'md';
+        /**
+         * Determines the type of loader.
+         */
+        this.variant = 'spinner';
+        this.getSvgStyle = () => {
             if (this.size !== undefined) {
                 return {
                     height: this.loaderSize(),
@@ -12,10 +29,6 @@ export class PdsLoader {
                 };
             }
         };
-        this.isLoading = true;
-        this.showLabel = false;
-        this.size = 'md';
-        this.variant = 'spinner';
     }
     loaderSize() {
         const sizes = {
@@ -33,7 +46,7 @@ export class PdsLoader {
         }
     }
     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..."))));
+        return (h(Host, { key: 'fc312fc9ebf973506190e693cd251f25e37f3d0a', 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: 'c9eab32510368d1fd6db7669b3db640c229911f2', class: "pds-loader--spinner" }, h("svg", { key: '359d9f171378064c6121e583efe09eace3377e44', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '263409d92ab95fa34df4e879934e04e6a587f23b' }, h("linearGradient", { key: 'e9b32747efcb60bbebd8734fdd2c2d5a400974c1', id: "spinner-secondHalf" }, h("stop", { key: 'db61c891cf635b72e36a152b944b6c9ce3569be3', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: 'fb964af08941ad174ecaf0c329d79e25fff45a9c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '89d815d1f076ffe82d189d51fce14fb48ecb0926', id: "spinner-firstHalf" }, h("stop", { key: '43b753f80ab136d38635a6ab921899fc8fd3a6b2', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '7ce201ac86ae5cd291f8fba22f1e6517d53af025', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'ea7e594df07f7d634fa2142785f0791b21a71d41', class: "pds-loader__spinner-path" }, h("path", { key: '8ac8cead5078716ca9169150be8c0c64ecedc854', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'c4ed3d7f386ac59dcb540b369f52925b216ea950', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: 'ecc2e2b7240c23e35af8b9aa049ac45dff43ac9f', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '8cb7180432a6cca86c7fcc2af3f1e05afb751a9d', class: "pds-loader--typing" }, h("span", { key: 'c09247cbcf86fef899f206bee1458a1388cbdd39' }), h("span", { key: '07bdfe8ab1971fa20544022412e2141721111506' }), h("span", { key: '9444f7ed6a13475694e1eda50b891ff63fb91297' }))), h("div", { key: '3b717ff6b9f38f9710ca0556ebbc66bd86b7e1b6', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'ab65224fab189a30d0cf18caf086c621cbd78eaa', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }
@@ -63,8 +76,10 @@ export class PdsLoader {
                     "tags": [],
                     "text": "If false, the loader will be hidden."
                 },
-                "attribute": "is-loading",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "is-loading",
                 "defaultValue": "true"
             },
             "showLabel": {
@@ -81,8 +96,10 @@ export class PdsLoader {
                     "tags": [],
                     "text": "Determines whether the loader should display a label."
                 },
-                "attribute": "show-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-label",
                 "defaultValue": "false"
             },
             "size": {
@@ -99,8 +116,10 @@ export class PdsLoader {
                     "tags": [],
                     "text": "Sets the size of the spinner loader. Value can be preset or custom."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "size",
                 "defaultValue": "'md'"
             },
             "variant": {
@@ -117,11 +136,12 @@ export class PdsLoader {
                     "tags": [],
                     "text": "Determines the type of loader."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'spinner'"
             }
         };
     }
 }
-//# sourceMappingURL=pds-loader.js.map

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

@@ -1,8 +1,6 @@
 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: {
@@ -13,8 +11,8 @@ export default {
 
 const BaseTemplate = (args) => html`
   <pds-loader
-    is-loading="${args.isLoading}"
-    show-label="${args.showLabel}"
+    ?is-loading=${args.isLoading}
+    ?show-label=${args.showLabel}
     size="${args.size}"
     variant="${args.variant}"
   >
@@ -33,4 +31,4 @@ Default.args = {
 export const Typing = BaseTemplate.bind();
 Typing.args = {
   variant: 'typing'
-};
+};