@pine-ds/core 3.4.3 → 3.5.1

package/dist/cjs/pds-input.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-input.entry.cjs.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-active);\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 #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px #ffffff, 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: 1;\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  }\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-end-end: var(--pine-dimension-none);\n  --pds-button-border-radius-start-end: var(--pine-dimension-none);\n  --pds-button-min-height: var(--pine-dimension-450);\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-end-start: var(--pine-dimension-none);\n  --pds-button-border-radius-start-start: var(--pine-dimension-none);\n  --pds-button-min-height: var(--pine-dimension-450);\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.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-active);\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\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\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    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\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);\n  margin-block-end: var(--pine-dimension-none);\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-input__error-message {\n  align-items: center;\n  color: var(--pds-input-error-color);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\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   * 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   * 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   * 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\n    if (this.el.attachInternals) {\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  /**\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 ? '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                {label}\n                {this.required && <span class=\"pds-input__required-indicator\"> *</span>}\n              </label>\n              {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              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":["h","inheritAriaAttributes","debounceEvent","Host","assignDescription","messageId","danger"],"mappings":"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"}
+{"version":3,"file":"pds-input.entry.cjs.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-active);\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 #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px #ffffff, 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: 1;\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  }\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-end-end: var(--pine-dimension-none);\n  --pds-button-border-radius-start-end: var(--pine-dimension-none);\n  --pds-button-min-height: var(--pine-dimension-450);\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-end-start: var(--pine-dimension-none);\n  --pds-button-border-radius-start-start: var(--pine-dimension-none);\n  --pds-button-min-height: var(--pine-dimension-450);\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.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-active);\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\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\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    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\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);\n  margin-block-end: var(--pine-dimension-none);\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-input__error-message {\n  align-items: center;\n  color: var(--pds-input-error-color);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\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","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   * 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   * 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\n    if (this.el.attachInternals) {\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  /**\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              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":["h","inheritAriaAttributes","debounceEvent","Host","assignDescription","messageId","danger"],"mappings":";;;;;;;;AAAA,MAAM,iBAAiB,GAAG,uEAAuE;;ACAjG,MAAM,QAAQ,GAAG,oTAAoT;;ACArU,MAAM,WAAW,GAAG,+0TAA+0T;;MCqBt1T,QAAQ,GAAA,MAAA;AANrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;AASU,QAAA,IAAmB,CAAA,mBAAA,GAAe,EAAE;AACpC,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAS3B;;AAEG;AACM,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAE1B;;AAEG;AACM,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAE1B;;AAEG;AACM,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;AAE3B;;AAEG;AACM,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAE1B;;AAEG;AACM,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAoI1B;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAG,MAAM;AAErB;;AAEG;AACoB,QAAA,IAAK,CAAA,KAAA,GAA4B,EAAE;AAO1D;;AAEG;AACM,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAwIjB,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,EAAS,KAAI;AACnC,YAAA,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC;YAClD,IAAI,KAAK,EAAE;gBACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE;;AAEhC,YAAA,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;AAC1B,SAAC;AAEO,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,EAAS,KAAI;AACpC,YAAA,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;AAC1B,SAAC;AAEO,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAc,KAAI;AACvC,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;YAErB,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,EAAE;AACpC;;;AAGG;AACH,gBAAA,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;;AAG1B,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;AACvB,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,EAAc,KAAI;AACxC,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK;AAE9B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;AACxB,SAAC;AAEO,QAAA,IAAkB,CAAA,kBAAA,GAAG,MAAK;AAChC,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI;AACzB,SAAC;AAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC9B,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK;AAC1B,SAAC;AA4KF;AA3dC;;;AAGG;AAEH,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,YAAA,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE;;;IA2HpB,iBAAiB,GAAA;QACvB,qBAAqB,CAAC,MAAK;AACzB,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW;AAC7C,gBAAA,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,CAAC;;AAGjE,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW;AAC7C,gBAAA,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,CAAC;;AAEnE,SAAC,CAAC;;IAGI,YAAY,GAAA;AAClB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;QACnE,IAAI,SAAS,EAAE;YACb,QACEA,iBAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAiB,EAAA,EACzFA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EAAS,CAAA,CACrE;;AAGV,QAAA,OAAO,IAAI;;IAGL,YAAY,GAAA;AAClB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;QACnE,IAAI,SAAS,EAAE;YACb,QACEA,iBAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,QAAQ,GAAG,EAAiB,EAAA,EACzFA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,iBAAiB,EAAE,EAAS,CAAA,CACrE;;AAGV,QAAA,OAAO,IAAI;;IAGL,aAAa,GAAA;AACnB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,KAAK,IAAI;QACrE,IAAI,UAAU,EAAE;YACd,QACEA,iBAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,SAAS,EAAA,EAC5CA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,SAAS,EAAQ,CAAA,CACxB;;AAGV,QAAA,OAAO,IAAI;;IAGL,YAAY,GAAA;AAClB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;QACnE,IAAI,SAAS,EAAE;YACb,QACEA,iBAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC1CA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACvB;;AAGV,QAAA,OAAO,IAAI;;IAGL,YAAY,GAAA;AAClB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;QACnE,IAAI,SAAS,EAAE;YACb,QACEA,iBAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC1CA,OAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACvB;;AAGV,QAAA,OAAO,IAAI;;IAGb,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,mBAAmB,GAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACnBC,gCAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAClC;AACD,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;AAClE,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;AAClE,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,KAAK,IAAI;AACpE,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;AAClE,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;;AAGlE,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ;;IAGvC,iBAAiB,GAAA;;AAEf,QAAA,IAAI,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE;;;IAI9C,gBAAgB,GAAA;QACd,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,iBAAiB,EAAE;;QAExB,IAAI,CAAC,eAAe,EAAE;;IAGxB,kBAAkB,GAAA;QAChB,IAAI,CAAC,iBAAiB,EAAE;;IAIhB,eAAe,GAAA;QACvB,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,IAAI;AAErD;;;AAGG;AACH,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,KAAK,SAAS,GAAG,gBAAgB,KAAhB,IAAA,IAAA,gBAAgB,cAAhB,gBAAgB,GAAI,QAAQ,GAAGC,mBAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC;;IAIjG,YAAY,GAAA;AACpB,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW;AACpC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAE7B,QAAA,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACnE,YAAA,WAAW,CAAC,KAAK,GAAG,KAAK;;;QAI3B,IAAI,CAAC,eAAe,EAAE;;IAGhB,QAAQ,GAAA;AACd,QAAA,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE;;AA4C/F;;AAEG;AACK,IAAA,eAAe,CAAC,KAAa,EAAA;AACnC,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;AACtB,QAAA,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE;AAEzD,QAAA,IAAI,CAAC,YAAY,GAAG,QAAQ;AAC5B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;;AAGjD;;AAEG;AACK,IAAA,eAAe,CAAC,KAAa,EAAA;AACnC,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;;AAGtB,QAAA,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE;AAEzD,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;;AAGhD;;AAEG;IACK,eAAe,GAAA;QACrB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;AACjD,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;YAC7B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,IAAI,IAAI,CAAC;;AAG1C,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE;gBACpE,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,IAAI,CAAC,WAAW,CAAC,QAAQ,EACzB,IAAI,CAAC,WAAW,CAAC,iBAAiB,EAClC,IAAI,CAAC,WAAW,CACjB;;;;AAKP;;AAEG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;QACf,IAAI,CAAC,eAAe,EAAE;;AAGxB;;AAEG;AACH,IAAA,oBAAoB,CAAC,QAAiB,EAAA;AACpC,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;;AAG1B;;AAEG;AACH,IAAA,wBAAwB,CAAC,KAA+B,EAAA;AACtD,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;aACb,IAAI,KAAK,YAAY,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;;YAEjD,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;AAClC,YAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,gBAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;;;IAKxB,MAAM,GAAA;AACJ,QAAA,MAAM,EACJ,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,OAAO,GAAG,KAAK,EACf,KAAK,GACN,GAAG,IAAI;AAER,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;AAE7B,QAAA,MAAM,mBAAmB,GAAG;AAC1B,YAAA,0BAA0B,EAAE,IAAI;YAChC,WAAW,EAAE,IAAI,CAAC,QAAQ;AAC1B,YAAA,WAAW,EAAE,OAAO,IAAI,CAAC,CAAC,YAAY;AACtC,YAAA,aAAa,EAAE,QAAQ;YACvB,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,aAAa,EAAE,IAAI,CAAC,UAAU;YAC9B,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B;AAED,QAAA,QACEF,QAACG,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,eAAA,EACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC7B,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,gBAChC,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,IAAI,EAAA,YAAA,EAC9B,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,IAAI,iBAC7B,IAAI,CAAC,UAAU,GAAG,MAAM,GAAG,IAAI,EAAA,YAAA,EAChC,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,IAAI,EAAA,YAAA,EAC9B,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,IAAI,EACjD,YAAA,EAAA,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,IAAI,EAAA,EAE1CH,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACnB,KAAK,KACJA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnCA,OAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,WAAW,EAAE,KAAK,EAAC,kBAAkB,EAAA,EACnDA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,EAAA,EACjD,KAAK,EACL,IAAI,CAAC,QAAQ,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,+BAA+B,EAAU,EAAA,IAAA,CAAA,CAClE,CACD,EACP,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,EAAE,CACnC,CACP,EAEDA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,mBAAmB,EAAA,EAC5B,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,YAAY,EAAE,EACpBA,OAAA,CAAA,OAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,KAAK,MAAM,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EAC1C,KAAK,EAAC,kBAAkB,EACN,kBAAA,EAAAI,sBAAiB,CAAC,WAAW,EAAE,OAAO,EAAE,aAAa,CAAC,EAAA,cAAA,EAC1D,OAAO,GAAG,MAAM,GAAG,SAAS,EAC1C,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,WAAW,EACf,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,MAAM,EAAE,IAAI,CAAC,WAAW,EACxB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,IACnC,IAAI,CAAC,mBAAmB,CAC5B,CAAA,EACD,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CAAC,YAAY,EAAE,CAChB,EAEL,aAAa,KACZJ,OAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,2BAA2B,EAAC,EAAE,EAAEK,cAAS,CAAC,WAAW,EAAE,QAAQ,CAAC,EACtE,EAAA,aAAa,CACZ,CACL,EAEA,YAAY,KACXL,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAC,EAAE,EAAEK,cAAS,CAAC,WAAW,EAAE,OAAO,CAAC,EAAA,EACrEL,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAEM,cAAM,EAAE,IAAI,EAAC,OAAO,EAAG,CAAA,EACtC,YAAY,CACX,CACL,CACG,CACD;;;;;;;;;;;;;"}

package/dist/cjs/pds-link.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-g-uSeICs.js');
 var utils = require('./utils-7jx8T2mW.js');
-var index$1 = require('./index-BfqrB2cC.js');
+var index$1 = require('./index-DVaLegMK.js');
 
 const pdsLinkCss = ":host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pine-color-text));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pine-color-text-hover));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-grey-150)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--pine-color-text-hover);text-decoration:underline}";
 
@@ -47,8 +47,8 @@ const PdsLink = class {
         return linkStyles;
     }
     render() {
-        return (index.h("a", { key: 'eeea6a903a33bf8212506970eddff01e19e02523', class: this.classNames(), href: this.href, id: this.componentId, part: "link", target: this.external ? '_blank' : undefined, style: this.setLinkStyles() }, index.h("slot", { key: 'b860a1927bc0938d139d9ba9ad69801f27dabc50' }, this.href), this.external &&
-            index.h("pds-icon", { key: 'eda897680a6e67afd2e112646a84b2bffd1d0cc9', icon: index$1.launch, size: this.fontSize })));
+        return (index.h("a", { key: '34c7cf55bccf8bb42e1e0ce6d27205580f2777be', class: this.classNames(), href: this.href, id: this.componentId, part: "link", target: this.external ? '_blank' : undefined, style: this.setLinkStyles() }, index.h("slot", { key: 'e8aa022b0f7d74073b2235e29316e63c2c0cd06e' }, this.href), this.external &&
+            index.h("pds-icon", { key: 'faa3d48198b12bd797ca60cb85aa0039e0457155', icon: index$1.launch, size: this.fontSize })));
     }
 };
 PdsLink.style = pdsLinkCss;

package/dist/cjs/pds-loader.cjs.entry.js

@@ -48,7 +48,7 @@ const PdsLoader = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '723a80c291dd72959e43f10575bb947db80b48bc', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (index.h("div", { key: 'f239c576ab11e3ddf07fc15e1084cc67b55e61d7', class: "pds-loader--spinner" }, index.h("svg", { key: 'd1c7c73d1afbb62646faffae7f2101de5c7c6fb8', style: this.style(), viewBox: "0 0 200 200", fill: "none" }, index.h("defs", { key: '8e4ff591173df6169ab0472f0e5952f72bf29b25' }, index.h("linearGradient", { key: '06d48bf0fe1d0db36dbd842c8a1975f965936389', id: "spinner-secondHalf" }, index.h("stop", { key: '7d4528b15ee0d029062465a2b38a138e17051344', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), index.h("stop", { key: '67825cd7c3b08d4f50fe1bea3a2eee079b556229', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), index.h("linearGradient", { key: '408f7bb876bd2649f2f22f4ab032d321d69cd6b0', id: "spinner-firstHalf" }, index.h("stop", { key: '3e530c0cdee5f8d19db55cf8aeb099f50be6eeea', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), index.h("stop", { key: '61ca38ceb7536a3eb6da8d70004834b8ecc03a4e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), index.h("g", { key: 'cbbfe03013311e2830e7d0bc83585e3f58677a50', class: "pds-loader__spinner-path" }, index.h("path", { key: 'e5376fd10b97844faf97167fd89c9630d42e8c26', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), index.h("path", { key: '0c484548cee25d885bea7017ebbad7be9fe0a4df', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), index.h("path", { key: 'c7d41b97e8cb16182ffb408b1205dd68e70a0b92', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (index.h("div", { key: '39fbcd19d720242aeef165281a68ae032c5f7368', class: "pds-loader--typing" }, index.h("span", { key: 'ca2c0ef3d326be687b15196964be691cfb5de6e3' }), index.h("span", { key: 'b2d72db5856ab236c546a67fe8cb375e5cf0d500' }), index.h("span", { key: '9d64698e62e906d151ccbedd438a4390406505c5' }))), index.h("div", { key: '2d485557a642a81aec4be06b9a6d2b6e86e45563', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, index.h("slot", { key: '5e1925ec79160b5ac0dc23530aae2a933ce2ef2f', name: "label" }, "Loading..."))));
+        return (index.h(index.Host, { key: 'a625008c14efc6e95e7d14a963bfedf48bbb0f88', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (index.h("div", { key: '16ac91e8f39ec4b7a6f19a607949ca9cb033703c', class: "pds-loader--spinner" }, index.h("svg", { key: 'a345131fedbe662c191339c613fd5b2fbd7f91c3', style: this.style(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, index.h("defs", { key: '77668debaa8c12da38f7b0a96e0301bdd2f39f8e' }, index.h("linearGradient", { key: '898b449cd30eca28b39f1508bf0d7aea3ec0a801', id: "spinner-secondHalf" }, index.h("stop", { key: 'da2028784af98e47bc7cbb585e8522eeee03866a', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), index.h("stop", { key: '97d2e6d2648c4827ee6ca655c5fe82647a78802a', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), index.h("linearGradient", { key: '9440650b65b8cd1cbf14ff6075c3defee020cfd8', id: "spinner-firstHalf" }, index.h("stop", { key: '66ed5872e015724190520b138f40577864a8cdc6', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), index.h("stop", { key: 'a2a18640ef048ecf69078c615aaf89350f5d8e05', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), index.h("g", { key: 'eafafa5ebcefa15b4d1c73ee5b7567e757173c6a', class: "pds-loader__spinner-path" }, index.h("path", { key: '6fc3b09feee4590f18d9a507ee479cac68aa543e', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), index.h("path", { key: '8457c4b90c537e092022f83e0a1a8a1dcf64a841', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), index.h("path", { key: '4a41cf26e27659f8ce9bdbdc1fc1fa65ddb7d43d', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (index.h("div", { key: '2597e11067ebfa166a3e7ec367614c0efaa0ca9e', class: "pds-loader--typing" }, index.h("span", { key: '921069f426029f87fa594ad0d9d347d13c6ebeae' }), index.h("span", { key: 'c23f988a152fbf5927a93d7922ad23fe592e1781' }), index.h("span", { key: 'b469a30a457778f49298d1a7e2123a60426097f1' }))), index.h("div", { key: '06073048ca38b9c9222f2e9a738800bda9674086', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, index.h("slot", { key: '656c5e4b86d43a95e051ee273ab7c23a942594f7', name: "label" }, "Loading..."))));
     }
 };
 PdsLoader.style = pdsLoaderCss;

package/dist/cjs/pds-loader.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-loader.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/pds-loader/pds-loader.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.tsx"],"sourcesContent":[":host {\n  --loader-color: var(--pine-color-brand);\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pine-dimension-xs);\n}\n\n\n:host(.pds-loader--hidden),\n.pds-loader--hidden {\n  border-width: 0;\n  clip: rect(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// Default Loader\n.pds-loader--spinner svg {\n  --number-spinner-timing: 2s;\n  --number-spinner-path-timing: 1.5s;\n\n  animation: rotate var(--number-spinner-timing) linear infinite;\n  color: var(--loader-color);\n}\n\n.pds-loader__spinner-path {\n  stroke-width: 8px;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n// Typing Loader\n.pds-loader--typing {\n  --number-typing-timing: 1s;\n\n  --opacity-typing-dot-default: 0.4;\n  --opacity-typing-dot-active: 1;\n\n  align-items: center;\n  background-color: var(--pine-color-background-container-disabled);\n  border-radius: var(--pine-dimension-sm);\n  box-shadow: var(--pine-box-shadow);\n  display: inline-flex;\n  gap: var(--pine-dimension-2xs);\n  margin-block: var(--pine-dimension-none);\n  margin-inline: auto;\n  padding-block: 15px;\n  padding-inline: 20px;\n  position: relative;\n\n  span {\n    background-color: var(--pine-color-border-hover);\n    block-size: 6px;\n    border-radius: var(--pine-border-radius-full);\n    inline-size: 6px;\n    opacity: var(--opacity-typing-dot-default);\n\n    @for $i from 1 through 3 {\n      &:nth-of-type(#{$i}) {\n        animation: var(--number-typing-timing) typing infinite ($i * 0.3333s);\n      }\n    }\n  }\n}\n\n@keyframes typing {\n  50% {\n    opacity: var(--opacity-typing-dot-active);\n    transform: scale(1.25);\n  }\n}\n\n.pds-loader__label {\n  --typography-label-default: var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);\n\n  font: var(--typography-label-default);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot label - Default slot for Loader label text.\n */\n\n@Component({\n  tag: 'pds-loader',\n  styleUrls: ['pds-loader.scss'],\n  shadow: true,\n})\nexport class PdsLoader {\n  /**\n   * If false, the loader will be hidden.\n   */\n  @Prop() isLoading: boolean = true;\n\n  /**\n   * Determines whether the loader should display a label.\n   */\n  @Prop() showLabel?: boolean = false;\n\n  /**\n   * Sets the size of the spinner loader. Value can be preset or custom.\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string = 'md';\n\n  /**\n   * Determines the type of loader.\n   */\n  @Prop() variant: 'spinner' | 'typing' = 'spinner';\n\n  private loaderSize() {\n    const sizes: { [key: string]: string } = {\n      xs: '24px',\n      sm: '32px',\n      md: '48px',\n      lg: '64px',\n      xl: '80px',\n    };\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  private style = () => {\n    if (this.size !== undefined) {\n      return {\n        height: this.loaderSize(),\n        width: this.loaderSize(),\n      };\n    }\n  };\n\n  render() {\n    return (\n      <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n        {this.variant === 'spinner' && (\n          <div class=\"pds-loader--spinner\">\n            <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\">\n              <defs>\n                <linearGradient id=\"spinner-secondHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n                <linearGradient id=\"spinner-firstHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n              </defs>\n\n              <g class=\"pds-loader__spinner-path\">\n                <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n                <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n                <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n              </g>\n            </svg>\n          </div>\n        )}\n\n        {this.variant === 'typing' && (\n          <div class=\"pds-loader--typing\">\n            <span></span>\n            <span></span>\n            <span></span>\n          </div>\n        )}\n\n        <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n          <slot name=\"label\">Loading...</slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-loader.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/pds-loader/pds-loader.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.tsx"],"sourcesContent":[":host {\n  --loader-color: var(--pine-color-brand);\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pine-dimension-xs);\n}\n\n\n:host(.pds-loader--hidden),\n.pds-loader--hidden {\n  border-width: 0;\n  clip: rect(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// Default Loader\n.pds-loader--spinner svg {\n  --number-spinner-timing: 2s;\n  --number-spinner-path-timing: 1.5s;\n\n  animation: rotate var(--number-spinner-timing) linear infinite;\n  color: var(--loader-color);\n}\n\n.pds-loader__spinner-path {\n  stroke-width: 8px;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n// Typing Loader\n.pds-loader--typing {\n  --number-typing-timing: 1s;\n\n  --opacity-typing-dot-default: 0.4;\n  --opacity-typing-dot-active: 1;\n\n  align-items: center;\n  background-color: var(--pine-color-background-container-disabled);\n  border-radius: var(--pine-dimension-sm);\n  box-shadow: var(--pine-box-shadow);\n  display: inline-flex;\n  gap: var(--pine-dimension-2xs);\n  margin-block: var(--pine-dimension-none);\n  margin-inline: auto;\n  padding-block: 15px;\n  padding-inline: 20px;\n  position: relative;\n\n  span {\n    background-color: var(--pine-color-border-hover);\n    block-size: 6px;\n    border-radius: var(--pine-border-radius-full);\n    inline-size: 6px;\n    opacity: var(--opacity-typing-dot-default);\n\n    @for $i from 1 through 3 {\n      &:nth-of-type(#{$i}) {\n        animation: var(--number-typing-timing) typing infinite ($i * 0.3333s);\n      }\n    }\n  }\n}\n\n@keyframes typing {\n  50% {\n    opacity: var(--opacity-typing-dot-active);\n    transform: scale(1.25);\n  }\n}\n\n.pds-loader__label {\n  --typography-label-default: var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);\n\n  font: var(--typography-label-default);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @part loader-svg - Exposes the spinner SVG element for color customization.\n * @slot label - Default slot for Loader label text.\n */\n\n@Component({\n  tag: 'pds-loader',\n  styleUrls: ['pds-loader.scss'],\n  shadow: true,\n})\nexport class PdsLoader {\n  /**\n   * If false, the loader will be hidden.\n   */\n  @Prop() isLoading: boolean = true;\n\n  /**\n   * Determines whether the loader should display a label.\n   */\n  @Prop() showLabel?: boolean = false;\n\n  /**\n   * Sets the size of the spinner loader. Value can be preset or custom.\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string = 'md';\n\n  /**\n   * Determines the type of loader.\n   */\n  @Prop() variant: 'spinner' | 'typing' = 'spinner';\n\n  private loaderSize() {\n    const sizes: { [key: string]: string } = {\n      xs: '24px',\n      sm: '32px',\n      md: '48px',\n      lg: '64px',\n      xl: '80px',\n    };\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  private style = () => {\n    if (this.size !== undefined) {\n      return {\n        height: this.loaderSize(),\n        width: this.loaderSize(),\n      };\n    }\n  };\n\n  render() {\n    return (\n      <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n        {this.variant === 'spinner' && (\n          <div class=\"pds-loader--spinner\">\n            <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\" part=\"loader-svg\">\n              <defs>\n                <linearGradient id=\"spinner-secondHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n                <linearGradient id=\"spinner-firstHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n              </defs>\n\n              <g class=\"pds-loader__spinner-path\">\n                <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n                <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n                <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n              </g>\n            </svg>\n          </div>\n        )}\n\n        {this.variant === 'typing' && (\n          <div class=\"pds-loader--typing\">\n            <span></span>\n            <span></span>\n            <span></span>\n          </div>\n        )}\n\n        <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n          <slot name=\"label\">Loading...</slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pds-loader.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-loader.entry.cjs.js","sources":["src/components/pds-loader/pds-loader.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.tsx"],"sourcesContent":[":host {\n  --loader-color: var(--pine-color-brand);\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pine-dimension-xs);\n}\n\n\n:host(.pds-loader--hidden),\n.pds-loader--hidden {\n  border-width: 0;\n  clip: rect(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// Default Loader\n.pds-loader--spinner svg {\n  --number-spinner-timing: 2s;\n  --number-spinner-path-timing: 1.5s;\n\n  animation: rotate var(--number-spinner-timing) linear infinite;\n  color: var(--loader-color);\n}\n\n.pds-loader__spinner-path {\n  stroke-width: 8px;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n// Typing Loader\n.pds-loader--typing {\n  --number-typing-timing: 1s;\n\n  --opacity-typing-dot-default: 0.4;\n  --opacity-typing-dot-active: 1;\n\n  align-items: center;\n  background-color: var(--pine-color-background-container-disabled);\n  border-radius: var(--pine-dimension-sm);\n  box-shadow: var(--pine-box-shadow);\n  display: inline-flex;\n  gap: var(--pine-dimension-2xs);\n  margin-block: var(--pine-dimension-none);\n  margin-inline: auto;\n  padding-block: 15px;\n  padding-inline: 20px;\n  position: relative;\n\n  span {\n    background-color: var(--pine-color-border-hover);\n    block-size: 6px;\n    border-radius: var(--pine-border-radius-full);\n    inline-size: 6px;\n    opacity: var(--opacity-typing-dot-default);\n\n    @for $i from 1 through 3 {\n      &:nth-of-type(#{$i}) {\n        animation: var(--number-typing-timing) typing infinite ($i * 0.3333s);\n      }\n    }\n  }\n}\n\n@keyframes typing {\n  50% {\n    opacity: var(--opacity-typing-dot-active);\n    transform: scale(1.25);\n  }\n}\n\n.pds-loader__label {\n  --typography-label-default: var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);\n\n  font: var(--typography-label-default);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot label - Default slot for Loader label text.\n */\n\n@Component({\n  tag: 'pds-loader',\n  styleUrls: ['pds-loader.scss'],\n  shadow: true,\n})\nexport class PdsLoader {\n  /**\n   * If false, the loader will be hidden.\n   */\n  @Prop() isLoading: boolean = true;\n\n  /**\n   * Determines whether the loader should display a label.\n   */\n  @Prop() showLabel?: boolean = false;\n\n  /**\n   * Sets the size of the spinner loader. Value can be preset or custom.\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string = 'md';\n\n  /**\n   * Determines the type of loader.\n   */\n  @Prop() variant: 'spinner' | 'typing' = 'spinner';\n\n  private loaderSize() {\n    const sizes: { [key: string]: string } = {\n      xs: '24px',\n      sm: '32px',\n      md: '48px',\n      lg: '64px',\n      xl: '80px',\n    };\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  private style = () => {\n    if (this.size !== undefined) {\n      return {\n        height: this.loaderSize(),\n        width: this.loaderSize(),\n      };\n    }\n  };\n\n  render() {\n    return (\n      <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n        {this.variant === 'spinner' && (\n          <div class=\"pds-loader--spinner\">\n            <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\">\n              <defs>\n                <linearGradient id=\"spinner-secondHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n                <linearGradient id=\"spinner-firstHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n              </defs>\n\n              <g class=\"pds-loader__spinner-path\">\n                <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n                <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n                <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n              </g>\n            </svg>\n          </div>\n        )}\n\n        {this.variant === 'typing' && (\n          <div class=\"pds-loader--typing\">\n            <span></span>\n            <span></span>\n            <span></span>\n          </div>\n        )}\n\n        <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n          <slot name=\"label\">Loading...</slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}
+{"version":3,"file":"pds-loader.entry.cjs.js","sources":["src/components/pds-loader/pds-loader.scss?tag=pds-loader&encapsulation=shadow","src/components/pds-loader/pds-loader.tsx"],"sourcesContent":[":host {\n  --loader-color: var(--pine-color-brand);\n  align-items: center;\n  display: flex;\n  flex-direction: column;\n  gap: var(--pine-dimension-xs);\n}\n\n\n:host(.pds-loader--hidden),\n.pds-loader--hidden {\n  border-width: 0;\n  clip: rect(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// Default Loader\n.pds-loader--spinner svg {\n  --number-spinner-timing: 2s;\n  --number-spinner-path-timing: 1.5s;\n\n  animation: rotate var(--number-spinner-timing) linear infinite;\n  color: var(--loader-color);\n}\n\n.pds-loader__spinner-path {\n  stroke-width: 8px;\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n// Typing Loader\n.pds-loader--typing {\n  --number-typing-timing: 1s;\n\n  --opacity-typing-dot-default: 0.4;\n  --opacity-typing-dot-active: 1;\n\n  align-items: center;\n  background-color: var(--pine-color-background-container-disabled);\n  border-radius: var(--pine-dimension-sm);\n  box-shadow: var(--pine-box-shadow);\n  display: inline-flex;\n  gap: var(--pine-dimension-2xs);\n  margin-block: var(--pine-dimension-none);\n  margin-inline: auto;\n  padding-block: 15px;\n  padding-inline: 20px;\n  position: relative;\n\n  span {\n    background-color: var(--pine-color-border-hover);\n    block-size: 6px;\n    border-radius: var(--pine-border-radius-full);\n    inline-size: 6px;\n    opacity: var(--opacity-typing-dot-default);\n\n    @for $i from 1 through 3 {\n      &:nth-of-type(#{$i}) {\n        animation: var(--number-typing-timing) typing infinite ($i * 0.3333s);\n      }\n    }\n  }\n}\n\n@keyframes typing {\n  50% {\n    opacity: var(--opacity-typing-dot-active);\n    transform: scale(1.25);\n  }\n}\n\n.pds-loader__label {\n  --typography-label-default: var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);\n\n  font: var(--typography-label-default);\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @part loader-svg - Exposes the spinner SVG element for color customization.\n * @slot label - Default slot for Loader label text.\n */\n\n@Component({\n  tag: 'pds-loader',\n  styleUrls: ['pds-loader.scss'],\n  shadow: true,\n})\nexport class PdsLoader {\n  /**\n   * If false, the loader will be hidden.\n   */\n  @Prop() isLoading: boolean = true;\n\n  /**\n   * Determines whether the loader should display a label.\n   */\n  @Prop() showLabel?: boolean = false;\n\n  /**\n   * Sets the size of the spinner loader. Value can be preset or custom.\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xs' // 24px\n  | 'sm' // 32px\n  | 'md' // 48px\n  | 'lg' // 64px\n  | 'xl' // 80px\n  | string = 'md';\n\n  /**\n   * Determines the type of loader.\n   */\n  @Prop() variant: 'spinner' | 'typing' = 'spinner';\n\n  private loaderSize() {\n    const sizes: { [key: string]: string } = {\n      xs: '24px',\n      sm: '32px',\n      md: '48px',\n      lg: '64px',\n      xl: '80px',\n    };\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size;\n    }\n  }\n\n  private style = () => {\n    if (this.size !== undefined) {\n      return {\n        height: this.loaderSize(),\n        width: this.loaderSize(),\n      };\n    }\n  };\n\n  render() {\n    return (\n      <Host class={`pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`} aria-hidden={!this.isLoading} aria-busy={this.isLoading} aria-live=\"polite\">\n        {this.variant === 'spinner' && (\n          <div class=\"pds-loader--spinner\">\n            <svg style={this.style()} viewBox=\"0 0 200 200\" fill=\"none\" part=\"loader-svg\">\n              <defs>\n                <linearGradient id=\"spinner-secondHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"0\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n                <linearGradient id=\"spinner-firstHalf\">\n                  <stop offset=\"0%\" stop-opacity=\"1\" stop-color=\"currentColor\" />\n                  <stop offset=\"100%\" stop-opacity=\"0.5\" stop-color=\"currentColor\" />\n                </linearGradient>\n              </defs>\n\n              <g class=\"pds-loader__spinner-path\">\n                <path stroke=\"url(#spinner-secondHalf)\" d=\"M 4 100 A 96 96 0 0 1 196 100\" />\n                <path stroke=\"url(#spinner-firstHalf)\" d=\"M 196 100 A 96 96 0 0 1 4 100\" />\n\n                <path stroke=\"currentColor\" stroke-linecap=\"round\" d=\"M 4 100 A 96 96 0 0 1 4 98\" />\n              </g>\n            </svg>\n          </div>\n        )}\n\n        {this.variant === 'typing' && (\n          <div class=\"pds-loader--typing\">\n            <span></span>\n            <span></span>\n            <span></span>\n          </div>\n        )}\n\n        <div class={`pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}`}>\n          <slot name=\"label\">Loading...</slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/dist/cjs/pds-modal-content.cjs.entry.js

@@ -78,10 +78,10 @@ const PdsModalContent = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '897268bfde6b22a4a8c05b413683b36a321df502' }, index.h("div", { key: 'f61227128896753e6bdfa9ea62402a23460445e6', class: {
+        return (index.h(index.Host, { key: '7fcd0c2d15c40fcb64137a36f056965f20c8edac' }, index.h("div", { key: '477bf82a379f1a6a0411b0bf9d740cef4b43fab6', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: { maxHeight: this.contentMaxHeight }, tabindex: "-1" }, index.h("slot", { key: '20d4fbb16bc097eaa4f7899ea71feaac65e057d4' }))));
+            }, style: { maxHeight: this.contentMaxHeight }, tabindex: "-1" }, index.h("slot", { key: '0f7b29d85da0a61614725051fee71df1964a91fa' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-modal-footer.cjs.entry.js

@@ -9,7 +9,7 @@ const PdsModalFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("footer", { key: 'daaff7132c3b6bcaecafcb4e8dbbf25bf3ad1de4', class: "pds-modal__footer" }, index.h("slot", { key: '06ba1513613bea247b8d533a750f1331c509e2e5' })));
+        return (index.h("footer", { key: 'e20af7a0bf5d8891922eca83a20e61b51a715d9b', class: "pds-modal__footer" }, index.h("slot", { key: 'a5dc03e418eb7d1145fc5bc4d7517a37ddd39156' })));
     }
 };
 PdsModalFooter.style = pdsModalFooterCss;

package/dist/cjs/pds-modal-header.cjs.entry.js

@@ -9,7 +9,7 @@ const PdsModalHeader = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("header", { key: '8592e91625152d821a52a7c6ecb4b4077c8b12ae', class: "pds-modal__header" }, index.h("slot", { key: '6a9f38a579019ef3fd6c3085eb3bfc9865070200' })));
+        return (index.h("header", { key: 'fae059fcb90ead7e78fb5925ea091a6952dd3f07', class: "pds-modal__header" }, index.h("slot", { key: '757a74c0d924cc91607008a9aeb355fc5413f168' })));
     }
 };
 PdsModalHeader.style = pdsModalHeaderCss;

package/dist/cjs/pds-modal.cjs.entry.js

@@ -235,10 +235,10 @@ const PdsModal = class {
         return thisZIndex === maxZIndex;
     }
     render() {
-        return (index.h("dialog", { key: '037701d53182dfa8a1c65c4f72433f80d569c2a0', class: {
+        return (index.h("dialog", { key: 'd8521939e6a88f64e1787840aa99fd1ec5899254', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, index.h("div", { key: '33cf8ccba3a56b0ce9795b85e871055ce1a1c1ec', class: `pds-modal pds-modal--${this.size} pds-modal--scrollable` }, index.h("slot", { key: '9f98dc099f74cf9a33de8b71bf5508fd9b353c48' }))));
+            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, index.h("div", { key: '89b838aa26621957de1caf77c27be855d17acb0a', class: `pds-modal pds-modal--${this.size} pds-modal--scrollable` }, index.h("slot", { key: '107062efee2afb25eddba26d0d468695401dd5ba' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/pds-popover.cjs.entry.js

@@ -108,7 +108,7 @@ const PdsPopover = class {
         popoverEl.style.left = `${left}px`;
     }
     render() {
-        return (index.h(index.Host, { key: '74048ac8ac89c87e9a65565151627dca0d7811b4' }, index.h("button", { key: '61cbfd4ee6572e181e0f098acba36a5855280d62', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), index.h("div", { key: 'f88b815d14fb15fe4eff85be908e1aa85f1195fb', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, index.h("slot", { key: '5dd632e9e4a833f5dc26626181f63b85340590a1' }))));
+        return (index.h(index.Host, { key: '2a46550245e4718ba7aa89ee518f8ac7b1ff9d94' }, index.h("button", { key: 'd5a93a38a8f3b6daa6c22afd2324f37a66e0d8c3', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction, onClick: this.handleClick }, this.text), index.h("div", { key: '212800e683ed451561c4b0fb9d539f514072ef3a', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, index.h("slot", { key: '46b2f86f847a3549452b413860e270f1a4e1de0d' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-progress.cjs.entry.js

@@ -24,7 +24,7 @@ const PdsProgress = class {
         this.showPercent = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'e260269fec1449c354e6c66d2547697180839002', class: this.animated ? { 'is-animated': this.animated } : '' }, index.h("div", { key: '44996e689f4ba5e15d40a3e6df3382d532533290', class: "pds-progress" }, index.h("label", { key: '01d3d9a419bd0f38e3b39c37739a9c7a4966da49', class: "pds-progress__label", htmlFor: this.componentId }, this.label), index.h("progress", { key: '78013be8fb0d05059ee05a5aba1a6e4ae50e5019', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && index.h("div", { key: 'd9da8650c998c67f119818e10a891f55c3baa18e', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (index.h(index.Host, { key: '17be876c948e7f0dc3d22889901d2073cfea3fbc', class: this.animated ? { 'is-animated': this.animated } : '' }, index.h("div", { key: '07a801720eb26ae76ba931b04294d7815f7caaa4', class: "pds-progress" }, index.h("label", { key: '39572b5ec58c1b47b59fd34be71f713e680b01c0', class: "pds-progress__label", htmlFor: this.componentId }, this.label), index.h("progress", { key: '89a07e62b943ded0bd24d99bc93d140d088f50d3', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && index.h("div", { key: 'a7682be6b110db79f95be6f53ce463ff1ffd0212', class: "pds-progress__percentage" }, this.percent, "%")));
     }
 };
 PdsProgress.style = pdsProgressCss;

package/dist/cjs/pds-property.cjs.entry.js

@@ -13,7 +13,7 @@ const PdsProperty = class {
         this.icon = 'star';
     }
     render() {
-        return (index.h(index.Host, { key: 'ff84eef7431dfe6081018528a76987dec7f1dfbc', id: this.componentId }, index.h("pds-box", { key: 'c9b8218d49ff7ac0a94cb65b9bbbe2069d4651ba', "align-items": "center", gap: "xs" }, index.h("pds-icon", { key: '06d09314acdda08f48267c4af63eb5393eadfca1', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), index.h("slot", { key: 'ca3654f3ee0791f5dcce5d0cff0c78e3aa22150b' }))));
+        return (index.h(index.Host, { key: 'd02756e0996d0544bafd8a0e5160151344e8dd5f', id: this.componentId }, index.h("pds-box", { key: 'f2f53ba33e75bc1dbea374ba57fac2fd7e11a43c', "align-items": "center", gap: "xs" }, index.h("pds-icon", { key: '62e87401c8ab443583c33a07266377484bfdc72a', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), index.h("slot", { key: 'e8461312f8135f07218b604ce9ff6efcf48bfc1b' }))));
     }
 };
 PdsProperty.style = pdsPropertyCss;

package/dist/cjs/pds-radio.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-g-uSeICs.js');
 var form = require('./form-Bx4nzJBo.js');
-var index$1 = require('./index-BfqrB2cC.js');
+var index$1 = require('./index-DVaLegMK.js');
 
 const labelCss = ".sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
 
@@ -52,9 +52,9 @@ const PdsRadio = class {
         return classNames.join('  ');
     }
     render() {
-        return (index.h(index.Host, { key: '5e8a4bd868172cda64aa2ad4697c7c41f0bdf633', class: this.classNames() }, index.h("label", { key: 'f18a8a06cf3f9be68ab6b110fe67a8af7c1e8595', htmlFor: this.componentId }, index.h("input", { key: '7a3ef56682ebe1facedf1eb52445f85e5e7de9d1', "aria-describedby": form.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), index.h("span", { key: 'bd0c351062e30ac4f68252497affdcde4730ef3d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            index.h("div", { key: '3b180595a4c088df1f121937c11f7518a802b22f', class: 'pds-radio__message', id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            index.h("div", { key: 'e931d2de83247c74bac1568f479ee99abd1f20a0', class: `pds-radio__message pds-radio__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '7dab998a2992e3738b5b3cd14ca7031ff6db6dbb', icon: index$1.danger, size: "small" }), this.errorMessage)));
+        return (index.h(index.Host, { key: '07bc6e41d1f10d256b3b0ed1512374ad94d2d395', class: this.classNames() }, index.h("label", { key: 'b3c40d9894a449f6471b4b05373cb2b08811dbd2', htmlFor: this.componentId }, index.h("input", { key: 'c4222e2fa2fa88f32c365bdd09f7cbf9fe6e8dcf', "aria-describedby": form.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), index.h("span", { key: 'da54747a57ef58df02ef3eaa6c5fa64306c308dd', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            index.h("div", { key: 'd569355b7ddf0dcb9ca37341cb301c911ec20357', class: 'pds-radio__message', id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            index.h("div", { key: '7ab12a87da2935f64b99eef4c3e31f4745d182bf', class: `pds-radio__message pds-radio__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '088239c13a84b6a948f211a2cab75e6e0a850662', icon: index$1.danger, size: "small" }), this.errorMessage)));
     }
 };
 PdsRadio.style = labelCss + pdsRadioCss;

package/dist/cjs/pds-row.cjs.entry.js

@@ -39,7 +39,7 @@ const PdsRow = class {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return index.h(index.Host, { key: 'b16cc4fa554894bccdb3dadbe07c531145dc2416', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return index.h(index.Host, { key: '9564a3a3a4bb78c947c79f803ddcec988a2ef6d3', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
 };
 PdsRow.style = pdsRowCss;

package/dist/cjs/pds-select.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-g-uSeICs.js');
 var form = require('./form-Bx4nzJBo.js');
-var index$1 = require('./index-BfqrB2cC.js');
+var index$1 = require('./index-DVaLegMK.js');
 
 const pdsSelectTokensCss = ":host{--pine-select-color-background-danger:var(--pine-color-red-050)}";
 
@@ -205,7 +205,7 @@ const PdsSelect = class {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (index.h(index.Host, { key: 'fea78ba16795a1eae88028f4ff13caeab17ad74f', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, index.h("div", { key: '532a1537af1cdc9928cdb42f33530d8141941f56', class: "pds-select" }, !this.hideLabel && (index.h("div", { key: '6284c433266ba8991a7d32e16927147287fcf009', class: "pds-select__label-wrapper" }, index.h("label", { key: '66979f8fc19801a7a8494dd254e32bca72a23e17', htmlFor: this.componentId }, index.h("span", { key: '8aa8805e24b9fb085377510513f68a308e2bc78b', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), index.h("select", { key: 'c007dc0a49f1607745664a0527a67ad4721316c5', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), index.h("div", { key: 'a96e7e5ef5ef4a20654956d27c4e58eb0aaad1ea', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, index.h("slot", { key: '1910bf5bfdea7356f435e74dfe2427669b64d3d8', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && index.h("pds-icon", { key: 'e9fa98965996e1a873360fa999149d5e0ab821ee', class: "pds-select__select-icon", icon: index$1.enlarge }))));
+        return (index.h(index.Host, { key: '1433acf644d6ee97fd10d317416addea8e411b23', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, index.h("div", { key: '63af968e3d7c2d0ceea1bcbaee045979ef546188', class: "pds-select" }, !this.hideLabel && (index.h("div", { key: 'a209ceef42be283287fd3dfc93cc89e5af142ab5', class: "pds-select__label-wrapper" }, index.h("label", { key: 'e9504a280358f717dac11a8b87e313368c458d48', htmlFor: this.componentId }, index.h("span", { key: '420f9159d8d1b001f9fe3dfbd6663d77d47eade0', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), index.h("select", { key: '413ad9963bad818f06cbf2775fabf582b6d69104', "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), index.h("div", { key: '92be560d834e33f5ef009f091c3bf74ff7e5db32', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, index.h("slot", { key: '7dc0bde05b59acb0a87c75331805dfe7f0638d9e', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && index.h("pds-icon", { key: 'e6b0edd05a3e76f3a0ca35fb663a68964e2b4c1b', class: "pds-select__select-icon", icon: index$1.enlarge }))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/pds-select.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"pds-select.entry.cjs.js","mappings":"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","names":["h","messageId","danger","Host","enlarge"],"sources":["src/components/pds-select/pds-select.tokens.scss?tag=pds-select&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-select/pds-select.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-select-background: var(--pine-color-background-container);\n  --pds-select-border: var(--pine-border);\n  --pds-select-border-radius: var(--pine-dimension-125);\n  --pds-select-border-radius-start-end: var(--pine-dimension-125);\n  --pds-select-border-radius-start-start: var(--pine-dimension-125);\n  --pds-select-border-radius-end-end: var(--pine-dimension-125);\n  --pds-select-border-radius-end-start: var(--pine-dimension-125);\n  --pds-select-min-height: 36px;\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n  .hidden,\n  :host([hidden]) {\n    display: none;\n  }\n}\n\n.pds-select {\n  display: grid;\n  flex-direction: column;\n  grid-template-areas:\n    'label label'\n    'field field'\n    'message message';\n  grid-template-columns: 1fr minmax(2rem, min-content);\n  grid-template-rows: min-content min-content min-content;\n  position: relative;\n  width: 100%;\n}\n\n.pds-select__label-wrapper {\n  align-items: center;\n  display: flex;\n  grid-area: label;\n  justify-content: space-between;\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-select__action {\n  align-items: center;\n  display: flex;\n  gap: var(--pine-dimension-xs);\n  margin-inline-start: var(--pine-dimension-xs);\n}\n\nlabel {\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-select__label-wrapper label {\n  margin-block-end: 0;\n}\n\nselect {\n  appearance: none;\n  background-color: var(--pds-select-background);\n  border: var(--pds-select-border);\n  border-radius: var(--pds-select-border-radius);\n  border-bottom-left-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));\n  border-bottom-right-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));\n  border-top-left-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));\n  border-top-right-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));\n  font: var(--pine-typography-body);\n  grid-area: field;\n  letter-spacing: var(--pine-letter-spacing);\n  min-height: var(--pds-select-min-height);\n  padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);\n  padding-inline-end: var(--pine-dimension-450);\n  position: relative;\n\n  &:hover {\n    border-color: var(--pine-color-border-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    border-color: var(--pine-color-border-active);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  &:has(~ .pds-select__message .pds-select__error-message) {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n:host(.is-invalid) {\n  select {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n.pds-select__error-message,\n.pds-select__helper-message {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-end: 0;\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-select__error-message {\n  align-items: center;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n}\n\n.pds-select__message {\n  grid-area: message;\n}\n\n.pds-select__select-icon {\n  align-items: center;\n  display: flex;\n  grid-column: -1 / -2;\n  grid-row: 2 / 3;\n  height: var(--pds-select-min-height);\n  pointer-events: none;\n  position: relative;\n  z-index: 1;\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","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n/**\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n  tag: 'pds-select',\n  styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\n  private internals?: ElementInternals;\n\n  @Element() el: HTMLPdsSelectElement;\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   * Indicates whether or not the select field is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n  @Prop() hideLabel: boolean;\n\n  /**\n   * Displays helper message text below select.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines whether or not the select is invalid.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the select label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Indicates whether multiple options can be selected.\n   * @defaultValue false\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Indicates whether or not the select field is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  @Watch('value')\n  /**\n   * Handles the change in the value of the select component.\n   * This method is called whenever the value of the select component changes.\n   * It updates the selected option accordingly.\n   */\n  valueChanged() {\n    this.updateSelectedOption();\n    this.updateFormValue();\n  }\n\n  connectedCallback() {\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  componentDidLoad() {\n    // Set initial form value\n    this.updateFormValue();\n  }\n\n  /**\n   * Updates the selected option in the select element based on the current value.\n   *\n   * This method iterates through all the options of the select element and sets the\n   * 'selected' attribute on the option that matches the current value. If an option\n   * does not match the current value, the 'selected' attribute is removed.\n   *\n   * @private\n   * @returns {void}\n   */\n  private updateSelectedOption() {\n    if (this.selectEl) {\n      const options = this.selectEl.options;\n\n      // Update the selected attribute for all options.\n      Array.from(options).map((option: HTMLOptionElement) => {\n        if (Array.isArray(this.value)) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n    };\n  }\n\n  /**\n   * Emits an event on input change.\n  */\n  private onSelectUpdate = (e: Event) => {\n    const target = e.target as HTMLSelectElement\n\n    const values = Array.from(target.options)\n        .filter((option) => ( option.selected))\n        .map((option) => ( option.value));\n\n    if (values.length === 1 && !this.multiple) {\n        this.value = values[0];\n    } else {\n        this.value = values;\n    }\n\n    this.pdsSelectChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Handles the change event for the slot element.\n   * This method is triggered when the slot content changes.\n   * It updates the inner HTML of the select element by cloning and appending\n   * the assigned <option> elements from the slot.\n   */\n  private handleSlotChange = () => {\n    const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n    this.selectEl.innerHTML = '';\n    const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n    assignedElements.forEach((item) => {\n      if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n        const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n        if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n          (clonedItem as HTMLOptionElement).selected = true;\n        }\n        this.selectEl.appendChild(clonedItem);\n      }\n    });\n\n    this.updateSelectedOption();\n  };\n\n  private getHelperMessage() {\n    return this.helperMessage && (\n      <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n        {this.helperMessage}\n      </p>\n    );\n  }\n\n  private getErrorMessage() {\n    return this.errorMessage && (\n      <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n        <pds-icon icon={danger} size=\"small\"></pds-icon>\n        {this.errorMessage}\n      </p>\n    );\n  }\n\n  private renderMessages() {\n    if (!this.helperMessage && !this.errorMessage) return null;\n\n    return (\n      <div class=\"pds-select__message\">\n        {this.getHelperMessage()}\n        {this.getErrorMessage()}\n      </div>\n    );\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-select__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n      );\n    }\n    return null;\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.value;\n\n      // Handle multi-select arrays by converting to FormData or comma-separated string\n      if (Array.isArray(value)) {\n        if (value.length > 1) {\n          // For multiple values, create FormData with multiple entries\n          const formData = new FormData();\n          value.forEach(val => formData.append(this.name || '', val));\n          this.internals.setFormValue(formData);\n        } else {\n          // Single value in array, use the string value\n          this.internals.setFormValue(value[0] || null);\n        }\n      } else {\n        // Single string value\n        this.internals.setFormValue(value || null);\n      }\n\n      // Set validity based on native select validation\n      if (this.selectEl && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.selectEl.validity,\n          this.selectEl.validationMessage,\n          this.selectEl\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(s) from FormData using the select's name\n      const values = state.getAll(this.name);\n      if (values.length > 1) {\n        // Multi-select: convert to string array\n        this.value = values.filter(v => typeof v === 'string') as string[];\n      } else if (values.length === 1 && typeof values[0] === 'string') {\n        // Single select: use string value\n        this.value = values[0];\n      }\n    }\n  }\n\n  render() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()} has-action={hasAction && !this.hideLabel ? 'true' : null}>\n        <div class=\"pds-select\">\n          {!this.hideLabel && (\n            <div class=\"pds-select__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {hasAction && this.renderAction()}\n            </div>\n          )}\n          <select\n            aria-label={this.hideLabel ? this.label : undefined}\n            autocomplete={this.autocomplete || undefined}\n            class=\"pds-select__field\"\n            disabled={this.disabled}\n            id={this.componentId}\n            multiple={this.multiple}\n            name={this.name}\n            onChange={this.onSelectUpdate}\n            part=\"select\"\n            required={this.required}\n            ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n          ></select>\n          <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n          {this.renderMessages()}\n          {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-select.entry.cjs.js","mappings":"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","names":["h","messageId","danger","Host","enlarge"],"sources":["src/components/pds-select/pds-select.tokens.scss?tag=pds-select&encapsulation=shadow","src/global/styles/utils/label.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.scss?tag=pds-select&encapsulation=shadow","src/components/pds-select/pds-select.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-select/pds-select.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-select-background: var(--pine-color-background-container);\n  --pds-select-border: var(--pine-border);\n  --pds-select-border-radius: var(--pine-dimension-125);\n  --pds-select-border-radius-start-end: var(--pine-dimension-125);\n  --pds-select-border-radius-start-start: var(--pine-dimension-125);\n  --pds-select-border-radius-end-end: var(--pine-dimension-125);\n  --pds-select-border-radius-end-start: var(--pine-dimension-125);\n  --pds-select-min-height: 36px;\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n  --box-shadow-focus-error: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\n\n  .hidden,\n  :host([hidden]) {\n    display: none;\n  }\n}\n\n.pds-select {\n  display: grid;\n  flex-direction: column;\n  grid-template-areas:\n    'label label'\n    'field field'\n    'message message';\n  grid-template-columns: 1fr minmax(2rem, min-content);\n  grid-template-rows: min-content min-content min-content;\n  position: relative;\n  width: 100%;\n}\n\n.pds-select__label-wrapper {\n  align-items: center;\n  display: flex;\n  grid-area: label;\n  justify-content: space-between;\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\n.pds-select__action {\n  align-items: center;\n  display: flex;\n  gap: var(--pine-dimension-xs);\n  margin-inline-start: var(--pine-dimension-xs);\n}\n\nlabel {\n  margin-block-end: var(--pine-dimension-2xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-select__label-wrapper label {\n  margin-block-end: 0;\n}\n\nselect {\n  appearance: none;\n  background-color: var(--pds-select-background);\n  border: var(--pds-select-border);\n  border-radius: var(--pds-select-border-radius);\n  border-bottom-left-radius: var(--pds-select-border-radius-end-start, var(--pds-select-border-radius));\n  border-bottom-right-radius: var(--pds-select-border-radius-end-end, var(--pds-select-border-radius));\n  border-top-left-radius: var(--pds-select-border-radius-start-start, var(--pds-select-border-radius));\n  border-top-right-radius: var(--pds-select-border-radius-start-end, var(--pds-select-border-radius));\n  font: var(--pine-typography-body);\n  grid-area: field;\n  letter-spacing: var(--pine-letter-spacing);\n  min-height: var(--pds-select-min-height);\n  padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150);\n  padding-inline-end: var(--pine-dimension-450);\n  position: relative;\n\n  &:hover {\n    border-color: var(--pine-color-border-hover);\n    cursor: pointer;\n  }\n\n  &:focus-visible {\n    border-color: var(--pine-color-border-active);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    border-color: var(--pine-color-border-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  &:has(~ .pds-select__message .pds-select__error-message) {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n:host(.is-invalid) {\n  select {\n    background-color: var(--pine-select-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n.pds-select__error-message,\n.pds-select__helper-message {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-end: 0;\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-select__error-message {\n  align-items: center;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  gap: var(--pine-dimension-2xs);\n}\n\n.pds-select__message {\n  grid-area: message;\n}\n\n.pds-select__select-icon {\n  align-items: center;\n  display: flex;\n  grid-column: -1 / -2;\n  grid-row: 2 / 3;\n  height: var(--pds-select-min-height);\n  pointer-events: none;\n  position: relative;\n  z-index: 1;\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","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { messageId } from '../../utils/form';\nimport { danger, enlarge } from '@pine-ds/icons/icons';\n\n/**\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n  tag: 'pds-select',\n  styleUrls: ['pds-select.tokens.scss', '../../global/styles/utils/label.scss', 'pds-select.scss'],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsSelect {\n\n  private selectEl!: HTMLSelectElement;\n  private slotContainer!: HTMLDivElement;\n  private internals?: ElementInternals;\n\n  @Element() el: HTMLPdsSelectElement;\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   * Indicates whether or not the select field is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false\n\n  /**\n   * Displays error message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Visually hides the label text for instances where only the select 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   * Displays helper message text below select.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * Determines whether or not the select is invalid.\n   */\n  @Prop() invalid?: boolean;\n\n  /**\n   * Text to be displayed as the select label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Indicates whether multiple options can be selected.\n   * @defaultValue false\n   */\n  @Prop() multiple = false;\n\n  /**\n   * Specifies the name. Submitted with the form name/value pair.\n   */\n  @Prop() name!: string;\n\n  /**\n   * Indicates whether or not the select field is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value(s) of the selected option(s).\n   *\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Emitted when a keyboard input occurs.\n   */\n  @Event() pdsSelectChange: EventEmitter<InputEvent>;\n\n  @Watch('value')\n  /**\n   * Handles the change in the value of the select component.\n   * This method is called whenever the value of the select component changes.\n   * It updates the selected option accordingly.\n   */\n  valueChanged() {\n    this.updateSelectedOption();\n    this.updateFormValue();\n  }\n\n  connectedCallback() {\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption();\n  }\n\n  componentDidLoad() {\n    // Set initial form value\n    this.updateFormValue();\n  }\n\n  /**\n   * Updates the selected option in the select element based on the current value.\n   *\n   * This method iterates through all the options of the select element and sets the\n   * 'selected' attribute on the option that matches the current value. If an option\n   * does not match the current value, the 'selected' attribute is removed.\n   *\n   * @private\n   * @returns {void}\n   */\n  private updateSelectedOption() {\n    if (this.selectEl) {\n      const options = this.selectEl.options;\n\n      // Update the selected attribute for all options.\n      Array.from(options).map((option: HTMLOptionElement) => {\n        if (Array.isArray(this.value)) {\n          option.selected = this.value.includes(option.value);\n        } else {\n          option.selected = this.value === option.value;\n        }\n      });\n    };\n  }\n\n  /**\n   * Emits an event on input change.\n  */\n  private onSelectUpdate = (e: Event) => {\n    const target = e.target as HTMLSelectElement\n\n    const values = Array.from(target.options)\n        .filter((option) => ( option.selected))\n        .map((option) => ( option.value));\n\n    if (values.length === 1 && !this.multiple) {\n        this.value = values[0];\n    } else {\n        this.value = values;\n    }\n\n    this.pdsSelectChange.emit(e as InputEvent);\n  };\n\n  /**\n   * Handles the change event for the slot element.\n   * This method is triggered when the slot content changes.\n   * It updates the inner HTML of the select element by cloning and appending\n   * the assigned <option> elements from the slot.\n   */\n  private handleSlotChange = () => {\n    const slot = this.slotContainer.querySelector('slot') as HTMLSlotElement;\n\n    this.selectEl.innerHTML = '';\n    const assignedElements = slot.assignedElements({ flatten: true }) as (HTMLOptionElement | HTMLOptGroupElement)[];\n\n    assignedElements.forEach((item) => {\n      if ( ['OPTION', 'OPTGROUP'].includes(item.tagName)) {\n        const clonedItem = item.cloneNode(true) as HTMLOptionElement | HTMLOptGroupElement;\n        if (clonedItem.tagName === 'OPTION' && (clonedItem as HTMLOptionElement).value === this.value) {\n          (clonedItem as HTMLOptionElement).selected = true;\n        }\n        this.selectEl.appendChild(clonedItem);\n      }\n    });\n\n    this.updateSelectedOption();\n  };\n\n  private getHelperMessage() {\n    return this.helperMessage && (\n      <p class=\"pds-select__helper-message\" id={messageId(this.componentId, 'helper')}>\n        {this.helperMessage}\n      </p>\n    );\n  }\n\n  private getErrorMessage() {\n    return this.errorMessage && (\n      <p class=\"pds-select__error-message\" id={messageId(this.componentId, 'error')} aria-live=\"assertive\">\n        <pds-icon icon={danger} size=\"small\"></pds-icon>\n        {this.errorMessage}\n      </p>\n    );\n  }\n\n  private renderMessages() {\n    if (!this.helperMessage && !this.errorMessage) return null;\n\n    return (\n      <div class=\"pds-select__message\">\n        {this.getHelperMessage()}\n        {this.getErrorMessage()}\n      </div>\n    );\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-select__action\" part=\"action\">\n          <slot name=\"action\"></slot>\n        </div>\n      );\n    }\n    return null;\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.value;\n\n      // Handle multi-select arrays by converting to FormData or comma-separated string\n      if (Array.isArray(value)) {\n        if (value.length > 1) {\n          // For multiple values, create FormData with multiple entries\n          const formData = new FormData();\n          value.forEach(val => formData.append(this.name || '', val));\n          this.internals.setFormValue(formData);\n        } else {\n          // Single value in array, use the string value\n          this.internals.setFormValue(value[0] || null);\n        }\n      } else {\n        // Single string value\n        this.internals.setFormValue(value || null);\n      }\n\n      // Set validity based on native select validation\n      if (this.selectEl && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.selectEl.validity,\n          this.selectEl.validationMessage,\n          this.selectEl\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(s) from FormData using the select's name\n      const values = state.getAll(this.name);\n      if (values.length > 1) {\n        // Multi-select: convert to string array\n        this.value = values.filter(v => typeof v === 'string') as string[];\n      } else if (values.length === 1 && typeof values[0] === 'string') {\n        // Single select: use string value\n        this.value = values[0];\n      }\n    }\n  }\n\n  render() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n\n    return (\n      <Host aria-disabled={this.disabled ? 'true' : null} class={this.classNames()} has-action={hasAction && !this.hideLabel ? 'true' : null}>\n        <div class=\"pds-select\">\n          {!this.hideLabel && (\n            <div class=\"pds-select__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {hasAction && this.renderAction()}\n            </div>\n          )}\n          <select\n            aria-label={this.hideLabel ? this.label : undefined}\n            autocomplete={this.autocomplete || undefined}\n            class=\"pds-select__field\"\n            disabled={this.disabled}\n            id={this.componentId}\n            multiple={this.multiple}\n            name={this.name}\n            onChange={this.onSelectUpdate}\n            part=\"select\"\n            required={this.required}\n            ref={(el) => (this.selectEl = el as HTMLSelectElement)}\n          ></select>\n          <div aria-hidden=\"true\" class=\"hidden\" ref={(el) => (this.slotContainer = el)}>\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </div>\n          {this.renderMessages()}\n          {!this.multiple && <pds-icon class=\"pds-select__select-icon\" icon={enlarge} />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}