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

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

@@ -0,0 +1,89 @@
+import { html } from 'lit';
+
+export default {
+  component: 'pds-container',
+  title: 'components/Layout/Container',
+}
+
+const BaseTemplate = (args) => html`
+<pds-container
+  ${args.size ? `size="${args.size}"` : ''}
+  tag="${args.tag}"
+  centered="${args.centered}"
+>
+  ${args.slot}
+</pds-container>`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">No max-width applied — container grows to fill its parent.</pds-text></pds-box>`,
+  tag: 'div',
+  centered: true,
+};
+
+export const Sm = BaseTemplate.bind();
+Sm.args = {
+  size: 'sm',
+  tag: 'div',
+  centered: true,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">sm — 340px max-width. Narrow forms, confirmations.</pds-text></pds-box>`,
+};
+
+export const Md = BaseTemplate.bind();
+Md.args = {
+  size: 'md',
+  tag: 'div',
+  centered: true,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">md — 520px max-width. Standard forms, settings panels.</pds-text></pds-box>`,
+};
+
+export const Lg = BaseTemplate.bind();
+Lg.args = {
+  size: 'lg',
+  tag: 'div',
+  centered: true,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">lg — 700px max-width. Wide panels, content pages.</pds-text></pds-box>`,
+};
+
+export const Xl = BaseTemplate.bind();
+Xl.args = {
+  size: 'xl',
+  tag: 'div',
+  centered: true,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">xl — 1064px max-width. Page-level wrappers.</pds-text></pds-box>`,
+};
+
+export const Full = BaseTemplate.bind();
+Full.args = {
+  size: 'full',
+  tag: 'div',
+  centered: true,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">full — 1440px max-width. Max-width site container.</pds-text></pds-box>`,
+};
+
+export const ArbitrarySize = BaseTemplate.bind();
+ArbitrarySize.args = {
+  size: '640px',
+  tag: 'div',
+  centered: true,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">Arbitrary size — 640px passed directly as a CSS length.</pds-text></pds-box>`,
+};
+
+export const NotCentered = BaseTemplate.bind();
+NotCentered.args = {
+  size: 'md',
+  tag: 'div',
+  centered: false,
+  slot: html`<pds-box background-color="secondary" padding="md"><pds-text tag="p">centered=false — aligned to the start of its container.</pds-text></pds-box>`,
+};
+
+export const SemanticTag = (args) => html`
+<pds-container size="${args.size}" tag="main">
+  <pds-box direction="column" background-color="secondary" padding="md">
+    <pds-text tag="h1">Page title</pds-text>
+    <pds-text tag="p">Using tag="main" as the inner container element.</pds-text>
+  </pds-box>
+</pds-container>`;
+SemanticTag.args = {
+  size: 'lg',
+};

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

@@ -1,87 +1,75 @@
 :host(.pds-copytext) {
-  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
-  --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400);
-  --border-radius-default: var(--pine-border-radius-125);
-  --border-radius-hover: var(--pine-border-radius-0);
-  --border-width-default: var(--pine-border-width-none);
-  --box-shadow-focus: 0 0 0 2px var(--pine-color-blue-200);
-  --color-background-default: var(--pine-color-white);
-  --color-border-interactive-hover: var(--pine-color-grey-400);
-  --color-text-hover: var(--pine-color-charcoal-400);
-  --copytext-color-background-hover: var(--pine-color-grey-200);
-  --font-size-default: var(--pine-font-size-100);
-  --font-weight-default: var(--pine-font-weight-semi-bold);
-  --spacing-bordered-margin-inline-end: var(--pine-spacing-200);
-  --spacing-bordered-padding-block: var(--pine-spacing-100);
-  --spacing-bordered-padding-inline: var(--pine-spacing-200);
-  --spacing-margin-inline-end: var(--pine-spacing-100);
-  --spacing-padding-block: var(--pine-spacing-050);
-  --spacing-padding-inline: var(--pine-spacing-100);
-  --spacing-padding-none: var(--pine-spacing-0);
-  --typography-default: var(--pine-font-weight-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);
+  --copytext-color-background-hover: var(--pine-color-background-inset);
 }
 :host(.pds-copytext) pds-button {
   align-items: center;
-  background: var(--color-background-default);
-  border: var(--border-width-default);
-  border-radius: var(--border-radius-default);
+  border-radius: var(--pine-border-radius-full);
+  border-width: var(--pine-dimension-none);
   display: inline-flex;
-  font: var(--typography-default);
+  font-family: var(--pine-font-family-heading);
+  font-size: var(--pine-font-size-body-md);
+  font-weight: var(--pine-font-weight-body-medium);
+  letter-spacing: var(--pine-letter-spacing);
+  line-height: var(--pine-line-height-body);
   max-width: 100%;
-  padding: var(--spacing-padding-block) var(--spacing-padding-inline);
+}
+:host(.pds-copytext) pds-button::part(button) {
+  padding-block: var(--pine-dimension-2xs);
+  padding-inline: var(--pine-dimension-xs);
 }
 :host(.pds-copytext) pds-button::part(button):hover {
   background-color: var(--copytext-color-background-hover);
-  border-radius: var(--border-radius-hover);
-  color: var(--color-text-hover);
+  color: var(--pine-color-text-secondary-hover);
 }
 :host(.pds-copytext) pds-button span {
-  margin-inline-end: var(--spacing-margin-inline-end);
+  font-weight: var(--pine-font-weight-medium);
+  margin-inline-end: var(--pine-dimension-xs);
   white-space: nowrap;
 }
 :host(.pds-copytext) pds-button :nth-child(2) {
   flex-shrink: 0;
 }
 :host(.pds-copytext):host(.pds-copytext--bordered) {
-  border: var(--border-width-default);
-  padding: var(--spacing-padding-none);
+  border-width: var(--pine-dimension-none);
+  padding: var(--pine-dimension-none);
 }
 :host(.pds-copytext):host(.pds-copytext--bordered) pds-button {
-  padding: var(--spacing-padding-none);
+  padding: var(--pine-dimension-none);
+}
+:host(.pds-copytext):host(.pds-copytext--bordered) pds-button::part(button) {
+  padding: var(--pine-dimension-none);
 }
-:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover {
-  background: none;
+:host(.pds-copytext):host(.pds-copytext--bordered) pds-button::part(button):hover {
+  background-color: transparent;
 }
 :host(.pds-copytext):host(.pds-copytext--bordered) span {
-  border: var(--border-interactive-default);
-  border-radius: var(--border-radius-default);
-  margin-inline-end: var(--spacing-bordered-margin-inline-end);
-  padding-block: var(--spacing-bordered-padding-block);
-  padding-inline: var(--spacing-bordered-padding-inline);
+  background: var(--pine-color-secondary);
+  border: var(--pine-border);
+  border-radius: var(--pine-border-radius-full);
+  margin-inline-end: var(--pine-dimension-sm);
+  padding-block: var(--pine-dimension-xs);
+  padding-inline: var(--pine-dimension-sm);
 }
 :host(.pds-copytext):host(.pds-copytext--bordered) :hover span {
-  border: var(--border-interactive-hover);
+  border: var(--pine-border-hover);
 }
-:host(.pds-copytext):host(.pds-copytext--full-width) {
-  display: flex;
+:host(.pds-copytext):host(.pds-copytext--full-width) pds-button, :host(.pds-copytext):host(.pds-copytext--truncated) pds-button {
+  display: inline-flex;
+  min-width: auto;
   width: 100%;
 }
-:host(.pds-copytext):host(.pds-copytext--full-width) pds-button {
-  display: flex;
-  justify-content: space-between;
+:host(.pds-copytext):host(.pds-copytext--full-width) pds-button::part(button-content), :host(.pds-copytext):host(.pds-copytext--full-width) pds-button::part(button-text), :host(.pds-copytext):host(.pds-copytext--truncated) pds-button::part(button-content), :host(.pds-copytext):host(.pds-copytext--truncated) pds-button::part(button-text) {
+  flex-shrink: 1;
   width: 100%;
 }
-:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span {
-  text-align: left;
+:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span, :host(.pds-copytext):host(.pds-copytext--truncated) pds-button span {
+  text-align: start;
   width: 100%;
 }
-:host(.pds-copytext):host(.pds-copytext--truncated) pds-button {
-  display: flex;
-  width: 100%;
+:host(.pds-copytext):host(.pds-copytext--full-width) pds-button {
+  justify-content: space-between;
 }
 :host(.pds-copytext):host(.pds-copytext--truncated) pds-button span {
   overflow: hidden;
-  text-align: left;
   text-overflow: ellipsis;
-  width: 100%;
 }

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

@@ -1,7 +1,25 @@
 import { Host, h } from "@stencil/core";
 import { copy as copyIcon } from "@pine-ds/icons/icons";
+import { setupTruncationTooltip } from "../../utils/truncation-tooltip";
 export class PdsCopytext {
     constructor() {
+        this.truncationCleanup = null;
+        /**
+         * Determines whether `copytext` should have a visible border.
+         * @defaultValue true
+         */
+        this.border = true;
+        /**
+         * Determines whether `copytext` should expand to the full width of its container.
+         * @defaultValue false
+         */
+        this.fullWidth = false;
+        /**
+         * Determines whether the `value` should truncate and display with an ellipsis.
+         * When text overflows, a tooltip showing the full value will appear on hover/focus.
+         * @defaultValue false
+         */
+        this.truncate = false;
         this.copyToClipboard = async (value) => {
             try {
                 if (typeof navigator.clipboard !== 'undefined') {
@@ -16,11 +34,43 @@ export class PdsCopytext {
         this.handleClick = () => {
             this.copyToClipboard(this.value);
         };
-        this.border = true;
-        this.componentId = undefined;
-        this.fullWidth = false;
-        this.truncate = false;
-        this.value = undefined;
+    }
+    handleTruncateChange(newValue) {
+        if (newValue) {
+            this.initTruncationTooltip();
+        }
+        else {
+            this.destroyTruncationTooltip();
+        }
+    }
+    handleValueChange() {
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
+    componentDidLoad() {
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
+    disconnectedCallback() {
+        this.destroyTruncationTooltip();
+    }
+    initTruncationTooltip() {
+        this.destroyTruncationTooltip();
+        if (this.valueSpanEl) {
+            this.truncationCleanup = setupTruncationTooltip({
+                hostEl: this.el,
+                contentEl: this.valueSpanEl,
+                getTooltipText: () => this.value || '',
+            });
+        }
+    }
+    destroyTruncationTooltip() {
+        if (this.truncationCleanup) {
+            this.truncationCleanup();
+            this.truncationCleanup = null;
+        }
     }
     classNames() {
         const classNames = ['pds-copytext'];
@@ -33,10 +83,10 @@ export class PdsCopytext {
         if (this.truncate) {
             classNames.push('pds-copytext--truncated');
         }
-        return classNames.join('  ');
+        return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '9960146a3ac3810bc14834a976f2e50627569dad', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '9d8c6dc9824be2483982d4362a5c8d8c4c232432', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '7c093ec0ae96afdbad02adda3901be87989c9ce4' }, this.value), h("pds-icon", { key: '466f5c685e32be0067938869afee751db522d3d3', icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '43a3870fa4c24416e2e6e99dd7c423a5c32ac91e', class: this.classNames(), id: this.componentId }, h("pds-button", { key: 'f0735d3f245dd7150e88b3dd1a191c3ee86b6293', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: 'ddf7cf205f9bb11dd4b4111435bb7efc15b0af61', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '7ba6d0452e1726ff951ec46433f838669961c277', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }
@@ -67,10 +117,12 @@ export class PdsCopytext {
                             "name": "defaultValue",
                             "text": "true"
                         }],
-                    "text": "Determines whether `copytext` should have a border."
+                    "text": "Determines whether `copytext` should have a visible border."
                 },
-                "attribute": "border",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "border",
                 "defaultValue": "true"
             },
             "componentId": {
@@ -87,8 +139,10 @@ export class PdsCopytext {
                     "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"
             },
             "fullWidth": {
                 "type": "boolean",
@@ -107,8 +161,10 @@ export class PdsCopytext {
                         }],
                     "text": "Determines whether `copytext` should expand to the full width of its container."
                 },
-                "attribute": "full-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "full-width",
                 "defaultValue": "false"
             },
             "truncate": {
@@ -126,10 +182,12 @@ export class PdsCopytext {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Determines whether the `value` should truncate and display with an ellipsis."
+                    "text": "Determines whether the `value` should truncate and display with an ellipsis.\nWhen text overflows, a tooltip showing the full value will appear on hover/focus."
                 },
-                "attribute": "truncate",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "truncate",
                 "defaultValue": "false"
             },
             "value": {
@@ -144,10 +202,12 @@ export class PdsCopytext {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "String that is displayed and that is also copied to the clipboard upon interaction."
+                    "text": "The string displayed that is also copied to the clipboard upon interaction."
                 },
-                "attribute": "value",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             }
         };
     }
@@ -160,14 +220,23 @@ export class PdsCopytext {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event when copyText button is clicked."
+                    "text": "Event fired when copyText button is clicked."
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "truncate",
+                "methodName": "handleTruncateChange"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
 }
-//# sourceMappingURL=pds-copytext.js.map

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

@@ -1,26 +1,20 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
+
 
 export default {
-  argTypes: extractArgTypes('pds-copytext'),
+
   component: 'pds-copytext',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onclick', 'pdsCopyTextClick'],
-    },
-  },
+  parameters: {},
   title: 'components/Copy Text',
 }
 
 const BaseTemplate = (args) => html`
   <pds-copytext
-    border="${args.border}"
-    full-width="${args.fullWidth}"
+    .border=${args.border}
+    ?full-width=${args.fullWidth}
     component-id=${args.componentId}
     onClick=${args.onClick}
-    truncate="${args.truncate}"
+    ?truncate=${args.truncate}
     value="${args.value}">
   </pds-copytext>`;
 

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

@@ -1,18 +1,8 @@
-:host {
-  --color-background-default: var(--pine-color-grey-400);
-  --spacing-offset-xxs: var(--pine-spacing-050);
-  --spacing-offset-xs: var(--pine-spacing-100);
-  --spacing-offset-sm: var(--pine-spacing-200);
-  --spacing-offset-md: var(--pine-spacing-300);
-  --spacing-offset-lg: var(--pine-spacing-450);
-  --spacing-offset-xxl: var(--pine-spacing-800);
-}
-
 .pds-divider {
-  background: var(--color-background-default);
+  background: var(--pine-color-border);
   border: 0;
   display: flex;
-  height: 1px;
+  height: var(--pine-border-width);
   margin: 0;
   width: 100%;
 }
@@ -22,67 +12,108 @@
   width: 1px;
 }
 
+.pds-divider--labeled {
+  align-items: center;
+  background: none;
+  color: var(--pine-color-text);
+  font: var(--pine-typography-body-sm-medium);
+  gap: var(--pine-dimension-sm);
+  height: auto;
+  width: auto;
+}
+.pds-divider--labeled::before, .pds-divider--labeled::after {
+  background: var(--pine-color-border);
+  content: "";
+  flex: 1;
+  height: var(--pine-border-width);
+}
+
+.pds-divider__label {
+  text-align: center;
+}
+
 .pds-divider--offset-xxs {
-  margin: 0 calc(var(--spacing-offset-xxs) * -1);
-  padding: 0 var(--spacing-offset-xxs);
+  margin: 0 calc(var(--pine-dimension-2xs) * -1);
+  padding: 0 var(--pine-dimension-2xs);
 }
 .pds-divider--offset-xxs.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-xxs) * -1) 0;
-  padding: var(--spacing-offset-xxs) 0;
+  margin: calc(var(--pine-dimension-2xs) * -1) 0;
+  padding: var(--pine-dimension-2xs) 0;
+}
+.pds-divider--offset-xxs.pds-divider--labeled {
+  padding: 0;
 }
 
 .pds-divider--offset-xs {
-  margin: 0 calc(var(--spacing-offset-xs) * -1);
-  padding: 0 var(--spacing-offset-xs);
+  margin: 0 calc(var(--pine-dimension-xs) * -1);
+  padding: 0 var(--pine-dimension-xs);
 }
 .pds-divider--offset-xs.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-xs) * -1) 0;
-  padding: var(--spacing-offset-xs) 0;
+  margin: calc(var(--pine-dimension-xs) * -1) 0;
+  padding: var(--pine-dimension-xs) 0;
+}
+.pds-divider--offset-xs.pds-divider--labeled {
+  padding: 0;
 }
 
 .pds-divider--offset-sm {
-  margin: 0 calc(var(--spacing-offset-sm) * -1);
-  padding: 0 var(--spacing-offset-sm);
+  margin: 0 calc(var(--pine-dimension-sm) * -1);
+  padding: 0 var(--pine-dimension-sm);
 }
 .pds-divider--offset-sm.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-sm) * -1) 0;
-  padding: var(--spacing-offset-sm) 0;
+  margin: calc(var(--pine-dimension-sm) * -1) 0;
+  padding: var(--pine-dimension-sm) 0;
+}
+.pds-divider--offset-sm.pds-divider--labeled {
+  padding: 0;
 }
 
 .pds-divider--offset-md {
-  margin: 0 calc(var(--spacing-offset-md) * -1);
-  padding: 0 var(--spacing-offset-md);
+  margin: 0 calc(var(--pine-dimension-md) * -1);
+  padding: 0 var(--pine-dimension-md);
 }
 .pds-divider--offset-md.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-md) * -1) 0;
-  padding: var(--spacing-offset-md) 0;
+  margin: calc(var(--pine-dimension-md) * -1) 0;
+  padding: var(--pine-dimension-md) 0;
+}
+.pds-divider--offset-md.pds-divider--labeled {
+  padding: 0;
 }
 
 .pds-divider--offset-lg {
-  margin: 0 calc(var(--spacing-offset-lg) * -1);
-  padding: 0 var(--spacing-offset-lg);
+  margin: 0 calc(var(--pine-dimension-lg) * -1);
+  padding: 0 var(--pine-dimension-lg);
 }
 .pds-divider--offset-lg.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-lg) * -1) 0;
-  padding: var(--spacing-offset-lg) 0;
+  margin: calc(var(--pine-dimension-lg) * -1) 0;
+  padding: var(--pine-dimension-lg) 0;
+}
+.pds-divider--offset-lg.pds-divider--labeled {
+  padding: 0;
 }
 
 .pds-divider--offset-xl {
-  margin: 0 calc(var(--spacing-offset-xl) * -1);
-  padding: 0 var(--spacing-offset-xl);
+  margin: 0 calc(var(--pine-dimension-xl) * -1);
+  padding: 0 var(--pine-dimension-xl);
 }
 .pds-divider--offset-xl.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-xl) * -1) 0;
-  padding: var(--spacing-offset-xl) 0;
+  margin: calc(var(--pine-dimension-xl) * -1) 0;
+  padding: var(--pine-dimension-xl) 0;
+}
+.pds-divider--offset-xl.pds-divider--labeled {
+  padding: 0;
 }
 
 .pds-divider--offset-xxl {
-  margin: 0 calc(var(--spacing-offset-xxl) * -1);
-  padding: 0 var(--spacing-offset-xxl);
+  margin: 0 calc(var(--pine-dimension-2xl) * -1);
+  padding: 0 var(--pine-dimension-2xl);
 }
 .pds-divider--offset-xxl.pds-divider--vertical {
-  margin: calc(var(--spacing-offset-xxl) * -1) 0;
-  padding: var(--spacing-offset-xxl) 0;
+  margin: calc(var(--pine-dimension-2xl) * -1) 0;
+  padding: var(--pine-dimension-2xl) 0;
+}
+.pds-divider--offset-xxl.pds-divider--labeled {
+  padding: 0;
 }
 
 @media (max-width: 767px) {