@pine-ds/core 0.0.4 → 0.1.1

package/components/pds-accordion.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsAccordion extends Components.PdsAccordion, HTMLElement {}
+export const PdsAccordion: {
+    prototype: PdsAccordion;
+    new (): PdsAccordion;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-accordion.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './pds-icon2.js';
+
+const pdsAccordionCss = ":host{display:block}details{--border-radius:var(--pine-spacing-xs);--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);--color-content-background:var(--pine-base-color-white);--color-background-hover:var(--pine-color-neutral-grey-300);--color-font:var(--pine-color-neutral-charcoal-200);--color-font-active:var(--pine-color-neutral-charcoal-500);--color-font-hover:var(--pine-color-neutral-charcoal-300);--font-weight:var(--pine-font-weight-semibold);--spacing-details-padding-inline:12px;--spacing-summary-padding-block:var(--pine-spacing-xxs);--spacing-summary-padding-inline-start:var(--pine-spacing-xs);--spacing-summary-padding-inline-end:var(--pine-spacing-xxs);border-radius:var(--border-radius);padding-inline:var(--spacing-details-padding-inline)}details[open]{background-color:var(--color-content-background)}details[open] summary{color:var(--color-font-active);font-weight:var(--font-weight)}summary{border-radius:var(--border-radius);color:var(--color-font);font-weight:var(--font-weight);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-font-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}";
+const PdsAccordionStyle0 = pdsAccordionCss;
+
+const PdsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PdsAccordion extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.handleToggle = () => {
+            this.isOpen = this.detailsEl.open;
+        };
+        this.getOpenAttribute = () => {
+            if (this.isOpen !== false) {
+                return { open: true };
+            }
+            return '';
+        };
+        this.componentId = undefined;
+        this.isOpen = false;
+    }
+    handleOpenState(newValue) {
+        this.isOpen = newValue;
+    }
+    componentDidLoad() {
+        this.detailsEl.addEventListener('toggle', this.handleToggle);
+    }
+    render() {
+        return (h(Host, { key: 'e2e795c93ddd812acd5f9ac26546953d7172ba39', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: '772f09a0f28f03a0feffa7a6ea1fd0cbf0947c56' }, this.getOpenAttribute(), { ref: (el) => this.detailsEl = el }), h("summary", { key: 'f8987032a8e8468f9e8728ed673c26210fd0c2a2' }, h("slot", { key: '5dfcd343dfdc7b5eb6f75e75dff494aab0fbea36', name: "label" }, "Details"), h("pds-icon", { key: '2e6cd67ca003428c48b0c0545287b629918f243a', name: this.isOpen ? 'up-small' : 'down-small' })), h("div", { key: '508b2e5d33c4a83e6f569ba30ef042e5ffc01318', class: "pds-accordion__body" }, h("slot", { key: '13bc1ae447df49043efbbf631844add1245fbabe' })))));
+    }
+    static get watchers() { return {
+        "isOpen": ["handleOpenState"]
+    }; }
+    static get style() { return PdsAccordionStyle0; }
+}, [1, "pds-accordion", {
+        "componentId": [1, "component-id"],
+        "isOpen": [1540, "open"]
+    }, undefined, {
+        "isOpen": ["handleOpenState"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-accordion", "pds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-accordion":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsAccordion$1);
+            }
+            break;
+        case "pds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const PdsAccordion = PdsAccordion$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PdsAccordion, defineCustomElement };
+
+//# sourceMappingURL=pds-accordion.js.map

package/components/pds-accordion.js.map

@@ -0,0 +1 @@
+{"file":"pds-accordion.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,mrDAAmrD,CAAC;AAC5sD,2BAAe,eAAe;;MCUjBA,cAAY;;;;;QAwBf,iBAAY,GAAG;YACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;SACnC,CAAA;QAEO,qBAAgB,GAAG;YACzB,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;gBACzB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;aACvB;YACD,OAAO,EAAE,CAAC;SACX,CAAA;;sBAhBoB,KAAK;;IAG1B,eAAe,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;IAaD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KAC9D;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IAC9C,gFAAa,IAAI,CAAC,gBAAgB,EAAE,IAAE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,SAAS,GAAG,EAAwB,KAC1F,kEACE,6DAAM,IAAI,EAAC,OAAO,cAAe,EACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,UAAU,GAAG,YAAY,GAAI,CACnD,EACV,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,8DAAQ,CACJ,CACE,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsAccordion"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\ndetails {\n  --border-radius: var(--pine-spacing-xs);\n  --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n  --color-content-background: var(--pine-base-color-white);\n  --color-background-hover: var(--pine-color-neutral-grey-300);\n  --color-font: var(--pine-color-neutral-charcoal-200);\n  --color-font-active: var(--pine-color-neutral-charcoal-500);\n  --color-font-hover: var(--pine-color-neutral-charcoal-300);\n  --font-weight: var(--pine-font-weight-semibold);\n  --spacing-details-padding-inline: 12px;\n  --spacing-summary-padding-block: var(--pine-spacing-xxs);\n  --spacing-summary-padding-inline-start: var(--pine-spacing-xs);\n  --spacing-summary-padding-inline-end: var(--pine-spacing-xxs);\n\n  border-radius: var(--border-radius);\n  padding-inline: var(--spacing-details-padding-inline)\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--color-content-background);\n\n  summary {\n    color: var(--color-font-active);\n    font-weight: var(--font-weight);\n  }\n}\n\nsummary {\n  border-radius: var(--border-radius);\n  color: var(--color-font);\n  font-weight: var(--font-weight);\n  padding-block: var(--spacing-summary-padding-block);\n  padding-inline-end: var(--spacing-summary-padding-inline-end);\n  padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n  // Removes marker on Firefox/Chrome\n  /* stylelint-disable-next-line */\n  align-items: center;\n  display: flex;\n\n  // Removes marker on Safari\n  &::-webkit-details-marker {\n    display: none;\n  }\n\n  &:hover {\n    background: var(--color-background-hover);\n    color: var(--color-font-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n\n  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrl: 'pds-accordion.scss',\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({ \n    attribute: 'open',\n    mutable: true,\n    reflect: true \n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  }\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  }\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n          <summary>\n            <slot name=\"label\">Details</slot>\n            <pds-icon name={this.isOpen ? 'up-small' : 'down-small'} />\n          </summary>\n          <div class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-avatar.js

@@ -60,7 +60,7 @@ const PdsAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PdsAvatar extends HTM
         }
     }
     render() {
-        return (h(Host, { key: '595815274032d146a4bb480940d152ba2507c2b4', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
+        return (h(Host, { key: '179b1d53b2250e1fab6807a324c474c2d02c8d43', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
     }
     static get style() { return PdsAvatarStyle0; }
 }, [1, "pds-avatar", {

package/components/pds-box.js

@@ -69,7 +69,7 @@ const PdsBox$1 = /*@__PURE__*/ proxyCustomElement(class PdsBox extends HTMLEleme
             this.sizeXl == undefined ? 'pds-box' : ''}
     `;
         const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.backgroundColor && { '--box-background-color': this.backgroundColor })), (this.borderColor && { '--box-border-color': this.borderColor })), (this.minHeight && { '--box-min-height': this.minHeight })), (this.minWidth && { '--box-min-width': this.minWidth }));
-        return (h(Host, { key: '39cf80d5cbcc14aeca43345e4532b7a77dc6f880', class: boxClasses, style: boxInlineStyles }));
+        return (h(Host, { key: 'c04696c04b987f82aa03e23d41078ffa32ed6e78', class: boxClasses, style: boxInlineStyles }));
     }
     static get style() { return PdsBoxStyle0; }
 }, [0, "pds-box", {

package/components/pds-button2.js

@@ -46,7 +46,7 @@ const PdsButton = /*@__PURE__*/ proxyCustomElement(class PdsButton extends HTMLE
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '6ee21dab19b15ab02142d892e7a2f42d6f93a919', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'aa804a22ca56bff055e939e1bd72d4fd55c8bcd8', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { name: this.icon, part: "icon" }), h("slot", { key: '049cdc31676637dbe106ec153d66c4964f1f5ee9' }), this.variant === 'disclosure' && h("pds-icon", { name: "caret-down", part: "caret" }))));
+        return (h(Host, { key: '0f8f16b8e8d941481d66f1833a4a7e5402aab2bc', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'c8b0a1f8b0f6c984477e2bb6cdb77226f8250ac3', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { name: this.icon, part: "icon" }), h("slot", { key: '76310f327aad59ecd150261a186e256c52cf6251' }), this.variant === 'disclosure' && h("pds-icon", { name: "caret-down", part: "caret" }))));
     }
     get el() { return this; }
     static get style() { return PdsButtonStyle0; }

package/components/pds-checkbox2.js

@@ -48,7 +48,7 @@ const PdsCheckbox = /*@__PURE__*/ proxyCustomElement(class PdsCheckbox extends H
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '44451f5e8df2550217af485162015a0810b2735e', class: this.classNames() }, h("input", { key: 'c4bac864eb6c990b389b1892f26211af7a6b5be8', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "checkbox", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange }), h(PdsLabel, { key: 'eea4ae7c7795854e34a228d79f7e3228d695ff7e', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
+        return (h(Host, { key: 'df4d541eb43253bac6d9f0396d5af5c0a0181db0', class: this.classNames() }, h("input", { key: '59f4ff764cdf4fac9ff38a734b91cf31219f2a59', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "checkbox", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange }), h(PdsLabel, { key: '99da91ab0d67c72f29092a623164b0822ff56a66', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
             h("div", { class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
             h("div", { class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
     }

package/components/pds-chip.js

@@ -39,7 +39,7 @@ const PdsChip$1 = /*@__PURE__*/ proxyCustomElement(class PdsChip extends HTMLEle
         return chipContent;
     }
     render() {
-        return (h(Host, { key: '12c200206fc66bf350447029cd5f9b328206dd68', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { name: "remove", size: "12px" })))));
+        return (h(Host, { key: '224fcbae613eb1a7a8ab5661582e06612aa3c491', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.variant === 'tag' && (h("button", { class: "pds-chip__close", type: "button", onClick: this.handleCloseClick, "aria-label": "Remove" }, h("pds-icon", { name: "remove", size: "12px" })))));
     }
     static get style() { return PdsChipStyle0; }
 }, [1, "pds-chip", {

package/components/pds-copytext.js

@@ -59,7 +59,7 @@ const PdsCopytext$1 = /*@__PURE__*/ proxyCustomElement(class PdsCopytext extends
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: '4acd4381ec825bb968a28882592e94e63f03b455', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '0827df991bc213211d021daac15adbea51c04b2d', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '9ccdf4d2087ce38db135ac2147b2376eb3bb114e' }, this.value), h("pds-icon", { key: '6e68ea1f67195d6ace3a4c1499d47ad1fe8e9dea', name: "copy", size: "16px" }))));
+        return (h(Host, { key: '650ef9a2f68e604211c98721ef61e68a44a619b2', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '3c4e3d7779e794c65115431ea93e6c321c5e8f83', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: 'e755703bd191e440d1b10250027c1dfcf1340cbe' }, this.value), h("pds-icon", { key: '6fc35fd7fef1a98b9f248054a2927a1b006561d0', name: "copy", size: "16px" }))));
     }
     static get style() { return PdsCopytextStyle0; }
 }, [1, "pds-copytext", {

package/components/pds-divider.js

@@ -24,7 +24,7 @@ const PdsDivider$1 = /*@__PURE__*/ proxyCustomElement(class PdsDivider extends H
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '2fd0d24d893d6936915480731948caa8de5007fa', id: this.componentId }, h("hr", { key: 'dacc620d9f1cb7b2a05f0e0205e2df3d3bfbfcd7', class: this.classNames() })));
+        return (h(Host, { key: 'd5d42d70c2417e0fc801f87f8460557bb1756443', id: this.componentId }, h("hr", { key: '49554a46b6949d09adc4794b22441a1f76eb1d13', class: this.classNames() })));
     }
     static get style() { return PdsDividerStyle0; }
 }, [1, "pds-divider", {

package/components/pds-image.js

@@ -18,9 +18,9 @@ const PdsImage$1 = /*@__PURE__*/ proxyCustomElement(class PdsImage extends HTMLE
         this.width = undefined;
     }
     render() {
-        return (h(Host, { key: '215feafdc0e94d6ae120bf3a96f64bdc63390a62', class: {
+        return (h(Host, { key: '835f04e58f7a7f831575512bb4582fc22a563652', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '300604bb22b5811af2b0fda6dec0b53bfb2b6419', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: 'd002c0ae968a6a4a8d965c9bbae905da31629d7f', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get style() { return PdsImageStyle0; }
 }, [1, "pds-image", {

package/components/pds-input.js

@@ -31,7 +31,7 @@ const PdsInput$1 = /*@__PURE__*/ proxyCustomElement(class PdsInput extends HTMLE
         this.value = undefined;
     }
     render() {
-        return (h(Host, { key: '4e60728fb056594ae2994af77f7e7bae2b886794', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '29f77b38b5927e32cb7c0e5a1ecf1f2c5524a69f', class: "pds-input" }, h(PdsLabel, { key: 'fd7e9df19532f34ce2e168f41baab2686df6d9cd', htmlFor: this.componentId, text: this.label }), h("input", { key: '6859b44f35cdccc16f5f0d68de2e039e2d5f3c51', class: "pds-input__field", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent }), this.helperMessage &&
+        return (h(Host, { key: 'bb6e9f4cb7515c3b8fbbc583ba1c9ade05d8ae90', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '960462be7a176c6b62412ce4b44af79f9b137a0c', class: "pds-input" }, h(PdsLabel, { key: 'beb8f1c8e8a1b4b692d2838abc99e427cc13c392', htmlFor: this.componentId, text: this.label }), h("input", { key: 'c69ceb5d687fb37b843e71e8aa9bad8b9f7bcaa8', class: "pds-input__field", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, disabled: this.disabled, id: this.componentId, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, type: this.type, value: this.value, onInput: this.onInputEvent }), this.helperMessage &&
             h("p", { class: "pds-input__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
             h("p", { class: "pds-input__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage))));
     }

package/components/pds-link.js

@@ -29,7 +29,7 @@ const PdsLink$1 = /*@__PURE__*/ proxyCustomElement(class PdsLink extends HTMLEle
         return classNames.join(' ');
     }
     render() {
-        return (h("a", { key: '23e4b62674283edaadf6b4b31ec610d4c5c8b911', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined }, h("slot", { key: 'd066d3add7be1faeee5a52ef4c1a9826d0c4b251' }, this.href), this.external &&
+        return (h("a", { key: '72e9712a881a175bab71e2d9beb2d0307582bde3', class: this.classNames(), href: this.href, id: this.componentId, target: this.external ? '_blank' : undefined, part: "link" }, h("slot", { key: '13f8e29adcfc55e7aeb62bd5e67105ce4d21eca7' }, this.href), this.external &&
             h("pds-icon", { icon: launch, size: this.fontSize })));
     }
     static get style() { return PdsLinkStyle0; }