@pine-ds/core 3.8.1 → 3.9.0

package/components/pds-accordion.js

@@ -31,7 +31,7 @@ const PdsAccordion$1 = /*@__PURE__*/ proxyCustomElement(class PdsAccordion exten
         this.detailsEl.addEventListener('toggle', this.handleToggle);
     }
     render() {
-        return (h(Host, { key: '92a6e19b0376d9cc14a86c9dda2fbfeef11297e3', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: '0bb94526cebdcefcec62976c1623ef208aaa3119' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), h("summary", { key: 'b599fe5da538efde146be5ff8db8a04faf5c6c1b', part: "accordion-button" }, h("slot", { key: '8bdfa4448b41da6fd46232fe854f7c475fc633bf', name: "label" }, "Details"), h("pds-icon", { key: 'ca51ab8291047c08cef21ef55c85a8a47f8cb3e0', icon: downSmall })), h("div", { key: '628dc7ce9263bbd983fc2353181e31b6fca0176a', part: "accordion-body", class: "pds-accordion__body" }, h("slot", { key: '314d59312a3fbb2cc8a1c4d8a7f55634d16b079d' })))));
+        return (h(Host, { key: 'd53fcdad106563a15bb6d1631cf29c9f1a43828e', class: "pds-accordion", id: this.componentId }, h("details", Object.assign({ key: 'cc3cda2e1e4df8c1b9ed7762329cfa082b1df756' }, this.getOpenAttribute(), { ref: (el) => (this.detailsEl = el) }), h("summary", { key: 'd2ee68e36d384e1701909647e5ded2eecb9309e0', part: "accordion-button" }, h("slot", { key: '7c68d676a7928d53ff6785c71a0f3b08c4a2176b', name: "label" }, "Details"), h("pds-icon", { key: '523c340fc5741f4cbf792f5a5a39f537f6db588c', icon: downSmall, part: "accordion-icon" })), h("div", { key: '87a896973b005365494b82a8200646a8b67b27e5', part: "accordion-body", class: "pds-accordion__body" }, h("slot", { key: 'd307f6de804cfa3e9a39646058e9ea1fb465abda' })))));
     }
     static get watchers() { return {
         "isOpen": ["handleOpenState"]

package/components/pds-accordion.js.map

@@ -1 +1 @@
-{"file":"pds-accordion.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,siDAAsiD;;MCcjjDA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAcE;;;AAGG;AAKA,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAOlB,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI;AACnC,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;AACzB,gBAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE;;AAEvB,YAAA,OAAO,EAAE;AACX,SAAC;AAqBF;AAlCC,IAAA,eAAe,CAAC,QAAiB,EAAA;AAC/B,QAAA,IAAI,CAAC,MAAM,GAAG,QAAQ;;IAcxB,gBAAgB,GAAA;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;IAG9D,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EAC9C,CAAA,CAAA,SAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAa,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAwB,CAAC,EAAA,CAAA,EAC5F,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,kBAAkB,EAAA,EAC9B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAe,EAAA,SAAA,CAAA,EACjC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,SAAS,EAAA,CAAI,CACrB,EACV,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,qBAAqB,EAAA,EACpD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACE,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsAccordion","__stencil_proxyCustomElement"],"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  --number-animation-transform-timing: 200ms;\n\n  border-radius: var(--pine-dimension-xs);\n\n  pds-icon {\n    transform: scaleY(1);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--pine-color-background-container);\n\n  summary {\n    color: var(--pine-color-text-active);\n    font-weight: var(--pine-font-weight-semi-bold);\n\n    pds-icon {\n      transform: scaleY(-1);\n    }\n  }\n}\n\nsummary {\n  background-color: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-xs);\n  color: var(--pine-color-text-readonly);\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size-body-md);\n  font-weight: var(--pine-font-weight-medium);\n  letter-spacing: var(--pine-letter-spacing);\n  line-height: var(--pine-line-height-body);\n  padding-block: calc(var(--pine-dimension-2xs) * 1.5);\n  padding-inline-end: var(--pine-dimension-2xs);\n  padding-inline-start: var(--pine-dimension-xs);\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(--pine-color-background-container-hover);\n    color: var(--pine-color-text);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n    position: relative;\n  }\n\n  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n\n.pds-accordion__body {\n  padding-block-end: calc(var(--pine-dimension-sm) + 2);\n  padding-inline: calc(var(--pine-dimension-2xs) * 1.5);\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @part accordion-button - Accordion button/trigger styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrls: ['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 part=\"accordion-button\">\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={downSmall} />\n          </summary>\n          <div part=\"accordion-body\" class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-accordion.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,siDAAsiD;;MCejjDA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;AAcE;;;AAGG;AAKA,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAOlB,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI;AACnC,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;AACzB,gBAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE;;AAEvB,YAAA,OAAO,EAAE;AACX,SAAC;AAqBF;AAlCC,IAAA,eAAe,CAAC,QAAiB,EAAA;AAC/B,QAAA,IAAI,CAAC,MAAM,GAAG,QAAQ;;IAcxB,gBAAgB,GAAA;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;IAG9D,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EAC9C,CAAA,CAAA,SAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAa,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAwB,CAAC,EAAA,CAAA,EAC5F,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,kBAAkB,EAAA,EAC9B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAe,EAAA,SAAA,CAAA,EACjC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC3C,EACV,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,qBAAqB,EAAA,EACpD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACE,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsAccordion","__stencil_proxyCustomElement"],"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  --number-animation-transform-timing: 200ms;\n\n  border-radius: var(--pine-dimension-xs);\n\n  pds-icon {\n    transform: scaleY(1);\n  }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n  background-color: var(--pine-color-background-container);\n\n  summary {\n    color: var(--pine-color-text-active);\n    font-weight: var(--pine-font-weight-semi-bold);\n\n    pds-icon {\n      transform: scaleY(-1);\n    }\n  }\n}\n\nsummary {\n  background-color: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-xs);\n  color: var(--pine-color-text-readonly);\n  font-family: var(--pine-font-family-body);\n  font-size: var(--pine-font-size-body-md);\n  font-weight: var(--pine-font-weight-medium);\n  letter-spacing: var(--pine-letter-spacing);\n  line-height: var(--pine-line-height-body);\n  padding-block: calc(var(--pine-dimension-2xs) * 1.5);\n  padding-inline-end: var(--pine-dimension-2xs);\n  padding-inline-start: var(--pine-dimension-xs);\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(--pine-color-background-container-hover);\n    color: var(--pine-color-text);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n    position: relative;\n  }\n\n  pds-icon {\n    margin-inline-start: auto;\n  }\n}\n\n.pds-accordion__body {\n  padding-block-end: calc(var(--pine-dimension-sm) + 2);\n  padding-inline: calc(var(--pine-dimension-2xs) * 1.5);\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @part accordion-button - Accordion button/trigger styles.\n * @part accordion-icon - Accordion icon styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrls: ['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 part=\"accordion-button\">\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={downSmall} part=\"accordion-icon\" />\n          </summary>\n          <div part=\"accordion-body\" class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"version":3}