@pine-ds/core 3.21.1 → 3.22.0

package/dist/esm-es5/pds-avatar.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-avatar.entry.js","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\" 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"],"names":[],"mappings":"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"}
+{"version":3,"file":"pds-avatar.entry.js","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"],"names":[],"mappings":"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"}

package/dist/esm-es5/pds-chip.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host}from"./index-DHPhrb5T.js";import{d as downSmall,r as remove}from"./index-Bmf4Ow_8.js";var pdsChipTokensCss=":host{--pine-chip-color-accent:var(--pine-color-purple-100);--pine-chip-color-accent-hover:var(--pine-color-purple-300);--pine-chip-color-accent-dot:var(--pine-color-purple-600);--pine-chip-color-danger:var(--pine-color-red-100);--pine-chip-color-danger-hover:var(--pine-color-red-300);--pine-chip-color-danger-dot:var(--pine-color-red-600);--pine-chip-color-info:var(--pine-color-blue-100);--pine-chip-color-info-hover:var(--pine-color-blue-300);--pine-chip-color-info-dot:var(--pine-color-blue-600);--pine-chip-color-neutral:var(--pine-color-grey-100);--pine-chip-color-neutral-hover:var(--pine-color-grey-300);--pine-chip-color-neutral-dot:var(--pine-color-grey-600);--pine-chip-color-success:var(--pine-color-green-100);--pine-chip-color-success-hover:var(--pine-color-green-300);--pine-chip-color-success-dot:var(--pine-color-green-600);--pine-chip-color-warning:var(--pine-color-yellow-100);--pine-chip-color-warning-hover:var(--pine-color-yellow-300);--pine-chip-color-warning-dot:var(--pine-color-yellow-600)}";var pdsChipCss=":host{--sizing-close:var(--pine-dimension-125);-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pine-chip-color-accent-dot)}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-color-text-accent);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pine-chip-color-danger-dot)}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-color-text-danger);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pine-chip-color-info-dot)}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-color-text-info);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pine-chip-color-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pine-chip-color-success-dot)}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-color-text-success);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pine-chip-color-warning-dot)}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-color-text-warning);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown){padding:var(--pine-dimension-none)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-025) var(--pine-dimension-100)}.pds-chip__button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__button pds-icon:last-child{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{outline:var(--pine-outline-focus)}:host(.pds-chip--sm){--sizing-close:var(--pine-dimension-100);padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--sm) .pds-chip__label,:host(.pds-chip--sm) .pds-chip__button{font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--sm.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--sm.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--sm.pds-chip--brand) .pds-chip__label{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--lg){padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--lg) .pds-chip__label,:host(.pds-chip--lg) .pds-chip__button{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}:host(.pds-chip--lg.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--lg.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-150)}:host(.pds-chip--brand){background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;padding:1px;position:relative}:host(.pds-chip--brand) .pds-chip__label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-100);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__button,:host(.pds-chip--brand) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__close:hover{background:rgba(255, 255, 255, 0.8)}";var PdsChip=function(){function i(i){var n=this;registerInstance(this,i);this.pdsTagCloseClick=createEvent(this,"pdsTagCloseClick");this.dot=false;this.large=false;this.sentiment="neutral";this.variant="text";this.handleCloseClick=function(){n.pdsTagCloseClick.emit()}}Object.defineProperty(i.prototype,"effectiveSize",{get:function(){if(this.size!=null)return this.size;if(this.large)return"lg";return"md"},enumerable:false,configurable:true});i.prototype.classNames=function(){var i=["pds-chip"];var n=this.effectiveSize;if(n&&n!=="md"){i.push("pds-chip--"+n)}var e=this.sentiment==="brand"?"text":this.variant;if(e){i.push("pds-chip--"+e)}if(this.sentiment){i.push("pds-chip--"+this.sentiment)}return i.join(" ")};Object.defineProperty(i.prototype,"effectiveVariant",{get:function(){return this.sentiment==="brand"?"text":this.variant},enumerable:false,configurable:true});Object.defineProperty(i.prototype,"iconSize",{get:function(){switch(this.effectiveSize){case"sm":return"10px";case"lg":return"14px";default:return"12px"}},enumerable:false,configurable:true});i.prototype.setChipContent=function(){var i=this.effectiveVariant==="dropdown";var n=this.sentiment==="brand"?false:this.dot;var e=i?h("button",{class:"pds-chip__button",type:"button"},this.icon&&h("pds-icon",{icon:this.icon,size:this.iconSize,"aria-hidden":"true"}),n&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),h("slot",null),h("pds-icon",{icon:downSmall,size:this.iconSize,"aria-hidden":"true"})):h("span",{class:"pds-chip__label"},this.icon&&h("pds-icon",{icon:this.icon,size:this.iconSize,"aria-hidden":"true"}),n&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),h("slot",null));return e};i.prototype.renderCloseButton=function(){var i=this;var n=this.removeUrl?"a":"button";var e=function(){if(i.removeUrl){var n={class:"pds-chip__close",href:i.removeUrl,"aria-label":"Remove"};if(i.removeTarget){n.target=i.removeTarget}if(i.removeHttpMethod){n["data-method"]=i.removeHttpMethod;n["data-turbo-method"]=i.removeHttpMethod}var e=[];if(i.removeTarget==="_blank"){e.push("noopener","noreferrer")}if(i.removeHttpMethod&&i.removeHttpMethod!=="get"){e.push("nofollow")}if(e.length>0){n.rel=e.join(" ")}return n}return{class:"pds-chip__close",type:"button","aria-label":"Remove"}};return h(n,Object.assign({},e(),{onClick:this.handleCloseClick}),h("pds-icon",{icon:remove,size:this.iconSize}))};i.prototype.render=function(){return h(Host,{key:"fcd4828fabaeba300c35cd9a0b90701feefd6480",class:this.classNames(),id:this.componentId},this.setChipContent(),this.effectiveVariant==="tag"&&this.renderCloseButton())};return i}();PdsChip.style=pdsChipTokensCss+pdsChipCss;export{PdsChip as pds_chip};
+import{r as registerInstance,c as createEvent,h,H as Host}from"./index-DHPhrb5T.js";import{d as downSmall,r as remove}from"./index-Bmf4Ow_8.js";var pdsChipTokensCss=":host{--pine-chip-color-accent:var(--pine-color-purple-100);--pine-chip-color-accent-hover:var(--pine-color-purple-300);--pine-chip-color-accent-dot:var(--pine-color-purple-600);--pine-chip-color-danger:var(--pine-color-red-100);--pine-chip-color-danger-hover:var(--pine-color-red-300);--pine-chip-color-danger-dot:var(--pine-color-red-600);--pine-chip-color-info:var(--pine-color-blue-100);--pine-chip-color-info-hover:var(--pine-color-blue-300);--pine-chip-color-info-dot:var(--pine-color-blue-600);--pine-chip-color-neutral:var(--pine-color-grey-100);--pine-chip-color-neutral-hover:var(--pine-color-grey-300);--pine-chip-color-neutral-dot:var(--pine-color-grey-600);--pine-chip-color-success:var(--pine-color-green-100);--pine-chip-color-success-hover:var(--pine-color-green-300);--pine-chip-color-success-dot:var(--pine-color-green-600);--pine-chip-color-warning:var(--pine-color-yellow-100);--pine-chip-color-warning-hover:var(--pine-color-yellow-300);--pine-chip-color-warning-dot:var(--pine-color-yellow-600)}";var pdsChipCss=":host{--sizing-close:var(--pine-dimension-125);-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--accent){background:var(--pine-chip-color-accent);border:var(--pine-border-width) solid var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--pine-chip-color-accent-dot)}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button,:host(.pds-chip--accent) .pds-chip__close{color:var(--pine-color-text-accent);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--pine-chip-color-accent-hover)}:host(.pds-chip--danger){background:var(--pine-chip-color-danger);border:var(--pine-border-width) solid var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--pine-chip-color-danger-dot)}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button,:host(.pds-chip--danger) .pds-chip__close{color:var(--pine-color-text-danger);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--pine-chip-color-danger-hover)}:host(.pds-chip--info){background:var(--pine-chip-color-info);border:var(--pine-border-width) solid var(--pine-chip-color-info-hover)}:host(.pds-chip--info) .pds-chip__dot{background:var(--pine-chip-color-info-dot)}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button,:host(.pds-chip--info) .pds-chip__close{color:var(--pine-color-text-info);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--pine-chip-color-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--pine-chip-color-info-hover)}:host(.pds-chip--neutral){background:var(--pine-chip-color-neutral);border:var(--pine-border-width) solid var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--pine-chip-color-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button,:host(.pds-chip--neutral) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--pine-chip-color-neutral-hover)}:host(.pds-chip--success){background:var(--pine-chip-color-success);border:var(--pine-border-width) solid var(--pine-chip-color-success-hover)}:host(.pds-chip--success) .pds-chip__dot{background:var(--pine-chip-color-success-dot)}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button,:host(.pds-chip--success) .pds-chip__close{color:var(--pine-color-text-success);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--pine-chip-color-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--pine-chip-color-success-hover)}:host(.pds-chip--warning){background:var(--pine-chip-color-warning);border:var(--pine-border-width) solid var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--pine-chip-color-warning-dot)}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button,:host(.pds-chip--warning) .pds-chip__close{color:var(--pine-color-text-warning);font-weight:var(--pine-font-weight-medium)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--pine-chip-color-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--pine-chip-color-warning-hover)}.pds-chip__dot{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}.pds-chip__label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__label,.pds-chip__button{font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--dropdown){padding:var(--pine-dimension-none)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-dimension-sm);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-025) var(--pine-dimension-100)}.pds-chip__button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-chip__button pds-icon:last-child{-webkit-margin-end:calc(var(--pine-dimension-025) * -1);margin-inline-end:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;height:var(--sizing-close);-webkit-margin-end:calc(var(--pine-dimension-xs) * -1);margin-inline-end:calc(var(--pine-dimension-xs) * -1);-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{outline:var(--pine-outline-focus)}:host(.pds-chip--sm){--sizing-close:var(--pine-dimension-100);padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-100)}:host(.pds-chip--sm) .pds-chip__label,:host(.pds-chip--sm) .pds-chip__button{font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing)}:host(.pds-chip--sm.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--sm.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--sm.pds-chip--brand) .pds-chip__label{padding:var(--pine-dimension-025) var(--pine-dimension-100)}:host(.pds-chip--lg){padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150)}:host(.pds-chip--lg) .pds-chip__label,:host(.pds-chip--lg) .pds-chip__button{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}:host(.pds-chip--lg.pds-chip--dropdown){padding:var(--pine-dimension-none)}:host(.pds-chip--lg.pds-chip--dropdown) .pds-chip__button{padding:var(--pine-dimension-025) var(--pine-dimension-150)}:host(.pds-chip--brand){background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;padding:1px;position:relative}:host(.pds-chip--brand) .pds-chip__label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-100);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__label pds-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__button,:host(.pds-chip--brand) .pds-chip__close{color:var(--pine-color-grey-900);font-weight:var(--pine-font-weight-medium);position:relative;z-index:var(--pine-z-index-raised)}:host(.pds-chip--brand) .pds-chip__button pds-icon:first-child{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}:host(.pds-chip--brand) .pds-chip__close:hover{background:rgba(255, 255, 255, 0.8)}";var PdsChip=function(){function i(i){var n=this;registerInstance(this,i);this.pdsTagCloseClick=createEvent(this,"pdsTagCloseClick");this.dot=false;this.large=false;this.sentiment="neutral";this.variant="text";this.handleCloseClick=function(){n.pdsTagCloseClick.emit()}}Object.defineProperty(i.prototype,"effectiveSize",{get:function(){if(this.size!=null)return this.size;if(this.large)return"lg";return"md"},enumerable:false,configurable:true});i.prototype.classNames=function(){var i=["pds-chip"];var n=this.effectiveSize;if(n&&n!=="md"){i.push("pds-chip--"+n)}var e=this.sentiment==="brand"?"text":this.variant;if(e){i.push("pds-chip--"+e)}if(this.sentiment){i.push("pds-chip--"+this.sentiment)}return i.join(" ")};Object.defineProperty(i.prototype,"effectiveVariant",{get:function(){return this.sentiment==="brand"?"text":this.variant},enumerable:false,configurable:true});Object.defineProperty(i.prototype,"iconSize",{get:function(){switch(this.effectiveSize){case"sm":return"10px";case"lg":return"14px";default:return"12px"}},enumerable:false,configurable:true});i.prototype.setChipContent=function(){var i=this.effectiveVariant==="dropdown";var n=this.sentiment==="brand"?false:this.dot;var e=i?h("button",{class:"pds-chip__button",type:"button",part:"button"},this.icon&&h("pds-icon",{icon:this.icon,size:this.iconSize,"aria-hidden":"true"}),n&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),h("slot",null),h("pds-icon",{icon:downSmall,size:this.iconSize,"aria-hidden":"true"})):h("span",{class:"pds-chip__label"},this.icon&&h("pds-icon",{icon:this.icon,size:this.iconSize,"aria-hidden":"true"}),n&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),h("slot",null));return e};i.prototype.renderCloseButton=function(){var i=this;var n=this.removeUrl?"a":"button";var e=function(){if(i.removeUrl){var n={class:"pds-chip__close",href:i.removeUrl,"aria-label":"Remove"};if(i.removeTarget){n.target=i.removeTarget}if(i.removeHttpMethod){n["data-method"]=i.removeHttpMethod;n["data-turbo-method"]=i.removeHttpMethod}var e=[];if(i.removeTarget==="_blank"){e.push("noopener","noreferrer")}if(i.removeHttpMethod&&i.removeHttpMethod!=="get"){e.push("nofollow")}if(e.length>0){n.rel=e.join(" ")}return n}return{class:"pds-chip__close",type:"button","aria-label":"Remove"}};return h(n,Object.assign({},e(),{onClick:this.handleCloseClick}),h("pds-icon",{icon:remove,size:this.iconSize}))};i.prototype.render=function(){return h(Host,{key:"c6afa0a9aba7716fd7a7ee32d1c0993c30464b1e",class:this.classNames(),id:this.componentId},this.setChipContent(),this.effectiveVariant==="tag"&&this.renderCloseButton())};return i}();PdsChip.style=pdsChipTokensCss+pdsChipCss;export{PdsChip as pds_chip};
 //# sourceMappingURL=pds-chip.entry.js.map

package/dist/esm-es5/pds-chip.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-chip.entry.js","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\">\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"],"names":[],"mappings":"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"}
+{"version":3,"file":"pds-chip.entry.js","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"],"names":[],"mappings":"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"}

package/dist/esm-es5/pds-dropdown-menu-item.entry.js

@@ -1,2 +1,2 @@
-import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,a as getElement}from"./index-DHPhrb5T.js";var pdsDropdownMenuItemCss=":host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}";var PdsDropdownMenuItem=function(){function e(e){var n=this;registerInstance(this,e);this.pdsClick=createEvent(this,"pdsClick");this.destructive=false;this.disabled=false;this.external=false;this.hasFocus=false;this.handleFocus=function(){n.hasFocus=true};this.handleBlur=function(){n.hasFocus=false};this.handleKeyDown=function(e){if(!n.disabled&&e.key==="Enter"){if(!n.href){e.preventDefault()}n.handleClick()}}}e.prototype.clickItem=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.handleClick();return[2]}))}))};e.prototype.handleClick=function(){var e;var n=Array.from(this.host.parentNode.children).filter((function(e){return e.tagName.toLowerCase()==="pds-dropdown-menu-item"}));var t=n.indexOf(this.host);var o=((e=this.host.textContent)===null||e===void 0?void 0:e.trim())||"";this.pdsClick.emit({itemIndex:t,item:this.host,content:o})};e.prototype.renderElement=function(){if(this.href!==undefined){return h("pds-link",{download:this.download,href:this.disabled?null:this.href,external:this.external,target:this.target,class:{"pds-dropdown-menu-item__content":true,"has-focus":this.hasFocus},tabIndex:this.disabled?-1:0,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,"aria-disabled":this.disabled?"true":null},h("slot",null))}return h("button",{class:{"pds-dropdown-menu-item__content":true,"has-focus":this.hasFocus},tabIndex:this.disabled?-1:0,type:"button",onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,disabled:this.disabled,"aria-disabled":this.disabled?"true":null},h("slot",null))};e.prototype.render=function(){var e=this;return h(Host,{key:"cfe752ae18b068c88a0f4eee3293c3b0128e0ab1",id:this.componentId,class:{"is-disabled":this.disabled,destructive:!this.disabled&&this.destructive},onClick:function(){return!e.disabled&&e.handleClick()},role:"none",tabIndex:-1,"aria-disabled":this.disabled?"true":null},this.renderElement())};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsDropdownMenuItem.style=pdsDropdownMenuItemCss;export{PdsDropdownMenuItem as pds_dropdown_menu_item};
+import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,a as getElement}from"./index-DHPhrb5T.js";var pdsDropdownMenuItemCss=":host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}";var PdsDropdownMenuItem=function(){function e(e){var n=this;registerInstance(this,e);this.pdsClick=createEvent(this,"pdsClick");this.destructive=false;this.disabled=false;this.external=false;this.hasFocus=false;this.handleFocus=function(){n.hasFocus=true};this.handleBlur=function(){n.hasFocus=false};this.handleKeyDown=function(e){if(!n.disabled&&e.key==="Enter"){if(!n.href){e.preventDefault()}n.handleClick()}}}e.prototype.clickItem=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.handleClick();return[2]}))}))};e.prototype.handleClick=function(){var e;var n=Array.from(this.host.parentNode.children).filter((function(e){return e.tagName.toLowerCase()==="pds-dropdown-menu-item"}));var t=n.indexOf(this.host);var o=((e=this.host.textContent)===null||e===void 0?void 0:e.trim())||"";this.pdsClick.emit({itemIndex:t,item:this.host,content:o})};e.prototype.renderElement=function(){if(this.href!==undefined){return h("pds-link",{download:this.download,href:this.disabled?null:this.href,external:this.external,target:this.target,class:{"pds-dropdown-menu-item__content":true,"has-focus":this.hasFocus},tabIndex:this.disabled?-1:0,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,"aria-disabled":this.disabled?"true":null},h("slot",null))}return h("button",{class:{"pds-dropdown-menu-item__content":true,"has-focus":this.hasFocus},tabIndex:this.disabled?-1:0,type:"button",part:"button",onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,disabled:this.disabled,"aria-disabled":this.disabled?"true":null},h("slot",null))};e.prototype.render=function(){var e=this;return h(Host,{key:"eb3222203f1ab6b585b66a5449bc5facfe9875a9",id:this.componentId,class:{"is-disabled":this.disabled,destructive:!this.disabled&&this.destructive},onClick:function(){return!e.disabled&&e.handleClick()},role:"none",tabIndex:-1,"aria-disabled":this.disabled?"true":null},this.renderElement())};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();PdsDropdownMenuItem.style=pdsDropdownMenuItemCss;export{PdsDropdownMenuItem as pds_dropdown_menu_item};
 //# sourceMappingURL=pds-dropdown-menu-item.entry.js.map

package/dist/esm-es5/pds-dropdown-menu-item.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-dropdown-menu-item.entry.js","sources":["src/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.scss?tag=pds-dropdown-menu-item&encapsulation=shadow","src/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.tsx"],"sourcesContent":[":host {\n  cursor: pointer;\n  display: flex;\n  width: 100%; /* Ensure the host takes full width */\n}\n\n/* Make the disabled styles more specific and add !important to ensure they apply */\n:host(.is-disabled) {\n  cursor: not-allowed !important;\n  opacity: 0.5 !important;\n\n  .pds-dropdown-menu-item__content {\n    cursor: not-allowed !important;\n    pointer-events: none !important;\n  }\n}\n\n.pds-dropdown-menu-item__content {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pine-dimension-xs);\n  color: var(--pine-color-text);\n  display: flex;\n  flex-grow: 1; /* Make it grow to fill available space */\n  font: var(--pine-typography-body-medium);\n  gap: var(--pine-dimension-xs);\n  margin: calc(var(--pine-border-width) + 2px);\n  padding: var(--pine-dimension-xs);\n  text-align: start; /* Ensure text aligns properly */\n  width: 100%; /* Ensure full width */\n\n  &:hover {\n    background-color: var(--pine-color-background-muted);\n    color: var(--pine-color-text-hover);\n  }\n\n  /* Focus styles applied via class + browser focus */\n  &:focus,\n  &:focus-visible,\n  &.has-focus {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n}\n\n:host(.destructive) {\n  .pds-dropdown-menu-item__content {\n    // Set context variables so pds-link's shadow DOM picks up the destructive colors\n    --pds-context-link-color: var(--pine-color-danger);\n    --pds-context-link-color-hover: var(--pine-color-danger-hover);\n\n    align-items: center;\n    color: var(--pine-color-danger);\n\n    &:hover {\n      background-color: var(--pine-color-danger-disabled);\n      color: var(--pine-color-danger-hover);\n    }\n\n    &:focus,\n    &:focus-visible,\n    &.has-focus {\n      background-color: var(--pine-color-danger-disabled);\n      outline: var(--pine-outline-focus-danger);\n      outline-offset: var(--pine-border-width);\n    }\n  }\n}\n\n/* Remove outline on contained links using the custom property */\npds-link::part(link):focus,\npds-link::part(link):focus-visible {\n  box-shadow: none;\n  outline: none;\n}\n\npds-link::part(link) {\n  align-items: center;\n  display: flex;\n  gap: var(--pine-dimension-xs);\n  margin: calc(var(--pine-dimension-xs) * -1);\n  padding: var(--pine-dimension-xs);\n  text-decoration: none;\n  width: calc(100% + var(--pine-dimension-xs) * 2);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\n\n@Component({\n  tag: 'pds-dropdown-menu-item',\n  styleUrl: 'pds-dropdown-menu-item.scss',\n  shadow: true,\n})\nexport class PdsDropdownMenuItem implements BasePdsProps {\n  @Element() host: HTMLPdsDropdownMenuItemElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * It determines whether or not the dropdown-item is destructive.\n   * @defaultValue false\n   */\n  @Prop() destructive: boolean = false;\n\n  /**\n   * It determines whether or not the dropdown-item is disabled.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it.\n   * It can be used without a value to download with the default filename,\n   * or with a string value to suggest a specific filename for the download.\n   * Only applies when href is set.\n   */\n  @Prop() download?: string;\n\n  /**\n   *  If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Determines whether the link should open in a new tab and display an external icon.\n   * This is a simpler alternative to using `target=\"_blank\"` for the common case.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) external: boolean = false;\n\n  /**\n   * Specifies where to open the linked document when href is provided.\n   * Takes precedence over the `external` prop if both are set.\n   * Only applies when href is set.\n   * @defaultValue undefined\n   */\n  @Prop({ reflect: true }) target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Emitted when the dropdown-item is clicked.\n   *\n   */\n  @Event() pdsClick: EventEmitter<{itemIndex: number, item: HTMLPdsDropdownMenuItemElement, content: string}>;\n\n  /**\n   * Trigger the click event\n   */\n  @Method()\n  async clickItem() {\n    this.handleClick();\n  };\n\n\n  private handleClick() {\n    // Filter only pds-dropdown-menu-item elements and find the index of the current item\n    const menuItems = Array.from(this.host.parentNode.children).filter(\n      (child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item'\n    );\n    const itemIndex = menuItems.indexOf(this.host);\n\n    // Get the text content from the slotted content\n    const content = this.host.textContent?.trim() || '';\n\n    this.pdsClick.emit({\n      itemIndex,\n      item: this.host,\n      content\n    });\n  }\n\n  @State() hasFocus: boolean = false;\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n  }\n\n  private renderElement() {\n    if (this.href !== undefined) {\n      return (\n        <pds-link\n          download={this.download}\n          href={this.disabled ? null : this.href}\n          external={this.external}\n          target={this.target}\n          class={{\n            'pds-dropdown-menu-item__content': true,\n            'has-focus': this.hasFocus\n          }}\n          tabIndex={this.disabled ? -1 : 0}\n          onKeyDown={this.handleKeyDown}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          <slot></slot>\n        </pds-link>\n      );\n    }\n\n    return (\n      <button\n        class={{\n          'pds-dropdown-menu-item__content': true,\n          'has-focus': this.hasFocus\n        }}\n        tabIndex={this.disabled ? -1 : 0}\n        type=\"button\"\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        disabled={this.disabled}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Handle keyboard events\n    if (!this.disabled && (event.key === 'Enter')) {\n      // Only prevent default for button elements or Space key\n      // For links with Enter key, we want the default navigation behavior\n      if (!this.href) {\n        event.preventDefault();\n      }\n      this.handleClick();\n    }\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}\n        class={{ 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }}\n        onClick={() => !this.disabled && this.handleClick()}\n        role=\"none\"\n        tabIndex={-1}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n          {this.renderElement()}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pds-dropdown-menu-item.entry.js","sources":["src/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.scss?tag=pds-dropdown-menu-item&encapsulation=shadow","src/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.tsx"],"sourcesContent":[":host {\n  cursor: pointer;\n  display: flex;\n  width: 100%; /* Ensure the host takes full width */\n}\n\n/* Make the disabled styles more specific and add !important to ensure they apply */\n:host(.is-disabled) {\n  cursor: not-allowed !important;\n  opacity: 0.5 !important;\n\n  .pds-dropdown-menu-item__content {\n    cursor: not-allowed !important;\n    pointer-events: none !important;\n  }\n}\n\n.pds-dropdown-menu-item__content {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pine-dimension-xs);\n  color: var(--pine-color-text);\n  display: flex;\n  flex-grow: 1; /* Make it grow to fill available space */\n  font: var(--pine-typography-body-medium);\n  gap: var(--pine-dimension-xs);\n  margin: calc(var(--pine-border-width) + 2px);\n  padding: var(--pine-dimension-xs);\n  text-align: start; /* Ensure text aligns properly */\n  width: 100%; /* Ensure full width */\n\n  &:hover {\n    background-color: var(--pine-color-background-muted);\n    color: var(--pine-color-text-hover);\n  }\n\n  /* Focus styles applied via class + browser focus */\n  &:focus,\n  &:focus-visible,\n  &.has-focus {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n}\n\n:host(.destructive) {\n  .pds-dropdown-menu-item__content {\n    // Set context variables so pds-link's shadow DOM picks up the destructive colors\n    --pds-context-link-color: var(--pine-color-danger);\n    --pds-context-link-color-hover: var(--pine-color-danger-hover);\n\n    align-items: center;\n    color: var(--pine-color-danger);\n\n    &:hover {\n      background-color: var(--pine-color-danger-disabled);\n      color: var(--pine-color-danger-hover);\n    }\n\n    &:focus,\n    &:focus-visible,\n    &.has-focus {\n      background-color: var(--pine-color-danger-disabled);\n      outline: var(--pine-outline-focus-danger);\n      outline-offset: var(--pine-border-width);\n    }\n  }\n}\n\n/* Remove outline on contained links using the custom property */\npds-link::part(link):focus,\npds-link::part(link):focus-visible {\n  box-shadow: none;\n  outline: none;\n}\n\npds-link::part(link) {\n  align-items: center;\n  display: flex;\n  gap: var(--pine-dimension-xs);\n  margin: calc(var(--pine-dimension-xs) * -1);\n  padding: var(--pine-dimension-xs);\n  text-decoration: none;\n  width: calc(100% + var(--pine-dimension-xs) * 2);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\n\n@Component({\n  tag: 'pds-dropdown-menu-item',\n  styleUrl: 'pds-dropdown-menu-item.scss',\n  shadow: true,\n})\nexport class PdsDropdownMenuItem implements BasePdsProps {\n  @Element() host: HTMLPdsDropdownMenuItemElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * It determines whether or not the dropdown-item is destructive.\n   * @defaultValue false\n   */\n  @Prop() destructive: boolean = false;\n\n  /**\n   * It determines whether or not the dropdown-item is disabled.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it.\n   * It can be used without a value to download with the default filename,\n   * or with a string value to suggest a specific filename for the download.\n   * Only applies when href is set.\n   */\n  @Prop() download?: string;\n\n  /**\n   *  If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Determines whether the link should open in a new tab and display an external icon.\n   * This is a simpler alternative to using `target=\"_blank\"` for the common case.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) external: boolean = false;\n\n  /**\n   * Specifies where to open the linked document when href is provided.\n   * Takes precedence over the `external` prop if both are set.\n   * Only applies when href is set.\n   * @defaultValue undefined\n   */\n  @Prop({ reflect: true }) target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Emitted when the dropdown-item is clicked.\n   *\n   */\n  @Event() pdsClick: EventEmitter<{itemIndex: number, item: HTMLPdsDropdownMenuItemElement, content: string}>;\n\n  /**\n   * Trigger the click event\n   */\n  @Method()\n  async clickItem() {\n    this.handleClick();\n  };\n\n\n  private handleClick() {\n    // Filter only pds-dropdown-menu-item elements and find the index of the current item\n    const menuItems = Array.from(this.host.parentNode.children).filter(\n      (child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item'\n    );\n    const itemIndex = menuItems.indexOf(this.host);\n\n    // Get the text content from the slotted content\n    const content = this.host.textContent?.trim() || '';\n\n    this.pdsClick.emit({\n      itemIndex,\n      item: this.host,\n      content\n    });\n  }\n\n  @State() hasFocus: boolean = false;\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n  }\n\n  private renderElement() {\n    if (this.href !== undefined) {\n      return (\n        <pds-link\n          download={this.download}\n          href={this.disabled ? null : this.href}\n          external={this.external}\n          target={this.target}\n          class={{\n            'pds-dropdown-menu-item__content': true,\n            'has-focus': this.hasFocus\n          }}\n          tabIndex={this.disabled ? -1 : 0}\n          onKeyDown={this.handleKeyDown}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          <slot></slot>\n        </pds-link>\n      );\n    }\n\n    return (\n      <button\n        class={{\n          'pds-dropdown-menu-item__content': true,\n          'has-focus': this.hasFocus\n        }}\n        tabIndex={this.disabled ? -1 : 0}\n        type=\"button\"\n        part=\"button\"\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        disabled={this.disabled}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Handle keyboard events\n    if (!this.disabled && (event.key === 'Enter')) {\n      // Only prevent default for button elements or Space key\n      // For links with Enter key, we want the default navigation behavior\n      if (!this.href) {\n        event.preventDefault();\n      }\n      this.handleClick();\n    }\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}\n        class={{ 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }}\n        onClick={() => !this.disabled && this.handleClick()}\n        role=\"none\"\n        tabIndex={-1}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n          {this.renderElement()}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,sBAAsB,GAAG,soEAAsoE;;MCQxpE,mBAAmB,GAAA,MAAA;AALhC,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAaE;;;AAGG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAEpC;;;AAGG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAgBlD;;;;AAIG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AA0CzC,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAE1B,QAAA,IAAW,CAAA,WAAA,GAAG,MAAK;AACzB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACtB,SAAC;AAEO,QAAA,IAAU,CAAA,UAAA,GAAG,MAAK;AACxB,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACvB,SAAC;AA6CO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAoB,KAAI;;AAE/C,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,KAAK,KAAK,CAAC,GAAG,KAAK,OAAO,CAAC,EAAE;;;AAG7C,gBAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;oBACd,KAAK,CAAC,cAAc,EAAE;;gBAExB,IAAI,CAAC,WAAW,EAAE;;AAEtB,SAAC;AAeF;AAxGC;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;QACb,IAAI,CAAC,WAAW,EAAE;;;IAIZ,WAAW,GAAA;;;AAEjB,QAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,MAAM,CAChE,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,wBAAwB,CACpE;QACD,MAAM,SAAS,GAAG,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;AAG9C,QAAA,MAAM,OAAO,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,EAAE,KAAI,EAAE;AAEnD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;YACjB,SAAS;YACT,IAAI,EAAE,IAAI,CAAC,IAAI;YACf;AACD,SAAA,CAAC;;IAaI,aAAa,GAAA;AACnB,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;AAC3B,YAAA,QACE,CACE,CAAA,UAAA,EAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE;AACL,oBAAA,iCAAiC,EAAE,IAAI;oBACvC,WAAW,EAAE,IAAI,CAAC;iBACnB,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,eAAA,EACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAA,EAE5C,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACJ;;AAIf,QAAA,QACE,CACE,CAAA,QAAA,EAAA,EAAA,KAAK,EAAE;AACL,gBAAA,iCAAiC,EAAE,IAAI;gBACvC,WAAW,EAAE,IAAI,CAAC;AACnB,aAAA,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,eAAA,EACR,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAA,EAE5C,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACN;;IAgBb,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EACxB,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,aAAa,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE,EAC1F,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE,EACnD,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,EAAE,EAAA,eAAA,EACG,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAAA,EAEzC,IAAI,CAAC,aAAa,EAAE,CAClB;;;;;;;;"}

package/dist/esm-es5/pds-input.entry.js

@@ -1,2 +1,2 @@
-import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,a as getElement}from"./index-DHPhrb5T.js";import{a as assignDescription,m as messageId}from"./form-CN-lL5QG.js";import{i as inheritAriaAttributes}from"./attributes-C0M1gTKv.js";import{d as debounceEvent}from"./utils-tJa4KYNO.js";import{b as danger}from"./index-Bmf4Ow_8.js";var pdsInputTokensCss=":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";var labelCss=":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";var pdsInputCss=":host{--pds-input-background:var(--pine-color-background-container);--pds-input-border-color:var(--pine-color-border);--pds-input-border-color-hover:var(--pine-color-border-hover);--pds-input-border-color-disabled:var(--pine-color-border-disabled);--pds-input-border-radius:var(--pine-dimension-125);--pds-input-border-width:var(--pine-border-width-thin);--pds-input-padding-x:var(--pine-dimension-150);--pds-input-padding-y:calc(var(--pine-dimension-xs) - var(--pine-border-width));--pds-input-font:var(--pine-typography-body);--pds-input-text-color:var(--pine-color-text-strong);--pds-input-placeholder-color:var(--pine-color-text-placeholder);--pds-input-icon-color:var(--pine-color-text-secondary);--pds-input-disabled-background:var(--pine-color-background-container-disabled);--pds-input-disabled-text-color:var(--pine-color-text-disabled);--pds-input-error-color:var(--pine-color-text-message-danger);--pds-input-error-background:var(--pine-input-color-background-danger);--pds-input-error-border:var(--pine-color-border-danger);--pds-input-error-border-hover:var(--pine-color-border-danger-hover);--pds-input-addon-background:var(--pine-color-background-subtle);--pds-input-addon-color:var(--pine-color-text-secondary);--pds-input-field-min-height:var(--pine-dimension-450);--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host pds-select::part(select){background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host::part(prefix),:host::part(suffix){-ms-flex-align:center;align-items:center;color:var(--pine-color-text-label-readonly);display:-ms-flexbox;display:flex;height:100%;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);white-space:nowrap;z-index:var(--pine-z-index-raised)}:host::part(prefix){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius);left:var(--pds-input-padding-x)}:host::part(suffix){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius);right:var(--pds-input-padding-x)}:host::part(prepend),:host::part(append){-ms-flex-align:center;align-items:center;background-color:var(--pds-input-addon-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);color:var(--pds-input-addon-color);display:-ms-flexbox;display:flex;overflow:visible}:host::part(prepend){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius)}:host::part(append){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius)}:host([has-prepend]) ::slotted(pds-button[slot=prepend]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-end:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pds-input-border-radius);--pds-button-border-radius-end-start:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-append]) ::slotted(pds-button[slot=append]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-start:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pds-input-border-radius);--pds-button-border-radius-end-end:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-prepend]) ::slotted(pds-select[slot=prepend]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-end:var(--pine-dimension-none);--pds-select-border-radius-start-end:var(--pine-dimension-none);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([has-append]) ::slotted(pds-select[slot=append]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-start:var(--pine-dimension-none);--pds-select-border-radius-start-start:var(--pine-dimension-none);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([aria-readonly=true]) input{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}:host([disabled=true])::part(prepend),:host([disabled=true])::part(append){background-color:var(--pds-input-disabled-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color-disabled)}:host([full-width=true]){width:100%}:host([invalid=true])::part(prepend),:host([invalid=true])::part(append){background-color:var(--pds-input-error-background);border:var(--pds-input-border-width) solid var(--pds-input-error-border)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])){--pds-input-background:var(--pine-color-accent-disabled);--pds-input-border-color:var(--pine-color-accent);--pds-input-border-color-hover:var(--pine-color-accent-hover);--pds-input-text-color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(prefix),:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(suffix){color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])) .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring)}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-input__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label{color:var(--pine-color-text-strong);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label-wrapper .pds-input__label{-webkit-margin-after:0;margin-block-end:0}.pds-input__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-input__field-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-input__field-wrapper.has-prefix .pds-input__field{-webkit-padding-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));padding-inline-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em))}.pds-input__field-wrapper.has-suffix .pds-input__field{-webkit-padding-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));padding-inline-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em))}.pds-input__field-wrapper.has-prepend .pds-input__field{border-end-start-radius:var(--pine-dimension-none);border-start-start-radius:var(--pine-dimension-none)}.pds-input__field-wrapper.has-append .pds-input__field{border-end-end-radius:var(--pine-dimension-none);border-start-end-radius:var(--pine-dimension-none)}.pds-input__field{background:var(--pds-input-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);border-radius:var(--pds-input-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-input-text-color);-ms-flex:1;flex:1;font:var(--pds-input-font);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-input-field-min-height);min-width:var(--pine-dimension-none);padding:var(--pds-input-padding-y) var(--pds-input-padding-x);-webkit-transition:border-color 0.2s ease;transition:border-color 0.2s ease;width:100%}.pds-input__field:hover:not(:disabled){border-color:var(--pds-input-border-color-hover)}.pds-input__field:disabled{background:var(--pds-input-disabled-background);border-color:var(--pine-color-border-disabled);color:var(--pds-input-disabled-text-color);cursor:not-allowed}.pds-input__field:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.has-error .pds-input__field:hover:not(:disabled){border-color:var(--pds-input-error-border-hover)}:host-context([data-theme=dark]) .has-error .pds-input__field:hover:not(:disabled){border-color:var(--pine-color-red-950)}.pds-input__field:focus-visible:not(.has-error){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width);position:relative;z-index:1}:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error),:host([has-append]) .pds-input__field:focus-visible:not(.has-error),:host([has-prefix]) .pds-input__field:focus-visible:not(.has-error),:host([has-suffix]) .pds-input__field:focus-visible:not(.has-error){outline-offset:var(--pine-dimension-none)}.pds-input__field::-webkit-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-moz-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field:-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::placeholder{color:var(--pds-input-placeholder-color)}.has-error .pds-input__field{background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host-context([data-theme=dark]) .has-error .pds-input__field{background-color:var(--pine-color-red-950)}.has-error .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring-danger);position:relative;z-index:1}.pds-input__error-message,.pds-input__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:var(--pine-dimension-none);margin-block-end:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-input__error-message{color:var(--pds-input-error-color);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-input__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-input__field::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;background-color:var(--pds-input-placeholder-color);cursor:pointer;height:var(--pine-dimension-sm);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");-webkit-mask-size:contain;mask-size:contain;width:var(--pine-dimension-sm)}";var PdsInput=function(){function e(e){var r=this;registerInstance(this,e);this.pdsBlur=createEvent(this,"pdsBlur");this.pdsChange=createEvent(this,"pdsChange");this.pdsFocus=createEvent(this,"pdsFocus");this.pdsInput=createEvent(this,"pdsInput");this.pdsKeyDown=createEvent(this,"pdsKeyDown");this.inheritedAttributes={};this.isComposing=false;this.hasPrefix=false;this.hasSuffix=false;this.hasPrepend=false;this.hasAppend=false;this.hasAction=false;this.type="text";this.value="";this.hasFocus=false;this.onInputEvent=function(e){var i=e.target;if(i){r.value=i.value||""}r.emitInputChange(e)};this.onChangeEvent=function(e){r.emitValueChange(e)};this.onBlurEvent=function(e){r.hasFocus=false;if(r.focusedValue!==r.value){r.emitValueChange(e)}r.pdsBlur.emit(e)};this.onFocusEvent=function(e){r.hasFocus=true;r.focusedValue=r.value;r.pdsFocus.emit(e)};this.onCompositionStart=function(){r.isComposing=true};this.onCompositionEnd=function(){r.isComposing=false};this.onKeyDownEvent=function(e){r.pdsKeyDown.emit(e)}}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.nativeInput){this.nativeInput.focus()}return[2]}))}))};e.prototype.updateAddonWidths=function(){var e=this;requestAnimationFrame((function(){if(e.prefixEl){var r=e.prefixEl.offsetWidth;e.el.style.setProperty("--prefix-width","".concat(r,"px"))}if(e.suffixEl){var i=e.suffixEl.offsetWidth;e.el.style.setProperty("--suffix-width","".concat(i,"px"))}}))};e.prototype.renderPrefix=function(){var e=this;var r=this.el.querySelector('[slot="prefix"]')!==null;if(r){return h("div",{class:"pds-input__prefix",part:"prefix",ref:function(r){return e.prefixEl=r}},h("slot",{name:"prefix",onSlotchange:function(){return e.updateAddonWidths()}}))}return null};e.prototype.renderSuffix=function(){var e=this;var r=this.el.querySelector('[slot="suffix"]')!==null;if(r){return h("div",{class:"pds-input__suffix",part:"suffix",ref:function(r){return e.suffixEl=r}},h("slot",{name:"suffix",onSlotchange:function(){return e.updateAddonWidths()}}))}return null};e.prototype.renderPrepend=function(){var e=this.el.querySelector('[slot="prepend"]')!==null;if(e){return h("div",{class:"pds-input__prepend",part:"prepend"},h("slot",{name:"prepend"}))}return null};e.prototype.renderAppend=function(){var e=this.el.querySelector('[slot="append"]')!==null;if(e){return h("div",{class:"pds-input__append",part:"append"},h("slot",{name:"append"}))}return null};e.prototype.renderAction=function(){var e=this.el.querySelector('[slot="action"]')!==null;if(e){return h("div",{class:"pds-input__action",part:"action"},h("slot",{name:"action"}))}return null};e.prototype.componentWillLoad=function(){this.inheritedAttributes=Object.assign({},inheritAriaAttributes(this.el));this.hasPrefix=this.el.querySelector('[slot="prefix"]')!==null;this.hasSuffix=this.el.querySelector('[slot="suffix"]')!==null;this.hasPrepend=this.el.querySelector('[slot="prepend"]')!==null;this.hasAppend=this.el.querySelector('[slot="append"]')!==null;this.hasAction=this.el.querySelector('[slot="action"]')!==null;this.originalPdsInput=this.pdsInput};e.prototype.connectedCallback=function(){if(this.el.attachInternals&&!this.internals){this.internals=this.el.attachInternals()}};e.prototype.componentDidLoad=function(){this.debounceChanged();this.updateAddonWidths();this.updateFormValue()};e.prototype.componentDidUpdate=function(){this.updateAddonWidths()};e.prototype.debounceChanged=function(){var e=this,r=e.pdsInput,i=e.debounce,n=e.originalPdsInput;this.pdsInput=i===undefined?n!==null&&n!==void 0?n:r:debounceEvent(r,i)};e.prototype.valueChanged=function(){var e=this.nativeInput;var r=this.getValue();if(e&&e.value!==r&&!this.isComposing){e.value=r}this.updateFormValue()};e.prototype.getValue=function(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()};e.prototype.emitValueChange=function(e){var r=this.value;var i=r==null?r:r.toString();this.focusedValue=i;this.pdsChange.emit({value:i,event:e})};e.prototype.emitInputChange=function(e){var r=this.value;var i=r==null?r:r.toString();this.pdsInput.emit({value:i,event:e})};e.prototype.updateFormValue=function(){if(this.internals&&this.internals.setFormValue){var e=this.getValue();this.internals.setFormValue(e||null);if(this.nativeInput&&this.internals&&this.internals.setValidity){this.internals.setValidity(this.nativeInput.validity,this.nativeInput.validationMessage,this.nativeInput)}}};e.prototype.formResetCallback=function(){this.value="";this.updateFormValue()};e.prototype.formDisabledCallback=function(e){this.disabled=e};e.prototype.formStateRestoreCallback=function(e){if(typeof e==="string"){this.value=e}else if(e instanceof FormData&&this.name){var r=e.get(this.name);if(typeof r==="string"){this.value=r}}};e.prototype.render=function(){var e=this;var r=this,i=r.componentId,n=r.disabled,t=r.errorMessage,o=r.helperMessage,s=r.invalid,d=s===void 0?false:s,a=r.label;var p=this.getValue();var l={"pds-input__field-wrapper":true,"has-focus":this.hasFocus,"has-error":d||!!t,"is-disabled":n,"has-prefix":this.hasPrefix,"has-suffix":this.hasSuffix,"has-prepend":this.hasPrepend,"has-append":this.hasAppend};return h(Host,{key:"ff25f2310e8d1755534fe3f27b391447d6014f76","aria-disabled":this.disabled?"true":null,"aria-readonly":this.readonly?"true":null,"has-prefix":this.hasPrefix?"true":null,"has-suffix":this.hasSuffix?"true":null,"has-prepend":this.hasPrepend?"true":null,"has-append":this.hasAppend?"true":null,"has-action":this.hasAction&&!this.hideLabel?"true":null,"full-width":this.fullWidth?"true":null},h("div",{key:"e337c4a828eb7641a41caffec2508fa9b12a2eeb",class:"pds-input"},a&&h("div",{key:"8df0800a08156e1755ae7460ad7ddd51a1301f27",class:"pds-input__label-wrapper"},h("label",{key:"ed2978d0c9b841bfa8f929ab7072461b231ab5b2",htmlFor:i,class:"pds-input__label"},h("span",{key:"23ab3abd0ecff326110cbde065d3a3cb733ec832",class:this.hideLabel?"visually-hidden":""},a,this.required&&h("span",{key:"1bdafb028b48e37c9999db0c8f2d1718f8566e05",class:"pds-input__required-indicator"}," *"))),!this.hideLabel&&this.renderAction()),h("div",{key:"e06ba19e8d40271345e27f791efb79817cc723f7",class:l},this.renderPrepend(),this.renderPrefix(),h("input",Object.assign({key:"d7a2d70a03130a431b527f5bf75888d1db55bd5e",ref:function(r){return e.nativeInput=r},class:"pds-input__field","aria-describedby":assignDescription(i,d,o),"aria-invalid":d?"true":undefined,autocomplete:this.autocomplete,disabled:n,id:i,max:this.max,maxlength:this.maxlength,min:this.min,minlength:this.minlength,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,step:this.step,type:this.type,value:p,onInput:this.onInputEvent,onChange:this.onChangeEvent,onBlur:this.onBlurEvent,onFocus:this.onFocusEvent,onKeyDown:this.onKeyDownEvent,onCompositionstart:this.onCompositionStart,onCompositionend:this.onCompositionEnd},this.inheritedAttributes)),this.renderSuffix(),this.renderAppend()),o&&h("p",{key:"d0f58791f013578fc34f36711a95b4f2e655bcda",class:"pds-input__helper-message",id:messageId(i,"helper")},o),t&&h("p",{key:"b511338e9c05cfb4c9363a9227c8e208b9f645e1",class:"pds-input__error-message",id:messageId(i,"error")},h("pds-icon",{key:"4eaaf16d77e23486aad12369919cd4e03768ff3a",icon:danger,size:"small"}),t)))};Object.defineProperty(e,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{debounce:["debounceChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return e}();PdsInput.style=pdsInputTokensCss+(labelCss+pdsInputCss);export{PdsInput as pds_input};
+import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host,a as getElement}from"./index-DHPhrb5T.js";import{a as assignDescription,m as messageId}from"./form-CN-lL5QG.js";import{i as inheritAriaAttributes}from"./attributes-C0M1gTKv.js";import{d as debounceEvent}from"./utils-tJa4KYNO.js";import{b as danger}from"./index-Bmf4Ow_8.js";var pdsInputTokensCss=":host{--pine-input-color-background-danger:var(--pine-color-red-050)}";var labelCss=":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";var pdsInputCss=":host{--pds-input-background:var(--pine-color-background-container);--pds-input-border-color:var(--pine-color-border);--pds-input-border-color-hover:var(--pine-color-border-hover);--pds-input-border-color-disabled:var(--pine-color-border-disabled);--pds-input-border-radius:var(--pine-dimension-125);--pds-input-border-width:var(--pine-border-width-thin);--pds-input-padding-x:var(--pine-dimension-150);--pds-input-padding-y:calc(var(--pine-dimension-xs) - var(--pine-border-width));--pds-input-font:var(--pine-typography-body);--pds-input-text-color:var(--pine-color-text-strong);--pds-input-placeholder-color:var(--pine-color-text-placeholder);--pds-input-icon-color:var(--pine-color-text-secondary);--pds-input-disabled-background:var(--pine-color-background-container-disabled);--pds-input-disabled-text-color:var(--pine-color-text-disabled);--pds-input-error-color:var(--pine-color-text-message-danger);--pds-input-error-background:var(--pine-input-color-background-danger);--pds-input-error-border:var(--pine-color-border-danger);--pds-input-error-border-hover:var(--pine-color-border-danger-hover);--pds-input-addon-background:var(--pine-color-background-subtle);--pds-input-addon-color:var(--pine-color-text-secondary);--pds-input-field-min-height:var(--pine-dimension-450);--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);--box-shadow-focus-error:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);display:inline}:host pds-select::part(select){background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host::part(prefix),:host::part(suffix){-ms-flex-align:center;align-items:center;color:var(--pine-color-text-label-readonly);display:-ms-flexbox;display:flex;height:100%;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);white-space:nowrap;z-index:var(--pine-z-index-raised)}:host::part(prefix){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius);left:var(--pds-input-padding-x)}:host::part(suffix){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius);right:var(--pds-input-padding-x)}:host::part(prepend),:host::part(append){-ms-flex-align:center;align-items:center;background-color:var(--pds-input-addon-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);color:var(--pds-input-addon-color);display:-ms-flexbox;display:flex;overflow:visible}:host::part(prepend){border-end-start-radius:var(--pds-input-border-radius);-webkit-border-end:var(--pine-border-width-none);border-inline-end:var(--pine-border-width-none);border-start-start-radius:var(--pds-input-border-radius)}:host::part(append){border-end-end-radius:var(--pds-input-border-radius);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);border-start-end-radius:var(--pds-input-border-radius)}:host([has-prepend]) ::slotted(pds-button[slot=prepend]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-end:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pds-input-border-radius);--pds-button-border-radius-end-start:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-append]) ::slotted(pds-button[slot=append]){--pds-button-background:var(--pds-input-addon-background);--pds-button-border:var(--pine-border-width-none);--pds-button-border-radius:var(--pine-dimension-none);--pds-button-border-radius-end-start:var(--pine-dimension-none);--pds-button-border-radius-start-start:var(--pine-dimension-none);--pds-button-border-radius-start-end:var(--pds-input-border-radius);--pds-button-border-radius-end-end:var(--pds-input-border-radius);--pds-button-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));--pds-button-box-shadow-focus:0 0 0 3px var(--pine-color-focus-ring);--pds-button-outline-focus:none}:host([has-prepend]) ::slotted(pds-select[slot=prepend]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-end:var(--pine-dimension-none);--pds-select-border-radius-start-end:var(--pine-dimension-none);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([has-append]) ::slotted(pds-select[slot=append]){--pds-select-background:var(--pds-input-addon-background);--pds-select-border:var(--pine-border-width-none);--pds-select-border-radius-end-start:var(--pine-dimension-none);--pds-select-border-radius-start-start:var(--pine-dimension-none);--pds-select-min-height:calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)))}:host([aria-readonly=true]) input{background-color:var(--pine-color-background-container-disabled);color:var(--pine-color-text-readonly)}:host([disabled=true])::part(prepend),:host([disabled=true])::part(append){background-color:var(--pds-input-disabled-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color-disabled)}:host([full-width=true]){width:100%}:host([invalid=true])::part(prepend),:host([invalid=true])::part(append){background-color:var(--pds-input-error-background);border:var(--pds-input-border-width) solid var(--pds-input-error-border)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])){--pds-input-background:var(--pine-color-accent-disabled);--pds-input-border-color:var(--pine-color-accent);--pds-input-border-color-hover:var(--pine-color-accent-hover);--pds-input-text-color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(prefix),:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true]))::part(suffix){color:var(--pine-color-text-accent)}:host([highlight]:not([disabled]):not([aria-disabled=true]):not([invalid]):not([aria-readonly=true])) .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring)}.pds-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.pds-input__label-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label{color:var(--pine-color-text-strong);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-input__label-wrapper .pds-input__label{-webkit-margin-after:0;margin-block-end:0}.pds-input__action{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-input__field-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-input__field-wrapper.has-prefix .pds-input__field{-webkit-padding-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));padding-inline-start:calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em))}.pds-input__field-wrapper.has-suffix .pds-input__field{-webkit-padding-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));padding-inline-end:calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em))}.pds-input__field-wrapper.has-prepend .pds-input__field{border-end-start-radius:var(--pine-dimension-none);border-start-start-radius:var(--pine-dimension-none)}.pds-input__field-wrapper.has-append .pds-input__field{border-end-end-radius:var(--pine-dimension-none);border-start-end-radius:var(--pine-dimension-none)}.pds-input__field{background:var(--pds-input-background);border:var(--pds-input-border-width) solid var(--pds-input-border-color);border-radius:var(--pds-input-border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-input-text-color);-ms-flex:1;flex:1;font:var(--pds-input-font);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-input-field-min-height);min-width:var(--pine-dimension-none);padding:var(--pds-input-padding-y) var(--pds-input-padding-x);-webkit-transition:border-color 0.2s ease;transition:border-color 0.2s ease;width:100%}.pds-input__field:hover:not(:disabled){border-color:var(--pds-input-border-color-hover)}.pds-input__field:disabled{background:var(--pds-input-disabled-background);border-color:var(--pine-color-border-disabled);color:var(--pds-input-disabled-text-color);cursor:not-allowed}.pds-input__field:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-input__field:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.has-error .pds-input__field:hover:not(:disabled){border-color:var(--pds-input-error-border-hover)}:host-context([data-theme=dark]) .has-error .pds-input__field:hover:not(:disabled){border-color:var(--pine-color-red-950)}.pds-input__field:focus-visible:not(.has-error){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width);position:relative;z-index:1}:host([has-prepend]) .pds-input__field:focus-visible:not(.has-error),:host([has-append]) .pds-input__field:focus-visible:not(.has-error),:host([has-prefix]) .pds-input__field:focus-visible:not(.has-error),:host([has-suffix]) .pds-input__field:focus-visible:not(.has-error){outline-offset:var(--pine-dimension-none)}.pds-input__field::-webkit-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-moz-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field:-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::-ms-input-placeholder{color:var(--pds-input-placeholder-color)}.pds-input__field::placeholder{color:var(--pds-input-placeholder-color)}.has-error .pds-input__field{background-color:var(--pds-input-error-background);border-color:var(--pds-input-error-border)}:host-context([data-theme=dark]) .has-error .pds-input__field{background-color:var(--pine-color-red-950)}.has-error .pds-input__field:focus-visible{outline-color:var(--pine-color-focus-ring-danger);position:relative;z-index:1}.pds-input__error-message,.pds-input__helper-message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-after:var(--pine-dimension-none);margin-block-end:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-input__error-message{color:var(--pds-input-error-color);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-input__error-message pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-input__field::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;background-color:var(--pds-input-placeholder-color);cursor:pointer;height:var(--pine-dimension-sm);-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");-webkit-mask-size:contain;mask-size:contain;width:var(--pine-dimension-sm)}";var PdsInput=function(){function e(e){var r=this;registerInstance(this,e);this.pdsBlur=createEvent(this,"pdsBlur");this.pdsChange=createEvent(this,"pdsChange");this.pdsFocus=createEvent(this,"pdsFocus");this.pdsInput=createEvent(this,"pdsInput");this.pdsKeyDown=createEvent(this,"pdsKeyDown");this.inheritedAttributes={};this.isComposing=false;this.hasLoaded=false;this.hasPrefix=false;this.hasSuffix=false;this.hasPrepend=false;this.hasAppend=false;this.hasAction=false;this.type="text";this.value="";this.hasFocus=false;this.onInputEvent=function(e){var i=e.target;if(i){r.value=i.value||""}r.emitInputChange(e)};this.onChangeEvent=function(e){r.emitValueChange(e)};this.onBlurEvent=function(e){r.hasFocus=false;if(r.focusedValue!==r.value){r.emitValueChange(e)}r.pdsBlur.emit(e)};this.onFocusEvent=function(e){r.hasFocus=true;r.focusedValue=r.value;r.pdsFocus.emit(e)};this.onCompositionStart=function(){r.isComposing=true};this.onCompositionEnd=function(){r.isComposing=false};this.onKeyDownEvent=function(e){r.pdsKeyDown.emit(e)}}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){if(this.nativeInput){this.nativeInput.focus()}return[2]}))}))};e.prototype.observeAddonResize=function(){var e=this;var r;if(typeof ResizeObserver==="undefined")return;(r=this.resizeObserver)===null||r===void 0?void 0:r.disconnect();this.resizeObserver=new ResizeObserver((function(){e.updateAddonWidths()}));if(this.prefixEl){this.resizeObserver.observe(this.prefixEl)}if(this.suffixEl){this.resizeObserver.observe(this.suffixEl)}};e.prototype.updateAddonWidths=function(){var e=this;requestAnimationFrame((function(){if(e.prefixEl){var r=e.prefixEl.offsetWidth;e.el.style.setProperty("--prefix-width","".concat(r,"px"))}if(e.suffixEl){var i=e.suffixEl.offsetWidth;e.el.style.setProperty("--suffix-width","".concat(i,"px"))}}))};e.prototype.renderPrefix=function(){var e=this;var r=this.el.querySelector('[slot="prefix"]')!==null;if(r){return h("div",{class:"pds-input__prefix",part:"prefix",ref:function(r){return e.prefixEl=r}},h("slot",{name:"prefix",onSlotchange:function(){return e.updateAddonWidths()}}))}return null};e.prototype.renderSuffix=function(){var e=this;var r=this.el.querySelector('[slot="suffix"]')!==null;if(r){return h("div",{class:"pds-input__suffix",part:"suffix",ref:function(r){return e.suffixEl=r}},h("slot",{name:"suffix",onSlotchange:function(){return e.updateAddonWidths()}}))}return null};e.prototype.renderPrepend=function(){var e=this.el.querySelector('[slot="prepend"]')!==null;if(e){return h("div",{class:"pds-input__prepend",part:"prepend"},h("slot",{name:"prepend"}))}return null};e.prototype.renderAppend=function(){var e=this.el.querySelector('[slot="append"]')!==null;if(e){return h("div",{class:"pds-input__append",part:"append"},h("slot",{name:"append"}))}return null};e.prototype.renderAction=function(){var e=this.el.querySelector('[slot="action"]')!==null;if(e){return h("div",{class:"pds-input__action",part:"action"},h("slot",{name:"action"}))}return null};e.prototype.componentWillLoad=function(){this.inheritedAttributes=Object.assign({},inheritAriaAttributes(this.el));this.hasPrefix=this.el.querySelector('[slot="prefix"]')!==null;this.hasSuffix=this.el.querySelector('[slot="suffix"]')!==null;this.hasPrepend=this.el.querySelector('[slot="prepend"]')!==null;this.hasAppend=this.el.querySelector('[slot="append"]')!==null;this.hasAction=this.el.querySelector('[slot="action"]')!==null;this.originalPdsInput=this.pdsInput};e.prototype.connectedCallback=function(){if(this.el.attachInternals&&!this.internals){this.internals=this.el.attachInternals()}if(this.hasLoaded&&!this.resizeObserver){this.updateAddonWidths();this.observeAddonResize()}};e.prototype.disconnectedCallback=function(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect();this.resizeObserver=undefined};e.prototype.componentDidLoad=function(){this.hasLoaded=true;this.debounceChanged();this.updateAddonWidths();this.observeAddonResize();this.updateFormValue()};e.prototype.debounceChanged=function(){var e=this,r=e.pdsInput,i=e.debounce,n=e.originalPdsInput;this.pdsInput=i===undefined?n!==null&&n!==void 0?n:r:debounceEvent(r,i)};e.prototype.valueChanged=function(){var e=this.nativeInput;var r=this.getValue();if(e&&e.value!==r&&!this.isComposing){e.value=r}this.updateFormValue()};e.prototype.getValue=function(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()};e.prototype.emitValueChange=function(e){var r=this.value;var i=r==null?r:r.toString();this.focusedValue=i;this.pdsChange.emit({value:i,event:e})};e.prototype.emitInputChange=function(e){var r=this.value;var i=r==null?r:r.toString();this.pdsInput.emit({value:i,event:e})};e.prototype.updateFormValue=function(){if(this.internals&&this.internals.setFormValue){var e=this.getValue();this.internals.setFormValue(e||null);if(this.nativeInput&&this.internals&&this.internals.setValidity){this.internals.setValidity(this.nativeInput.validity,this.nativeInput.validationMessage,this.nativeInput)}}};e.prototype.formResetCallback=function(){this.value="";this.updateFormValue()};e.prototype.formDisabledCallback=function(e){this.disabled=e};e.prototype.formStateRestoreCallback=function(e){if(typeof e==="string"){this.value=e}else if(e instanceof FormData&&this.name){var r=e.get(this.name);if(typeof r==="string"){this.value=r}}};e.prototype.render=function(){var e=this;var r=this,i=r.componentId,n=r.disabled,t=r.errorMessage,s=r.helperMessage,o=r.invalid,d=o===void 0?false:o,a=r.label;var p=this.getValue();var l={"pds-input__field-wrapper":true,"has-focus":this.hasFocus,"has-error":d||!!t,"is-disabled":n,"has-prefix":this.hasPrefix,"has-suffix":this.hasSuffix,"has-prepend":this.hasPrepend,"has-append":this.hasAppend};return h(Host,{key:"2ec6b4f180675aa210f5b6816d0229791724a9c7","aria-disabled":this.disabled?"true":null,"aria-readonly":this.readonly?"true":null,"has-prefix":this.hasPrefix?"true":null,"has-suffix":this.hasSuffix?"true":null,"has-prepend":this.hasPrepend?"true":null,"has-append":this.hasAppend?"true":null,"has-action":this.hasAction&&!this.hideLabel?"true":null,"full-width":this.fullWidth?"true":null},h("div",{key:"d629a3484b1b0ad8762e0e5b49eb04756276dc64",class:"pds-input"},a&&h("div",{key:"e4ba8c5a09e7d5b43c70b903bed4a2809c9bca9f",class:"pds-input__label-wrapper"},h("label",{key:"d6de106940815660b45207149b8dae0bcf8d812b",htmlFor:i,class:"pds-input__label"},h("span",{key:"266e93098bb0f8a94d9369bd64a29d9872090fbd",class:this.hideLabel?"visually-hidden":""},a,this.required&&h("span",{key:"a393b0c25ee54213d48d74d05b7dec05f3c64191",class:"pds-input__required-indicator"}," *"))),!this.hideLabel&&this.renderAction()),h("div",{key:"5a6d411f543ccf5845af6086512666471cbc2fd7",class:l},this.renderPrepend(),this.renderPrefix(),h("input",Object.assign({key:"bb19fe0c2eddf8868d118e8f0c822e8fd5edfb5f",ref:function(r){return e.nativeInput=r},class:"pds-input__field","aria-describedby":assignDescription(i,d,s),"aria-invalid":d?"true":undefined,autocomplete:this.autocomplete,disabled:n,id:i,max:this.max,maxlength:this.maxlength,min:this.min,minlength:this.minlength,name:this.name,pattern:this.pattern,placeholder:this.placeholder,readOnly:this.readonly,required:this.required,step:this.step,type:this.type,value:p,onInput:this.onInputEvent,onChange:this.onChangeEvent,onBlur:this.onBlurEvent,onFocus:this.onFocusEvent,onKeyDown:this.onKeyDownEvent,onCompositionstart:this.onCompositionStart,onCompositionend:this.onCompositionEnd},this.inheritedAttributes)),this.renderSuffix(),this.renderAppend()),s&&h("p",{key:"9b425e97ed05971864bb48813cc7e67fad1e0578",class:"pds-input__helper-message",id:messageId(i,"helper")},s),t&&h("p",{key:"d60a34f24c536be62bae38c2353a3c33c427f909",class:"pds-input__error-message",id:messageId(i,"error")},h("pds-icon",{key:"c6eec169fb1631d8d59faaa83f26e80c338bcd90",icon:danger,size:"small"}),t)))};Object.defineProperty(e,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{debounce:["debounceChanged"],value:["valueChanged"]}},enumerable:false,configurable:true});return e}();PdsInput.style=pdsInputTokensCss+(labelCss+pdsInputCss);export{PdsInput as pds_input};
 //# sourceMappingURL=pds-input.entry.js.map

package/dist/esm-es5/pds-input.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-input.entry.js","sources":["src/components/pds-input/pds-input.tokens.scss?tag=pds-input&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":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  --pds-input-background: var(--pine-color-background-container);\n  --pds-input-border-color: var(--pine-color-border);\n  --pds-input-border-color-hover: var(--pine-color-border-hover);\n  --pds-input-border-color-disabled: var(--pine-color-border-disabled);\n\n  --pds-input-border-radius: var(--pine-dimension-125);\n  --pds-input-border-width: var(--pine-border-width-thin);\n  --pds-input-padding-x: var(--pine-dimension-150);\n  --pds-input-padding-y: calc(var(--pine-dimension-xs) - var(--pine-border-width));\n  --pds-input-font: var(--pine-typography-body);\n  --pds-input-text-color: var(--pine-color-text-strong);\n  --pds-input-placeholder-color: var(--pine-color-text-placeholder);\n  --pds-input-icon-color: var(--pine-color-text-secondary);\n  --pds-input-disabled-background: var(--pine-color-background-container-disabled);\n  --pds-input-disabled-text-color: var(--pine-color-text-disabled);\n  --pds-input-error-color: var(--pine-color-text-message-danger);\n  --pds-input-error-background: var(--pine-input-color-background-danger);\n  --pds-input-error-border: var(--pine-color-border-danger);\n  --pds-input-error-border-hover: var(--pine-color-border-danger-hover);\n  --pds-input-addon-background: var(--pine-color-background-subtle);\n  --pds-input-addon-color: var(--pine-color-text-secondary);\n  --pds-input-field-min-height: var(--pine-dimension-450);\n  --box-shadow-focus: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n  display: inline;\n\n  pds-select::part(select) {\n    background-color: var(--pds-input-error-background);\n    border-color: var(--pds-input-error-border);\n  }\n\n  &::part(prefix),\n  &::part(suffix) {\n    align-items: center;\n    color: var(--pine-color-text-label-readonly);\n    display: flex;\n    height: 100%;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    white-space: nowrap;\n    z-index: var(--pine-z-index-raised);\n  }\n\n  &::part(prefix) {\n    border-end-start-radius: var(--pds-input-border-radius);\n    border-inline-end: var(--pine-border-width-none);\n    border-start-start-radius: var(--pds-input-border-radius);\n    left: var(--pds-input-padding-x);\n  }\n\n  &::part(suffix) {\n    border-end-end-radius: var(--pds-input-border-radius);\n    border-inline-start: var(--pine-border-width-none);\n    border-start-end-radius: var(--pds-input-border-radius);\n    right: var(--pds-input-padding-x);\n  }\n\n  &::part(prepend),\n  &::part(append) {\n    align-items: center;\n    background-color: var(--pds-input-addon-background);\n    border: var(--pds-input-border-width) solid var(--pds-input-border-color);\n    color: var(--pds-input-addon-color);\n    display: flex;\n    overflow: visible;\n  }\n\n  &::part(prepend) {\n    border-end-start-radius: var(--pds-input-border-radius);\n    border-inline-end: var(--pine-border-width-none);\n    border-start-start-radius: var(--pds-input-border-radius);\n  }\n\n  &::part(append) {\n    border-end-end-radius: var(--pds-input-border-radius);\n    border-inline-start: var(--pine-border-width-none);\n    border-start-end-radius: var(--pds-input-border-radius);\n  }\n}\n\n/* stylelint-disable-next-line */\n:host([has-prepend]) ::slotted(pds-button[slot=\"prepend\"]) {\n  --pds-button-background: var(--pds-input-addon-background);\n  --pds-button-border: var(--pine-border-width-none);\n  --pds-button-border-radius: var(--pine-dimension-none);\n  --pds-button-border-radius-end-end: var(--pine-dimension-none);\n  --pds-button-border-radius-start-end: var(--pine-dimension-none);\n  --pds-button-border-radius-start-start: var(--pds-input-border-radius);\n  --pds-button-border-radius-end-start: var(--pds-input-border-radius);\n  --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));\n  --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);\n  --pds-button-outline-focus: none;\n}\n\n/* stylelint-disable-next-line */\n:host([has-append]) ::slotted(pds-button[slot=\"append\"]) {\n  --pds-button-background: var(--pds-input-addon-background);\n  --pds-button-border: var(--pine-border-width-none);\n  --pds-button-border-radius: var(--pine-dimension-none);\n  --pds-button-border-radius-end-start: var(--pine-dimension-none);\n  --pds-button-border-radius-start-start: var(--pine-dimension-none);\n  --pds-button-border-radius-start-end: var(--pds-input-border-radius);\n  --pds-button-border-radius-end-end: var(--pds-input-border-radius);\n  --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));\n  --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);\n  --pds-button-outline-focus: none;\n}\n\n/* stylelint-disable-next-line */\n:host([has-prepend]) ::slotted(pds-select[slot=\"prepend\"]) {\n  --pds-select-background: var(--pds-input-addon-background);\n  --pds-select-border: var(--pine-border-width-none);\n  --pds-select-border-radius-end-end: var(--pine-dimension-none);\n  --pds-select-border-radius-start-end: var(--pine-dimension-none);\n  --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));\n}\n\n/* stylelint-disable-next-line */\n:host([has-append]) ::slotted(pds-select[slot=\"append\"]) {\n  --pds-select-background: var(--pds-input-addon-background);\n  --pds-select-border: var(--pine-border-width-none);\n  --pds-select-border-radius-end-start: var(--pine-dimension-none);\n  --pds-select-border-radius-start-start: var(--pine-dimension-none);\n  --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));\n}\n\n:host([aria-readonly=\"true\"]) {\n  input {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n}\n\n:host([disabled=\"true\"]) {\n  &::part(prepend),\n  &::part(append) {\n    background-color: var(--pds-input-disabled-background);\n    border: var(--pds-input-border-width) solid var(--pds-input-border-color-disabled);\n  }\n}\n\n:host([full-width=\"true\"]) {\n  width: 100%;\n}\n\n:host([invalid=\"true\"]) {\n  &::part(prepend),\n  &::part(append) {\n    background-color: var(--pds-input-error-background);\n    border: var(--pds-input-border-width) solid var(--pds-input-error-border);\n  }\n}\n\n:host([highlight]:not([disabled]):not([aria-disabled=\"true\"]):not([invalid]):not([aria-readonly=\"true\"])) {\n  --pds-input-background: var(--pine-color-accent-disabled);\n  --pds-input-border-color: var(--pine-color-accent);\n  --pds-input-border-color-hover: var(--pine-color-accent-hover);\n  --pds-input-text-color: var(--pine-color-text-accent);\n\n  &::part(prefix),\n  &::part(suffix) {\n    color: var(--pine-color-text-accent);\n  }\n\n  .pds-input__field:focus-visible {\n    outline-color: var(--pine-color-focus-ring);\n  }\n}\n\n.pds-input {\n  display: flex;\n  flex-direction: column;\n}\n\n.pds-input__label-wrapper {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-input__label {\n  color: var(--pine-color-text-strong);\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-input__label-wrapper .pds-input__label {\n  margin-block-end: 0;\n}\n\n.pds-input__action {\n  align-items: center;\n  display: flex;\n  gap: var(--pine-dimension-xs);\n  margin-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-input__field-wrapper {\n  align-items: center;\n  display: flex;\n  position: relative;\n  width: 100%;\n\n  &.has-prefix .pds-input__field {\n    padding-inline-start: calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));\n  }\n\n  &.has-suffix .pds-input__field {\n    padding-inline-end: calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));\n  }\n\n  &.has-prepend .pds-input__field {\n    border-end-start-radius: var(--pine-dimension-none);\n    border-start-start-radius: var(--pine-dimension-none);\n  }\n\n  &.has-append .pds-input__field {\n    border-end-end-radius: var(--pine-dimension-none);\n    border-start-end-radius: var(--pine-dimension-none);\n  }\n}\n\n.pds-input__field {\n  background: var(--pds-input-background);\n  border: var(--pds-input-border-width) solid var(--pds-input-border-color);\n  border-radius: var(--pds-input-border-radius);\n  box-sizing: border-box;\n  color: var(--pds-input-text-color);\n  flex: 1;\n  font: var(--pds-input-font);\n  letter-spacing: var(--pine-letter-spacing);\n  min-height: var(--pds-input-field-min-height);\n  min-width: var(--pine-dimension-none);\n  padding: var(--pds-input-padding-y) var(--pds-input-padding-x);\n  transition: border-color 0.2s ease;\n  width: 100%;\n\n  &:hover:not(:disabled) {\n    border-color: var(--pds-input-border-color-hover);\n  }\n\n  &:disabled {\n    background: var(--pds-input-disabled-background);\n    border-color: var(--pine-color-border-disabled);\n    color: var(--pds-input-disabled-text-color);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--pine-color-text-placeholder-disabled);\n    }\n  }\n\n  .has-error &:hover:not(:disabled) {\n    border-color: var(--pds-input-error-border-hover);\n\n    :host-context([data-theme=\"dark\"]) & {\n      border-color: var(--pine-color-red-950);\n    }\n  }\n\n  &:focus-visible:not(.has-error) {\n    border-color: var(--pine-color-border-active);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n    position: relative;\n    z-index: 1;\n\n    :host([has-prepend]) &,\n    :host([has-append]) &,\n    :host([has-prefix]) &,\n    :host([has-suffix]) & {\n      outline-offset: var(--pine-dimension-none);\n    }\n  }\n\n  &::placeholder {\n    color: var(--pds-input-placeholder-color);\n  }\n\n  .has-error & {\n    background-color: var(--pds-input-error-background);\n    border-color: var(--pds-input-error-border);\n\n    :host-context([data-theme=\"dark\"]) & {\n      background-color: var(--pine-color-red-950);\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n      position: relative;\n      z-index: 1;\n    }\n  }\n}\n\n.pds-input__error-message,\n.pds-input__helper-message {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-end: var(--pine-dimension-none);\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-input__error-message {\n  color: var(--pds-input-error-color);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n\n  pds-icon {\n    margin-block-start: var(--pine-dimension-025);\n  }\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// Custom styling for the search clear (x) button\n.pds-input__field::-webkit-search-cancel-button {\n  appearance: none;\n  background-color: var(--pds-input-placeholder-color);\n  cursor: pointer;\n  height: var(--pine-dimension-sm);\n  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");\n  mask-size: contain;\n  width: var(--pine-dimension-sm);\n}\n\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\nimport { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\nimport { debounceEvent } from '@utils/utils';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot append - Content to be displayed after the input field\n * @slot prefix - Content that is displayed visually within the input field before the input field\n * @slot prepend - Content to be displayed before the input field\n * @slot suffix - Content that is displayed visually within the input field after the input field\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n  tag: 'pds-input',\n  styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsInput {\n\n  private nativeInput?: HTMLInputElement;\n  private inheritedAttributes: Attributes = {};\n  private isComposing = false;\n  private prefixEl?: HTMLElement;\n  private suffixEl?: HTMLElement;\n  private focusedValue?: string | number | null;\n  private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n  private internals?: ElementInternals;\n\n  @Element() el!: HTMLPdsInputElement;\n\n  /**\n   * If true, the input has prefix content (non-focusable)\n   */\n  @State() hasPrefix = false;\n\n  /**\n   * If true, the input has suffix content (non-focusable)\n   */\n  @State() hasSuffix = false;\n\n  /**\n   * If true, the input has prepend content (focusable)\n   */\n  @State() hasPrepend = false;\n\n  /**\n   * If true, the input has append content (focusable)\n   */\n  @State() hasAppend = false;\n\n  /**\n   * If true, the input has action content in the label area\n   */\n  @State() hasAction = false;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsInput: EventEmitter<InputInputEventDetail>;\n\n  /**\n   * Emitted when a key is pressed down in the input.\n   */\n  @Event() pdsKeyDown!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n   * `input.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeInput) {\n      this.nativeInput.focus();\n    }\n  }\n\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets the number of milliseconds to wait before updating the value.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Determines whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Visually hides the label text for instances where only the input should be displayed. Label remains accessible to assistive technology such as screen readers.\n   * Note: When true, the action slot is also hidden to maintain a minimal UI.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Specifies the maximum value for the input field.\n   */\n  @Prop() max?: string;\n\n  /**\n   * Specifies the maximum number of characters allowed in the input field.\n   */\n  @Prop() maxlength?: string;\n\n  /**\n   * Specifies the minimum value for the input field.\n   */\n  @Prop() min?: string;\n\n  /**\n   * Specifies the minimum number of characters allowed in the input field.\n   */\n  @Prop() minlength?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the regular expression that the input value is checked against.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Determines whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Works with the `min` and `max` attributes to define increments for the input field.\n   */\n  @Prop() step?: string;\n\n  /**\n   * Determines the type of control that will be displayed\n   * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string | number | null = '';\n\n  /**\n   * Determines whether or not the input field takes full width of its container.\n   */\n  @Prop() fullWidth?: boolean;\n\n  /**\n   * Applies highlight styling to the input field.\n   */\n  @Prop({ reflect: true }) highlight?: boolean;\n\n  /**\n   * Determines if the input has focus.\n   */\n  @State() hasFocus = false;\n\n  private updateAddonWidths() {\n    requestAnimationFrame(() => {\n      if (this.prefixEl) {\n        const prefixWidth = this.prefixEl.offsetWidth;\n        this.el.style.setProperty('--prefix-width', `${prefixWidth}px`);\n      }\n\n      if (this.suffixEl) {\n        const suffixWidth = this.suffixEl.offsetWidth;\n        this.el.style.setProperty('--suffix-width', `${suffixWidth}px`);\n      }\n    });\n  }\n\n  private renderPrefix() {\n    const hasPrefix = this.el.querySelector('[slot=\"prefix\"]') !== null;\n    if (hasPrefix) {\n      return (\n        <div class=\"pds-input__prefix\" part=\"prefix\" ref={(el) => this.prefixEl = el as HTMLElement}>\n          <slot name=\"prefix\" onSlotchange={() => this.updateAddonWidths()}></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderSuffix() {\n    const hasSuffix = this.el.querySelector('[slot=\"suffix\"]') !== null;\n    if (hasSuffix) {\n      return (\n        <div class=\"pds-input__suffix\" part=\"suffix\" ref={(el) => this.suffixEl = el as HTMLElement}>\n          <slot name=\"suffix\" onSlotchange={() => this.updateAddonWidths()}></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderPrepend() {\n    const hasPrepend = this.el.querySelector('[slot=\"prepend\"]') !== null;\n    if (hasPrepend) {\n      return (\n        <div class=\"pds-input__prepend\" part=\"prepend\">\n          <slot name=\"prepend\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderAppend() {\n    const hasAppend = this.el.querySelector('[slot=\"append\"]') !== null;\n    if (hasAppend) {\n      return (\n        <div class=\"pds-input__append\" part=\"append\">\n          <slot name=\"append\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-input__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    };\n    this.hasPrefix = this.el.querySelector('[slot=\"prefix\"]') !== null;\n    this.hasSuffix = this.el.querySelector('[slot=\"suffix\"]') !== null;\n    this.hasPrepend = this.el.querySelector('[slot=\"prepend\"]') !== null;\n    this.hasAppend = this.el.querySelector('[slot=\"append\"]') !== null;\n    this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n    // Store the original pdsInput event emitter\n    this.originalPdsInput = this.pdsInput;\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\n  componentDidLoad() {\n    this.debounceChanged();\n    this.updateAddonWidths();\n    // Set initial form value\n    this.updateFormValue();\n  }\n\n  componentDidUpdate() {\n    this.updateAddonWidths();\n  }\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    /**\n     * If debounce is undefined, we have to manually revert the pdsInput emitter in case\n     * debounce used to be set to a number. Otherwise, the event would stay debounced.\n     */\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n\n    if (nativeInput && nativeInput.value !== value && !this.isComposing) {\n      nativeInput.value = value;\n    }\n\n    // Update form value when value changes\n    this.updateFormValue();\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n  };\n\n  private onChangeEvent = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private onBlurEvent = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      /**\n       * Emits the `pdsChange` event when the input value\n       * is different than the value when the input was focused.\n       */\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocusEvent = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onCompositionStart = () => {\n    this.isComposing = true;\n  }\n\n  private onCompositionEnd = () => {\n    this.isComposing = false;\n  }\n\n  private onKeyDownEvent = (ev: KeyboardEvent) => {\n    this.pdsKeyDown.emit(ev);\n  };\n\n  /**\n   * Emits a pdsChange event\n   */\n  private emitValueChange(event?: Event) {\n    const { value } = this;\n    const newValue = value == null ? value : value.toString();\n\n    this.focusedValue = newValue;\n    this.pdsChange.emit({ value: newValue, event });\n  }\n\n  /**\n   * Emits a `pdsInput` event\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n\n    this.pdsInput.emit({ value: newValue, event });\n  }\n\n  /**\n   * Updates the form value using ElementInternals API\n   */\n  private updateFormValue() {\n    if (this.internals && this.internals.setFormValue) {\n      const value = this.getValue();\n      this.internals.setFormValue(value || null);\n\n      // Set validity based on native input validation\n      if (this.nativeInput && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.nativeInput.validity,\n          this.nativeInput.validationMessage,\n          this.nativeInput\n        );\n      }\n    }\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is reset\n   */\n  formResetCallback() {\n    this.value = '';\n    this.updateFormValue();\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is disabled\n   */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called to restore form state\n   */\n  formStateRestoreCallback(state: string | FormData | null) {\n    if (typeof state === 'string') {\n      this.value = state;\n    } else if (state instanceof FormData && this.name) {\n      // Extract value from FormData using the input's name\n      const value = state.get(this.name);\n      if (typeof value === 'string') {\n        this.value = value;\n      }\n    }\n  }\n\n  render() {\n    const {\n      componentId,\n      disabled,\n      errorMessage,\n      helperMessage,\n      invalid = false,\n      label,\n    } = this;\n\n    const value = this.getValue();\n\n    const inputWrapperClasses = {\n      'pds-input__field-wrapper': true,\n      'has-focus': this.hasFocus,\n      'has-error': invalid || !!errorMessage,\n      'is-disabled': disabled,\n      'has-prefix': this.hasPrefix,\n      'has-suffix': this.hasSuffix,\n      'has-prepend': this.hasPrepend,\n      'has-append': this.hasAppend,\n    };\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n        has-prefix={this.hasPrefix ? 'true' : null}\n        has-suffix={this.hasSuffix ? 'true' : null}\n        has-prepend={this.hasPrepend ? 'true' : null}\n        has-append={this.hasAppend ? 'true' : null}\n        has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n        full-width={this.fullWidth ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          {label && (\n            <div class=\"pds-input__label-wrapper\">\n              <label htmlFor={componentId} class=\"pds-input__label\">\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {label}\n                  {this.required && <span class=\"pds-input__required-indicator\"> *</span>}\n                </span>\n              </label>\n              {!this.hideLabel && this.renderAction()}\n            </div>\n          )}\n\n          <div class={inputWrapperClasses}>\n            {this.renderPrepend()}\n            {this.renderPrefix()}\n            <input\n              ref={(input) => (this.nativeInput = input)}\n              class=\"pds-input__field\"\n              aria-describedby={assignDescription(componentId, invalid, helperMessage)}\n              aria-invalid={invalid ? \"true\" : undefined}\n              autocomplete={this.autocomplete}\n              disabled={disabled}\n              id={componentId}\n              max={this.max}\n              maxlength={this.maxlength}\n              min={this.min}\n              minlength={this.minlength}\n              name={this.name}\n              pattern={this.pattern}\n              placeholder={this.placeholder}\n              readOnly={this.readonly}\n              required={this.required}\n              step={this.step}\n              type={this.type}\n              value={value}\n              onInput={this.onInputEvent}\n              onChange={this.onChangeEvent}\n              onBlur={this.onBlurEvent}\n              onFocus={this.onFocusEvent}\n              onKeyDown={this.onKeyDownEvent}\n              onCompositionstart={this.onCompositionStart}\n              onCompositionend={this.onCompositionEnd}\n              {...this.inheritedAttributes}\n            />\n            {this.renderSuffix()}\n            {this.renderAppend()}\n          </div>\n\n          {helperMessage && (\n            <p class=\"pds-input__helper-message\" id={messageId(componentId, 'helper')}>\n              {helperMessage}\n            </p>\n          )}\n\n          {errorMessage && (\n            <p class=\"pds-input__error-message\" id={messageId(componentId, 'error')}>\n              <pds-icon icon={danger} size=\"small\" />\n              {errorMessage}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pds-input.entry.js","sources":["src/components/pds-input/pds-input.tokens.scss?tag=pds-input&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.scss?tag=pds-input&encapsulation=shadow","src/components/pds-input/pds-input.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":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  --pds-input-background: var(--pine-color-background-container);\n  --pds-input-border-color: var(--pine-color-border);\n  --pds-input-border-color-hover: var(--pine-color-border-hover);\n  --pds-input-border-color-disabled: var(--pine-color-border-disabled);\n\n  --pds-input-border-radius: var(--pine-dimension-125);\n  --pds-input-border-width: var(--pine-border-width-thin);\n  --pds-input-padding-x: var(--pine-dimension-150);\n  --pds-input-padding-y: calc(var(--pine-dimension-xs) - var(--pine-border-width));\n  --pds-input-font: var(--pine-typography-body);\n  --pds-input-text-color: var(--pine-color-text-strong);\n  --pds-input-placeholder-color: var(--pine-color-text-placeholder);\n  --pds-input-icon-color: var(--pine-color-text-secondary);\n  --pds-input-disabled-background: var(--pine-color-background-container-disabled);\n  --pds-input-disabled-text-color: var(--pine-color-text-disabled);\n  --pds-input-error-color: var(--pine-color-text-message-danger);\n  --pds-input-error-background: var(--pine-input-color-background-danger);\n  --pds-input-error-border: var(--pine-color-border-danger);\n  --pds-input-error-border-hover: var(--pine-color-border-danger-hover);\n  --pds-input-addon-background: var(--pine-color-background-subtle);\n  --pds-input-addon-color: var(--pine-color-text-secondary);\n  --pds-input-field-min-height: var(--pine-dimension-450);\n  --box-shadow-focus: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n  display: inline;\n\n  pds-select::part(select) {\n    background-color: var(--pds-input-error-background);\n    border-color: var(--pds-input-error-border);\n  }\n\n  &::part(prefix),\n  &::part(suffix) {\n    align-items: center;\n    color: var(--pine-color-text-label-readonly);\n    display: flex;\n    height: 100%;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    white-space: nowrap;\n    z-index: var(--pine-z-index-raised);\n  }\n\n  &::part(prefix) {\n    border-end-start-radius: var(--pds-input-border-radius);\n    border-inline-end: var(--pine-border-width-none);\n    border-start-start-radius: var(--pds-input-border-radius);\n    left: var(--pds-input-padding-x);\n  }\n\n  &::part(suffix) {\n    border-end-end-radius: var(--pds-input-border-radius);\n    border-inline-start: var(--pine-border-width-none);\n    border-start-end-radius: var(--pds-input-border-radius);\n    right: var(--pds-input-padding-x);\n  }\n\n  &::part(prepend),\n  &::part(append) {\n    align-items: center;\n    background-color: var(--pds-input-addon-background);\n    border: var(--pds-input-border-width) solid var(--pds-input-border-color);\n    color: var(--pds-input-addon-color);\n    display: flex;\n    overflow: visible;\n  }\n\n  &::part(prepend) {\n    border-end-start-radius: var(--pds-input-border-radius);\n    border-inline-end: var(--pine-border-width-none);\n    border-start-start-radius: var(--pds-input-border-radius);\n  }\n\n  &::part(append) {\n    border-end-end-radius: var(--pds-input-border-radius);\n    border-inline-start: var(--pine-border-width-none);\n    border-start-end-radius: var(--pds-input-border-radius);\n  }\n}\n\n/* stylelint-disable-next-line */\n:host([has-prepend]) ::slotted(pds-button[slot=\"prepend\"]) {\n  --pds-button-background: var(--pds-input-addon-background);\n  --pds-button-border: var(--pine-border-width-none);\n  --pds-button-border-radius: var(--pine-dimension-none);\n  --pds-button-border-radius-end-end: var(--pine-dimension-none);\n  --pds-button-border-radius-start-end: var(--pine-dimension-none);\n  --pds-button-border-radius-start-start: var(--pds-input-border-radius);\n  --pds-button-border-radius-end-start: var(--pds-input-border-radius);\n  --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));\n  --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);\n  --pds-button-outline-focus: none;\n}\n\n/* stylelint-disable-next-line */\n:host([has-append]) ::slotted(pds-button[slot=\"append\"]) {\n  --pds-button-background: var(--pds-input-addon-background);\n  --pds-button-border: var(--pine-border-width-none);\n  --pds-button-border-radius: var(--pine-dimension-none);\n  --pds-button-border-radius-end-start: var(--pine-dimension-none);\n  --pds-button-border-radius-start-start: var(--pine-dimension-none);\n  --pds-button-border-radius-start-end: var(--pds-input-border-radius);\n  --pds-button-border-radius-end-end: var(--pds-input-border-radius);\n  --pds-button-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));\n  --pds-button-box-shadow-focus: 0 0 0 3px var(--pine-color-focus-ring);\n  --pds-button-outline-focus: none;\n}\n\n/* stylelint-disable-next-line */\n:host([has-prepend]) ::slotted(pds-select[slot=\"prepend\"]) {\n  --pds-select-background: var(--pds-input-addon-background);\n  --pds-select-border: var(--pine-border-width-none);\n  --pds-select-border-radius-end-end: var(--pine-dimension-none);\n  --pds-select-border-radius-start-end: var(--pine-dimension-none);\n  --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));\n}\n\n/* stylelint-disable-next-line */\n:host([has-append]) ::slotted(pds-select[slot=\"append\"]) {\n  --pds-select-background: var(--pds-input-addon-background);\n  --pds-select-border: var(--pine-border-width-none);\n  --pds-select-border-radius-end-start: var(--pine-dimension-none);\n  --pds-select-border-radius-start-start: var(--pine-dimension-none);\n  --pds-select-min-height: calc(var(--pine-dimension-450) - calc(2 * var(--pine-border-width)));\n}\n\n:host([aria-readonly=\"true\"]) {\n  input {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n}\n\n:host([disabled=\"true\"]) {\n  &::part(prepend),\n  &::part(append) {\n    background-color: var(--pds-input-disabled-background);\n    border: var(--pds-input-border-width) solid var(--pds-input-border-color-disabled);\n  }\n}\n\n:host([full-width=\"true\"]) {\n  width: 100%;\n}\n\n:host([invalid=\"true\"]) {\n  &::part(prepend),\n  &::part(append) {\n    background-color: var(--pds-input-error-background);\n    border: var(--pds-input-border-width) solid var(--pds-input-error-border);\n  }\n}\n\n:host([highlight]:not([disabled]):not([aria-disabled=\"true\"]):not([invalid]):not([aria-readonly=\"true\"])) {\n  --pds-input-background: var(--pine-color-accent-disabled);\n  --pds-input-border-color: var(--pine-color-accent);\n  --pds-input-border-color-hover: var(--pine-color-accent-hover);\n  --pds-input-text-color: var(--pine-color-text-accent);\n\n  &::part(prefix),\n  &::part(suffix) {\n    color: var(--pine-color-text-accent);\n  }\n\n  .pds-input__field:focus-visible {\n    outline-color: var(--pine-color-focus-ring);\n  }\n}\n\n.pds-input {\n  display: flex;\n  flex-direction: column;\n}\n\n.pds-input__label-wrapper {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-input__label {\n  color: var(--pine-color-text-strong);\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-input__label-wrapper .pds-input__label {\n  margin-block-end: 0;\n}\n\n.pds-input__action {\n  align-items: center;\n  display: flex;\n  gap: var(--pine-dimension-xs);\n  margin-inline-start: var(--pine-dimension-xs);\n}\n\n.pds-input__field-wrapper {\n  align-items: center;\n  display: flex;\n  position: relative;\n  width: 100%;\n\n  &.has-prefix .pds-input__field {\n    padding-inline-start: calc(2 * var(--pds-input-padding-x) + var(--prefix-width, 1em));\n  }\n\n  &.has-suffix .pds-input__field {\n    padding-inline-end: calc(2 * var(--pds-input-padding-x) + var(--suffix-width, 1em));\n  }\n\n  &.has-prepend .pds-input__field {\n    border-end-start-radius: var(--pine-dimension-none);\n    border-start-start-radius: var(--pine-dimension-none);\n  }\n\n  &.has-append .pds-input__field {\n    border-end-end-radius: var(--pine-dimension-none);\n    border-start-end-radius: var(--pine-dimension-none);\n  }\n}\n\n.pds-input__field {\n  background: var(--pds-input-background);\n  border: var(--pds-input-border-width) solid var(--pds-input-border-color);\n  border-radius: var(--pds-input-border-radius);\n  box-sizing: border-box;\n  color: var(--pds-input-text-color);\n  flex: 1;\n  font: var(--pds-input-font);\n  letter-spacing: var(--pine-letter-spacing);\n  min-height: var(--pds-input-field-min-height);\n  min-width: var(--pine-dimension-none);\n  padding: var(--pds-input-padding-y) var(--pds-input-padding-x);\n  transition: border-color 0.2s ease;\n  width: 100%;\n\n  &:hover:not(:disabled) {\n    border-color: var(--pds-input-border-color-hover);\n  }\n\n  &:disabled {\n    background: var(--pds-input-disabled-background);\n    border-color: var(--pine-color-border-disabled);\n    color: var(--pds-input-disabled-text-color);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--pine-color-text-placeholder-disabled);\n    }\n  }\n\n  .has-error &:hover:not(:disabled) {\n    border-color: var(--pds-input-error-border-hover);\n\n    :host-context([data-theme=\"dark\"]) & {\n      border-color: var(--pine-color-red-950);\n    }\n  }\n\n  &:focus-visible:not(.has-error) {\n    border-color: var(--pine-color-border-active);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n    position: relative;\n    z-index: 1;\n\n    :host([has-prepend]) &,\n    :host([has-append]) &,\n    :host([has-prefix]) &,\n    :host([has-suffix]) & {\n      outline-offset: var(--pine-dimension-none);\n    }\n  }\n\n  &::placeholder {\n    color: var(--pds-input-placeholder-color);\n  }\n\n  .has-error & {\n    background-color: var(--pds-input-error-background);\n    border-color: var(--pds-input-error-border);\n\n    :host-context([data-theme=\"dark\"]) & {\n      background-color: var(--pine-color-red-950);\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n      position: relative;\n      z-index: 1;\n    }\n  }\n}\n\n.pds-input__error-message,\n.pds-input__helper-message {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-end: var(--pine-dimension-none);\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-input__error-message {\n  color: var(--pds-input-error-color);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n\n  pds-icon {\n    margin-block-start: var(--pine-dimension-025);\n  }\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// Custom styling for the search clear (x) button\n.pds-input__field::-webkit-search-cancel-button {\n  appearance: none;\n  background-color: var(--pds-input-placeholder-color);\n  cursor: pointer;\n  height: var(--pine-dimension-sm);\n  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E\");\n  mask-size: contain;\n  width: var(--pine-dimension-sm);\n}\n\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\nimport { InputChangeEventDetail, InputInputEventDetail } from './input-interface';\nimport { debounceEvent } from '@utils/utils';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot append - Content to be displayed after the input field\n * @slot prefix - Content that is displayed visually within the input field before the input field\n * @slot prepend - Content to be displayed before the input field\n * @slot suffix - Content that is displayed visually within the input field after the input field\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n  tag: 'pds-input',\n  styleUrls: ['pds-input.tokens.scss', '../../global/styles/utils/label.scss', 'pds-input.scss'],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsInput {\n\n  private nativeInput?: HTMLInputElement;\n  private inheritedAttributes: Attributes = {};\n  private isComposing = false;\n  private prefixEl?: HTMLElement;\n  private suffixEl?: HTMLElement;\n  private focusedValue?: string | number | null;\n  private originalPdsInput?: EventEmitter<InputInputEventDetail>;\n  private internals?: ElementInternals;\n  private resizeObserver?: ResizeObserver;\n  private hasLoaded = false;\n\n  @Element() el!: HTMLPdsInputElement;\n\n  /**\n   * If true, the input has prefix content (non-focusable)\n   */\n  @State() hasPrefix = false;\n\n  /**\n   * If true, the input has suffix content (non-focusable)\n   */\n  @State() hasSuffix = false;\n\n  /**\n   * If true, the input has prepend content (focusable)\n   */\n  @State() hasPrepend = false;\n\n  /**\n   * If true, the input has append content (focusable)\n   */\n  @State() hasAppend = false;\n\n  /**\n   * If true, the input has action content in the label area\n   */\n  @State() hasAction = false;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when the value has changed.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsChange!: EventEmitter<InputChangeEventDetail>;\n\n  /**\n   * Emitted when the input has focus.\n   */\n  @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsInput: EventEmitter<InputInputEventDetail>;\n\n  /**\n   * Emitted when a key is pressed down in the input.\n   */\n  @Event() pdsKeyDown!: EventEmitter<KeyboardEvent>;\n\n  /**\n   * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global\n   * `input.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeInput) {\n      this.nativeInput.focus();\n    }\n  }\n\n\n  /**\n   * Specifies if and how the browser provides `autocomplete` assistance for the field.\n   */\n  @Prop() autocomplete: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Sets the number of milliseconds to wait before updating the value.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Determines whether or not the input field is disabled.\n   */\n  @Prop() disabled?: boolean;\n\n  /**\n   * Specifies the error message and provides an error-themed treatment to the field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the input field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the input field is invalid or throws an error.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the input label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Visually hides the label text for instances where only the input should be displayed. Label remains accessible to assistive technology such as screen readers.\n   * Note: When true, the action slot is also hidden to maintain a minimal UI.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Specifies the maximum value for the input field.\n   */\n  @Prop() max?: string;\n\n  /**\n   * Specifies the maximum number of characters allowed in the input field.\n   */\n  @Prop() maxlength?: string;\n\n  /**\n   * Specifies the minimum value for the input field.\n   */\n  @Prop() min?: string;\n\n  /**\n   * Specifies the minimum number of characters allowed in the input field.\n   */\n  @Prop() minlength?: string;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Specifies the regular expression that the input value is checked against.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Specifies a short hint that describes the expected value of the input field.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the input field is readonly.\n   */\n  @Prop() readonly?: boolean;\n\n  /**\n   * Determines whether or not the input field is required.\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * Works with the `min` and `max` attributes to define increments for the input field.\n   */\n  @Prop() step?: string;\n\n  /**\n   * Determines the type of control that will be displayed\n   * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`\n   * @defaultValue \"text\"\n   */\n  @Prop() type = 'text';\n\n  /**\n   * The value of the input.\n   */\n  @Prop({mutable: true}) value?: string | number | null = '';\n\n  /**\n   * Determines whether or not the input field takes full width of its container.\n   */\n  @Prop() fullWidth?: boolean;\n\n  /**\n   * Applies highlight styling to the input field.\n   */\n  @Prop({ reflect: true }) highlight?: boolean;\n\n  /**\n   * Determines if the input has focus.\n   */\n  @State() hasFocus = false;\n\n  private observeAddonResize() {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    // Disconnect existing observer before creating a new one\n    this.resizeObserver?.disconnect();\n\n    this.resizeObserver = new ResizeObserver(() => {\n      this.updateAddonWidths();\n    });\n\n    if (this.prefixEl) {\n      this.resizeObserver.observe(this.prefixEl);\n    }\n\n    if (this.suffixEl) {\n      this.resizeObserver.observe(this.suffixEl);\n    }\n  }\n\n  private updateAddonWidths() {\n    requestAnimationFrame(() => {\n      if (this.prefixEl) {\n        const prefixWidth = this.prefixEl.offsetWidth;\n        this.el.style.setProperty('--prefix-width', `${prefixWidth}px`);\n      }\n\n      if (this.suffixEl) {\n        const suffixWidth = this.suffixEl.offsetWidth;\n        this.el.style.setProperty('--suffix-width', `${suffixWidth}px`);\n      }\n    });\n  }\n\n  private renderPrefix() {\n    const hasPrefix = this.el.querySelector('[slot=\"prefix\"]') !== null;\n    if (hasPrefix) {\n      return (\n        <div class=\"pds-input__prefix\" part=\"prefix\" ref={(el) => this.prefixEl = el as HTMLElement}>\n          <slot name=\"prefix\" onSlotchange={() => this.updateAddonWidths()}></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderSuffix() {\n    const hasSuffix = this.el.querySelector('[slot=\"suffix\"]') !== null;\n    if (hasSuffix) {\n      return (\n        <div class=\"pds-input__suffix\" part=\"suffix\" ref={(el) => this.suffixEl = el as HTMLElement}>\n          <slot name=\"suffix\" onSlotchange={() => this.updateAddonWidths()}></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderPrepend() {\n    const hasPrepend = this.el.querySelector('[slot=\"prepend\"]') !== null;\n    if (hasPrepend) {\n      return (\n        <div class=\"pds-input__prepend\" part=\"prepend\">\n          <slot name=\"prepend\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderAppend() {\n    const hasAppend = this.el.querySelector('[slot=\"append\"]') !== null;\n    if (hasAppend) {\n      return (\n        <div class=\"pds-input__append\" part=\"append\">\n          <slot name=\"append\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-input__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n      );\n    }\n    return null;\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el)\n    };\n    this.hasPrefix = this.el.querySelector('[slot=\"prefix\"]') !== null;\n    this.hasSuffix = this.el.querySelector('[slot=\"suffix\"]') !== null;\n    this.hasPrepend = this.el.querySelector('[slot=\"prepend\"]') !== null;\n    this.hasAppend = this.el.querySelector('[slot=\"append\"]') !== null;\n    this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n    // Store the original pdsInput event emitter\n    this.originalPdsInput = this.pdsInput;\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    // Re-establish ResizeObserver after DOM reconnection\n    // Only run if component has already loaded (refs are available)\n    if (this.hasLoaded && !this.resizeObserver) {\n      this.updateAddonWidths();\n      this.observeAddonResize();\n    }\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = undefined;\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.debounceChanged();\n    this.updateAddonWidths();\n    this.observeAddonResize();\n    // Set initial form value\n    this.updateFormValue();\n  }\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    /**\n     * If debounce is undefined, we have to manually revert the pdsInput emitter in case\n     * debounce used to be set to a number. Otherwise, the event would stay debounced.\n     */\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  @Watch('value')\n  protected valueChanged() {\n    const nativeInput = this.nativeInput;\n    const value = this.getValue();\n\n    if (nativeInput && nativeInput.value !== value && !this.isComposing) {\n      nativeInput.value = value;\n    }\n\n    // Update form value when value changes\n    this.updateFormValue();\n  }\n\n  private getValue(): string {\n    return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n  }\n\n  private onInputEvent = (ev: Event) => {\n    const input = ev.target as HTMLInputElement | null;\n    if (input) {\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n  };\n\n  private onChangeEvent = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private onBlurEvent = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      /**\n       * Emits the `pdsChange` event when the input value\n       * is different than the value when the input was focused.\n       */\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocusEvent = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onCompositionStart = () => {\n    this.isComposing = true;\n  }\n\n  private onCompositionEnd = () => {\n    this.isComposing = false;\n  }\n\n  private onKeyDownEvent = (ev: KeyboardEvent) => {\n    this.pdsKeyDown.emit(ev);\n  };\n\n  /**\n   * Emits a pdsChange event\n   */\n  private emitValueChange(event?: Event) {\n    const { value } = this;\n    const newValue = value == null ? value : value.toString();\n\n    this.focusedValue = newValue;\n    this.pdsChange.emit({ value: newValue, event });\n  }\n\n  /**\n   * Emits a `pdsInput` event\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n\n    this.pdsInput.emit({ value: newValue, event });\n  }\n\n  /**\n   * Updates the form value using ElementInternals API\n   */\n  private updateFormValue() {\n    if (this.internals && this.internals.setFormValue) {\n      const value = this.getValue();\n      this.internals.setFormValue(value || null);\n\n      // Set validity based on native input validation\n      if (this.nativeInput && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.nativeInput.validity,\n          this.nativeInput.validationMessage,\n          this.nativeInput\n        );\n      }\n    }\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is reset\n   */\n  formResetCallback() {\n    this.value = '';\n    this.updateFormValue();\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called when the form is disabled\n   */\n  formDisabledCallback(disabled: boolean) {\n    this.disabled = disabled;\n  }\n\n  /**\n   * Form Associated Custom Elements API: Called to restore form state\n   */\n  formStateRestoreCallback(state: string | FormData | null) {\n    if (typeof state === 'string') {\n      this.value = state;\n    } else if (state instanceof FormData && this.name) {\n      // Extract value from FormData using the input's name\n      const value = state.get(this.name);\n      if (typeof value === 'string') {\n        this.value = value;\n      }\n    }\n  }\n\n  render() {\n    const {\n      componentId,\n      disabled,\n      errorMessage,\n      helperMessage,\n      invalid = false,\n      label,\n    } = this;\n\n    const value = this.getValue();\n\n    const inputWrapperClasses = {\n      'pds-input__field-wrapper': true,\n      'has-focus': this.hasFocus,\n      'has-error': invalid || !!errorMessage,\n      'is-disabled': disabled,\n      'has-prefix': this.hasPrefix,\n      'has-suffix': this.hasSuffix,\n      'has-prepend': this.hasPrepend,\n      'has-append': this.hasAppend,\n    };\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n        has-prefix={this.hasPrefix ? 'true' : null}\n        has-suffix={this.hasSuffix ? 'true' : null}\n        has-prepend={this.hasPrepend ? 'true' : null}\n        has-append={this.hasAppend ? 'true' : null}\n        has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n        full-width={this.fullWidth ? 'true' : null}\n      >\n        <div class=\"pds-input\">\n          {label && (\n            <div class=\"pds-input__label-wrapper\">\n              <label htmlFor={componentId} class=\"pds-input__label\">\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {label}\n                  {this.required && <span class=\"pds-input__required-indicator\"> *</span>}\n                </span>\n              </label>\n              {!this.hideLabel && this.renderAction()}\n            </div>\n          )}\n\n          <div class={inputWrapperClasses}>\n            {this.renderPrepend()}\n            {this.renderPrefix()}\n            <input\n              ref={(input) => (this.nativeInput = input)}\n              class=\"pds-input__field\"\n              aria-describedby={assignDescription(componentId, invalid, helperMessage)}\n              aria-invalid={invalid ? \"true\" : undefined}\n              autocomplete={this.autocomplete}\n              disabled={disabled}\n              id={componentId}\n              max={this.max}\n              maxlength={this.maxlength}\n              min={this.min}\n              minlength={this.minlength}\n              name={this.name}\n              pattern={this.pattern}\n              placeholder={this.placeholder}\n              readOnly={this.readonly}\n              required={this.required}\n              step={this.step}\n              type={this.type}\n              value={value}\n              onInput={this.onInputEvent}\n              onChange={this.onChangeEvent}\n              onBlur={this.onBlurEvent}\n              onFocus={this.onFocusEvent}\n              onKeyDown={this.onKeyDownEvent}\n              onCompositionstart={this.onCompositionStart}\n              onCompositionend={this.onCompositionEnd}\n              {...this.inheritedAttributes}\n            />\n            {this.renderSuffix()}\n            {this.renderAppend()}\n          </div>\n\n          {helperMessage && (\n            <p class=\"pds-input__helper-message\" id={messageId(componentId, 'helper')}>\n              {helperMessage}\n            </p>\n          )}\n\n          {errorMessage && (\n            <p class=\"pds-input__error-message\" id={messageId(componentId, 'error')}>\n              <pds-icon icon={danger} size=\"small\" />\n              {errorMessage}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}