@pine-ds/core 3.22.1 → 3.24.0

package/components/mock-pds-modal.js

@@ -83,7 +83,7 @@ const MockPdsModal$1 = /*@__PURE__*/ proxyCustomElement(class MockPdsModal exten
             'pds-modal__backdrop': true,
             'open': this.open,
         };
-        return (h("div", { key: '932c22f17088b6cd5efa34563533b10192ba01c5', class: backdropClasses }, h("div", { key: '09c13a485986d40fa0240530feffde18b5192ff3', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '69c2feba501225873ffcf7aab3a1b40a981cec89', class: "pds-modal__header" }, h("slot", { key: 'c38802b6007b85b45532743ee4a94bcc9d5da08f', name: "header" })), h("div", { key: '6998e3da4906070de62a1016c2e23836c84ad96a', class: "pds-modal-content" }, h("slot", { key: '98ed7a23ca4c84de297aa71a7b15c6fa9a2666bf' })), h("div", { key: '7d0ed4f725857a77d916004967d88d5e9c66a5de', class: "pds-modal__footer" }, h("slot", { key: '437b8ab71722e6bad1caee076020c5bb216a2aad', name: "footer" })))));
+        return (h("div", { key: '6e7f71b339764894e1f17d253fc3c8e0243e4f90', class: backdropClasses }, h("div", { key: '25b2f82c1af743156d152880631d4294dfec68b5', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '6bc97e805daee5e5dd547fa0b919a05cf1b6a6a1', class: "pds-modal__header" }, h("slot", { key: 'd9e7c248d983e3c055ed7e0aea5a4d5a15dfea12', name: "header" })), h("div", { key: '5608ee069b59cb34dc812bde22f83c6bce7e6904', class: "pds-modal-content" }, h("slot", { key: '6e3e790330598e1bde733350e5e216d269426e51' })), h("div", { key: '381f3c4e1c9c83b0687e1f1484b64334e388d669', class: "pds-modal__footer" }, h("slot", { key: '6e3a3cb64623de59a409072ab9c1bf65af8c2f6c', name: "footer" })))));
     }
     get el() { return this; }
     static get style() { return pdsModalCss; }

package/components/pds-alert.js

@@ -59,7 +59,7 @@ const PdsAlert$1 = /*@__PURE__*/ proxyCustomElement(class PdsAlert extends HTMLE
         };
         // Get the icon name based on the current variant
         const iconName = iconMap[this.variant] || iconMap.default;
-        return (h(Host, { key: 'ccb4b954c20b4fedfe1336737a412753bf3c78a2', class: "pds-alert", id: this.componentId, variant: this.variant }, h("pds-box", { key: '54b470210568b3af13c341a9afe3a4a88efc4574', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, h("pds-box", { key: '609a016138c123e05f0474800e91dfaaa3e8150b', gap: "sm", display: "flex" }, h("pds-icon", { key: '18262b9810eb488aca691b004c86b718abbdb4e8', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" }), h("pds-box", { key: 'c7aaaba27a319714d8f33988a8d97bb52cab9af4', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (h("pds-text", { key: '804764fff68ec88bed3f1d18710e5ca5d0fd88f8', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (h("button", { key: 'ad807ae38b3dc49840a0901ecb005de065b8a58c', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": "Dismiss alert", onClick: this.handleCloseClick }, h("pds-icon", { key: '0451526f7d61a46c344d48ae002d3f4480456a3e', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
+        return (h(Host, { key: 'b3280d4851c764c63649aa5078f950920290b155', class: "pds-alert", id: this.componentId, variant: this.variant }, h("pds-box", { key: '60b6f666bbf72ed99260a3a97ac27919f4ae2289', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, h("pds-box", { key: '17a1e9e1dcd92409b762d3c8fec4ea6bb34dfa3a', gap: "sm", display: "flex" }, h("pds-icon", { key: '9866970bfbdee3a09db537d7bd5536bac7b0cba4', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" }), h("pds-box", { key: '751647dc2a27e7c5fa31801ded4d0466e338ce12', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (h("pds-text", { key: 'a603335ef15246a638e1a3b2556bf10ac7073d8f', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (h("button", { key: '81fe893cb8dab3f93f5f5d9c515a8806e5b7d79b', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": "Dismiss alert", onClick: this.handleCloseClick }, h("pds-icon", { key: 'de431f51b5597399b702cc6503c6ee7b029b8fe3', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
     }
     get el() { return this; }
     static get style() { return pdsAlertTokensCss + pdsAlertCss; }

package/components/pds-alert.js.map

@@ -1 +1 @@
-{"file":"pds-alert.js","mappings":"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","names":["PdsAlert","__stencil_proxyCustomElement"],"sources":["src/components/pds-alert/pds-alert.tokens.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-alert/pds-alert.tokens.css';\n",":host {\n  // Context link colors for slotted pds-link components (default variant)\n  --pds-context-link-color: var(--pine-alert-color-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-link-hover);\n\n  display: block;\n  line-height: 1;\n  width: 100%;\n}\n\n:host([variant=\"danger\"]) {\n  --pds-context-link-color: var(--pine-alert-color-danger-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-danger-link-hover);\n}\n\n:host([variant=\"info\"]) {\n  --pds-context-link-color: var(--pine-alert-color-info-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-info-link-hover);\n}\n\n:host([variant=\"success\"]) {\n  --pds-context-link-color: var(--pine-alert-color-success-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-success-link-hover);\n}\n\n:host([variant=\"warning\"]) {\n  --pds-context-link-color: var(--pine-alert-color-warning-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-warning-link-hover);\n}\n\n.pds-alert__container {\n  --pds-alert-icon-size: var(--pine-dimension-sm);\n  --pds-alert-border-dismiss-outline: 2px solid var(--pds-alert-color-dismiss);\n\n  --pds-alert-background: var(--pine-alert-color-background);\n  --pds-alert-border-color: var(--pine-alert-color-border);\n  --pds-alert-color-icon: var(--pine-alert-color-icon);\n  --pds-alert-color-text: var(--pine-alert-color-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-dismiss-hover);\n\n  padding: var(--pine-dimension-250);\n}\n\n.pds-alert__container--danger {\n  --pds-alert-background: var(--pine-alert-color-danger-background);\n  --pds-alert-border-color: var(--pine-alert-color-danger-border);\n  --pds-alert-color-icon: var(--pine-alert-color-danger-icon);\n  --pds-alert-color-text: var(--pine-alert-color-danger-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-danger-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-danger-dismiss-hover);\n}\n\n.pds-alert__container--info {\n  --pds-alert-background: var(--pine-alert-color-info-background);\n  --pds-alert-border-color: var(--pine-alert-color-info-border);\n  --pds-alert-color-icon: var(--pine-alert-color-info-icon);\n  --pds-alert-color-text: var(--pine-alert-color-info-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-info-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-info-dismiss-hover);\n}\n\n.pds-alert__container--success {\n  --pds-alert-background: var(--pine-alert-color-success-background);\n  --pds-alert-border-color: var(--pine-alert-color-success-border);\n  --pds-alert-color-icon: var(--pine-alert-color-success-icon);\n  --pds-alert-color-text: var(--pine-alert-color-success-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-success-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-success-dismiss-hover);\n}\n\n.pds-alert__container--warning {\n  --pds-alert-background: var(--pine-alert-color-warning-background);\n  --pds-alert-border-color: var(--pine-alert-color-warning-border);\n  --pds-alert-color-icon: var(--pine-alert-color-warning-icon);\n  --pds-alert-color-text: var(--pine-alert-color-warning-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-warning-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-warning-dismiss-hover);\n}\n\n.pds-alert__icon {\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-alert__icon--small {\n  margin-block-start: calc(var(--pine-dimension-2xs) / 2); // half the default icon margin\n}\n\n.pds-alert__content-wrapper {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  width: 100%;\n}\n\n.pds-alert__dismiss {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--pine-border-radius-full);\n  cursor: pointer;\n  display: flex;\n  height: var(--pine-dimension-250);\n  justify-content: center;\n  padding: var(--pine-dimension-xs);\n  width: var(--pine-dimension-250);\n}\n\n.pds-alert__dismiss:hover {\n  background: var(--pds-alert-background-dismiss-hover);\n  opacity: 0.8;\n}\n\n.pds-alert__dismiss:focus-visible {\n  outline: var(--pds-alert-border-dismiss-outline);\n}\n\n.pds-alert__description--small {\n  flex: 1 1 auto;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pds-alert__actions {\n  margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-alert__actions--small {\n  flex-shrink: 0;\n  margin-inline-start: auto;\n  white-space: nowrap;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\n\n/**\n * @slot actions - Slot for alert actions.\n */\n\n@Component({\n  tag: 'pds-alert',\n  styleUrls: ['pds-alert.tokens.scss', 'pds-alert.scss'],\n  shadow: true,\n})\nexport class PdsAlert {\n\n  @Element() el: HTMLPdsAlertElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text displayed as the heading of the alert.\n   */\n  @Prop() heading: string;\n\n  /**\n   * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.\n   */\n  @Prop() small = false;\n\n  /**\n   * If true, shows the dismiss button. If false, the dismiss button is hidden.\n   * @defaultValue false\n   */\n  @Prop() dismissible = false;\n\n  /**\n   * Sets the style variant of the alert.\n   * @defaultValue 'default'\n   */\n  @Prop() variant: 'default' | 'danger' | 'info' | 'success' | 'warning' = 'default';\n\n  /**\n   * Event emitted when the dismiss button is clicked.\n   */\n  @Event() pdsAlertDismissClick: EventEmitter<void>;\n\n  @State() hasActionsContent = false;\n\n  private handleCloseClick = () => {\n    this.pdsAlertDismissClick.emit();\n  };\n\n  componentWillRender() {\n    // Check if the actions slot has any content.\n    // If not, hide the actions container to prevent empty space.\n    const actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n    this.hasActionsContent = !!actionsSlot;\n  }\n\n  private renderActions(isSmall: boolean) {\n    return (\n      <pds-box class={isSmall ? \"pds-alert__actions--small\" : \"pds-alert__actions\"} gap=\"sm\" flex={isSmall ? \"none\" : undefined} align-items={isSmall ? undefined : \"center\"}>\n        <slot name=\"actions\"></slot>\n      </pds-box>\n    );\n  }\n\n  private renderContent() {\n    if (this.small) {\n      return (\n        <pds-box display=\"flex\" gap=\"md\" align-items=\"center\">\n          <pds-text\n            truncate={this.small}\n            class=\"pds-alert__description--small\"\n            color=\"var(--pds-alert-color-text)\"\n            tag=\"p\"\n          >\n            <slot></slot>\n          </pds-text>\n          {this.hasActionsContent && this.renderActions(true)}\n        </pds-box>\n      );\n    }\n\n    return (\n      <div>\n        <pds-text class=\"pds-alert__description\" color=\"var(--pds-alert-color-text)\" tag=\"p\">\n          <slot></slot>\n        </pds-text>\n        {this.hasActionsContent && this.renderActions(false)}\n      </div>\n    );\n  }\n\n  render() {\n    const iconMap = {\n      danger: 'warning-filled',\n      default: 'info-circle-filled',\n      info: 'info-circle-filled',\n      success: 'check-circle-filled',\n      warning: 'info-circle-filled',\n    };\n\n    // Get the icon name based on the current variant\n    const iconName = iconMap[this.variant] || iconMap.default;\n\n    return (\n      <Host class=\"pds-alert\" id={this.componentId} variant={this.variant}>\n        <pds-box\n          class={`pds-alert__container pds-alert__container--${this.variant}`}\n          background-color=\"var(--pds-alert-background)\"\n          border-color=\"var(--pds-alert-border-color)\"\n          border-radius=\"md\"\n          border\n          display=\"block\"\n        >\n          <pds-box gap=\"sm\" display=\"flex\">\n            <pds-icon\n              class={`pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`}\n              color=\"var(--pds-alert-color-icon)\"\n              icon={iconName}\n              size=\"var(--pds-alert-icon-size)\"\n            />\n            <pds-box class=\"pds-alert__content-wrapper\" direction=\"column\" gap=\"xs\" flex=\"grow\">\n              {this.heading && !this.small && (\n                <pds-text class=\"pds-alert__heading\" color=\"var(--pds-alert-color-text)\" size=\"h5\" tag=\"h3\" weight=\"medium\">\n                  {this.heading}\n                </pds-text>\n              )}\n\n              {this.renderContent()}\n            </pds-box>\n\n            {this.dismissible && (\n              <button class=\"pds-alert__dismiss\" type=\"button\" part=\"dismiss\" aria-label=\"Dismiss alert\" onClick={this.handleCloseClick}>\n                <pds-icon icon=\"remove\" size=\"var(--pds-alert-icon-size)\" aria-hidden=\"true\" color=\"var(--pds-alert-color-dismiss)\" />\n              </button>\n            )}\n          </pds-box>\n        </pds-box>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-alert.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,k3EAAk3E;;ACA54E,MAAM,WAAW,GAAG,6oIAA6oI;;MCYppIA,UAAQ,iBAAAC,kBAAA,CAAA,MAAA,QAAA,SAAA,WAAA,CAAA;AALrB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAmBE;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAErB;;;AAGG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAE3B;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAA0D,SAAS;AAOzE,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK;AAE1B,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE;AAClC,SAAC;AA6FF;IA3FC,mBAAmB,GAAA;;;QAGjB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC;AAC7D,QAAA,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC,WAAW;;AAGhC,IAAA,aAAa,CAAC,OAAgB,EAAA;QACpC,QACE,CAAS,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE,OAAO,GAAG,2BAA2B,GAAG,oBAAoB,EAAE,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,EAAe,aAAA,EAAA,OAAO,GAAG,SAAS,GAAG,QAAQ,EAAA,EACpK,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,SAAS,EAAQ,CAAA,CACpB;;IAIN,aAAa,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;AACd,YAAA,QACE,CAAS,CAAA,SAAA,EAAA,EAAA,OAAO,EAAC,MAAM,EAAC,GAAG,EAAC,IAAI,EAAA,aAAA,EAAa,QAAQ,EAAA,EACnD,CAAA,CAAA,UAAA,EAAA,EACE,QAAQ,EAAE,IAAI,CAAC,KAAK,EACpB,KAAK,EAAC,+BAA+B,EACrC,KAAK,EAAC,6BAA6B,EACnC,GAAG,EAAC,GAAG,EAAA,EAEP,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACJ,EACV,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAC3C;;QAId,QACE,CAAA,CAAA,KAAA,EAAA,IAAA,EACE,CAAU,CAAA,UAAA,EAAA,EAAA,KAAK,EAAC,wBAAwB,EAAC,KAAK,EAAC,6BAA6B,EAAC,GAAG,EAAC,GAAG,EAAA,EAClF,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACJ,EACV,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAChD;;IAIV,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,MAAM,EAAE,gBAAgB;AACxB,YAAA,OAAO,EAAE,oBAAoB;AAC7B,YAAA,IAAI,EAAE,oBAAoB;AAC1B,YAAA,OAAO,EAAE,qBAAqB;AAC9B,YAAA,OAAO,EAAE,oBAAoB;SAC9B;;AAGD,QAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,OAAO;AAEzD,QAAA,QACE,CAAC,CAAA,IAAI,qDAAC,KAAK,EAAC,WAAW,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EACjE,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,CAA8C,2CAAA,EAAA,IAAI,CAAC,OAAO,CAAE,CAAA,EAClD,kBAAA,EAAA,6BAA6B,EACjC,cAAA,EAAA,+BAA+B,mBAC9B,IAAI,EAClB,MAAM,EACN,IAAA,EAAA,OAAO,EAAC,OAAO,EAAA,EAEf,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,GAAG,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAA,EAC9B,CACE,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,gBAAA,EAAmB,IAAI,CAAC,KAAK,GAAG,wBAAwB,GAAG,EAAE,CAAE,CAAA,EACtE,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAE,QAAQ,EACd,IAAI,EAAC,4BAA4B,EACjC,CAAA,EACF,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAA,EAChF,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,KAC1B,iEAAU,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAC,6BAA6B,EAAC,IAAI,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EACxG,EAAA,IAAI,CAAC,OAAO,CACJ,CACZ,EAEA,IAAI,CAAC,aAAa,EAAE,CACb,EAET,IAAI,CAAC,WAAW,KACf,+DAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,SAAS,EAAY,YAAA,EAAA,eAAe,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,EACvH,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,4BAA4B,iBAAa,MAAM,EAAC,KAAK,EAAC,gCAAgC,GAAG,CAC/G,CACV,CACO,CACF,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsAlert","__stencil_proxyCustomElement"],"sources":["src/components/pds-alert/pds-alert.tokens.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-alert/pds-alert.tokens.css';\n",":host {\n  // Context link colors for slotted pds-link components (default variant)\n  --pds-context-link-color: var(--pine-alert-color-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-link-hover);\n\n  display: block;\n  line-height: 1;\n  width: 100%;\n}\n\n:host([variant=\"danger\"]) {\n  --pds-context-link-color: var(--pine-alert-color-danger-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-danger-link-hover);\n}\n\n:host([variant=\"info\"]) {\n  --pds-context-link-color: var(--pine-alert-color-info-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-info-link-hover);\n}\n\n:host([variant=\"success\"]) {\n  --pds-context-link-color: var(--pine-alert-color-success-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-success-link-hover);\n}\n\n:host([variant=\"warning\"]) {\n  --pds-context-link-color: var(--pine-alert-color-warning-link);\n  --pds-context-link-color-hover: var(--pine-alert-color-warning-link-hover);\n}\n\n.pds-alert__container {\n  --pds-alert-icon-size: var(--pine-dimension-sm);\n  --pds-alert-border-dismiss-outline: 2px solid var(--pds-alert-color-dismiss);\n\n  --pds-alert-background: var(--pine-alert-color-background);\n  --pds-alert-border-color: var(--pine-alert-color-border);\n  --pds-alert-color-icon: var(--pine-alert-color-icon);\n  --pds-alert-color-text: var(--pine-alert-color-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-dismiss-hover);\n\n  padding: var(--pine-dimension-250);\n}\n\n.pds-alert__container--danger {\n  --pds-alert-background: var(--pine-alert-color-danger-background);\n  --pds-alert-border-color: var(--pine-alert-color-danger-border);\n  --pds-alert-color-icon: var(--pine-alert-color-danger-icon);\n  --pds-alert-color-text: var(--pine-alert-color-danger-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-danger-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-danger-dismiss-hover);\n}\n\n.pds-alert__container--info {\n  --pds-alert-background: var(--pine-alert-color-info-background);\n  --pds-alert-border-color: var(--pine-alert-color-info-border);\n  --pds-alert-color-icon: var(--pine-alert-color-info-icon);\n  --pds-alert-color-text: var(--pine-alert-color-info-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-info-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-info-dismiss-hover);\n}\n\n.pds-alert__container--success {\n  --pds-alert-background: var(--pine-alert-color-success-background);\n  --pds-alert-border-color: var(--pine-alert-color-success-border);\n  --pds-alert-color-icon: var(--pine-alert-color-success-icon);\n  --pds-alert-color-text: var(--pine-alert-color-success-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-success-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-success-dismiss-hover);\n}\n\n.pds-alert__container--warning {\n  --pds-alert-background: var(--pine-alert-color-warning-background);\n  --pds-alert-border-color: var(--pine-alert-color-warning-border);\n  --pds-alert-color-icon: var(--pine-alert-color-warning-icon);\n  --pds-alert-color-text: var(--pine-alert-color-warning-text);\n  --pds-alert-color-dismiss: var(--pine-alert-color-warning-dismiss);\n  --pds-alert-background-dismiss-hover: var(--pine-alert-color-warning-dismiss-hover);\n}\n\n.pds-alert__icon {\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-alert__icon--small {\n  margin-block-start: calc(var(--pine-dimension-2xs) / 2); // half the default icon margin\n}\n\n.pds-alert__content-wrapper {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  width: 100%;\n}\n\n.pds-alert__dismiss {\n  align-items: center;\n  background: none;\n  border: 0;\n  border-radius: var(--pine-border-radius-full);\n  cursor: pointer;\n  display: flex;\n  height: var(--pine-dimension-250);\n  justify-content: center;\n  padding: var(--pine-dimension-xs);\n  width: var(--pine-dimension-250);\n}\n\n.pds-alert__dismiss:hover {\n  background: var(--pds-alert-background-dismiss-hover);\n  opacity: 0.8;\n}\n\n.pds-alert__dismiss:focus-visible {\n  outline: var(--pds-alert-border-dismiss-outline);\n}\n\n.pds-alert__description--small {\n  flex: 1 1 auto;\n  max-width: 100%;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.pds-alert__actions {\n  margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-alert__actions--small {\n  flex-shrink: 0;\n  margin-inline-start: auto;\n  white-space: nowrap;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\n\n/**\n * @slot actions - Slot for alert actions.\n * @part dismiss\n */\n\n@Component({\n  tag: 'pds-alert',\n  styleUrls: ['pds-alert.tokens.scss', 'pds-alert.scss'],\n  shadow: true,\n})\nexport class PdsAlert {\n\n  @Element() el: HTMLPdsAlertElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text displayed as the heading of the alert.\n   */\n  @Prop() heading: string;\n\n  /**\n   * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.\n   */\n  @Prop() small = false;\n\n  /**\n   * If true, shows the dismiss button. If false, the dismiss button is hidden.\n   * @defaultValue false\n   */\n  @Prop() dismissible = false;\n\n  /**\n   * Sets the style variant of the alert.\n   * @defaultValue 'default'\n   */\n  @Prop() variant: 'default' | 'danger' | 'info' | 'success' | 'warning' = 'default';\n\n  /**\n   * Event emitted when the dismiss button is clicked.\n   */\n  @Event() pdsAlertDismissClick: EventEmitter<void>;\n\n  @State() hasActionsContent = false;\n\n  private handleCloseClick = () => {\n    this.pdsAlertDismissClick.emit();\n  };\n\n  componentWillRender() {\n    // Check if the actions slot has any content.\n    // If not, hide the actions container to prevent empty space.\n    const actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n    this.hasActionsContent = !!actionsSlot;\n  }\n\n  private renderActions(isSmall: boolean) {\n    return (\n      <pds-box class={isSmall ? \"pds-alert__actions--small\" : \"pds-alert__actions\"} gap=\"sm\" flex={isSmall ? \"none\" : undefined} align-items={isSmall ? undefined : \"center\"}>\n        <slot name=\"actions\"></slot>\n      </pds-box>\n    );\n  }\n\n  private renderContent() {\n    if (this.small) {\n      return (\n        <pds-box display=\"flex\" gap=\"md\" align-items=\"center\">\n          <pds-text\n            truncate={this.small}\n            class=\"pds-alert__description--small\"\n            color=\"var(--pds-alert-color-text)\"\n            tag=\"p\"\n          >\n            <slot></slot>\n          </pds-text>\n          {this.hasActionsContent && this.renderActions(true)}\n        </pds-box>\n      );\n    }\n\n    return (\n      <div>\n        <pds-text class=\"pds-alert__description\" color=\"var(--pds-alert-color-text)\" tag=\"p\">\n          <slot></slot>\n        </pds-text>\n        {this.hasActionsContent && this.renderActions(false)}\n      </div>\n    );\n  }\n\n  render() {\n    const iconMap = {\n      danger: 'warning-filled',\n      default: 'info-circle-filled',\n      info: 'info-circle-filled',\n      success: 'check-circle-filled',\n      warning: 'info-circle-filled',\n    };\n\n    // Get the icon name based on the current variant\n    const iconName = iconMap[this.variant] || iconMap.default;\n\n    return (\n      <Host class=\"pds-alert\" id={this.componentId} variant={this.variant}>\n        <pds-box\n          class={`pds-alert__container pds-alert__container--${this.variant}`}\n          background-color=\"var(--pds-alert-background)\"\n          border-color=\"var(--pds-alert-border-color)\"\n          border-radius=\"md\"\n          border\n          display=\"block\"\n        >\n          <pds-box gap=\"sm\" display=\"flex\">\n            <pds-icon\n              class={`pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`}\n              color=\"var(--pds-alert-color-icon)\"\n              icon={iconName}\n              size=\"var(--pds-alert-icon-size)\"\n            />\n            <pds-box class=\"pds-alert__content-wrapper\" direction=\"column\" gap=\"xs\" flex=\"grow\">\n              {this.heading && !this.small && (\n                <pds-text class=\"pds-alert__heading\" color=\"var(--pds-alert-color-text)\" size=\"h5\" tag=\"h3\" weight=\"medium\">\n                  {this.heading}\n                </pds-text>\n              )}\n\n              {this.renderContent()}\n            </pds-box>\n\n            {this.dismissible && (\n              <button class=\"pds-alert__dismiss\" type=\"button\" part=\"dismiss\" aria-label=\"Dismiss alert\" onClick={this.handleCloseClick}>\n                <pds-icon icon=\"remove\" size=\"var(--pds-alert-icon-size)\" aria-hidden=\"true\" color=\"var(--pds-alert-color-dismiss)\" />\n              </button>\n            )}\n          </pds-box>\n        </pds-box>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-avatar.js

@@ -100,7 +100,7 @@ const PdsAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PdsAvatar extends HTM
         }
     }
     render() {
-        return (h(Host, { key: '8425f576be0ea4ce443c9a14a9d7bc34e493e6d3', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
+        return (h(Host, { key: '7bdd177a6b7064ed12cabeb21d96b0a0cc6071ae', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
     }
     static get style() { return pdsAvatarCss; }
 }, [257, "pds-avatar", {

package/components/pds-avatar.js.map

@@ -1 +1 @@
-{"file":"pds-avatar.js","mappings":"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","names":["PdsAvatar","__stencil_proxyCustomElement"],"sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\ndiv {\n  // These custom props are not reachable\n  --color-background-container: var(--pine-color-background-container-hover);\n\n  align-items: center;\n  background-color: var(--color-background-container);\n  border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  :host(.pds-avatar--admin) & {\n    --border-radius-admin-round: var(--pine-dimension-150);\n    border-radius: var(--border-radius-admin-round);\n  }\n\n  // Remove when FF has support for :has\n  :host(.pds-avatar--has-image) & {\n    background: transparent\n  }\n\n  @supports selector(:has) {\n    &:has(img) {\n      background-color: transparent\n    }\n  }\n}\n\n.pds-avatar__button {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: var(--pine-dimension-none);\n  border-radius: var(--pine-border-radius-full);\n  cursor: pointer;\n  display: flex;\n  padding: var(--pine-dimension-none);\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n  }\n}\n\n.pds-avatar__badge {\n  background-color: transparent;\n  border: var(--pine-dimension-none);\n  border-color: transparent;\n  border-radius: var(--pine-border-radius-round);\n  inset-block-end: var(--pine-dimension-none);\n  inset-inline-end: var(--pine-dimension-none);\n  position: absolute;\n}\n\nimg {\n  border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n}\n\n.pds-avatar__initials {\n  color: var(--pine-color-brand);\n  fill: var(--pine-color-brand);\n  font-size: var(--pine-font-size-085);\n  font-weight: var(--pine-font-weight-semi-bold);\n  height: 100%;\n  text-align: center;\n  width: 100%;\n\n  text {\n    text-anchor: middle;\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n  tag: 'pds-avatar',\n  styleUrls: ['pds-avatar.scss'],\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * The initials to display in the avatar when no image is provided.\n   * @defaultValue null\n   */\n  @Prop() initials?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAssetWrapper = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n\n    return (\n      <div style={style} part=\"asset-wrapper\">\n        {this.renderIconOrImage()}\n        {this.renderBadge()}\n      </div>\n    )\n  };\n\n  private renderAvatar = () => {\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\" part=\"button\" aria-label=\"Avatar dropdown trigger\">\n        {this.renderAssetWrapper()}\n        </button>\n        :\n        this.renderAssetWrapper()\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon color=\"var(--pine-color-purple-600)\" class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => {\n    if (this.image) {\n      return <img alt={this.alt} src={this.image} />;\n    }\n\n    if (this.initials) {\n      return (\n        <svg class=\"pds-avatar__initials\" viewBox=\"0 0 32 32\">\n          <text x=\"16\" y=\"20\">{this.initials}</text>\n        </svg>\n      );\n    }\n\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n    return <pds-icon color=\"var(--pine-color-brand)\" icon={userFilled} size=\"33.53%\"></pds-icon>;\n  };\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-avatar.js","mappings":"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","names":["PdsAvatar","__stencil_proxyCustomElement"],"sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\ndiv {\n  // These custom props are not reachable\n  --color-background-container: var(--pine-color-background-container-hover);\n\n  align-items: center;\n  background-color: var(--color-background-container);\n  border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  :host(.pds-avatar--admin) & {\n    --border-radius-admin-round: var(--pine-dimension-150);\n    border-radius: var(--border-radius-admin-round);\n  }\n\n  // Remove when FF has support for :has\n  :host(.pds-avatar--has-image) & {\n    background: transparent\n  }\n\n  @supports selector(:has) {\n    &:has(img) {\n      background-color: transparent\n    }\n  }\n}\n\n.pds-avatar__button {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: var(--pine-dimension-none);\n  border-radius: var(--pine-border-radius-full);\n  cursor: pointer;\n  display: flex;\n  padding: var(--pine-dimension-none);\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n  }\n}\n\n.pds-avatar__badge {\n  background-color: transparent;\n  border: var(--pine-dimension-none);\n  border-color: transparent;\n  border-radius: var(--pine-border-radius-round);\n  inset-block-end: var(--pine-dimension-none);\n  inset-inline-end: var(--pine-dimension-none);\n  position: absolute;\n}\n\nimg {\n  border-radius: var(--border-radius-admin-round, var(--pine-border-radius-full));\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n}\n\n.pds-avatar__initials {\n  color: var(--pine-color-brand);\n  fill: var(--pine-color-brand);\n  font-size: var(--pine-font-size-085);\n  font-weight: var(--pine-font-weight-semi-bold);\n  height: 100%;\n  text-align: center;\n  width: 100%;\n\n  text {\n    text-anchor: middle;\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part asset-wrapper\n * @part button\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n  tag: 'pds-avatar',\n  styleUrls: ['pds-avatar.scss'],\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * The initials to display in the avatar when no image is provided.\n   * @defaultValue null\n   */\n  @Prop() initials?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAssetWrapper = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n\n    return (\n      <div style={style} part=\"asset-wrapper\">\n        {this.renderIconOrImage()}\n        {this.renderBadge()}\n      </div>\n    )\n  };\n\n  private renderAvatar = () => {\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\" part=\"button\" aria-label=\"Avatar dropdown trigger\">\n        {this.renderAssetWrapper()}\n        </button>\n        :\n        this.renderAssetWrapper()\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon color=\"var(--pine-color-purple-600)\" class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => {\n    if (this.image) {\n      return <img alt={this.alt} src={this.image} />;\n    }\n\n    if (this.initials) {\n      return (\n        <svg class=\"pds-avatar__initials\" viewBox=\"0 0 32 32\">\n          <text x=\"16\" y=\"20\">{this.initials}</text>\n        </svg>\n      );\n    }\n\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n    return <pds-icon color=\"var(--pine-color-brand)\" icon={userFilled} size=\"33.53%\"></pds-icon>;\n  };\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--has-initials`]: this.initials !== '' && this.initials !== null,\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-checkbox2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { e as exposeTypeProperty, a as assignDescription, m as messageId } from './form.js';
+import { e as exposeTypeProperty, i as isSpecTest, a as assignDescription, m as messageId } from './form.js';
 import { h as danger } from './index2.js';
 import { i as inheritAriaAttributes } from './attributes.js';
 import { d as defineCustomElement$1 } from './pds-icon2.js';
@@ -73,10 +73,8 @@ const PdsCheckbox = /*@__PURE__*/ proxyCustomElement(class PdsCheckbox extends H
         this.updateFormValue();
     }
     updateFormValue() {
-        var _a;
-        if (typeof jest !== 'undefined' || typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test') {
+        if (isSpecTest())
             return;
-        }
         if (this.internals && this.internals.setFormValue) {
             // For checkboxes, only send the value when checked, otherwise send null
             const formValue = this.checked ? (this.value || 'on') : null;
@@ -101,9 +99,9 @@ const PdsCheckbox = /*@__PURE__*/ proxyCustomElement(class PdsCheckbox extends H
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (h(Host, { key: '89542cef41ee75d43ed9595fa4c034d11015c2b2', class: this.classNames() }, h("label", { key: 'c42bc84be20638bc54b39e19740831fd384dd51d', htmlFor: this.componentId }, h("input", Object.assign({ key: 'f99059d69fec916a33deb4e4e2449cf62029e4ca', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), h("span", { key: '5482e147bbfb151b4984ee6fa52781d0533bea8c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '30792c96b68346304a4ba10d050904f74f5811ca', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'd3ee96dc4d6a7dc8f0ce7453850f3211b10b6b9f', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '0c4255a58ca7873bc23228e6097adc150006caa9', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: 'd4a447aba6ffa638b0bf3ed7a5cfd4580168da79', class: this.classNames() }, h("label", { key: '75fcd32809f736f8e4f6af2021f86d2c5b7bc110', htmlFor: this.componentId }, h("input", Object.assign({ key: '5238103a16bc1c6baf92b5802bca17db748a14b2', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), h("span", { key: '0a652dc44e4c35d3a5484065f140a231a0d46424', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '76f40eba1d92ffcdb9946c8cc17714bda421a8a7', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'ad05bf066a91bc934344c3696ec82ec6b9813c07', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '4d3f9dddea4be870323db41a6cc5d69a9be44d7d', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/components/pds-checkbox2.js.map

@@ -1 +1 @@
-{"file":"pds-checkbox2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/global/styles/utils/label.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n  align-items: center;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n  input {\n    border-color: var(--pine-color-border-danger);\n\n    &:checked {\n      background: var( --pine-color-danger);\n\n      &:hover {\n        background: var(--pine-color-danger-hover);\n        border-color: var(--pine-color-border-danger-hover);\n      }\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n\n  label,\n  .pds-checkbox__message--error {\n    color: var(--pine-color-text-message-danger);\n  }\n}\n\n:host(.is-indeterminate) {\n  input {\n    background: var(--pine-color-accent);\n    border-color: var(--pine-color-accent);\n\n    &:hover {\n      background: var(--pine-color-accent);\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &::after {\n      /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n      border: 1px solid var(--pine-color-white);\n      border-block-end: var(--pine-border-width-none);\n      border-block-start: var(--pine-border-width-none);\n      border-inline-start: var(--pine-border-width-none);\n      content: \"\";\n      display: block;\n      height: 7px;\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: rotate(90deg) translate3d(-103%, 32%, 0);\n      width: 4px;\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  background: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: var(--pine-dimension-2xs);\n  flex: none;\n  height: var(--pine-dimension-sm);\n  margin: 0;\n  margin-block-start: var(--pine-dimension-025);\n  position: relative;\n  width: var(--pine-dimension-sm);\n\n  &:hover {\n    background: var(--pine-color-background-container-hover);\n    border: var(--pine-border-hover);\n  }\n\n  &:checked {\n    background: var(--pine-color-accent);\n    border-color: var(--pine-color-accent);\n\n    &:hover {\n      background: var(--pine-color-accent-hover);\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &::after {\n      /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n      border: 1px solid var(--pine-color-white);\n      border-block-start: var(--pine-border-width-none);\n      border-inline-start: var(--pine-border-width-none);\n      content: \"\";\n      display: block;\n      height: 7px;\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: rotate(43deg) translate3d(-110%, -30%, 0);\n      width: 4px;\n    }\n  }\n\n  &:disabled {\n    background: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background: var(--pine-color-background-container-disabled);\n      border-color: var(--pine-color-border-disabled);\n\n      &::after {\n        border-color: var(--pine-color-border);\n      }\n    }\n\n    + label {\n      cursor: not-allowed;\n    }\n\n    ~ .pds-checkbox__message {\n      color: var(--pine-color-text-disabled);\n    }\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n  }\n}\n\nlabel {\n  display: flex;\n  gap: var(--pine-dimension-xs);\n}\n\n.visually-hidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: polygon(0 0, 0 0, 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.pds-checkbox__message {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-start: 6px;\n  margin-inline-start: var(--pine-dimension-md);\n  width: 100%;\n}\n\n.pds-checkbox__message--error {\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n\n  pds-icon {\n    margin-block-start: var(--pine-dimension-025);\n  }\n}\n","import { Component, Element, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsCheckbox {\n  private inheritedAttributes: Attributes = {};\n  private internals?: ElementInternals;\n  private readonly _type = 'checkbox' as const;\n\n  @Element() el: HTMLPdsCheckboxElement;\n\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() hideLabel: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.updateFormValue();\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  connectedCallback() {\n    // Initialize ElementInternals for form association (only once per element instance)\n    if (this.el.attachInternals && !this.internals) {\n      this.internals = this.el.attachInternals();\n    }\n\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  componentDidLoad() {\n    this.updateFormValue();\n  }\n\n  @Watch('checked')\n  checkedChanged() {\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    if (typeof jest !== 'undefined' || typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n      return;\n    }\n\n    if (this.internals && this.internals.setFormValue) {\n      // For checkboxes, only send the value when checked, otherwise send null\n      const formValue = this.checked ? (this.value || 'on') : null;\n      this.internals.setFormValue(formValue);\n    }\n\n    if (this.internals && this.internals.setValidity) {\n      this.internals.setValidity({});\n    }\n  }\n\n  formStateRestoreCallback(state: string | FormData | null) {\n    if (state instanceof FormData) {\n      // For checkboxes, restore if the value exists in FormData\n      const value = this.value || 'on';\n      this.checked = state.get(this.name as string) === value;\n    } else if (typeof state === 'string') {\n      // Restore from string state\n      this.checked = state === (this.value || 'on');\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <label htmlFor={this.componentId}>\n          <input\n            type=\"checkbox\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            id={this.componentId}\n            indeterminate={this.indeterminate}\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onChange={this.handleCheckboxChange}\n            onInput={this.handleInput}\n            {...this.inheritedAttributes}\n          />\n          <span class={this.hideLabel ? 'visually-hidden' : ''}>\n            {this.label}\n          </span>\n        </label>\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-checkbox2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/global/styles/utils/label.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n  align-items: center;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n  input {\n    border-color: var(--pine-color-border-danger);\n\n    &:checked {\n      background: var( --pine-color-danger);\n\n      &:hover {\n        background: var(--pine-color-danger-hover);\n        border-color: var(--pine-color-border-danger-hover);\n      }\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n\n  label,\n  .pds-checkbox__message--error {\n    color: var(--pine-color-text-message-danger);\n  }\n}\n\n:host(.is-indeterminate) {\n  input {\n    background: var(--pine-color-accent);\n    border-color: var(--pine-color-accent);\n\n    &:hover {\n      background: var(--pine-color-accent);\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &::after {\n      /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n      border: 1px solid var(--pine-color-white);\n      border-block-end: var(--pine-border-width-none);\n      border-block-start: var(--pine-border-width-none);\n      border-inline-start: var(--pine-border-width-none);\n      content: \"\";\n      display: block;\n      height: 7px;\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: rotate(90deg) translate3d(-103%, 32%, 0);\n      width: 4px;\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  background: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: var(--pine-dimension-2xs);\n  flex: none;\n  height: var(--pine-dimension-sm);\n  margin: 0;\n  margin-block-start: var(--pine-dimension-025);\n  position: relative;\n  width: var(--pine-dimension-sm);\n\n  &:hover {\n    background: var(--pine-color-background-container-hover);\n    border: var(--pine-border-hover);\n  }\n\n  &:checked {\n    background: var(--pine-color-accent);\n    border-color: var(--pine-color-accent);\n\n    &:hover {\n      background: var(--pine-color-accent-hover);\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &::after {\n      /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n      border: 1px solid var(--pine-color-white);\n      border-block-start: var(--pine-border-width-none);\n      border-inline-start: var(--pine-border-width-none);\n      content: \"\";\n      display: block;\n      height: 7px;\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: rotate(43deg) translate3d(-110%, -30%, 0);\n      width: 4px;\n    }\n  }\n\n  &:disabled {\n    background: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background: var(--pine-color-background-container-disabled);\n      border-color: var(--pine-color-border-disabled);\n\n      &::after {\n        border-color: var(--pine-color-border);\n      }\n    }\n\n    + label {\n      cursor: not-allowed;\n    }\n\n    ~ .pds-checkbox__message {\n      color: var(--pine-color-text-disabled);\n    }\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n  }\n}\n\nlabel {\n  display: flex;\n  gap: var(--pine-dimension-xs);\n}\n\n.visually-hidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: polygon(0 0, 0 0, 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.pds-checkbox__message {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-start: 6px;\n  margin-inline-start: var(--pine-dimension-md);\n  width: 100%;\n}\n\n.pds-checkbox__message--error {\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n\n  pds-icon {\n    margin-block-start: var(--pine-dimension-025);\n  }\n}\n","import { Component, Element, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, isSpecTest, messageId, exposeTypeProperty } from '../../utils/form';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['../../global/styles/utils/label.scss', 'pds-checkbox.scss'],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsCheckbox {\n  private inheritedAttributes: Attributes = {};\n  private internals?: ElementInternals;\n  private readonly _type = 'checkbox' as const;\n\n  @Element() el: HTMLPdsCheckboxElement;\n\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop({ mutable: true }) indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() hideLabel: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.updateFormValue();\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  connectedCallback() {\n    // Initialize ElementInternals for form association (only once per element instance)\n    if (this.el.attachInternals && !this.internals) {\n      this.internals = this.el.attachInternals();\n    }\n\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  componentDidLoad() {\n    this.updateFormValue();\n  }\n\n  @Watch('checked')\n  checkedChanged() {\n    this.updateFormValue();\n  }\n\n  private updateFormValue() {\n    if (isSpecTest()) return;\n\n    if (this.internals && this.internals.setFormValue) {\n      // For checkboxes, only send the value when checked, otherwise send null\n      const formValue = this.checked ? (this.value || 'on') : null;\n      this.internals.setFormValue(formValue);\n    }\n\n    if (this.internals && this.internals.setValidity) {\n      this.internals.setValidity({});\n    }\n  }\n\n  formStateRestoreCallback(state: string | FormData | null) {\n    if (state instanceof FormData) {\n      // For checkboxes, restore if the value exists in FormData\n      const value = this.value || 'on';\n      this.checked = state.get(this.name as string) === value;\n    } else if (typeof state === 'string') {\n      // Restore from string state\n      this.checked = state === (this.value || 'on');\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <label htmlFor={this.componentId}>\n          <input\n            type=\"checkbox\"\n            aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n            aria-invalid={this.invalid ? \"true\" : undefined}\n            id={this.componentId}\n            indeterminate={this.indeterminate}\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            onChange={this.handleCheckboxChange}\n            onInput={this.handleInput}\n            {...this.inheritedAttributes}\n          />\n          <span class={this.hideLabel ? 'visually-hidden' : ''}>\n            {this.label}\n          </span>\n        </label>\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-chip2.js

@@ -127,7 +127,7 @@ const PdsChip = /*@__PURE__*/ proxyCustomElement(class PdsChip extends HTMLEleme
         return (h(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), h("pds-icon", { icon: remove, size: this.iconSize })));
     }
     render() {
-        return (h(Host, { key: 'c6afa0a9aba7716fd7a7ee32d1c0993c30464b1e', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
+        return (h(Host, { key: '1d75f8ea7583f53191467b568352664ea0313c79', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     static get style() { return pdsChipTokensCss + pdsChipCss; }
 }, [257, "pds-chip", {

package/components/pds-chip2.js.map

@@ -1 +1 @@
-{"file":"pds-chip2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pds-chip/pds-chip.tokens.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-chip/pds-chip.tokens'\n","@use 'sass:map';\n\n:host {\n  --sizing-close: var(--pine-dimension-125);\n\n  align-items: center;\n  border-radius: var(--pine-dimension-sm);\n  display: inline-flex;\n  padding-block: var(--pine-dimension-025);\n  padding-inline: var(--pine-dimension-100);\n}\n\n$pds-chip-sentiment: (\n  accent: var(--pine-chip-color-accent),\n  danger: var(--pine-chip-color-danger),\n  info: var(--pine-chip-color-info),\n  neutral: var(--pine-chip-color-neutral),\n  success: var(--pine-chip-color-success),\n  warning: var(--pine-chip-color-warning),\n);\n\n/* stylelint-disable pine-design-system/prefer-semantic-tokens */\n$pds-chip-sentiment-text: (\n  accent: var(--pine-color-text-accent),\n  danger: var(--pine-color-text-danger),\n  info: var(--pine-color-text-info),\n  neutral: var(--pine-color-grey-900),\n  success: var(--pine-color-text-success),\n  warning: var(--pine-color-text-warning),\n);\n/* stylelint-enable pine-design-system/prefer-semantic-tokens */\n\n$pds-chip-sentiment-dots: (\n  accent: var(--pine-chip-color-accent-dot),\n  danger: var(--pine-chip-color-danger-dot),\n  info: var(--pine-chip-color-info-dot),\n  neutral: var(--pine-chip-color-neutral-dot),\n  success: var(--pine-chip-color-success-dot),\n  warning: var(--pine-chip-color-warning-dot),\n);\n\n$pds-chip-sentiment-hover: (\n  accent: var(--pine-chip-color-accent-hover),\n  danger: var(--pine-chip-color-danger-hover),\n  info: var(--pine-chip-color-info-hover),\n  neutral: var(--pine-chip-color-neutral-hover),\n  success: var(--pine-chip-color-success-hover),\n  warning: var(--pine-chip-color-warning-hover),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n  :host(.pds-chip--#{$sentiment}) {\n    background: $value;\n    border: var(--pine-border-width) solid var(--pine-chip-color-#{$sentiment}-hover);\n\n    // dot colors\n    .pds-chip__dot {\n      /* stylelint-disable-next-line */\n      background: map.get($pds-chip-sentiment-dots, $sentiment);\n    }\n\n    .pds-chip__label, .pds-chip__button, .pds-chip__close {\n      /* stylelint-disable-next-line */\n      color: map.get($pds-chip-sentiment-text, $sentiment);\n      font-weight: var(--pine-font-weight-medium);\n    }\n\n    // tag close hover colors\n    .pds-chip__close:hover {\n      /* stylelint-disable-next-line */\n      background: map.get($pds-chip-sentiment-hover, $sentiment);\n    }\n  }\n  // dropdown hover colors\n  :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n    /* stylelint-disable-next-line */\n    background: map.get($pds-chip-sentiment-hover, $sentiment);\n  }\n}\n\n.pds-chip__dot {\n  border: var(--pine-border-width) solid transparent;\n  border-radius: var(--pine-border-radius-full);\n  display: inline-block;\n  height: var(--pine-dimension-2xs);\n  margin-inline-end: var(--pine-dimension-2xs);\n  width: var(--pine-dimension-2xs);\n}\n\n.pds-chip__label {\n  align-items: center;\n  display: flex;\n\n  pds-icon {\n    margin-inline-end: var(--pine-dimension-2xs);\n  }\n}\n\n.pds-chip__label, .pds-chip__button {\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n  padding: var(--pine-dimension-none);\n}\n\n.pds-chip__button {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: var(--pine-dimension-none);\n  border-radius: var(--pine-dimension-sm);\n  cursor: pointer;\n  display: flex;\n  padding: var(--pine-dimension-025) var(--pine-dimension-100);\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  pds-icon:first-child {\n    margin-inline-end: var(--pine-dimension-2xs);\n  }\n\n  pds-icon:last-child {\n    margin-inline-end: calc(var(--pine-dimension-025) * -1);\n    margin-inline-start: var(--pine-dimension-2xs);\n  }\n}\n\n.pds-chip__close {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pine-border-radius-full);\n  box-sizing: border-box;\n  height: var(--sizing-close);\n  margin-inline-end: calc(var(--pine-dimension-xs) * -1);\n  margin-inline-start: var(--pine-dimension-2xs);\n  padding: var(--sizing-close);\n  position: relative;\n  width: var(--sizing-close);\n\n  pds-icon {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n  }\n}\n\n// small\n\n:host(.pds-chip--sm) {\n  --sizing-close: var(--pine-dimension-100);\n  padding-block: var(--pine-dimension-025);\n  padding-inline: var(--pine-dimension-100);\n\n  .pds-chip__label, .pds-chip__button {\n    font: var(--pine-typography-body-sm-medium);\n    letter-spacing: var(--pine-letter-spacing);\n  }\n}\n\n:host(.pds-chip--sm.pds-chip--dropdown) {\n  padding: var(--pine-dimension-none);\n\n  .pds-chip__button {\n    padding: var(--pine-dimension-025) var(--pine-dimension-100);\n  }\n}\n\n:host(.pds-chip--sm.pds-chip--brand) {\n  .pds-chip__label {\n    padding: var(--pine-dimension-025) var(--pine-dimension-100);\n  }\n}\n\n// large\n\n:host(.pds-chip--lg) {\n  padding-block: var(--pine-dimension-025);\n  padding-inline: var(--pine-dimension-150);\n\n  .pds-chip__label, .pds-chip__button {\n    font-family: var(--pine-font-family-heading);\n    font-size: var(--pine-font-size-heading-6);\n    font-weight: var(--pine-font-weight-medium);\n    letter-spacing: var(--pine-letter-spacing-heading-6);\n  }\n}\n\n:host(.pds-chip--lg.pds-chip--dropdown) {\n  padding: var(--pine-dimension-none);\n\n  .pds-chip__button {\n    padding: var(--pine-dimension-025) var(--pine-dimension-150);\n  }\n}\n\n:host(.pds-chip--brand) {\n  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n  background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);\n  border: 0;\n  padding: 1px;\n  position: relative;\n\n  .pds-chip__label {\n    /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n    background: rgba(255, 255, 255, 0.9);\n    border-radius: calc(var(--pine-dimension-sm) - 1px);\n    /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n    color: var(--pine-color-grey-900);\n    font-weight: var(--pine-font-weight-medium);\n    padding: var(--pine-dimension-025) var(--pine-dimension-100);\n    position: relative;\n    z-index: var(--pine-z-index-raised);\n\n    pds-icon {\n      margin-inline-end: var(--pine-dimension-2xs);\n    }\n  }\n\n  .pds-chip__button, .pds-chip__close {\n    /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n    color: var(--pine-color-grey-900);\n    font-weight: var(--pine-font-weight-medium);\n    position: relative;\n    z-index: var(--pine-z-index-raised);\n  }\n\n  .pds-chip__button {\n    pds-icon:first-child {\n      margin-inline-end: var(--pine-dimension-2xs);\n    }\n  }\n\n  // tag close hover colors\n  .pds-chip__close:hover {\n    /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n    background: rgba(255, 255, 255, 0.8);\n  }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport type { ChipSentimentType, ChipSizeType, ChipVariantType } from '@utils/types';\n\n/**\n * @slot (default) - The chip's label text.\n */\n\n@Component({\n  tag: 'pds-chip',\n  styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * Note: This prop is ignored when sentiment is 'brand'.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   * The name of the icon to display before the chip text.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Determines whether the chip should be displayed in a larger size. DEPRECATED.\n   * @defaultValue false\n   * @deprecated Use `size` prop instead. Set `size=\"lg\"` for the large variant.\n   */\n  @Prop() large = false;\n\n  /**\n   * Sets the size of the chip.\n   * @defaultValue 'md'\n   */\n  @Prop() size?: ChipSizeType;\n\n  /**\n   * Defines the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: ChipSentimentType = 'neutral';\n\n  /**\n   * Sets the style variant of the chip.\n   * Note: This prop is ignored when sentiment is 'brand'.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: ChipVariantType = 'text';\n\n  /**\n   * URL to navigate to when the remove button is clicked.\n   * When provided, renders the close button as a link instead of a button.\n   * Only applies to tag variant.\n   */\n  @Prop() removeUrl?: string;\n\n  /**\n   * HTTP method to use for the remove action.\n   * Adds data-method and data-turbo-method attributes for Rails/Turbo compatibility.\n   * Only applies when removeUrl is provided.\n   */\n  @Prop() removeHttpMethod?: 'get' | 'post' | 'put' | 'patch' | 'delete';\n\n  /**\n   * Specifies where to open the linked document when removeUrl is provided.\n   * Only applies when removeUrl is set.\n   */\n  @Prop() removeTarget?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Event emitted when the close button is clicked on a tag variant chip.\n   */\n  @Event() pdsTagCloseClick: EventEmitter<void>;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  };\n\n  private get effectiveSize(): ChipSizeType {\n    if (this.size != null) return this.size;\n    if (this.large) return 'lg';\n    return 'md';\n  }\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    const size = this.effectiveSize;\n    if (size && size !== 'md') {\n      classNames.push('pds-chip--' + size);\n    }\n\n    // For brand sentiment, always use text variant\n    const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;\n    if (effectiveVariant) {\n      classNames.push('pds-chip--' + effectiveVariant);\n    }\n\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private get effectiveVariant() {\n    // For brand sentiment, force text variant behavior\n    return this.sentiment === 'brand' ? 'text' : this.variant;\n  }\n\n  private get iconSize() {\n    switch (this.effectiveSize) {\n      case 'sm': return '10px';\n      case 'lg': return '14px';\n      default: return '12px';\n    }\n  }\n\n  private setChipContent() {\n    const isDropdown = this.effectiveVariant === 'dropdown';\n\n    // For brand sentiment, ignore dot prop\n    const showDot = this.sentiment === 'brand' ? false : this.dot;\n\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\" part=\"button\">\n        {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n        {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        <slot></slot>\n        <pds-icon icon={downSmall} size={this.iconSize} aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n        {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        <slot></slot>\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  private renderCloseButton() {\n    const CloseElement = this.removeUrl ? 'a' : 'button';\n\n    const closeAttributes = () => {\n      if (this.removeUrl) {\n        // Link attributes\n        const linkAttrs: any = {\n          class: 'pds-chip__close',\n          href: this.removeUrl,\n          'aria-label': 'Remove',\n        };\n\n        // Add target if specified\n        if (this.removeTarget) {\n          linkAttrs.target = this.removeTarget;\n        }\n\n        // Add HTTP method attributes if specified\n        if (this.removeHttpMethod) {\n          linkAttrs['data-method'] = this.removeHttpMethod;\n          linkAttrs['data-turbo-method'] = this.removeHttpMethod;\n        }\n\n        // Build rel attribute by collecting all required values\n        const relValues = [];\n\n        // Add noopener noreferrer if target is _blank\n        if (this.removeTarget === '_blank') {\n          relValues.push('noopener', 'noreferrer');\n        }\n\n        // Add nofollow for non-GET methods (best practice)\n        if (this.removeHttpMethod && this.removeHttpMethod !== 'get') {\n          relValues.push('nofollow');\n        }\n\n        // Set rel attribute if we have any values\n        if (relValues.length > 0) {\n          linkAttrs.rel = relValues.join(' ');\n        }\n\n        return linkAttrs;\n      }\n\n      // Button attributes\n      return {\n        class: 'pds-chip__close',\n        type: 'button',\n        'aria-label': 'Remove',\n      };\n    };\n\n    return (\n      <CloseElement {...closeAttributes()} onClick={this.handleCloseClick}>\n        <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n      </CloseElement>\n    );\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.effectiveVariant === 'tag' && this.renderCloseButton()}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-chip2.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,2/BAA2/B;;ACAphC,MAAM,UAAU,GAAG,wwQAAwwQ;;MCc9wQ,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AALpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAWE;;;;AAIG;AACK,QAAA,IAAG,CAAA,GAAA,GAAG,KAAK;AAOnB;;;;AAIG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAQrB;;;AAGG;AACK,QAAA,IAAS,CAAA,SAAA,GAAsB,SAAS;AAEhD;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAoB,MAAM;AA2BjC,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE;AAC9B,SAAC;AAqIF;AAnIC,IAAA,IAAY,aAAa,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI;YAAE,OAAO,IAAI,CAAC,IAAI;QACvC,IAAI,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,IAAI;AAC3B,QAAA,OAAO,IAAI;;IAGL,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC;AAE/B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa;AAC/B,QAAA,IAAI,IAAI,IAAI,IAAI,KAAK,IAAI,EAAE;AACzB,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;;;AAItC,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO;QAC3E,IAAI,gBAAgB,EAAE;AACpB,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,gBAAgB,CAAC;;AAGlD,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC;;AAGhD,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG7B,IAAA,IAAY,gBAAgB,GAAA;;AAE1B,QAAA,OAAO,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC,OAAO;;AAG3D,IAAA,IAAY,QAAQ,GAAA;AAClB,QAAA,QAAQ,IAAI,CAAC,aAAa;AACxB,YAAA,KAAK,IAAI,EAAE,OAAO,MAAM;AACxB,YAAA,KAAK,IAAI,EAAE,OAAO,MAAM;AACxB,YAAA,SAAS,OAAO,MAAM;;;IAIlB,cAAc,GAAA;AACpB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,KAAK,UAAU;;AAGvD,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG;AAE7D,QAAA,MAAM,WAAW,GAAG,UAAU,IAC5B,CAAQ,CAAA,QAAA,EAAA,EAAA,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EACzD,IAAI,CAAC,IAAI,IAAI,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,aAAA,EAAc,MAAM,EAAY,CAAA,EAC3F,OAAO,IAAI,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,aAAA,EAAa,MAAM,EAAK,CAAA,EAC5D,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,EACb,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,aAAA,EAAc,MAAM,EAAY,CAAA,CACvE,KAET,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,iBAAiB,EAAA,EAC1B,IAAI,CAAC,IAAI,IAAI,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,aAAA,EAAc,MAAM,EAAY,CAAA,EAC3F,OAAO,IAAI,CAAG,CAAA,GAAA,EAAA,EAAA,KAAK,EAAC,eAAe,EAAA,aAAA,EAAa,MAAM,EAAK,CAAA,EAC5D,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACR,CACR;AAED,QAAA,OAAO,WAAW;;IAGZ,iBAAiB,GAAA;AACvB,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,GAAG,GAAG,GAAG,QAAQ;QAEpD,MAAM,eAAe,GAAG,MAAK;AAC3B,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;;AAElB,gBAAA,MAAM,SAAS,GAAQ;AACrB,oBAAA,KAAK,EAAE,iBAAiB;oBACxB,IAAI,EAAE,IAAI,CAAC,SAAS;AACpB,oBAAA,YAAY,EAAE,QAAQ;iBACvB;;AAGD,gBAAA,IAAI,IAAI,CAAC,YAAY,EAAE;AACrB,oBAAA,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY;;;AAItC,gBAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,oBAAA,SAAS,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,gBAAgB;AAChD,oBAAA,SAAS,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAAC,gBAAgB;;;gBAIxD,MAAM,SAAS,GAAG,EAAE;;AAGpB,gBAAA,IAAI,IAAI,CAAC,YAAY,KAAK,QAAQ,EAAE;AAClC,oBAAA,SAAS,CAAC,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC;;;gBAI1C,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,KAAK,KAAK,EAAE;AAC5D,oBAAA,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;;;AAI5B,gBAAA,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;oBACxB,SAAS,CAAC,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC;;AAGrC,gBAAA,OAAO,SAAS;;;YAIlB,OAAO;AACL,gBAAA,KAAK,EAAE,iBAAiB;AACxB,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,YAAY,EAAE,QAAQ;aACvB;AACH,SAAC;AAED,QAAA,QACE,CAAC,CAAA,YAAY,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,eAAe,EAAE,EAAA,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAA,CAAA,EACjE,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAa,CAC3C;;IAInB,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EACjD,IAAI,CAAC,cAAc,EAAE,EACrB,IAAI,CAAC,gBAAgB,KAAK,KAAK,IAAI,IAAI,CAAC,iBAAiB,EAAE,CACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pds-chip/pds-chip.tokens.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-chip/pds-chip.tokens'\n","@use 'sass:map';\n\n:host {\n  --sizing-close: var(--pine-dimension-125);\n\n  align-items: center;\n  border-radius: var(--pine-dimension-sm);\n  display: inline-flex;\n  padding-block: var(--pine-dimension-025);\n  padding-inline: var(--pine-dimension-100);\n}\n\n$pds-chip-sentiment: (\n  accent: var(--pine-chip-color-accent),\n  danger: var(--pine-chip-color-danger),\n  info: var(--pine-chip-color-info),\n  neutral: var(--pine-chip-color-neutral),\n  success: var(--pine-chip-color-success),\n  warning: var(--pine-chip-color-warning),\n);\n\n/* stylelint-disable pine-design-system/prefer-semantic-tokens */\n$pds-chip-sentiment-text: (\n  accent: var(--pine-color-text-accent),\n  danger: var(--pine-color-text-danger),\n  info: var(--pine-color-text-info),\n  neutral: var(--pine-color-grey-900),\n  success: var(--pine-color-text-success),\n  warning: var(--pine-color-text-warning),\n);\n/* stylelint-enable pine-design-system/prefer-semantic-tokens */\n\n$pds-chip-sentiment-dots: (\n  accent: var(--pine-chip-color-accent-dot),\n  danger: var(--pine-chip-color-danger-dot),\n  info: var(--pine-chip-color-info-dot),\n  neutral: var(--pine-chip-color-neutral-dot),\n  success: var(--pine-chip-color-success-dot),\n  warning: var(--pine-chip-color-warning-dot),\n);\n\n$pds-chip-sentiment-hover: (\n  accent: var(--pine-chip-color-accent-hover),\n  danger: var(--pine-chip-color-danger-hover),\n  info: var(--pine-chip-color-info-hover),\n  neutral: var(--pine-chip-color-neutral-hover),\n  success: var(--pine-chip-color-success-hover),\n  warning: var(--pine-chip-color-warning-hover),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n  :host(.pds-chip--#{$sentiment}) {\n    background: $value;\n    border: var(--pine-border-width) solid var(--pine-chip-color-#{$sentiment}-hover);\n\n    // dot colors\n    .pds-chip__dot {\n      /* stylelint-disable-next-line */\n      background: map.get($pds-chip-sentiment-dots, $sentiment);\n    }\n\n    .pds-chip__label, .pds-chip__button, .pds-chip__close {\n      /* stylelint-disable-next-line */\n      color: map.get($pds-chip-sentiment-text, $sentiment);\n      font-weight: var(--pine-font-weight-medium);\n    }\n\n    // tag close hover colors\n    .pds-chip__close:hover {\n      /* stylelint-disable-next-line */\n      background: map.get($pds-chip-sentiment-hover, $sentiment);\n    }\n  }\n  // dropdown hover colors\n  :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n    /* stylelint-disable-next-line */\n    background: map.get($pds-chip-sentiment-hover, $sentiment);\n  }\n}\n\n.pds-chip__dot {\n  border: var(--pine-border-width) solid transparent;\n  border-radius: var(--pine-border-radius-full);\n  display: inline-block;\n  height: var(--pine-dimension-2xs);\n  margin-inline-end: var(--pine-dimension-2xs);\n  width: var(--pine-dimension-2xs);\n}\n\n.pds-chip__label {\n  align-items: center;\n  display: flex;\n\n  pds-icon {\n    margin-inline-end: var(--pine-dimension-2xs);\n  }\n}\n\n.pds-chip__label, .pds-chip__button {\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n  padding: var(--pine-dimension-none);\n}\n\n.pds-chip__button {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: var(--pine-dimension-none);\n  border-radius: var(--pine-dimension-sm);\n  cursor: pointer;\n  display: flex;\n  padding: var(--pine-dimension-025) var(--pine-dimension-100);\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  pds-icon:first-child {\n    margin-inline-end: var(--pine-dimension-2xs);\n  }\n\n  pds-icon:last-child {\n    margin-inline-end: calc(var(--pine-dimension-025) * -1);\n    margin-inline-start: var(--pine-dimension-2xs);\n  }\n}\n\n.pds-chip__close {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pine-border-radius-full);\n  box-sizing: border-box;\n  height: var(--sizing-close);\n  margin-inline-end: calc(var(--pine-dimension-xs) * -1);\n  margin-inline-start: var(--pine-dimension-2xs);\n  padding: var(--sizing-close);\n  position: relative;\n  width: var(--sizing-close);\n\n  pds-icon {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n  }\n}\n\n// small\n\n:host(.pds-chip--sm) {\n  --sizing-close: var(--pine-dimension-100);\n  padding-block: var(--pine-dimension-025);\n  padding-inline: var(--pine-dimension-100);\n\n  .pds-chip__label, .pds-chip__button {\n    font: var(--pine-typography-body-sm-medium);\n    letter-spacing: var(--pine-letter-spacing);\n  }\n}\n\n:host(.pds-chip--sm.pds-chip--dropdown) {\n  padding: var(--pine-dimension-none);\n\n  .pds-chip__button {\n    padding: var(--pine-dimension-025) var(--pine-dimension-100);\n  }\n}\n\n:host(.pds-chip--sm.pds-chip--brand) {\n  .pds-chip__label {\n    padding: var(--pine-dimension-025) var(--pine-dimension-100);\n  }\n}\n\n// large\n\n:host(.pds-chip--lg) {\n  padding-block: var(--pine-dimension-025);\n  padding-inline: var(--pine-dimension-150);\n\n  .pds-chip__label, .pds-chip__button {\n    font-family: var(--pine-font-family-heading);\n    font-size: var(--pine-font-size-heading-6);\n    font-weight: var(--pine-font-weight-medium);\n    letter-spacing: var(--pine-letter-spacing-heading-6);\n  }\n}\n\n:host(.pds-chip--lg.pds-chip--dropdown) {\n  padding: var(--pine-dimension-none);\n\n  .pds-chip__button {\n    padding: var(--pine-dimension-025) var(--pine-dimension-150);\n  }\n}\n\n:host(.pds-chip--brand) {\n  /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n  background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);\n  border: 0;\n  padding: 1px;\n  position: relative;\n\n  .pds-chip__label {\n    /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n    background: rgba(255, 255, 255, 0.9);\n    border-radius: calc(var(--pine-dimension-sm) - 1px);\n    /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n    color: var(--pine-color-grey-900);\n    font-weight: var(--pine-font-weight-medium);\n    padding: var(--pine-dimension-025) var(--pine-dimension-100);\n    position: relative;\n    z-index: var(--pine-z-index-raised);\n\n    pds-icon {\n      margin-inline-end: var(--pine-dimension-2xs);\n    }\n  }\n\n  .pds-chip__button, .pds-chip__close {\n    /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */\n    color: var(--pine-color-grey-900);\n    font-weight: var(--pine-font-weight-medium);\n    position: relative;\n    z-index: var(--pine-z-index-raised);\n  }\n\n  .pds-chip__button {\n    pds-icon:first-child {\n      margin-inline-end: var(--pine-dimension-2xs);\n    }\n  }\n\n  // tag close hover colors\n  .pds-chip__close:hover {\n    /* stylelint-disable-next-line pine-design-system/no-hardcoded-colors */\n    background: rgba(255, 255, 255, 0.8);\n  }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport type { ChipSentimentType, ChipSizeType, ChipVariantType } from '@utils/types';\n\n/**\n * @slot (default) - The chip's label text.\n * @part button\n */\n\n@Component({\n  tag: 'pds-chip',\n  styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * Note: This prop is ignored when sentiment is 'brand'.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   * The name of the icon to display before the chip text.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Determines whether the chip should be displayed in a larger size. DEPRECATED.\n   * @defaultValue false\n   * @deprecated Use `size` prop instead. Set `size=\"lg\"` for the large variant.\n   */\n  @Prop() large = false;\n\n  /**\n   * Sets the size of the chip.\n   * @defaultValue 'md'\n   */\n  @Prop() size?: ChipSizeType;\n\n  /**\n   * Defines the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: ChipSentimentType = 'neutral';\n\n  /**\n   * Sets the style variant of the chip.\n   * Note: This prop is ignored when sentiment is 'brand'.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: ChipVariantType = 'text';\n\n  /**\n   * URL to navigate to when the remove button is clicked.\n   * When provided, renders the close button as a link instead of a button.\n   * Only applies to tag variant.\n   */\n  @Prop() removeUrl?: string;\n\n  /**\n   * HTTP method to use for the remove action.\n   * Adds data-method and data-turbo-method attributes for Rails/Turbo compatibility.\n   * Only applies when removeUrl is provided.\n   */\n  @Prop() removeHttpMethod?: 'get' | 'post' | 'put' | 'patch' | 'delete';\n\n  /**\n   * Specifies where to open the linked document when removeUrl is provided.\n   * Only applies when removeUrl is set.\n   */\n  @Prop() removeTarget?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Event emitted when the close button is clicked on a tag variant chip.\n   */\n  @Event() pdsTagCloseClick: EventEmitter<void>;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  };\n\n  private get effectiveSize(): ChipSizeType {\n    if (this.size != null) return this.size;\n    if (this.large) return 'lg';\n    return 'md';\n  }\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    const size = this.effectiveSize;\n    if (size && size !== 'md') {\n      classNames.push('pds-chip--' + size);\n    }\n\n    // For brand sentiment, always use text variant\n    const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;\n    if (effectiveVariant) {\n      classNames.push('pds-chip--' + effectiveVariant);\n    }\n\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private get effectiveVariant() {\n    // For brand sentiment, force text variant behavior\n    return this.sentiment === 'brand' ? 'text' : this.variant;\n  }\n\n  private get iconSize() {\n    switch (this.effectiveSize) {\n      case 'sm': return '10px';\n      case 'lg': return '14px';\n      default: return '12px';\n    }\n  }\n\n  private setChipContent() {\n    const isDropdown = this.effectiveVariant === 'dropdown';\n\n    // For brand sentiment, ignore dot prop\n    const showDot = this.sentiment === 'brand' ? false : this.dot;\n\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\" part=\"button\">\n        {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n        {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        <slot></slot>\n        <pds-icon icon={downSmall} size={this.iconSize} aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n        {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        <slot></slot>\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  private renderCloseButton() {\n    const CloseElement = this.removeUrl ? 'a' : 'button';\n\n    const closeAttributes = () => {\n      if (this.removeUrl) {\n        // Link attributes\n        const linkAttrs: any = {\n          class: 'pds-chip__close',\n          href: this.removeUrl,\n          'aria-label': 'Remove',\n        };\n\n        // Add target if specified\n        if (this.removeTarget) {\n          linkAttrs.target = this.removeTarget;\n        }\n\n        // Add HTTP method attributes if specified\n        if (this.removeHttpMethod) {\n          linkAttrs['data-method'] = this.removeHttpMethod;\n          linkAttrs['data-turbo-method'] = this.removeHttpMethod;\n        }\n\n        // Build rel attribute by collecting all required values\n        const relValues = [];\n\n        // Add noopener noreferrer if target is _blank\n        if (this.removeTarget === '_blank') {\n          relValues.push('noopener', 'noreferrer');\n        }\n\n        // Add nofollow for non-GET methods (best practice)\n        if (this.removeHttpMethod && this.removeHttpMethod !== 'get') {\n          relValues.push('nofollow');\n        }\n\n        // Set rel attribute if we have any values\n        if (relValues.length > 0) {\n          linkAttrs.rel = relValues.join(' ');\n        }\n\n        return linkAttrs;\n      }\n\n      // Button attributes\n      return {\n        class: 'pds-chip__close',\n        type: 'button',\n        'aria-label': 'Remove',\n      };\n    };\n\n    return (\n      <CloseElement {...closeAttributes()} onClick={this.handleCloseClick}>\n        <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n      </CloseElement>\n    );\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.effectiveVariant === 'tag' && this.renderCloseButton()}\n      </Host>\n    );\n  }\n}\n"],"version":3}