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

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,117 @@
+import { html } from 'lit';
+
+
+export default {
+
+	args: {
+		popoverTargetAction: 'toggle',
+		popoverType: 'auto',
+		openOn: 'click',
+		placement: 'bottom-start',
+		padding: 'md',
+		componentId: 'popover-playground',
+	},
+	argTypes: {
+		padding: {
+			control: { type: 'select' },
+			options: ['none', 'xs', 'sm', 'md'],
+		},
+		openOn: { control: 'inline-radio', options: ['click', 'hover'] },
+	},
+	component: 'pds-popover',
+	parameters: {},
+	title: 'components/Popover'
+}
+
+const BaseTemplate = (args) => html`
+	<pds-popover
+		component-id=${args.componentId}
+		popover-target-action=${args.popoverTargetAction}
+		popover-type=${args.popoverType}
+		open-on=${args.openOn}
+		placement=${args.placement}
+		.maxWidth=${args.maxWidth}
+		padding=${args.padding}
+	>
+		<pds-button slot="trigger">Show popover</pds-button>
+		<p>This is popover content that can be configured using the controls below.</p>
+	</pds-popover>
+`;
+
+export const Default = BaseTemplate.bind({});
+
+export const Toggle = (args) => html`
+	<pds-popover
+		component-id=${args.componentId || 'popover-toggle'}
+		popover-target-action=${args.popoverTargetAction}
+		popover-type=${args.popoverType}
+		placement=${args.placement}
+		.maxWidth=${args.maxWidth}
+	>
+		<pds-button slot="trigger">Toggle popover</pds-button>
+		<p>Click the trigger again to close this popover.</p>
+	</pds-popover>
+`;
+Toggle.args = {
+	componentId: 'popover-toggle'
+};
+
+export const WithContent = (args) => html`
+	<pds-popover
+		component-id=${args.componentId || 'popover-rich'}
+		popover-target-action=${args.popoverTargetAction}
+		popover-type=${args.popoverType}
+		placement=${args.placement}
+		.maxWidth=${args.maxWidth}
+	>
+		<pds-button slot="trigger" variant="accent">Popover trigger</pds-button>
+		<pds-box direction="column" gap="md" fit="true">
+			<!-- Header with title and close button -->
+			<pds-box direction="column" gap="xs">
+				<pds-box display="flex" direction="row" justify-content="space-between" align-items="center" gap="300">
+					<pds-text tag="h3" size="xl" weight="semibold">Popover Heading</pds-text>
+					<pds-button
+						variant="unstyled"
+						icon-only
+						onclick="document.querySelector('pds-popover[component-id=${args.componentId || 'popover-rich'}]').hide()"
+						aria-label="Close"
+					>
+						<pds-icon slot="start" name="remove"></pds-icon>
+						Close
+					</pds-button>
+				</pds-box>
+				<pds-text tag="p" size="sm" color="secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pds-text>
+			</pds-box>
+
+			<!-- Footer with buttons and page indicator -->
+			<pds-box justify-content="space-between" align-items="center" gap="200">
+				<pds-button variant="secondary" size="small">Previous</pds-button>
+				<pds-text tag="span" size="sm" weight="medium" color="secondary">1 / 3</pds-text>
+				<pds-button variant="primary" size="small">Next</pds-button>
+			</pds-box>
+		</pds-box>
+	</pds-popover>
+`;
+WithContent.args = {
+	componentId: 'popover-rich'
+};
+
+export const OpenOnHover = (args) => html`
+	<pds-popover
+		component-id=${args.componentId || 'popover-hover'}
+		open-on="hover"
+		popover-target-action=${args.popoverTargetAction}
+		popover-type=${args.popoverType}
+		placement=${args.placement}
+		.maxWidth=${args.maxWidth}
+	>
+		<pds-button slot="trigger" variant="secondary">Hover for details</pds-button>
+		<pds-box direction="column" gap="xs" fit="true">
+			<pds-text tag="h3" size="md" weight="semibold">Project summary</pds-text>
+			<pds-text tag="p" size="sm" color="secondary">Rest the pointer on the trigger to preview supporting details. Click the trigger to keep this open while you read.</pds-text>
+		</pds-box>
+	</pds-popover>
+`;
+OpenOnHover.args = {
+	componentId: 'popover-hover'
+};

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-primary);
   --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-muted);
+  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: var(--color-progress-fill, var(--pine-color-primary));
+  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: var(--color-progress-fill, var(--pine-color-primary));
+  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,36 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
+import { normalizeColorValue } from "../../utils/utils";
 export class PdsProgress {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
+        /**
+        * 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 percentage (0–100). Shown as text when `show-percent` is set.
+        * @defaultValue 0
+        */
         this.percent = 0;
+        /**
+        * Determines whether or not the percent value should be displayed as text.
+        * @defaultValue false
+        */
         this.showPercent = false;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     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, "%")));
+        const normalizedFillColor = normalizeColorValue(this.fillColor);
+        const hostClass = this.animated ? { 'is-animated': this.animated } : '';
+        this.hostKeeper.record(hostClass);
+        return (h(Host, { key: '494b5fcb8cbfbb54570e05bf5cb3e122f281b0aa', class: hostClass }, h("div", { key: '9b1d956ac587add8d7bf46d258a04043484d65bb', class: "pds-progress" }, h("label", { key: '20f7a7e3107ee1f87eb7ebcd74baf484aefeaa15', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '3eb27fc07b60196b9528b200db990faf3c8f1293', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '68ec67c4e415eaee29cc1eb66786f356768ed585', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }
@@ -42,8 +63,10 @@ export class PdsProgress {
                         }],
                     "text": "Determines whether or not progress is animated."
                 },
-                "attribute": "animated",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "animated",
                 "defaultValue": "false"
             },
             "componentId": {
@@ -60,8 +83,10 @@ export class PdsProgress {
                     "tags": [],
                     "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "fillColor": {
                 "type": "string",
@@ -76,12 +101,14 @@ export class PdsProgress {
                 "docs": {
                     "tags": [{
                             "name": "defaultValue",
-                            "text": "'var(--pine-color-blue-300)'"
+                            "text": "'var(--pine-color-primary)'"
                         }],
                     "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
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fill-color"
             },
             "label": {
                 "type": "string",
@@ -97,8 +124,10 @@ export class PdsProgress {
                     "tags": [],
                     "text": "String used for label text. Label is visually hidden but required for better accessibility."
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "percent": {
                 "type": "number",
@@ -115,10 +144,12 @@ export class PdsProgress {
                             "name": "defaultValue",
                             "text": "0"
                         }],
-                    "text": "Sets the progress fill pecentage and visually displayed when `show-percentage=true`."
+                    "text": "Sets the progress fill percentage (0\u2013100). Shown as text when `show-percent` is set."
                 },
-                "attribute": "percent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "percent",
                 "defaultValue": "0"
             },
             "showPercent": {
@@ -138,11 +169,13 @@ export class PdsProgress {
                         }],
                     "text": "Determines whether or not the percent value should be displayed as text."
                 },
-                "attribute": "show-percent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-percent",
                 "defaultValue": "false"
             }
         };
     }
+    static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=pds-progress.js.map

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

@@ -1,20 +1,18 @@
 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}
+    ?animated=${args.animated}
     component-id=${args.componentId}
     fill-color=${args.fillColor}
     label=${args.label}
     percent=${args.percent}
-    show-percent=${args.showPercent}
+    ?show-percent=${args.showPercent}
   ></pds-progress>`;
 
 

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

@@ -0,0 +1,4 @@
+:host {
+  color: var(--pine-color-text-message);
+  font: var(--pine-typography-body-medium);
+}

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

@@ -0,0 +1,70 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @slot (default) - The property text content.
+ */
+export class PdsProperty {
+    constructor() {
+        /**
+         * The name of the icon to display before the property text.
+         */
+        this.icon = 'star';
+    }
+    render() {
+        return (h(Host, { key: '1bdcebaa09a696b18871651ef2615d0d400ddbb8' }, h("pds-box", { key: 'a4dc57f9e758b78fe3d4f2c096fadec53288e47b', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '2a89c7e1231163b5e4ac20d3d0c3d43af414a11a', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: '4c4d2ee5ed05ad2ec53bbe4f79fa11c04c8eb44d' }))));
+    }
+    static get is() { return "pds-property"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-property.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-property.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier for this component instance. Does not set the host element's `id` attribute \u2014 set `id` directly if you need one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon to display before the property text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "'star'"
+            }
+        };
+    }
+}

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

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+
+export default {
+  component: 'pds-property',
+  title: 'components/Property',
+};
+
+const BaseTemplate = (args) => html`
+  <pds-property component-id=${args.componentId} icon=${args.icon}>${args.text}</pds-property>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'property-1',
+  icon: 'star',
+  text: 'Property text',
+};