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

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

@@ -0,0 +1,26 @@
+:host {
+  display: block;
+  margin-inline: auto;
+  max-width: var(--pine-container-max-width, none);
+  width: 100%;
+}
+
+:host(.pds-container--sm) {
+  --pine-container-max-width: 340px;
+}
+
+:host(.pds-container--md) {
+  --pine-container-max-width: 520px;
+}
+
+:host(.pds-container--lg) {
+  --pine-container-max-width: 700px;
+}
+
+:host(.pds-container--xl) {
+  --pine-container-max-width: 1064px;
+}
+
+:host(.pds-container--full) {
+  --pine-container-max-width: 1440px;
+}

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

@@ -0,0 +1,111 @@
+import { Host, h } from "@stencil/core";
+const NAMED_SIZES = new Set(['sm', 'md', 'lg', 'xl', 'full']);
+/**
+ * @part container - The inner semantic container element
+ */
+export class PdsContainer {
+    constructor() {
+        /**
+         * Sets the semantic HTML tag rendered as the inner container element.
+         * @default 'div'
+         */
+        this.tag = 'div';
+        /**
+         * If `true`, the container is centered horizontally using `margin-inline: auto`.
+         * @default true
+         */
+        this.centered = true;
+    }
+    render() {
+        const Tag = this.tag;
+        const isNamed = this.size !== undefined && NAMED_SIZES.has(this.size);
+        const customSize = this.size !== undefined && !isNamed ? this.size : undefined;
+        const hostStyle = {};
+        if (customSize)
+            hostStyle['--pine-container-max-width'] = customSize;
+        if (!this.centered)
+            hostStyle['margin-inline'] = '0';
+        return (h(Host, { key: '8a01369c4d1817dd083b1ac714ff7c02920f817e', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, h(Tag, { key: '7428cb0040896dc11004065cf91ae9d3c3a99c49', part: "container" }, h("slot", { key: '5a5b5bbc87c03afc23f1c9a0523fced8c0795efb' }))));
+    }
+    static get is() { return "pds-container"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-container.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the maximum width of the container. Accepts a named size token\n(`'sm'` | `'md'` | `'lg'` | `'xl'` | `'full'`) or any valid CSS length value (e.g. `'640px'`, `'50rem'`).\nWhen omitted, no max-width is applied."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size"
+            },
+            "tag": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'div' | 'main' | 'section' | 'article'",
+                    "resolved": "\"article\" | \"div\" | \"main\" | \"section\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'div'"
+                        }],
+                    "text": "Sets the semantic HTML tag rendered as the inner container element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag",
+                "defaultValue": "'div'"
+            },
+            "centered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "If `true`, the container is centered horizontally using `margin-inline: auto`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "centered",
+                "defaultValue": "true"
+            }
+        };
+    }
+}

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,28 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
 import { copy as copyIcon } from "@pine-ds/icons/icons";
+import { restoreReflectedDefault } from "../../utils/reflected-attribute-default";
+import { setupTruncationTooltip } from "../../utils/truncation-tooltip";
 export class PdsCopytext {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
+        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 +37,59 @@ export class PdsCopytext {
         this.handleClick = () => {
             this.copyToClipboard(this.value);
         };
-        this.border = true;
-        this.componentId = undefined;
-        this.fullWidth = false;
-        this.truncate = false;
-        this.value = undefined;
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+        // componentDidLoad runs once, so a moved element re-binds here what disconnectedCallback tore
+        // down. Before the first render there's no valueSpanEl yet, and componentDidLoad binds it.
+        if (this.truncate && this.valueSpanEl) {
+            this.initTruncationTooltip();
+        }
+    }
+    restoreBorderDefault(newValue) {
+        this.border = restoreReflectedDefault(this.el, 'border', newValue, true);
+    }
+    handleTruncateChange(newValue) {
+        if (newValue) {
+            this.initTruncationTooltip();
+        }
+        else {
+            this.destroyTruncationTooltip();
+        }
+    }
+    handleValueChange() {
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
+    componentDidLoad() {
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+        this.destroyTruncationTooltip();
+    }
+    initTruncationTooltip() {
+        this.destroyTruncationTooltip();
+        if (this.valueSpanEl) {
+            this.truncationCleanup = setupTruncationTooltip({
+                hostEl: this.el,
+                contentEl: this.valueSpanEl,
+                getTooltipText: () => this.value || '',
+                // valueSpanEl already sits inside the `<pds-button>` below, which is
+                // already focusable and bubbles focusin to the host — a tabindex on
+                // the span too would nest a second tab stop inside the button.
+                manageTabIndex: false,
+            });
+        }
+    }
+    destroyTruncationTooltip() {
+        if (this.truncationCleanup) {
+            this.truncationCleanup();
+            this.truncationCleanup = null;
+        }
     }
     classNames() {
         const classNames = ['pds-copytext'];
@@ -33,10 +102,12 @@ 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" }))));
+        const hostClass = this.classNames();
+        this.hostKeeper.record(hostClass);
+        return (h(Host, { key: '088bbb25115146cf5ebce5ba98596ac987982ca1', class: hostClass }, h("pds-button", { key: 'c6ca05402e3957f129e95f8545ebfb0393baf648', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '95b0114960772b8d41ac1c55140eed73844be54b', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '49a1a13daf1bd9d875f6bc518f7002dc33652863', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }
@@ -54,7 +125,7 @@ export class PdsCopytext {
         return {
             "border": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -67,10 +138,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": {
@@ -85,10 +158,12 @@ export class PdsCopytext {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A unique identifier used for the underlying component `id` attribute."
+                    "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."
                 },
-                "attribute": "component-id",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
             },
             "fullWidth": {
                 "type": "boolean",
@@ -107,8 +182,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 +203,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 +223,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 +241,26 @@ export class PdsCopytext {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event when copyText button is clicked."
+                    "text": "Emitted after a click, once the copy to the clipboard succeeds or fails.\n`detail` is `Copied to clipboard` on success, or `Error writing text to clipboard: ` followed by the error on failure.\nNot emitted when `navigator.clipboard` is undefined, as it is outside a secure context."
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "border",
+                "methodName": "restoreBorderDefault"
+            }, {
+                "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>`;