@pine-ds/core 3.11.1 → 3.12.0

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

@@ -1 +1 @@
-{"version":3,"file":"pds-textarea.entry.cjs.js","sources":["src/global/styles/utils/label.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-input/pds-input.tokens.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n","@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":host {\n  display: inline-block;\n  width: 100%;\n}\n\n:host([aria-readonly=\"true\"]) {\n  textarea {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n}\n\n:host([highlight]:not([disabled]):not([aria-disabled=\"true\"]):not([aria-readonly=\"true\"])) {\n  .pds-textarea__field:not(.is-invalid) {\n    background-color: var(--pine-color-accent-disabled);\n    border-color: var(--pine-color-accent);\n    color: var(--pine-color-text-accent);\n\n    &:hover {\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring);\n    }\n\n    ~ .pds-textarea__character-counter {\n      background: color-mix(in srgb, var(--pine-color-accent-disabled) 80%, transparent);\n      color: var(--pine-color-text-accent);\n    }\n  }\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\n.pds-textarea__label-wrapper {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n}\n\n.pds-textarea__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  display: block;\n  margin-block-end: var(--pine-dimension-xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-textarea__label-wrapper label {\n  margin-block-end: 0;\n}\n\n.pds-textarea__helper-message {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__error-message {\n  align-items: center;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  font: var(--pine-typography-body-sm-medium);\n  gap: var(--pine-dimension-2xs);\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__field-wrapper {\n  display: inline-block;\n  position: relative;\n  width: 100%;\n}\n\n.pds-textarea__field {\n  background-color: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: calc(var(--pine-dimension-xs) * 1.25);\n  box-sizing: border-box;\n  font: var(--pine-typography-body);\n  letter-spacing: var(--pine-letter-spacing);\n  min-height: calc(var(--pine-dimension-xl) * 2);\n  min-width: calc(var(--pine-dimension-xl) * 2);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n  resize: both;\n  width: 100%;\n\n  // Add bottom padding when character counter is present\n  :host([max-length]) & {\n    padding-bottom: calc(var(--pine-dimension-xs) + var(--pine-dimension-md));\n  }\n\n  &:hover:not(:disabled, .is-invalid) {\n    border: var(--pine-border-hover);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &::placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n\n  &.is-invalid {\n    background-color: var(--pine-input-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-textarea__character-counter {\n  background: color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);\n  border-radius: calc(var(--pine-dimension-2xs) * 0.5);\n  color: var(--pine-color-text-readonly);\n  font: var(--pine-typography-body-sm-medium);\n  padding: calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);\n  pointer-events: none;\n  position: absolute;\n  user-select: none;\n  white-space: nowrap;\n  z-index: var(--pine-z-index);\n\n  // Match textarea disabled state\n  :host([aria-disabled=\"true\"]) & {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-disabled);\n  }\n\n  // Match textarea readonly state\n  :host([aria-readonly=\"true\"]) & {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n\n  // Match textarea invalid state - target when field has is-invalid class\n  .pds-textarea__field.is-invalid ~ & {\n    background-color: var(--pine-input-color-background-danger);\n  }\n}\n\n.visually-hidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: polygon(0 0, 0 0, 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId, exposeTypeProperty } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } 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-textarea',\n  styleUrls: [\n    '../../global/styles/utils/label.scss',\n    '../pds-input/pds-input.tokens.scss',\n    'pds-textarea.scss'\n  ],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsTextarea {\n\n  private nativeTextarea?: HTMLTextAreaElement\n  private focusedValue?: string | null;\n  private inheritedAttributes: Attributes = {};\n  private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n  private internals?: ElementInternals;\n  private resizeObserver?: ResizeObserver;\n  private characterCounter?: HTMLElement;\n  private readonly _type = 'textarea' as const;\n\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\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   * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n   * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n   * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n   * the input is cleared on edit, the type is `null`.\n   */\n  @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  /**\n   * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n   * `textarea.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeTextarea) {\n      this.nativeTextarea.focus();\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   * Determines whether or not the textarea is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Displays an error message below the textarea field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the textarea field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the textarea is invalid or throws an error.\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Visually hides the label text for instances where only the textarea 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 name. Submitted with the form name/value pair. This value will mirror the componentId.\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the textarea is readonly.\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Determines whether or not the textarea is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.\n   */\n  @Prop({ reflect: true }) maxLength?: number;\n\n  /**\n   * Applies highlight styling to the textarea field.\n   */\n  @Prop({ reflect: true }) highlight?: boolean;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({mutable: true}) value?: string | null = '';\n\n  @State() hasFocus = false;\n\n\n  /**\n   * If true, the textarea has action content in the label area\n   */\n  @State() hasAction = false;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeTextarea = this.nativeTextarea;\n    const value = this.getValue();\n\n    if (nativeTextarea && nativeTextarea.value !== value) {\n      nativeTextarea.value = value;\n    }\n\n    // Update form value for Form Associated Custom Elements API\n    this.updateFormValue();\n\n    // Update character counter position in case content changes affect sizing\n    if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n      this.updateCharacterCounterPosition();\n    }\n  }\n\n  @Watch('maxLength')\n  protected maxLengthChanged() {\n    // Setup or teardown ResizeObserver based on maxLength\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.maxLength && this.nativeTextarea) {\n      this.setupResizeObserver();\n    }\n\n    // Update ElementInternals validity when maxLength changes\n    if (this.internals && this.internals.setValidity && this.nativeTextarea) {\n      const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);\n      this.internals.setValidity(\n        { tooLong: isTooLong },\n        isTooLong ? 'Value exceeds maxLength' : '',\n        this.nativeTextarea\n      );\n    }\n  }\n\n  /**\n   * Emits an `pdsInput` event.\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n    this.pdsInput.emit({ value, event });\n  }\n\n  /**\n   * Emits an `pdsTextareaChange` event.\n   */\n  private emitValueChange(event?: Event) {\n    const textarea = event.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    const { value } = textarea;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n    this.focusedValue = newValue;\n    this.pdsTextareaChange.emit({ value: newValue, event });\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLTextAreaElement | null;\n    if (input) {\n      // Handle maxLength validation\n      if (this.maxLength && input.value.length > this.maxLength) {\n        // Prevent input beyond maxLength\n        input.value = input.value.substring(0, this.maxLength);\n      }\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n\n    // Update counter position when content changes\n    if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n      // Use requestAnimationFrame to ensure DOM is updated\n      requestAnimationFrame(() => {\n        this.updateCharacterCounterPosition();\n      });\n    }\n  };\n\n  private onTextareaChange = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  connectedCallback() {\n    this.debounceChanged();\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  disconnectedCallback() {\n    // Clean up ResizeObserver\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el),\n      ...inheritAttributes(this.el),\n    };\n    this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n  }\n\n  componentDidLoad() {\n    this.originalPdsInput = this.pdsInput;\n    // Set initial form value\n    this.updateFormValue();\n\n    // Setup ResizeObserver for character counter positioning\n    this.setupResizeObserver();\n\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  /**\n   * Sets up ResizeObserver to track textarea resize for character counter positioning\n   */\n  private setupResizeObserver() {\n    if (!this.maxLength || !this.nativeTextarea) return;\n\n    // ResizeObserver may not be available in test environments\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => {\n        // Use requestAnimationFrame to ensure DOM updates are complete\n        requestAnimationFrame(() => {\n          this.updateCharacterCounterPosition();\n        });\n      });\n\n      this.resizeObserver.observe(this.nativeTextarea);\n\n      // Initial positioning with a small delay to ensure counter is rendered\n      requestAnimationFrame(() => {\n        this.updateCharacterCounterPosition();\n      });\n    }\n  }\n\n  /**\n   * Updates character counter position to stay within textarea boundaries during resize\n   */\n  private updateCharacterCounterPosition() {\n    if (!this.characterCounter || !this.nativeTextarea) return;\n\n    // Skip positioning in test environments where ResizeObserver isn't available\n    if (typeof ResizeObserver === 'undefined') return;\n\n    // Ensure the character counter has been rendered and has dimensions\n    if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {\n      // Counter not ready or component hidden - return and let resize/input observers handle positioning later\n      return;\n    }\n\n    // Position based on textarea's actual dimensions (which change during manual resize)\n    const textareaWidth = this.nativeTextarea.offsetWidth;\n    const textareaHeight = this.nativeTextarea.offsetHeight;\n    const counterWidth = this.characterCounter.offsetWidth;\n    const counterHeight = this.characterCounter.offsetHeight;\n\n    // Calculate position within textarea boundaries with padding from edges\n    const rightPosition = textareaWidth - counterWidth - 8;\n    const bottomPosition = textareaHeight - counterHeight - 8;\n\n    // Ensure counter stays within textarea boundaries even when resized very small\n    const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));\n    const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));\n\n    // Apply absolute positioning within the field wrapper\n    this.characterCounter.style.position = 'absolute';\n    this.characterCounter.style.left = `${finalLeft}px`;\n    this.characterCounter.style.top = `${finalTop}px`;\n    this.characterCounter.style.right = 'auto';\n    this.characterCounter.style.bottom = 'auto';\n  }\n\n  /**\n   * Renders the character counter when maxLength is set\n   */\n  private renderCharacterCounter() {\n    if (!this.maxLength) {\n      return null;\n    }\n\n    const currentLength = this.getValue().length;\n    return (\n      <div\n        class=\"pds-textarea__character-counter\"\n        ref={(el) => this.characterCounter = el}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={`${currentLength} of ${this.maxLength} characters`}\n      >\n        {currentLength} / {this.maxLength}\n      </div>\n    );\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-textarea__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.getValue();\n      this.internals.setFormValue(value || null);\n\n      // Set validity based on native textarea validation\n      if (this.nativeTextarea && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.nativeTextarea.validity,\n          this.nativeTextarea.validationMessage,\n          this.nativeTextarea\n        );\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 textarea'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 value = this.getValue();\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n        has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <div class=\"pds-textarea__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {!this.hideLabel && this.renderAction()}\n            </div>\n          }\n          <div class=\"pds-textarea__field-wrapper\">\n            <textarea\n              ref={(el) => this.nativeTextarea = el }\n              aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n              aria-invalid={this.invalid ? \"true\" : undefined}\n              autocomplete={this.autocomplete}\n              class={this.textareaClassNames()}\n              disabled={this.disabled}\n              id={this.componentId}\n              maxlength={this.maxLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readOnly={this.readonly}\n              required={this.required}\n              rows={this.rows}\n              onBlur={this.onBlur}\n              onChange={this.onTextareaChange}\n              onFocus={this.onFocus}\n              onInput={this.onInput}\n              {...this.inheritedAttributes}\n            >\n              {value}\n            </textarea>\n            {this.renderCharacterCounter()}\n          </div>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["debounceEvent","isRequired","inheritAriaAttributes","inheritAttributes","exposeTypeProperty","h","Host","assignDescription","messageId","danger"],"mappings":"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"}
+{"version":3,"file":"pds-textarea.entry.cjs.js","sources":["src/global/styles/utils/label.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-input/pds-input.tokens.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n  color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n  label {\n    color: var(--pine-color-text-label-readonly);\n  }\n}\n\nlabel {\n  color: var(--pine-color-text-label);\n  font: var(--pine-typography-body-medium);\n  letter-spacing: var(--pine-letter-spacing);\n}\n","@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":host {\n  display: inline-block;\n  width: 100%;\n}\n\n:host([aria-readonly=\"true\"]) {\n  textarea {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n}\n\n:host([highlight]:not([disabled]):not([aria-disabled=\"true\"]):not([aria-readonly=\"true\"])) {\n  .pds-textarea__field:not(.is-invalid) {\n    background-color: var(--pine-color-accent-disabled);\n    border-color: var(--pine-color-accent);\n    color: var(--pine-color-text-accent);\n\n    &:hover {\n      border-color: var(--pine-color-accent-hover);\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring);\n    }\n\n    ~ .pds-textarea__character-counter {\n      background: color-mix(in srgb, var(--pine-color-accent-disabled) 80%, transparent);\n      color: var(--pine-color-text-accent);\n    }\n  }\n}\n\n.pds-textarea {\n  display: flex;\n  flex-direction: column;\n}\n\n.pds-textarea__label-wrapper {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n}\n\n.pds-textarea__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  display: block;\n  margin-block-end: var(--pine-dimension-xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-textarea__label-wrapper label {\n  margin-block-end: 0;\n}\n\n.pds-textarea__helper-message {\n  color: var(--pine-color-text-message);\n  font: var(--pine-typography-body-sm-medium);\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__error-message {\n  align-items: center;\n  color: var(--pine-color-text-message-danger);\n  display: flex;\n  font: var(--pine-typography-body-sm-medium);\n  gap: var(--pine-dimension-2xs);\n  margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__field-wrapper {\n  display: inline-block;\n  position: relative;\n  width: 100%;\n}\n\n.pds-textarea__field {\n  background-color: var(--pine-color-background-container);\n  border: var(--pine-border);\n  border-radius: calc(var(--pine-dimension-xs) * 1.25);\n  box-sizing: border-box;\n  color: var(--pine-color-text);\n  font: var(--pine-typography-body);\n  letter-spacing: var(--pine-letter-spacing);\n  min-height: calc(var(--pine-dimension-xl) * 2);\n  min-width: calc(var(--pine-dimension-xl) * 2);\n  padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n  resize: both;\n  width: 100%;\n\n  // Add bottom padding when character counter is present\n  :host([max-length]) & {\n    padding-bottom: calc(var(--pine-dimension-xs) + var(--pine-dimension-md));\n  }\n\n  &:hover:not(:disabled, .is-invalid) {\n    border: var(--pine-border-hover);\n  }\n\n  &:disabled {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-disabled);\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n\n  &::placeholder {\n    color: var(--pine-color-text-placeholder);\n  }\n\n  &.is-invalid {\n    background-color: var(--pine-input-color-background-danger);\n    border-color: var(--pine-color-border-danger);\n\n    :host-context([data-theme=\"dark\"]) & {\n      background-color: var(--pine-color-red-950);\n    }\n\n    &:focus-visible {\n      outline-color: var(--pine-color-focus-ring-danger);\n    }\n  }\n}\n\n.pds-textarea__character-counter {\n  background: color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);\n  border-radius: calc(var(--pine-dimension-2xs) * 0.5);\n  color: var(--pine-color-text-muted);\n  font: var(--pine-typography-body-sm-medium);\n  padding: calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);\n  pointer-events: none;\n  position: absolute;\n  user-select: none;\n  white-space: nowrap;\n  z-index: var(--pine-z-index);\n\n  // Match textarea disabled state\n  :host([aria-disabled=\"true\"]) & {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-disabled);\n  }\n\n  // Match textarea readonly state\n  :host([aria-readonly=\"true\"]) & {\n    background-color: var(--pine-color-background-container-disabled);\n    color: var(--pine-color-text-readonly);\n  }\n\n  // Match textarea invalid state - target when field has is-invalid class\n  .pds-textarea__field.is-invalid ~ & {\n    background-color: var(--pine-input-color-background-danger);\n\n    :host-context([data-theme=\"dark\"]) & {\n      background-color: var(--pine-color-red-950);\n    }\n  }\n}\n\n.visually-hidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: polygon(0 0, 0 0, 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId, exposeTypeProperty } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } 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-textarea',\n  styleUrls: [\n    '../../global/styles/utils/label.scss',\n    '../pds-input/pds-input.tokens.scss',\n    'pds-textarea.scss'\n  ],\n  shadow: true,\n  formAssociated: true,\n})\nexport class PdsTextarea {\n\n  private nativeTextarea?: HTMLTextAreaElement\n  private focusedValue?: string | null;\n  private inheritedAttributes: Attributes = {};\n  private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n  private internals?: ElementInternals;\n  private resizeObserver?: ResizeObserver;\n  private characterCounter?: HTMLElement;\n  private readonly _type = 'textarea' as const;\n\n  @Element() el: HTMLPdsTextareaElement;\n\n  /**\n   * Emitted when the input loses focus.\n   */\n  @Event() pdsBlur!: EventEmitter<FocusEvent>;\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   * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n   * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n   * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n   * the input is cleared on edit, the type is `null`.\n   */\n  @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n  /**\n   * Event emitted whenever the value of the textarea changes.\n   *\n   * This event will not emit when programmatically setting the `value` property.\n   */\n  @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n  /**\n   * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n   * `textarea.focus()`.\n   */\n  @Method()\n  async setFocus() {\n    if (this.nativeTextarea) {\n      this.nativeTextarea.focus();\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   * Determines whether or not the textarea is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n   */\n  @Prop() debounce?: number;\n\n  /**\n   * Displays an error message below the textarea field.\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Displays a message or hint below the textarea field.\n   */\n  @Prop() helperMessage?: string;\n\n  /**\n   * Determines whether or not the textarea is invalid or throws an error.\n   * @defaultValue false\n   */\n  @Prop({mutable: true}) invalid = false;       // eslint-disable-line @stencil-community/strict-mutable\n\n  /**\n   * Text to be displayed as the textarea label.\n   */\n  @Prop() label?: string;\n\n  /**\n   * Visually hides the label text for instances where only the textarea 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 name. Submitted with the form name/value pair. This value will mirror the componentId.\n   */\n  @Prop() name: string = this.componentId;\n\n  /**\n   * Specifies a short hint that describes the expected value of the textarea.\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Determines whether or not the textarea is readonly.\n   * @defaultValue false\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Determines whether or not the textarea is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * Sets number of rows of text visible without needing to scroll in the textarea.\n   */\n  @Prop() rows?: number;\n\n  /**\n   * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.\n   */\n  @Prop({ reflect: true }) maxLength?: number;\n\n  /**\n   * Applies highlight styling to the textarea field.\n   */\n  @Prop({ reflect: true }) highlight?: boolean;\n\n  /**\n   * The value of the textarea.\n   */\n  @Prop({mutable: true}) value?: string | null = '';\n\n  @State() hasFocus = false;\n\n\n  /**\n   * If true, the textarea has action content in the label area\n   */\n  @State() hasAction = false;\n\n  @Watch('debounce')\n  protected debounceChanged() {\n    const { pdsInput, debounce, originalPdsInput } = this;\n\n    this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n  }\n\n  /**\n   * Update the native input element when the value changes\n   */\n  @Watch('value')\n  protected valueChanged() {\n    const nativeTextarea = this.nativeTextarea;\n    const value = this.getValue();\n\n    if (nativeTextarea && nativeTextarea.value !== value) {\n      nativeTextarea.value = value;\n    }\n\n    // Update form value for Form Associated Custom Elements API\n    this.updateFormValue();\n\n    // Update character counter position in case content changes affect sizing\n    if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n      this.updateCharacterCounterPosition();\n    }\n  }\n\n  @Watch('maxLength')\n  protected maxLengthChanged() {\n    // Setup or teardown ResizeObserver based on maxLength\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.maxLength && this.nativeTextarea) {\n      this.setupResizeObserver();\n    }\n\n    // Update ElementInternals validity when maxLength changes\n    if (this.internals && this.internals.setValidity && this.nativeTextarea) {\n      const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);\n      this.internals.setValidity(\n        { tooLong: isTooLong },\n        isTooLong ? 'Value exceeds maxLength' : '',\n        this.nativeTextarea\n      );\n    }\n  }\n\n  /**\n   * Emits an `pdsInput` event.\n   */\n  private emitInputChange(event?: Event) {\n    const { value } = this;\n    this.pdsInput.emit({ value, event });\n  }\n\n  /**\n   * Emits an `pdsTextareaChange` event.\n   */\n  private emitValueChange(event?: Event) {\n    const textarea = event.target as HTMLTextAreaElement;\n    isRequired(textarea, this);\n\n    const { value } = textarea;\n\n    // Checks for both null and undefined values\n    const newValue = value == null ? value : value.toString();\n    this.focusedValue = newValue;\n    this.pdsTextareaChange.emit({ value: newValue, event });\n  }\n\n  private getValue(): string {\n    return this.value || '';\n  }\n\n  private onBlur = (ev: FocusEvent) => {\n    this.hasFocus = false;\n\n    if (this.focusedValue !== this.value) {\n      this.emitValueChange(ev);\n    }\n\n    this.pdsBlur.emit(ev);\n  };\n\n  private onFocus = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.focusedValue = this.value;\n\n    this.pdsFocus.emit(ev);\n  };\n\n  private onInput = (ev: Event) => {\n    const input = ev.target as HTMLTextAreaElement | null;\n    if (input) {\n      // Handle maxLength validation\n      if (this.maxLength && input.value.length > this.maxLength) {\n        // Prevent input beyond maxLength\n        input.value = input.value.substring(0, this.maxLength);\n      }\n      this.value = input.value || '';\n    }\n    this.emitInputChange(ev);\n\n    // Update counter position when content changes\n    if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n      // Use requestAnimationFrame to ensure DOM is updated\n      requestAnimationFrame(() => {\n        this.updateCharacterCounterPosition();\n      });\n    }\n  };\n\n  private onTextareaChange = (ev: Event) => {\n    this.emitValueChange(ev);\n  };\n\n  private textareaClassNames() {\n    const classNames = ['pds-textarea__field'];\n\n    if (this.invalid && this.invalid === true) {\n      classNames.push('is-invalid');\n    }\n\n    return classNames.join('  ');\n  }\n\n  connectedCallback() {\n    this.debounceChanged();\n    // Initialize ElementInternals for form association\n    if (this.el.attachInternals) {\n      this.internals = this.el.attachInternals();\n    }\n  }\n\n  disconnectedCallback() {\n    // Clean up ResizeObserver\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad() {\n    this.inheritedAttributes = {\n      ...inheritAriaAttributes(this.el),\n      ...inheritAttributes(this.el),\n    };\n    this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n  }\n\n  componentDidLoad() {\n    this.originalPdsInput = this.pdsInput;\n    // Set initial form value\n    this.updateFormValue();\n\n    // Setup ResizeObserver for character counter positioning\n    this.setupResizeObserver();\n\n    // Expose type property on the element instance to match native form element behavior\n    exposeTypeProperty(this.el, () => this._type);\n  }\n\n  /**\n   * Sets up ResizeObserver to track textarea resize for character counter positioning\n   */\n  private setupResizeObserver() {\n    if (!this.maxLength || !this.nativeTextarea) return;\n\n    // ResizeObserver may not be available in test environments\n    if (typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => {\n        // Use requestAnimationFrame to ensure DOM updates are complete\n        requestAnimationFrame(() => {\n          this.updateCharacterCounterPosition();\n        });\n      });\n\n      this.resizeObserver.observe(this.nativeTextarea);\n\n      // Initial positioning with a small delay to ensure counter is rendered\n      requestAnimationFrame(() => {\n        this.updateCharacterCounterPosition();\n      });\n    }\n  }\n\n  /**\n   * Updates character counter position to stay within textarea boundaries during resize\n   */\n  private updateCharacterCounterPosition() {\n    if (!this.characterCounter || !this.nativeTextarea) return;\n\n    // Skip positioning in test environments where ResizeObserver isn't available\n    if (typeof ResizeObserver === 'undefined') return;\n\n    // Ensure the character counter has been rendered and has dimensions\n    if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {\n      // Counter not ready or component hidden - return and let resize/input observers handle positioning later\n      return;\n    }\n\n    // Position based on textarea's actual dimensions (which change during manual resize)\n    const textareaWidth = this.nativeTextarea.offsetWidth;\n    const textareaHeight = this.nativeTextarea.offsetHeight;\n    const counterWidth = this.characterCounter.offsetWidth;\n    const counterHeight = this.characterCounter.offsetHeight;\n\n    // Calculate position within textarea boundaries with padding from edges\n    const rightPosition = textareaWidth - counterWidth - 8;\n    const bottomPosition = textareaHeight - counterHeight - 8;\n\n    // Ensure counter stays within textarea boundaries even when resized very small\n    const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));\n    const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));\n\n    // Apply absolute positioning within the field wrapper\n    this.characterCounter.style.position = 'absolute';\n    this.characterCounter.style.left = `${finalLeft}px`;\n    this.characterCounter.style.top = `${finalTop}px`;\n    this.characterCounter.style.right = 'auto';\n    this.characterCounter.style.bottom = 'auto';\n  }\n\n  /**\n   * Renders the character counter when maxLength is set\n   */\n  private renderCharacterCounter() {\n    if (!this.maxLength) {\n      return null;\n    }\n\n    const currentLength = this.getValue().length;\n    return (\n      <div\n        class=\"pds-textarea__character-counter\"\n        ref={(el) => this.characterCounter = el}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-label={`${currentLength} of ${this.maxLength} characters`}\n      >\n        {currentLength} / {this.maxLength}\n      </div>\n    );\n  }\n\n  private renderAction() {\n    const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n    if (hasAction) {\n      return (\n        <div class=\"pds-textarea__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.getValue();\n      this.internals.setFormValue(value || null);\n\n      // Set validity based on native textarea validation\n      if (this.nativeTextarea && this.internals && this.internals.setValidity) {\n        this.internals.setValidity(\n          this.nativeTextarea.validity,\n          this.nativeTextarea.validationMessage,\n          this.nativeTextarea\n        );\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 textarea'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 value = this.getValue();\n\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        aria-readonly={this.readonly ? 'true' : null}\n        has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n      >\n        <div class=\"pds-textarea\">\n          {this.label &&\n            <div class=\"pds-textarea__label-wrapper\">\n              <label htmlFor={this.componentId}>\n                <span class={this.hideLabel ? 'visually-hidden' : ''}>\n                  {this.label}\n                </span>\n              </label>\n              {!this.hideLabel && this.renderAction()}\n            </div>\n          }\n          <div class=\"pds-textarea__field-wrapper\">\n            <textarea\n              ref={(el) => this.nativeTextarea = el }\n              aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n              aria-invalid={this.invalid ? \"true\" : undefined}\n              autocomplete={this.autocomplete}\n              class={this.textareaClassNames()}\n              disabled={this.disabled}\n              id={this.componentId}\n              maxlength={this.maxLength}\n              name={this.name}\n              placeholder={this.placeholder}\n              readOnly={this.readonly}\n              required={this.required}\n              rows={this.rows}\n              onBlur={this.onBlur}\n              onChange={this.onTextareaChange}\n              onFocus={this.onFocus}\n              onInput={this.onInput}\n              {...this.inheritedAttributes}\n            >\n              {value}\n            </textarea>\n            {this.renderCharacterCounter()}\n          </div>\n          {this.helperMessage &&\n            <p\n              class=\"pds-textarea__helper-message\"\n              id={messageId(this.componentId, 'helper')}\n            >\n              {this.helperMessage}\n            </p>\n          }\n          {this.invalid &&\n            <p\n              aria-live=\"assertive\"\n              class=\"pds-textarea__error-message\"\n              id={messageId(this.componentId, 'error')}\n            >\n              <pds-icon icon={danger} size=\"small\" />\n              {this.errorMessage}\n            </p>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["debounceEvent","isRequired","inheritAriaAttributes","inheritAttributes","exposeTypeProperty","h","Host","assignDescription","messageId","danger"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-2Lf0E1JO.js');
+var index = require('./index-CI0W8NCh.js');
 
 const pdsToastCss = ":host{--animation-duration:0.3s;--animation-timing:cubic-bezier(0.4, 0, 0.2, 1);--padding-inline:var(--pine-dimension-md);--padding-inline-desktop:var(--pine-dimension-2xl);--sizing-height-default:68px;--sizing-min-width:calc(var(--sizing-total-width) - (var(--padding-inline) * 2));--sizing-min-width-desktop:calc(var(--sizing-total-width) - (var(--padding-inline-desktop) * 2));--sizing-total-width:350px;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;font:var(--pine-typography-body-medium)}.pds-toast{-ms-flex-align:center;align-items:center;-webkit-animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);animation:pds-toast-animate-in var(--animation-duration) var(--animation-timing);background-color:var(--pine-color-primary);border-radius:var(--pine-dimension-xs);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);display:-ms-flexbox;display:flex;height:var(--sizing-height-default);-ms-flex-pack:start;justify-content:flex-start;-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);max-width:90vw;min-width:var(--sizing-min-width);padding:0 var(--padding-inline);position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}@media screen and (max-width: 767px){.pds-toast{height:36px;max-width:calc(100vw - var(--pine-dimension-2xs) * 2);min-width:auto;padding-inline:var(--pine-dimension-2xs)}}.pds-toast--danger{background-color:var(--pine-color-danger)}.pds-toast--loading .pds-toast__loader{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);position:relative}.pds-toast--loading .pds-toast__loader-spinner{-webkit-animation:pds-toast-rotate 2s linear infinite;animation:pds-toast-rotate 2s linear infinite;height:20px;width:20px}.pds-toast--loading .pds-toast__loader-path{-webkit-animation:pds-toast-dash 1.5s ease-in-out infinite;animation:pds-toast-dash 1.5s ease-in-out infinite;stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}.pds-toast__icon{color:var(--pine-color-text-primary);display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm)}.pds-toast__message{font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-toast__message ::slotted(a){color:var(--pine-color-text-primary);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs);opacity:0.7;text-decoration:underline}.pds-toast__message ::slotted(a):hover,.pds-toast__message ::slotted(a):focus-visible{opacity:1}.pds-toast__message ::slotted(a):focus-visible{outline:2px solid var(--pine-color-text-primary);outline-offset:2px}.pds-toast__button{-ms-flex-align:center;align-items:center;background:none;border:0;border-radius:var(--pine-border-radius-full);color:inherit;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);opacity:0.7;padding:0;white-space:nowrap}.pds-toast__button:hover,.pds-toast__button:focus{opacity:1}.pds-toast__button:focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-dimension-2xs)}@-webkit-keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes pds-toast-animate-in{from{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes pds-toast-animate-out{from{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes pds-toast-rotate{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes pds-toast-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}:host([hidden]) .pds-toast,.pds-toast--animating-out{-webkit-animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;animation:pds-toast-animate-out var(--animation-duration) var(--animation-timing) forwards;pointer-events:none;}";
 
@@ -84,13 +84,13 @@ const PdsToast = class {
         return this.icon && index.h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (index.h(index.Host, { key: 'cf03483967a2414e2c6ee68587af609af0bb64c6', hidden: !this.isVisible }, index.h("div", { key: '70413e3220f6890dd2367bc96a7060269a33124c', class: {
+        return (index.h(index.Host, { key: 'ff9523170d34f742f8301e8d3ce3810bacb7d183', hidden: !this.isVisible }, index.h("div", { key: '67e0639a0158eb8c325064a9c3f97aaa3b538d90', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), index.h("span", { key: '52a991d93d9530e4689586f51b2b78978ff9f4d5', class: "pds-toast__message" }, index.h("slot", { key: 'fb00a8204606a4621315656e91b3928ed8ad4827' })), this.dismissible && (index.h("button", { key: 'de78866e9b4f746d823bf68b7d8736ab4bafb9d7', type: "button", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), index.h("span", { key: '5387b71901592b69a7465ec10c3f3508e170b1c1', class: "pds-toast__message" }, index.h("slot", { key: 'a9bb352ae8ad478fb65298c357bc20efa1877a6b' })), this.dismissible && (index.h("button", { key: 'c1d15b41455304e689c3736ed3d3429321f8c1a7', type: "button", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": "Dismiss message" }, index.h("pds-icon", { key: '495a71b67c4a6690f4c1b9562ddd8862d88a85e4', name: "remove" }))))));
+            }, "aria-label": "Dismiss message" }, index.h("pds-icon", { key: '0f9e43ed08a253531f3dc698c92f861ca1bd6063', name: "remove" }))))));
     }
     static get watchers() { return {
         "duration": ["handleDurationChange"]

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-2Lf0E1JO.js');
+var index = require('./index-CI0W8NCh.js');
 var floatingUi_dom = require('./floating-ui.dom-DTAy35nv.js');
 
 const pdsTooltipCss = ".pds-tooltip{--tooltip-border-width-arrow-down:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-left:var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow) 0;--tooltip-border-width-arrow-right:var(--tooltip-sizing-arrow) 0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-border-width-arrow-up:0 var(--tooltip-sizing-arrow) var(--tooltip-sizing-arrow);--tooltip-sizing-arrow:6px;--tooltip-sizing-arrow-offset:14px;--tooltip-dimension-max-width:320px}.pds-tooltip__content{background-color:var(--pine-color-primary);border-radius:calc(var(--pine-dimension-xs) * 1.25);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);color:var(--pine-color-text-primary);max-width:var(--tooltip-dimension-max-width);opacity:0;padding:var(--pine-dimension-xs) calc(var(--pine-dimension-md) / 2);visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content}.pds-tooltip--is-open .pds-tooltip__content{opacity:1;visibility:visible;z-index:var(--pine-z-index-raised)}.pds-tooltip.pds-tooltip--has-html-content .pds-tooltip__content{width:auto}.pds-tooltip__content::after{border-color:transparent;border-right-color:transparent;border-style:solid;border-width:var(--tooltip-border-width-arrow-left);content:\"\";height:0;position:absolute;width:0}.pds-tooltip--right .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--right-end .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);bottom:var(--tooltip-sizing-arrow-offset);left:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--right-start .pds-tooltip__content::after{border-inline-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-left);left:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--top .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:50%;top:initial;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--top-start .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--top-end .pds-tooltip__content::after{border-block-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-down);bottom:calc(var(--tooltip-sizing-arrow) * -1);left:initial;right:var(--tooltip-sizing-arrow-offset);top:initial}.pds-tooltip--left .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.pds-tooltip--left-end .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);bottom:var(--tooltip-sizing-arrow-offset);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:initial}.pds-tooltip--left-start .pds-tooltip__content::after{border-inline-start-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-right);left:initial;right:calc(var(--tooltip-sizing-arrow) * -1);top:var(--tooltip-sizing-arrow-offset)}.pds-tooltip--bottom .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:50%;top:calc(var(--tooltip-sizing-arrow) * -1);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.pds-tooltip--bottom-end .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:initial;right:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--bottom-start .pds-tooltip__content::after{border-block-end-color:var(--pine-color-primary);border-width:var(--tooltip-border-width-arrow-up);left:var(--tooltip-sizing-arrow-offset);top:calc(var(--tooltip-sizing-arrow) * -1)}.pds-tooltip--no-arrow .pds-tooltip__content::after{border-width:0}";
@@ -314,9 +314,9 @@ const PdsTooltip = class {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (index.h(index.Host, { key: 'ef40605b8ed95b1920caa425a021b900bdaef847', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, index.h("span", { key: '953a0ddd6070fa99e89307f6ddb9bacfa6932b5c', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (index.h(index.Host, { key: '19cd2c26c96f21f39d0bca90d3b74f8c282e74e1', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, index.h("span", { key: '4288caabd5c37d90d4c82c430a9eb0a17653b2ad', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, index.h("slot", { key: '9fa52468a1d99d4dd5af8a8c07d11b1591c5204c' })), index.h("div", { key: 'c4dfe98893fc2abacff788177d1f143afb2aa502', class: "pds-tooltip__content-slot-wrapper", hidden: true }, index.h("slot", { key: '468d06248f384f727517de3fd4c15af8d6e7b118', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, index.h("slot", { key: 'd937b6ee8a11c4a4d9f31daf147b598b5ab56c2d' })), index.h("div", { key: '6b31410657ddfce5275abc03a2e0a3c2692efc2a', class: "pds-tooltip__content-slot-wrapper", hidden: true }, index.h("slot", { key: '2d5ed8babb0a44c1340028dfedc5ee8694da4bfc', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/pine-core.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-2Lf0E1JO.js');
+var index = require('./index-CI0W8NCh.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"pds-alert.cjs\",[[257,\"pds-alert\",{\"componentId\":[1,\"component-id\"],\"heading\":[1],\"small\":[4],\"dismissible\":[4],\"variant\":[1],\"hasActionsContent\":[32]}]]],[\"pds-combobox.cjs\",[[321,\"pds-combobox\",{\"componentId\":[1,\"component-id\"],\"name\":[513],\"customOptionLayouts\":[4,\"custom-option-layouts\"],\"customTriggerContent\":[4,\"custom-trigger-content\"],\"disabled\":[4],\"dropdownPlacement\":[1,\"dropdown-placement\"],\"dropdownWidth\":[1,\"dropdown-width\"],\"hideLabel\":[4,\"hide-label\"],\"label\":[1],\"maxHeight\":[1,\"max-height\"],\"mode\":[1],\"placeholder\":[1],\"trigger\":[1],\"triggerWidth\":[1,\"trigger-width\"],\"triggerVariant\":[1,\"trigger-variant\"],\"chipSentiment\":[1,\"chip-sentiment\"],\"chipLarge\":[4,\"chip-large\"],\"chipIcon\":[1,\"chip-icon\"],\"chipDot\":[4,\"chip-dot\"],\"value\":[1025],\"displayText\":[32],\"filteredItems\":[32],\"highlightedIndex\":[32],\"isOpen\":[32],\"selectedOption\":[32],\"selectedOptionLayoutContent\":[32],\"selectedOptionChipProps\":[32],\"setFocus\":[64],\"getSelectedValue\":[64]},null,{\"value\":[\"handleValueChange\"],\"selectedOption\":[\"handleSelectedOptionChange\"]}]]],[\"pds-copytext.cjs\",[[257,\"pds-copytext\",{\"border\":[516],\"componentId\":[1,\"component-id\"],\"fullWidth\":[4,\"full-width\"],\"truncate\":[4],\"value\":[1]}]]],[\"pds-table-head.cjs\",[[257,\"pds-table-head\",{\"indeterminate\":[1028],\"isSelected\":[1028,\"is-selected\"]}]]],[\"pds-table-row.cjs\",[[257,\"pds-table-row\",{\"indeterminate\":[1028],\"isSelected\":[1028,\"is-selected\"]}]]],[\"pds-dropdown-menu-item.cjs\",[[257,\"pds-dropdown-menu-item\",{\"componentId\":[1,\"component-id\"],\"destructive\":[4],\"disabled\":[4],\"href\":[1],\"hasFocus\":[32],\"clickItem\":[64]}]]],[\"pds-property.cjs\",[[257,\"pds-property\",{\"componentId\":[1,\"component-id\"],\"icon\":[1]}]]],[\"pds-accordion.cjs\",[[257,\"pds-accordion\",{\"componentId\":[1,\"component-id\"],\"isOpen\":[1540,\"open\"]},null,{\"isOpen\":[\"handleOpenState\"]}]]],[\"pds-avatar.cjs\",[[257,\"pds-avatar\",{\"alt\":[1],\"badge\":[4],\"componentId\":[1,\"component-id\"],\"dropdown\":[4],\"image\":[1],\"size\":[513],\"variant\":[513]}]]],[\"pds-dropdown-menu.cjs\",[[257,\"pds-dropdown-menu\",{\"componentId\":[1,\"component-id\"],\"placement\":[1],\"currentFocusIndex\":[32]},[[8,\"keydown\",\"handleKeyDown\"],[8,\"click\",\"handleWindowClick\"]]]]],[\"pds-filter.cjs\",[[257,\"pds-filter\",{\"componentId\":[1,\"component-id\"],\"variant\":[1],\"icon\":[1],\"text\":[1],\"isOpen\":[32],\"showFilter\":[64],\"hideFilter\":[64]},[[9,\"resize\",\"handleWindowResize\"],[9,\"scroll\",\"handleWindowScroll\"],[4,\"toggle\",\"handlePopoverToggle\"],[4,\"click\",\"handleDocumentClick\"],[4,\"keydown\",\"handleEscapeKey\"]]]]],[\"pds-input.cjs\",[[321,\"pds-input\",{\"autocomplete\":[1],\"componentId\":[1,\"component-id\"],\"debounce\":[2],\"disabled\":[4],\"errorMessage\":[1,\"error-message\"],\"helperMessage\":[1,\"helper-message\"],\"invalid\":[4],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"max\":[1],\"maxlength\":[1],\"min\":[1],\"minlength\":[1],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"step\":[1],\"type\":[1],\"value\":[1032],\"fullWidth\":[4,\"full-width\"],\"highlight\":[516],\"hasPrefix\":[32],\"hasSuffix\":[32],\"hasPrepend\":[32],\"hasAppend\":[32],\"hasAction\":[32],\"hasFocus\":[32],\"setFocus\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}]]],[\"pds-radio.cjs\",[[262,\"pds-radio\",{\"checked\":[4],\"componentId\":[1,\"component-id\"],\"disabled\":[4],\"errorMessage\":[1,\"error-message\"],\"helperMessage\":[1,\"helper-message\"],\"hasBorder\":[4,\"has-border\"],\"invalid\":[4],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"name\":[1],\"required\":[4],\"value\":[1],\"_hasImage\":[32]}]]],[\"pds-select.cjs\",[[321,\"pds-select\",{\"autocomplete\":[1],\"componentId\":[1,\"component-id\"],\"disabled\":[4],\"errorMessage\":[1,\"error-message\"],\"hideLabel\":[4,\"hide-label\"],\"helperMessage\":[1,\"helper-message\"],\"invalid\":[4],\"label\":[1],\"multiple\":[4],\"name\":[1],\"required\":[4],\"highlight\":[516],\"value\":[1025]},null,{\"value\":[\"valueChanged\"],\"multiple\":[\"multipleChanged\"]}]]],[\"pds-sortable-item.cjs\",[[262,\"pds-sortable-item\",{\"enableActions\":[4,\"enable-actions\"],\"componentId\":[1,\"component-id\"],\"showHandle\":[1028,\"show-handle\"]}]]],[\"pds-switch.cjs\",[[321,\"pds-switch\",{\"componentId\":[1,\"component-id\"],\"checked\":[1028],\"disabled\":[4],\"errorMessage\":[1,\"error-message\"],\"hideLabel\":[4,\"hide-label\"],\"helperMessage\":[1,\"helper-message\"],\"invalid\":[4],\"label\":[1],\"name\":[1],\"required\":[4],\"value\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"pds-textarea.cjs\",[[321,\"pds-textarea\",{\"autocomplete\":[1],\"componentId\":[1,\"component-id\"],\"disabled\":[4],\"debounce\":[2],\"errorMessage\":[1,\"error-message\"],\"helperMessage\":[1,\"helper-message\"],\"invalid\":[1028],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"name\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"rows\":[2],\"maxLength\":[514,\"max-length\"],\"highlight\":[516],\"value\":[1025],\"hasFocus\":[32],\"hasAction\":[32],\"setFocus\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"],\"maxLength\":[\"maxLengthChanged\"]}]]],[\"pds-toast.cjs\",[[257,\"pds-toast\",{\"componentId\":[1,\"component-id\"],\"dismissible\":[4],\"duration\":[2],\"icon\":[1],\"type\":[1],\"isVisible\":[32],\"isAnimatingOut\":[32],\"dismiss\":[64]},null,{\"duration\":[\"handleDurationChange\"]}]]],[\"mock-pds-modal.cjs\",[[260,\"mock-pds-modal\",{\"componentId\":[1,\"component-id\"],\"size\":[1],\"scrollable\":[4],\"backdropDismiss\":[4,\"backdrop-dismiss\"],\"open\":[1028],\"showModal\":[64],\"hideModal\":[64]}]]],[\"pds-divider.cjs\",[[257,\"pds-divider\",{\"componentId\":[1,\"component-id\"],\"offset\":[1],\"vertical\":[4]}]]],[\"pds-dropdown-menu-separator.cjs\",[[257,\"pds-dropdown-menu-separator\",{\"componentId\":[1,\"component-id\"],\"disabled\":[4]}]]],[\"pds-filters.cjs\",[[257,\"pds-filters\",{\"componentId\":[1,\"component-id\"]}]]],[\"pds-image.cjs\",[[257,\"pds-image\",{\"alt\":[1],\"componentId\":[1,\"component-id\"],\"height\":[2],\"loading\":[1],\"sizes\":[1],\"src\":[1],\"srcset\":[1],\"width\":[2]}]]],[\"pds-modal.cjs\",[[260,\"pds-modal\",{\"backdropDismiss\":[4,\"backdrop-dismiss\"],\"componentId\":[1,\"component-id\"],\"open\":[1028],\"size\":[1],\"scrollable\":[4],\"focusableElementsArray\":[32],\"showModal\":[64],\"hideModal\":[64]},null,{\"open\":[\"handleOpenChange\"]}]]],[\"pds-modal-content.cjs\",[[260,\"pds-modal-content\",{\"border\":[513],\"contentMaxHeight\":[32]}]]],[\"pds-modal-footer.cjs\",[[260,\"pds-modal-footer\"]]],[\"pds-modal-header.cjs\",[[260,\"pds-modal-header\"]]],[\"pds-popover.cjs\",[[257,\"pds-popover\",{\"popoverTargetAction\":[1,\"popover-target-action\"],\"popoverType\":[1,\"popover-type\"],\"componentId\":[1,\"component-id\"],\"maxWidth\":[2,\"max-width\"],\"placement\":[513],\"active\":[32],\"show\":[64],\"hide\":[64],\"toggle\":[64]}]]],[\"pds-progress.cjs\",[[257,\"pds-progress\",{\"animated\":[4],\"componentId\":[1,\"component-id\"],\"fillColor\":[1,\"fill-color\"],\"label\":[1],\"percent\":[2],\"showPercent\":[4,\"show-percent\"]}]]],[\"pds-row.cjs\",[[256,\"pds-row\",{\"alignItems\":[1,\"align-items\"],\"border\":[4],\"colGap\":[1,\"col-gap\"],\"colGapBlock\":[1,\"col-gap-block\"],\"colGapInline\":[1,\"col-gap-inline\"],\"componentId\":[1,\"component-id\"],\"justifyContent\":[1,\"justify-content\"],\"minHeight\":[1,\"min-height\"],\"noWrap\":[4,\"no-wrap\"]}]]],[\"pds-sortable.cjs\",[[262,\"pds-sortable\",{\"border\":[516],\"componentId\":[1,\"component-id\"],\"dividers\":[516],\"handleType\":[1,\"handle-type\"]}]]],[\"pds-tab.cjs\",[[260,\"pds-tab\",{\"name\":[1],\"parentComponentId\":[1,\"parent-component-id\"],\"variant\":[1],\"index\":[2],\"selected\":[4]}]]],[\"pds-table.cjs\",[[257,\"pds-table\",{\"compact\":[4],\"componentId\":[1,\"component-id\"],\"responsive\":[4],\"fixedColumn\":[4,\"fixed-column\"],\"selectable\":[4],\"sortingColumn\":[32],\"sortingDirection\":[32]},[[0,\"pdsTableSort\",\"handleTableSort\"],[0,\"pdsTableSelectAll\",\"handleTableSelectAll\"],[0,\"pdsTableRowSelected\",\"handleTableSelect\"]]]]],[\"pds-table-body.cjs\",[[257,\"pds-table-body\"]]],[\"pds-tabpanel.cjs\",[[260,\"pds-tabpanel\",{\"name\":[1],\"parentComponentId\":[1,\"parent-component-id\"],\"variant\":[1],\"selected\":[1028]}]]],[\"pds-tabs.cjs\",[[257,\"pds-tabs\",{\"tablistLabel\":[1,\"tablist-label\"],\"componentId\":[1,\"component-id\"],\"variant\":[1],\"activeTabName\":[1025,\"active-tab-name\"],\"activeTabIndex\":[1026,\"active-tab-index\"]},[[16,\"pdsTabClick\",\"tabClickHandler\"],[0,\"keydown\",\"handleKeyDown\"]]]]],[\"pds-tooltip.cjs\",[[260,\"pds-tooltip\",{\"content\":[1],\"componentId\":[1,\"component-id\"],\"hasArrow\":[4,\"has-arrow\"],\"htmlContent\":[4,\"html-content\"],\"placement\":[513],\"maxWidth\":[1,\"max-width\"],\"opened\":[1540],\"_isInteractiveOpen\":[32],\"showTooltip\":[64],\"hideTooltip\":[64]},null,{\"opened\":[\"handleOpenToggle\"]}]]],[\"pds-button.cjs\",[[257,\"pds-button\",{\"componentId\":[1,\"component-id\"],\"disabled\":[4],\"fullWidth\":[4,\"full-width\"],\"href\":[1],\"icon\":[1],\"iconOnly\":[4,\"icon-only\"],\"loading\":[4],\"name\":[1],\"target\":[1],\"type\":[1],\"value\":[1],\"size\":[1],\"variant\":[1]},[[16,\"keydown\",\"handleFormKeyDown\"]]]]],[\"pds-chip.cjs\",[[257,\"pds-chip\",{\"componentId\":[1,\"component-id\"],\"dot\":[4],\"icon\":[1],\"large\":[4],\"sentiment\":[1],\"variant\":[1]}]]],[\"pds-link.cjs\",[[257,\"pds-link\",{\"color\":[1],\"componentId\":[1,\"component-id\"],\"external\":[4],\"variant\":[1],\"fontSize\":[1,\"font-size\"],\"href\":[1]}]]],[\"pds-table-head-cell.cjs\",[[257,\"pds-table-head-cell\",{\"cellAlign\":[1,\"cell-align\"],\"sortable\":[4],\"sortingDirection\":[32],\"tableScrolling\":[32],\"isSelected\":[32]}]]],[\"pds-table-cell.cjs\",[[257,\"pds-table-cell\",{\"cellAlign\":[1,\"cell-align\"],\"truncate\":[4],\"tableScrolling\":[32]}]]],[\"pds-text.cjs\",[[257,\"pds-text\",{\"align\":[1],\"color\":[1],\"decoration\":[1],\"gutter\":[1],\"italic\":[4],\"size\":[1],\"weight\":[1],\"tag\":[1],\"truncate\":[516]}]]],[\"pds-checkbox.cjs\",[[321,\"pds-checkbox\",{\"checked\":[1028],\"componentId\":[1,\"component-id\"],\"disabled\":[4],\"errorMessage\":[1,\"error-message\"],\"helperMessage\":[1,\"helper-message\"],\"indeterminate\":[1028],\"invalid\":[4],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"name\":[1],\"required\":[4],\"value\":[1]},null,{\"checked\":[\"updateIndeterminate\",\"checkedChanged\"]}]]],[\"pds-loader.cjs\",[[257,\"pds-loader\",{\"isLoading\":[4,\"is-loading\"],\"showLabel\":[4,\"show-label\"],\"size\":[513],\"variant\":[1]}]]],[\"pds-box.cjs\",[[256,\"pds-box\",{\"alignItems\":[1,\"align-items\"],\"alignItemsXs\":[1,\"align-items-xs\"],\"alignItemsSm\":[1,\"align-items-sm\"],\"alignItemsMd\":[1,\"align-items-md\"],\"alignItemsLg\":[1,\"align-items-lg\"],\"alignItemsXl\":[1,\"align-items-xl\"],\"alignSelf\":[1,\"align-self\"],\"alignSelfXs\":[1,\"align-self-xs\"],\"alignSelfSm\":[1,\"align-self-sm\"],\"alignSelfMd\":[1,\"align-self-md\"],\"alignSelfLg\":[1,\"align-self-lg\"],\"alignSelfXl\":[1,\"align-self-xl\"],\"auto\":[4],\"autoXs\":[4,\"auto-xs\"],\"autoSm\":[4,\"auto-sm\"],\"autoMd\":[4,\"auto-md\"],\"autoLg\":[4,\"auto-lg\"],\"autoXl\":[4,\"auto-xl\"],\"backgroundColor\":[1,\"background-color\"],\"border\":[4],\"borderColor\":[1,\"border-color\"],\"borderRadius\":[1,\"border-radius\"],\"direction\":[1],\"display\":[1],\"fit\":[4],\"fitXs\":[4,\"fit-xs\"],\"fitSm\":[4,\"fit-sm\"],\"fitMd\":[4,\"fit-md\"],\"fitLg\":[4,\"fit-lg\"],\"fitXl\":[4,\"fit-xl\"],\"gap\":[1],\"gapXs\":[1,\"gap-xs\"],\"gapSm\":[1,\"gap-sm\"],\"gapMd\":[1,\"gap-md\"],\"gapLg\":[1,\"gap-lg\"],\"gapXl\":[1,\"gap-xl\"],\"wrap\":[4],\"wrapXs\":[4,\"wrap-xs\"],\"wrapSm\":[4,\"wrap-sm\"],\"wrapMd\":[4,\"wrap-md\"],\"wrapLg\":[4,\"wrap-lg\"],\"wrapXl\":[4,\"wrap-xl\"],\"flex\":[1],\"justifyContent\":[1,\"justify-content\"],\"justifyContentXs\":[1,\"justify-content-xs\"],\"justifyContentSm\":[1,\"justify-content-sm\"],\"justifyContentMd\":[1,\"justify-content-md\"],\"justifyContentLg\":[1,\"justify-content-lg\"],\"justifyContentXl\":[1,\"justify-content-xl\"],\"marginBlockStart\":[1,\"margin-block-start\"],\"marginBlockStartXs\":[1,\"margin-block-start-xs\"],\"marginBlockStartSm\":[1,\"margin-block-start-sm\"],\"marginBlockStartMd\":[1,\"margin-block-start-md\"],\"marginBlockStartLg\":[1,\"margin-block-start-lg\"],\"marginBlockStartXl\":[1,\"margin-block-start-xl\"],\"marginInlineStart\":[1,\"margin-inline-start\"],\"marginInlineStartXs\":[1,\"margin-inline-start-xs\"],\"marginInlineStartSm\":[1,\"margin-inline-start-sm\"],\"marginInlineStartMd\":[1,\"margin-inline-start-md\"],\"marginInlineStartLg\":[1,\"margin-inline-start-lg\"],\"marginInlineStartXl\":[1,\"margin-inline-start-xl\"],\"marginInlineEnd\":[1,\"margin-inline-end\"],\"marginInlineEndXs\":[1,\"margin-inline-end-xs\"],\"marginInlineEndSm\":[1,\"margin-inline-end-sm\"],\"marginInlineEndMd\":[1,\"margin-inline-end-md\"],\"marginInlineEndLg\":[1,\"margin-inline-end-lg\"],\"marginInlineEndXl\":[1,\"margin-inline-end-xl\"],\"marginBlockEnd\":[1,\"margin-block-end\"],\"marginBlockEndXs\":[1,\"margin-block-end-xs\"],\"marginBlockEndSm\":[1,\"margin-block-end-sm\"],\"marginBlockEndMd\":[1,\"margin-block-end-md\"],\"marginBlockEndLg\":[1,\"margin-block-end-lg\"],\"marginBlockEndXl\":[1,\"margin-block-end-xl\"],\"minHeight\":[513,\"min-height\"],\"minWidth\":[513,\"min-width\"],\"offset\":[1],\"offsetXs\":[1,\"offset-xs\"],\"offsetSm\":[1,\"offset-sm\"],\"offsetMd\":[1,\"offset-md\"],\"offsetLg\":[1,\"offset-lg\"],\"offsetXl\":[1,\"offset-xl\"],\"padding\":[1],\"paddingXs\":[1,\"padding-xs\"],\"paddingSm\":[1,\"padding-sm\"],\"paddingMd\":[1,\"padding-md\"],\"paddingLg\":[1,\"padding-lg\"],\"paddingXl\":[1,\"padding-xl\"],\"paddingBlockStart\":[1,\"padding-block-start\"],\"paddingBlockStartXs\":[1,\"padding-block-start-xs\"],\"paddingBlockStartSm\":[1,\"padding-block-start-sm\"],\"paddingBlockStartMd\":[1,\"padding-block-start-md\"],\"paddingBlockStartLg\":[1,\"padding-block-start-lg\"],\"paddingBlockStartXl\":[1,\"padding-block-start-xl\"],\"paddingBlockEnd\":[1,\"padding-block-end\"],\"paddingBlockEndXs\":[1,\"padding-block-end-xs\"],\"paddingBlockEndSm\":[1,\"padding-block-end-sm\"],\"paddingBlockEndMd\":[1,\"padding-block-end-md\"],\"paddingBlockEndLg\":[1,\"padding-block-end-lg\"],\"paddingBlockEndXl\":[1,\"padding-block-end-xl\"],\"paddingInlineStart\":[1,\"padding-inline-start\"],\"paddingInlineStartXs\":[1,\"padding-inline-start-xs\"],\"paddingInlineStartSm\":[1,\"padding-inline-start-sm\"],\"paddingInlineStartMd\":[1,\"padding-inline-start-md\"],\"paddingInlineStartLg\":[1,\"padding-inline-start-lg\"],\"paddingInlineStartXl\":[1,\"padding-inline-start-xl\"],\"paddingInlineEnd\":[1,\"padding-inline-end\"],\"paddingInlineEndXs\":[1,\"padding-inline-end-xs\"],\"paddingInlineEndSm\":[1,\"padding-inline-end-sm\"],\"paddingInlineEndMd\":[1,\"padding-inline-end-md\"],\"paddingInlineEndLg\":[1,\"padding-inline-end-lg\"],\"paddingInlineEndXl\":[1,\"padding-inline-end-xl\"],\"shadow\":[1],\"size\":[1],\"sizeXs\":[1,\"size-xs\"],\"sizeSm\":[1,\"size-sm\"],\"sizeMd\":[1,\"size-md\"],\"sizeLg\":[1,\"size-lg\"],\"sizeXl\":[1,\"size-xl\"]}]]],[\"pds-icon.cjs\",[[257,\"pds-icon\",{\"color\":[1],\"flipRtl\":[4,\"flip-rtl\"],\"icon\":[8],\"name\":[513],\"size\":[513],\"src\":[1],\"ariaLabel\":[32],\"isVisible\":[32],\"svgContent\":[32]},null,{\"size\":[\"updateStyles\"],\"color\":[\"updateStyles\"],\"name\":[\"onIconPropertyChange\"],\"src\":[\"onIconPropertyChange\"],\"icon\":[\"onIconPropertyChange\"]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"pds-alert.cjs\",[[257,\"pds-alert\",{\"componentId\":[1,\"component-id\"],\"heading\":[1],\"small\":[4],\"dismissible\":[4],\"variant\":[1],\"hasActionsContent\":[32]}]]],[\"pds-combobox.cjs\",[[321,\"pds-combobox\",{\"componentId\":[1,\"component-id\"],\"name\":[513],\"customOptionLayouts\":[4,\"custom-option-layouts\"],\"customTriggerContent\":[4,\"custom-trigger-content\"],\"disabled\":[4],\"dropdownPlacement\":[1,\"dropdown-placement\"],\"dropdownWidth\":[1,\"dropdown-width\"],\"hideLabel\":[4,\"hide-label\"],\"label\":[1],\"maxHeight\":[1,\"max-height\"],\"mode\":[1],\"placeholder\":[1],\"trigger\":[1],\"triggerWidth\":[1,\"trigger-width\"],\"triggerVariant\":[1,\"trigger-variant\"],\"chipSentiment\":[1,\"chip-sentiment\"],\"chipLarge\":[4,\"chip-large\"],\"chipIcon\":[1,\"chip-icon\"],\"chipDot\":[4,\"chip-dot\"],\"value\":[1025],\"displayText\":[32],\"filteredItems\":[32],\"highlightedIndex\":[32],\"isOpen\":[32],\"selectedOption\":[32],\"selectedOptionLayoutContent\":[32],\"selectedOptionChipProps\":[32],\"setFocus\":[64],\"getSelectedValue\":[64]},null,{\"value\":[\"handleValueChange\"],\"selectedOption\":[\"handleSelectedOptionChange\"]}]]],[\"pds-copytext.cjs\",[[257,\"pds-copytext\",{\"border\":[516],\"componentId\":[1,\"component-id\"],\"fullWidth\":[4,\"full-width\"],\"truncate\":[4],\"value\":[1]}]]],[\"pds-table-head.cjs\",[[257,\"pds-table-head\",{\"indeterminate\":[1028],\"isSelected\":[1028,\"is-selected\"]}]]],[\"pds-table-row.cjs\",[[257,\"pds-table-row\",{\"indeterminate\":[1028],\"isSelected\":[1028,\"is-selected\"]}]]],[\"pds-dropdown-menu-item.cjs\",[[257,\"pds-dropdown-menu-item\",{\"componentId\":[1,\"component-id\"],\"destructive\":[4],\"disabled\":[4],\"href\":[1],\"hasFocus\":[32],\"clickItem\":[64]}]]],[\"pds-property.cjs\",[[257,\"pds-property\",{\"componentId\":[1,\"component-id\"],\"icon\":[1]}]]],[\"pds-accordion.cjs\",[[257,\"pds-accordion\",{\"componentId\":[1,\"component-id\"],\"isOpen\":[1540,\"open\"]},null,{\"isOpen\":[\"handleOpenState\"]}]]],[\"pds-avatar.cjs\",[[257,\"pds-avatar\",{\"alt\":[1],\"badge\":[4],\"componentId\":[1,\"component-id\"],\"dropdown\":[4],\"image\":[1],\"size\":[513],\"variant\":[513]}]]],[\"pds-dropdown-menu.cjs\",[[257,\"pds-dropdown-menu\",{\"componentId\":[1,\"component-id\"],\"placement\":[1],\"currentFocusIndex\":[32]},[[8,\"keydown\",\"handleKeyDown\"],[8,\"click\",\"handleWindowClick\"]]]]],[\"pds-filter.cjs\",[[257,\"pds-filter\",{\"componentId\":[1,\"component-id\"],\"variant\":[1],\"icon\":[1],\"text\":[1],\"isOpen\":[32],\"showFilter\":[64],\"hideFilter\":[64]},[[9,\"resize\",\"handleWindowResize\"],[9,\"scroll\",\"handleWindowScroll\"],[4,\"toggle\",\"handlePopoverToggle\"],[4,\"click\",\"handleDocumentClick\"],[4,\"keydown\",\"handleEscapeKey\"]]]]],[\"pds-input.cjs\",[[321,\"pds-input\",{\"autocomplete\":[1],\"componentId\":[1,\"component-id\"],\"debounce\":[2],\"disabled\":[4],\"errorMessage\":[1,\"error-message\"],\"helperMessage\":[1,\"helper-message\"],\"invalid\":[4],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"max\":[1],\"maxlength\":[1],\"min\":[1],\"minlength\":[1],\"name\":[1],\"pattern\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"step\":[1],\"type\":[1],\"value\":[1032],\"fullWidth\":[4,\"full-width\"],\"highlight\":[516],\"hasPrefix\":[32],\"hasSuffix\":[32],\"hasPrepend\":[32],\"hasAppend\":[32],\"hasAction\":[32],\"hasFocus\":[32],\"setFocus\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"]}]]],[\"pds-radio.cjs\",[[262,\"pds-radio\",{\"checked\":[4],\"componentId\":[1,\"component-id\"],\"disabled\":[4],\"errorMessage\":[1,\"error-message\"],\"helperMessage\":[1,\"helper-message\"],\"hasBorder\":[4,\"has-border\"],\"invalid\":[4],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"name\":[1],\"required\":[4],\"value\":[1],\"_hasImage\":[32]}]]],[\"pds-radio-group.cjs\",[[262,\"pds-radio-group\",{\"componentId\":[1,\"component-id\"],\"direction\":[1],\"errorMessage\":[1,\"error-message\"],\"helperMessage\":[1,\"helper-message\"],\"gap\":[1],\"disabled\":[4],\"invalid\":[4],\"groupLabel\":[1,\"group-label\"],\"name\":[1],\"required\":[4]},[[0,\"change\",\"handleRadioChange\"]],{\"name\":[\"handlePropsChange\"],\"disabled\":[\"handlePropsChange\"],\"invalid\":[\"handlePropsChange\"],\"required\":[\"handlePropsChange\"]}]]],[\"pds-select.cjs\",[[321,\"pds-select\",{\"autocomplete\":[1],\"componentId\":[1,\"component-id\"],\"disabled\":[4],\"errorMessage\":[1,\"error-message\"],\"hideLabel\":[4,\"hide-label\"],\"helperMessage\":[1,\"helper-message\"],\"invalid\":[4],\"label\":[1],\"multiple\":[4],\"name\":[1],\"required\":[4],\"highlight\":[516],\"value\":[1025]},null,{\"value\":[\"valueChanged\"],\"multiple\":[\"multipleChanged\"]}]]],[\"pds-sortable-item.cjs\",[[262,\"pds-sortable-item\",{\"enableActions\":[4,\"enable-actions\"],\"componentId\":[1,\"component-id\"],\"showHandle\":[1028,\"show-handle\"]}]]],[\"pds-switch.cjs\",[[321,\"pds-switch\",{\"componentId\":[1,\"component-id\"],\"checked\":[1028],\"disabled\":[4],\"errorMessage\":[1,\"error-message\"],\"hideLabel\":[4,\"hide-label\"],\"helperMessage\":[1,\"helper-message\"],\"invalid\":[4],\"label\":[1],\"name\":[1],\"required\":[4],\"value\":[1]},null,{\"checked\":[\"checkedChanged\"]}]]],[\"pds-textarea.cjs\",[[321,\"pds-textarea\",{\"autocomplete\":[1],\"componentId\":[1,\"component-id\"],\"disabled\":[4],\"debounce\":[2],\"errorMessage\":[1,\"error-message\"],\"helperMessage\":[1,\"helper-message\"],\"invalid\":[1028],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"name\":[1],\"placeholder\":[1],\"readonly\":[4],\"required\":[4],\"rows\":[2],\"maxLength\":[514,\"max-length\"],\"highlight\":[516],\"value\":[1025],\"hasFocus\":[32],\"hasAction\":[32],\"setFocus\":[64]},null,{\"debounce\":[\"debounceChanged\"],\"value\":[\"valueChanged\"],\"maxLength\":[\"maxLengthChanged\"]}]]],[\"pds-toast.cjs\",[[257,\"pds-toast\",{\"componentId\":[1,\"component-id\"],\"dismissible\":[4],\"duration\":[2],\"icon\":[1],\"type\":[1],\"isVisible\":[32],\"isAnimatingOut\":[32],\"dismiss\":[64]},null,{\"duration\":[\"handleDurationChange\"]}]]],[\"mock-pds-modal.cjs\",[[260,\"mock-pds-modal\",{\"componentId\":[1,\"component-id\"],\"size\":[1],\"scrollable\":[4],\"backdropDismiss\":[4,\"backdrop-dismiss\"],\"open\":[1028],\"showModal\":[64],\"hideModal\":[64]}]]],[\"pds-divider.cjs\",[[257,\"pds-divider\",{\"componentId\":[1,\"component-id\"],\"offset\":[1],\"vertical\":[4]}]]],[\"pds-dropdown-menu-separator.cjs\",[[257,\"pds-dropdown-menu-separator\",{\"componentId\":[1,\"component-id\"],\"disabled\":[4]}]]],[\"pds-filters.cjs\",[[257,\"pds-filters\",{\"componentId\":[1,\"component-id\"]}]]],[\"pds-image.cjs\",[[257,\"pds-image\",{\"alt\":[1],\"componentId\":[1,\"component-id\"],\"height\":[2],\"loading\":[1],\"sizes\":[1],\"src\":[1],\"srcset\":[1],\"width\":[2]}]]],[\"pds-modal.cjs\",[[260,\"pds-modal\",{\"backdropDismiss\":[4,\"backdrop-dismiss\"],\"componentId\":[1,\"component-id\"],\"open\":[1028],\"size\":[1],\"scrollable\":[4],\"focusableElementsArray\":[32],\"showModal\":[64],\"hideModal\":[64]},null,{\"open\":[\"handleOpenChange\"]}]]],[\"pds-modal-content.cjs\",[[260,\"pds-modal-content\",{\"border\":[513],\"contentMaxHeight\":[32]}]]],[\"pds-modal-footer.cjs\",[[260,\"pds-modal-footer\"]]],[\"pds-modal-header.cjs\",[[260,\"pds-modal-header\"]]],[\"pds-popover.cjs\",[[257,\"pds-popover\",{\"popoverTargetAction\":[1,\"popover-target-action\"],\"popoverType\":[1,\"popover-type\"],\"componentId\":[1,\"component-id\"],\"maxWidth\":[2,\"max-width\"],\"placement\":[513],\"active\":[32],\"show\":[64],\"hide\":[64],\"toggle\":[64]}]]],[\"pds-progress.cjs\",[[257,\"pds-progress\",{\"animated\":[4],\"componentId\":[1,\"component-id\"],\"fillColor\":[1,\"fill-color\"],\"label\":[1],\"percent\":[2],\"showPercent\":[4,\"show-percent\"]}]]],[\"pds-row.cjs\",[[256,\"pds-row\",{\"alignItems\":[1,\"align-items\"],\"border\":[4],\"colGap\":[1,\"col-gap\"],\"colGapBlock\":[1,\"col-gap-block\"],\"colGapInline\":[1,\"col-gap-inline\"],\"componentId\":[1,\"component-id\"],\"justifyContent\":[1,\"justify-content\"],\"minHeight\":[1,\"min-height\"],\"noWrap\":[4,\"no-wrap\"]}]]],[\"pds-sortable.cjs\",[[262,\"pds-sortable\",{\"border\":[516],\"componentId\":[1,\"component-id\"],\"dividers\":[516],\"handleType\":[1,\"handle-type\"]}]]],[\"pds-tab.cjs\",[[260,\"pds-tab\",{\"name\":[1],\"parentComponentId\":[1,\"parent-component-id\"],\"variant\":[1],\"index\":[2],\"selected\":[4]}]]],[\"pds-table.cjs\",[[257,\"pds-table\",{\"compact\":[4],\"componentId\":[1,\"component-id\"],\"responsive\":[4],\"fixedColumn\":[4,\"fixed-column\"],\"selectable\":[4],\"sortingColumn\":[32],\"sortingDirection\":[32]},[[0,\"pdsTableSort\",\"handleTableSort\"],[0,\"pdsTableSelectAll\",\"handleTableSelectAll\"],[0,\"pdsTableRowSelected\",\"handleTableSelect\"]]]]],[\"pds-table-body.cjs\",[[257,\"pds-table-body\"]]],[\"pds-tabpanel.cjs\",[[260,\"pds-tabpanel\",{\"name\":[1],\"parentComponentId\":[1,\"parent-component-id\"],\"variant\":[1],\"selected\":[1028]}]]],[\"pds-tabs.cjs\",[[257,\"pds-tabs\",{\"tablistLabel\":[1,\"tablist-label\"],\"componentId\":[1,\"component-id\"],\"variant\":[1],\"activeTabName\":[1025,\"active-tab-name\"],\"activeTabIndex\":[1026,\"active-tab-index\"]},[[16,\"pdsTabClick\",\"tabClickHandler\"],[0,\"keydown\",\"handleKeyDown\"]]]]],[\"pds-tooltip.cjs\",[[260,\"pds-tooltip\",{\"content\":[1],\"componentId\":[1,\"component-id\"],\"hasArrow\":[4,\"has-arrow\"],\"htmlContent\":[4,\"html-content\"],\"placement\":[513],\"maxWidth\":[1,\"max-width\"],\"opened\":[1540],\"_isInteractiveOpen\":[32],\"showTooltip\":[64],\"hideTooltip\":[64]},null,{\"opened\":[\"handleOpenToggle\"]}]]],[\"pds-icon.cjs\",[[257,\"pds-icon\",{\"color\":[1],\"flipRtl\":[4,\"flip-rtl\"],\"icon\":[8],\"name\":[513],\"size\":[513],\"src\":[1],\"ariaLabel\":[32],\"isVisible\":[32],\"svgContent\":[32]},null,{\"size\":[\"updateStyles\"],\"color\":[\"updateStyles\"],\"name\":[\"onIconPropertyChange\"],\"src\":[\"onIconPropertyChange\"],\"icon\":[\"onIconPropertyChange\"]}]]],[\"pds-button.cjs\",[[257,\"pds-button\",{\"componentId\":[1,\"component-id\"],\"disabled\":[4],\"fullWidth\":[4,\"full-width\"],\"href\":[1],\"icon\":[1],\"iconOnly\":[4,\"icon-only\"],\"loading\":[4],\"name\":[1],\"target\":[1],\"type\":[1],\"value\":[1],\"size\":[1],\"variant\":[1]},[[16,\"keydown\",\"handleFormKeyDown\"]]]]],[\"pds-chip.cjs\",[[257,\"pds-chip\",{\"componentId\":[1,\"component-id\"],\"dot\":[4],\"icon\":[1],\"large\":[4],\"sentiment\":[1],\"variant\":[1]}]]],[\"pds-link.cjs\",[[257,\"pds-link\",{\"color\":[1],\"componentId\":[1,\"component-id\"],\"external\":[4],\"variant\":[1],\"fontSize\":[1,\"font-size\"],\"href\":[1]}]]],[\"pds-table-head-cell.cjs\",[[257,\"pds-table-head-cell\",{\"cellAlign\":[1,\"cell-align\"],\"sortable\":[4],\"sortingDirection\":[32],\"tableScrolling\":[32],\"isSelected\":[32]}]]],[\"pds-table-cell.cjs\",[[257,\"pds-table-cell\",{\"cellAlign\":[1,\"cell-align\"],\"truncate\":[4],\"tableScrolling\":[32]}]]],[\"pds-text.cjs\",[[257,\"pds-text\",{\"align\":[1],\"color\":[1],\"decoration\":[1],\"gutter\":[1],\"italic\":[4],\"size\":[1],\"weight\":[1],\"tag\":[1],\"truncate\":[516]}]]],[\"pds-checkbox.cjs\",[[321,\"pds-checkbox\",{\"checked\":[1028],\"componentId\":[1,\"component-id\"],\"disabled\":[4],\"errorMessage\":[1,\"error-message\"],\"helperMessage\":[1,\"helper-message\"],\"indeterminate\":[1028],\"invalid\":[4],\"label\":[1],\"hideLabel\":[4,\"hide-label\"],\"name\":[1],\"required\":[4],\"value\":[1]},null,{\"checked\":[\"updateIndeterminate\",\"checkedChanged\"]}]]],[\"pds-loader.cjs\",[[257,\"pds-loader\",{\"isLoading\":[4,\"is-loading\"],\"showLabel\":[4,\"show-label\"],\"size\":[513],\"variant\":[1]}]]],[\"pds-box.cjs\",[[256,\"pds-box\",{\"alignItems\":[1,\"align-items\"],\"alignItemsXs\":[1,\"align-items-xs\"],\"alignItemsSm\":[1,\"align-items-sm\"],\"alignItemsMd\":[1,\"align-items-md\"],\"alignItemsLg\":[1,\"align-items-lg\"],\"alignItemsXl\":[1,\"align-items-xl\"],\"alignSelf\":[1,\"align-self\"],\"alignSelfXs\":[1,\"align-self-xs\"],\"alignSelfSm\":[1,\"align-self-sm\"],\"alignSelfMd\":[1,\"align-self-md\"],\"alignSelfLg\":[1,\"align-self-lg\"],\"alignSelfXl\":[1,\"align-self-xl\"],\"auto\":[4],\"autoXs\":[4,\"auto-xs\"],\"autoSm\":[4,\"auto-sm\"],\"autoMd\":[4,\"auto-md\"],\"autoLg\":[4,\"auto-lg\"],\"autoXl\":[4,\"auto-xl\"],\"backgroundColor\":[1,\"background-color\"],\"border\":[4],\"borderColor\":[1,\"border-color\"],\"borderRadius\":[1,\"border-radius\"],\"direction\":[1],\"display\":[1],\"fit\":[4],\"fitXs\":[4,\"fit-xs\"],\"fitSm\":[4,\"fit-sm\"],\"fitMd\":[4,\"fit-md\"],\"fitLg\":[4,\"fit-lg\"],\"fitXl\":[4,\"fit-xl\"],\"gap\":[1],\"gapXs\":[1,\"gap-xs\"],\"gapSm\":[1,\"gap-sm\"],\"gapMd\":[1,\"gap-md\"],\"gapLg\":[1,\"gap-lg\"],\"gapXl\":[1,\"gap-xl\"],\"wrap\":[4],\"wrapXs\":[4,\"wrap-xs\"],\"wrapSm\":[4,\"wrap-sm\"],\"wrapMd\":[4,\"wrap-md\"],\"wrapLg\":[4,\"wrap-lg\"],\"wrapXl\":[4,\"wrap-xl\"],\"flex\":[1],\"justifyContent\":[1,\"justify-content\"],\"justifyContentXs\":[1,\"justify-content-xs\"],\"justifyContentSm\":[1,\"justify-content-sm\"],\"justifyContentMd\":[1,\"justify-content-md\"],\"justifyContentLg\":[1,\"justify-content-lg\"],\"justifyContentXl\":[1,\"justify-content-xl\"],\"marginBlockStart\":[1,\"margin-block-start\"],\"marginBlockStartXs\":[1,\"margin-block-start-xs\"],\"marginBlockStartSm\":[1,\"margin-block-start-sm\"],\"marginBlockStartMd\":[1,\"margin-block-start-md\"],\"marginBlockStartLg\":[1,\"margin-block-start-lg\"],\"marginBlockStartXl\":[1,\"margin-block-start-xl\"],\"marginInlineStart\":[1,\"margin-inline-start\"],\"marginInlineStartXs\":[1,\"margin-inline-start-xs\"],\"marginInlineStartSm\":[1,\"margin-inline-start-sm\"],\"marginInlineStartMd\":[1,\"margin-inline-start-md\"],\"marginInlineStartLg\":[1,\"margin-inline-start-lg\"],\"marginInlineStartXl\":[1,\"margin-inline-start-xl\"],\"marginInlineEnd\":[1,\"margin-inline-end\"],\"marginInlineEndXs\":[1,\"margin-inline-end-xs\"],\"marginInlineEndSm\":[1,\"margin-inline-end-sm\"],\"marginInlineEndMd\":[1,\"margin-inline-end-md\"],\"marginInlineEndLg\":[1,\"margin-inline-end-lg\"],\"marginInlineEndXl\":[1,\"margin-inline-end-xl\"],\"marginBlockEnd\":[1,\"margin-block-end\"],\"marginBlockEndXs\":[1,\"margin-block-end-xs\"],\"marginBlockEndSm\":[1,\"margin-block-end-sm\"],\"marginBlockEndMd\":[1,\"margin-block-end-md\"],\"marginBlockEndLg\":[1,\"margin-block-end-lg\"],\"marginBlockEndXl\":[1,\"margin-block-end-xl\"],\"minHeight\":[513,\"min-height\"],\"minWidth\":[513,\"min-width\"],\"offset\":[1],\"offsetXs\":[1,\"offset-xs\"],\"offsetSm\":[1,\"offset-sm\"],\"offsetMd\":[1,\"offset-md\"],\"offsetLg\":[1,\"offset-lg\"],\"offsetXl\":[1,\"offset-xl\"],\"padding\":[1],\"paddingXs\":[1,\"padding-xs\"],\"paddingSm\":[1,\"padding-sm\"],\"paddingMd\":[1,\"padding-md\"],\"paddingLg\":[1,\"padding-lg\"],\"paddingXl\":[1,\"padding-xl\"],\"paddingBlockStart\":[1,\"padding-block-start\"],\"paddingBlockStartXs\":[1,\"padding-block-start-xs\"],\"paddingBlockStartSm\":[1,\"padding-block-start-sm\"],\"paddingBlockStartMd\":[1,\"padding-block-start-md\"],\"paddingBlockStartLg\":[1,\"padding-block-start-lg\"],\"paddingBlockStartXl\":[1,\"padding-block-start-xl\"],\"paddingBlockEnd\":[1,\"padding-block-end\"],\"paddingBlockEndXs\":[1,\"padding-block-end-xs\"],\"paddingBlockEndSm\":[1,\"padding-block-end-sm\"],\"paddingBlockEndMd\":[1,\"padding-block-end-md\"],\"paddingBlockEndLg\":[1,\"padding-block-end-lg\"],\"paddingBlockEndXl\":[1,\"padding-block-end-xl\"],\"paddingInlineStart\":[1,\"padding-inline-start\"],\"paddingInlineStartXs\":[1,\"padding-inline-start-xs\"],\"paddingInlineStartSm\":[1,\"padding-inline-start-sm\"],\"paddingInlineStartMd\":[1,\"padding-inline-start-md\"],\"paddingInlineStartLg\":[1,\"padding-inline-start-lg\"],\"paddingInlineStartXl\":[1,\"padding-inline-start-xl\"],\"paddingInlineEnd\":[1,\"padding-inline-end\"],\"paddingInlineEndXs\":[1,\"padding-inline-end-xs\"],\"paddingInlineEndSm\":[1,\"padding-inline-end-sm\"],\"paddingInlineEndMd\":[1,\"padding-inline-end-md\"],\"paddingInlineEndLg\":[1,\"padding-inline-end-lg\"],\"paddingInlineEndXl\":[1,\"padding-inline-end-xl\"],\"shadow\":[1],\"size\":[1],\"sizeXs\":[1,\"size-xs\"],\"sizeSm\":[1,\"size-sm\"],\"sizeMd\":[1,\"size-md\"],\"sizeLg\":[1,\"size-lg\"],\"sizeXl\":[1,\"size-xl\"]}]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -28,6 +28,7 @@
     "components/pds-progress/pds-progress.js",
     "components/pds-property/pds-property.js",
     "components/pds-radio/pds-radio.js",
+    "components/pds-radio-group/pds-radio-group.js",
     "components/pds-row/pds-row.js",
     "components/pds-select/pds-select.js",
     "components/pds-sortable/pds-sortable.js",

package/dist/collection/components/_internal/pds-label/pds-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-label.js","sourceRoot":"","sources":["../../../../src/components/_internal/pds-label/pds-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAkBvD;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC1F,aAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,IAAG,IAAI,CAAS,CAC3D,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Props for the input label.\n */\ninterface LabelProps {\n  classNames?: string,\n  /**\n   * Corresponds to the 'for' attribute on a label. Useful for\n   * associating a label with a specific input.\n   */\n  htmlFor: string,\n  /**\n   * Label text displayed.\n   */\n  text: string,\n}\n\n/**\n * Returns markup for an input label.\n * @internal\n */\nexport const PdsLabel: FunctionalComponent<LabelProps> = ({ classNames, htmlFor, text }) => (\n  <label class={classNames} htmlFor={htmlFor}>{text}</label>\n);\n"]}
+{"version":3,"file":"pds-label.js","sourceRoot":"","sources":["../../../../../src/components/_internal/pds-label/pds-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AAkBvD;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAoC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC1F,aAAO,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,IAAG,IAAI,CAAS,CAC3D,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\n/**\n * Props for the input label.\n */\ninterface LabelProps {\n  classNames?: string,\n  /**\n   * Corresponds to the 'for' attribute on a label. Useful for\n   * associating a label with a specific input.\n   */\n  htmlFor: string,\n  /**\n   * Label text displayed.\n   */\n  text: string,\n}\n\n/**\n * Returns markup for an input label.\n * @internal\n */\nexport const PdsLabel: FunctionalComponent<LabelProps> = ({ classNames, htmlFor, text }) => (\n  <label class={classNames} htmlFor={htmlFor}>{text}</label>\n);\n"]}

package/dist/collection/components/pds-accordion/pds-accordion.css

@@ -25,7 +25,7 @@ details[open] summary pds-icon {
 summary {
   background-color: var(--pine-color-background-container);
   border-radius: var(--pine-dimension-xs);
-  color: var(--pine-color-text-readonly);
+  color: var(--pine-color-text-muted);
   font-family: var(--pine-font-family-body);
   font-size: var(--pine-font-size-body-md);
   font-weight: var(--pine-font-weight-medium);

package/dist/collection/components/pds-accordion/pds-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-accordion.js","sourceRoot":"","sources":["../../../src/components/pds-accordion/pds-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;;;;;GAMG;AAMH,MAAM,OAAO,YAAY;IALzB;QAcE;;;WAGG;QAKA,WAAM,GAAY,KAAK,CAAC;QAOnB,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACpC,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;gBAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YACxB,CAAC;YACD,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;KAqBH;IAlCC,eAAe,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;IACzB,CAAC;IAaD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YAC9C,gFAAa,IAAI,CAAC,gBAAgB,EAAE,IAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAwB,CAAC;gBAC5F,gEAAS,IAAI,EAAC,kBAAkB;oBAC9B,6DAAM,IAAI,EAAC,OAAO,cAAe;oBACjC,iEAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC3C;gBACV,4DAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,qBAAqB;oBACpD,8DAAQ,CACJ,CACE,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @part accordion-button - Accordion button/trigger styles.\n * @part accordion-icon - Accordion icon styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrls: ['pds-accordion.scss'],\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true,\n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  };\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  };\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => (this.detailsEl = el as HTMLDetailsElement)}>\n          <summary part=\"accordion-button\">\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={downSmall} part=\"accordion-icon\" />\n          </summary>\n          <div part=\"accordion-body\" class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-accordion.js","sourceRoot":"","sources":["../../../../src/components/pds-accordion/pds-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD;;;;;;GAMG;AAMH,MAAM,OAAO,YAAY;IALzB;QAcE;;;WAGG;QAKA,WAAM,GAAY,KAAK,CAAC;QAOnB,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACpC,CAAC,CAAC;QAEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;gBAC1B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;YACxB,CAAC;YACD,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;KAqBH;IAlCC,eAAe,CAAC,QAAiB;QAC/B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;IACzB,CAAC;IAaD,gBAAgB;QACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YAC9C,gFAAa,IAAI,CAAC,gBAAgB,EAAE,IAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAwB,CAAC;gBAC5F,gEAAS,IAAI,EAAC,kBAAkB;oBAC9B,6DAAM,IAAI,EAAC,OAAO,cAAe;oBACjC,iEAAU,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC3C;gBACV,4DAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,qBAAqB;oBACpD,8DAAQ,CACJ,CACE,CACL,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @part accordion-button - Accordion button/trigger styles.\n * @part accordion-icon - Accordion icon styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n  tag: 'pds-accordion',\n  styleUrls: ['pds-accordion.scss'],\n  shadow: true,\n})\nexport class PdsAccordion {\n  private detailsEl: HTMLDetailsElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   * @defaultValue null\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Can be used to manually set the open state of the accordion.\n   * @defaultValue false\n   */\n  @Prop({\n    attribute: 'open',\n    mutable: true,\n    reflect: true,\n  }) isOpen: boolean = false;\n\n  @Watch('isOpen')\n  handleOpenState(newValue: boolean) {\n    this.isOpen = newValue;\n  }\n\n  private handleToggle = () => {\n    this.isOpen = this.detailsEl.open;\n  };\n\n  private getOpenAttribute = () => {\n    if (this.isOpen !== false) {\n      return { open: true };\n    }\n    return '';\n  };\n\n  componentDidLoad() {\n    this.detailsEl.addEventListener('toggle', this.handleToggle);\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-accordion\" id={this.componentId}>\n        <details {...this.getOpenAttribute()} ref={(el) => (this.detailsEl = el as HTMLDetailsElement)}>\n          <summary part=\"accordion-button\">\n            <slot name=\"label\">Details</slot>\n            <pds-icon icon={downSmall} part=\"accordion-icon\" />\n          </summary>\n          <div part=\"accordion-body\" class=\"pds-accordion__body\">\n            <slot />\n          </div>\n        </details>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-accordion/stories/pds-accordion.stories.js

@@ -1,12 +1,10 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
 
 export default {
   args: {
     componentId: '',
     isOpen: false,
   },
-  argTypes: extractArgTypes('pds-accordion'),
   component: 'pds-accordion',
   title: 'components/Accordion',
 }

package/dist/collection/components/pds-alert/pds-alert.css

@@ -13,6 +13,7 @@
   --pds-alert-color-text: var(--pine-alert-color-text);
   --pds-alert-color-dismiss: var(--pine-alert-color-dismiss);
   --pds-alert-background-dismiss-hover: var(--pine-alert-color-dismiss-hover);
+  padding: var(--pine-dimension-250);
 }
 
 .pds-alert__container--danger {

package/dist/collection/components/pds-alert/pds-alert.js

@@ -48,7 +48,7 @@ export class PdsAlert {
         };
         // Get the icon name based on the current variant
         const iconName = iconMap[this.variant] || iconMap.default;
-        return (h(Host, { key: 'ccb4b954c20b4fedfe1336737a412753bf3c78a2', class: "pds-alert", id: this.componentId, variant: this.variant }, h("pds-box", { key: '6feafdc553ab9854542cb53035486a0caa1f3348', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block", padding: "md" }, h("pds-box", { key: '86b160e97ac4724434b09cd832f7cdc61834a520', gap: "sm", display: "flex" }, h("pds-icon", { key: 'c2f61f894b3f63915259e298dd9d973b719880c9', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" }), h("pds-box", { key: '07926a4d7d6a1795edd2055ce9ae3d853982fe98', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (h("pds-text", { key: '2267241b05890cb4b955cd5418b26f30abd0503c', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (h("button", { key: 'bdc435db71e60d9233e97821ea10012f509cae26', class: "pds-alert__dismiss", type: "button", "aria-label": "Dismiss alert", onClick: this.handleCloseClick }, h("pds-icon", { key: '22f013acfafafa6c32da9aa696bef8a8d3c633c0', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
+        return (h(Host, { key: 'ccb4b954c20b4fedfe1336737a412753bf3c78a2', class: "pds-alert", id: this.componentId, variant: this.variant }, h("pds-box", { key: '54b470210568b3af13c341a9afe3a4a88efc4574', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, h("pds-box", { key: '609a016138c123e05f0474800e91dfaaa3e8150b', gap: "sm", display: "flex" }, h("pds-icon", { key: '18262b9810eb488aca691b004c86b718abbdb4e8', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" }), h("pds-box", { key: 'c7aaaba27a319714d8f33988a8d97bb52cab9af4', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (h("pds-text", { key: '804764fff68ec88bed3f1d18710e5ca5d0fd88f8', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (h("button", { key: '8f5a3776bb1f8e350c2ea1af8e808d70af44a89d', class: "pds-alert__dismiss", type: "button", "aria-label": "Dismiss alert", onClick: this.handleCloseClick }, h("pds-icon", { key: '144762696dc46d3392a6c4a287a4db9ef95cb5d4', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
     }
     static get is() { return "pds-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-alert/pds-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-alert.js","sourceRoot":"","sources":["../../../src/components/pds-alert/pds-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\n\n/**\n * @slot actions - Slot for alert actions.\n */\n\n@Component({\n  tag: 'pds-alert',\n  styleUrls: ['pds-alert.tokens.scss', 'pds-alert.scss'],\n  shadow: true,\n})\nexport class PdsAlert {\n\n  @Element() el: HTMLPdsAlertElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text displayed as the heading of the alert.\n   */\n  @Prop() heading: string;\n\n  /**\n   * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.\n   */\n  @Prop() small = false;\n\n  /**\n   * If true, shows the dismiss button. If false, the dismiss button is hidden.\n   * @defaultValue false\n   */\n  @Prop() dismissible = false;\n\n  /**\n   * Sets the style variant of the alert.\n   * @defaultValue 'default'\n   */\n  @Prop() variant: 'default' | 'danger' | 'info' | 'success' | 'warning' = 'default';\n\n  /**\n   * Event emitted when the dismiss button is clicked.\n   */\n  @Event() pdsAlertDismissClick: EventEmitter<void>;\n\n  @State() hasActionsContent = false;\n\n  private handleCloseClick = () => {\n    this.pdsAlertDismissClick.emit();\n  };\n\n  componentWillRender() {\n    // Check if the actions slot has any content.\n    // If not, hide the actions container to prevent empty space.\n    const actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n    this.hasActionsContent = !!actionsSlot;\n  }\n\n  private renderActions(isSmall: boolean) {\n    return (\n      <pds-box class={isSmall ? \"pds-alert__actions--small\" : \"pds-alert__actions\"} gap=\"sm\" flex={isSmall ? \"none\" : undefined} align-items={isSmall ? undefined : \"center\"}>\n        <slot name=\"actions\"></slot>\n      </pds-box>\n    );\n  }\n\n  private renderContent() {\n    if (this.small) {\n      return (\n        <pds-box display=\"flex\" gap=\"md\" align-items=\"center\">\n          <pds-text\n            truncate={this.small}\n            class=\"pds-alert__description--small\"\n            color=\"var(--pds-alert-color-text)\"\n            tag=\"p\"\n          >\n            <slot></slot>\n          </pds-text>\n          {this.hasActionsContent && this.renderActions(true)}\n        </pds-box>\n      );\n    }\n\n    return (\n      <div>\n        <pds-text class=\"pds-alert__description\" color=\"var(--pds-alert-color-text)\" tag=\"p\">\n          <slot></slot>\n        </pds-text>\n        {this.hasActionsContent && this.renderActions(false)}\n      </div>\n    );\n  }\n\n  render() {\n    const iconMap = {\n      danger: 'warning-filled',\n      default: 'info-circle-filled',\n      info: 'info-circle-filled',\n      success: 'check-circle-filled',\n      warning: 'info-circle-filled',\n    };\n\n    // Get the icon name based on the current variant\n    const iconName = iconMap[this.variant] || iconMap.default;\n\n    return (\n      <Host class=\"pds-alert\" id={this.componentId} variant={this.variant}>\n        <pds-box\n          class={`pds-alert__container pds-alert__container--${this.variant}`}\n          background-color=\"var(--pds-alert-background)\"\n          border-color=\"var(--pds-alert-border-color)\"\n          border-radius=\"md\"\n          border\n          display=\"block\"\n          padding=\"md\"\n        >\n          <pds-box gap=\"sm\" display=\"flex\">\n            <pds-icon\n              class={`pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`}\n              color=\"var(--pds-alert-color-icon)\"\n              icon={iconName}\n              size=\"var(--pds-alert-icon-size)\"\n            />\n            <pds-box class=\"pds-alert__content-wrapper\" direction=\"column\" gap=\"xs\" flex=\"grow\">\n              {this.heading && !this.small && (\n                <pds-text class=\"pds-alert__heading\" color=\"var(--pds-alert-color-text)\" size=\"h5\" tag=\"h3\" weight=\"medium\">\n                  {this.heading}\n                </pds-text>\n              )}\n\n              {this.renderContent()}\n            </pds-box>\n\n            {this.dismissible && (\n              <button class=\"pds-alert__dismiss\" type=\"button\" aria-label=\"Dismiss alert\" onClick={this.handleCloseClick}>\n                <pds-icon icon=\"remove\" size=\"var(--pds-alert-icon-size)\" aria-hidden=\"true\" color=\"var(--pds-alert-color-dismiss)\" />\n              </button>\n            )}\n          </pds-box>\n        </pds-box>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-alert.js","sourceRoot":"","sources":["../../../../src/components/pds-alert/pds-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\n\n/**\n * @slot actions - Slot for alert actions.\n */\n\n@Component({\n  tag: 'pds-alert',\n  styleUrls: ['pds-alert.tokens.scss', 'pds-alert.scss'],\n  shadow: true,\n})\nexport class PdsAlert {\n\n  @Element() el: HTMLPdsAlertElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Text displayed as the heading of the alert.\n   */\n  @Prop() heading: string;\n\n  /**\n   * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.\n   */\n  @Prop() small = false;\n\n  /**\n   * If true, shows the dismiss button. If false, the dismiss button is hidden.\n   * @defaultValue false\n   */\n  @Prop() dismissible = false;\n\n  /**\n   * Sets the style variant of the alert.\n   * @defaultValue 'default'\n   */\n  @Prop() variant: 'default' | 'danger' | 'info' | 'success' | 'warning' = 'default';\n\n  /**\n   * Event emitted when the dismiss button is clicked.\n   */\n  @Event() pdsAlertDismissClick: EventEmitter<void>;\n\n  @State() hasActionsContent = false;\n\n  private handleCloseClick = () => {\n    this.pdsAlertDismissClick.emit();\n  };\n\n  componentWillRender() {\n    // Check if the actions slot has any content.\n    // If not, hide the actions container to prevent empty space.\n    const actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n    this.hasActionsContent = !!actionsSlot;\n  }\n\n  private renderActions(isSmall: boolean) {\n    return (\n      <pds-box class={isSmall ? \"pds-alert__actions--small\" : \"pds-alert__actions\"} gap=\"sm\" flex={isSmall ? \"none\" : undefined} align-items={isSmall ? undefined : \"center\"}>\n        <slot name=\"actions\"></slot>\n      </pds-box>\n    );\n  }\n\n  private renderContent() {\n    if (this.small) {\n      return (\n        <pds-box display=\"flex\" gap=\"md\" align-items=\"center\">\n          <pds-text\n            truncate={this.small}\n            class=\"pds-alert__description--small\"\n            color=\"var(--pds-alert-color-text)\"\n            tag=\"p\"\n          >\n            <slot></slot>\n          </pds-text>\n          {this.hasActionsContent && this.renderActions(true)}\n        </pds-box>\n      );\n    }\n\n    return (\n      <div>\n        <pds-text class=\"pds-alert__description\" color=\"var(--pds-alert-color-text)\" tag=\"p\">\n          <slot></slot>\n        </pds-text>\n        {this.hasActionsContent && this.renderActions(false)}\n      </div>\n    );\n  }\n\n  render() {\n    const iconMap = {\n      danger: 'warning-filled',\n      default: 'info-circle-filled',\n      info: 'info-circle-filled',\n      success: 'check-circle-filled',\n      warning: 'info-circle-filled',\n    };\n\n    // Get the icon name based on the current variant\n    const iconName = iconMap[this.variant] || iconMap.default;\n\n    return (\n      <Host class=\"pds-alert\" id={this.componentId} variant={this.variant}>\n        <pds-box\n          class={`pds-alert__container pds-alert__container--${this.variant}`}\n          background-color=\"var(--pds-alert-background)\"\n          border-color=\"var(--pds-alert-border-color)\"\n          border-radius=\"md\"\n          border\n          display=\"block\"\n        >\n          <pds-box gap=\"sm\" display=\"flex\">\n            <pds-icon\n              class={`pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`}\n              color=\"var(--pds-alert-color-icon)\"\n              icon={iconName}\n              size=\"var(--pds-alert-icon-size)\"\n            />\n            <pds-box class=\"pds-alert__content-wrapper\" direction=\"column\" gap=\"xs\" flex=\"grow\">\n              {this.heading && !this.small && (\n                <pds-text class=\"pds-alert__heading\" color=\"var(--pds-alert-color-text)\" size=\"h5\" tag=\"h3\" weight=\"medium\">\n                  {this.heading}\n                </pds-text>\n              )}\n\n              {this.renderContent()}\n            </pds-box>\n\n            {this.dismissible && (\n              <button class=\"pds-alert__dismiss\" type=\"button\" aria-label=\"Dismiss alert\" onClick={this.handleCloseClick}>\n                <pds-icon icon=\"remove\" size=\"var(--pds-alert-icon-size)\" aria-hidden=\"true\" color=\"var(--pds-alert-color-dismiss)\" />\n              </button>\n            )}\n          </pds-box>\n        </pds-box>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-alert/stories/pds-alert.stories.js

@@ -1,16 +1,10 @@
 import { html } from 'lit';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
+
 
 export default {
-  argTypes: extractArgTypes('pds-alert'),
+
   component: 'pds-alert',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onclick', 'pdsAlertDismissClick'],
-    },
-  },
+  parameters: {},
   title: 'components/Alert',
 };
 

package/dist/collection/components/pds-avatar/pds-avatar.css

@@ -39,9 +39,9 @@ div {
 }
 
 .pds-avatar__badge {
-  background-color: var(--pine-color-background-container);
-  border: var(--pine-border);
-  border-color: var(--pine-color-secondary);
+  background-color: transparent;
+  border: var(--pine-dimension-none);
+  border-color: transparent;
   border-radius: var(--pine-border-radius-round);
   inset-block-end: var(--pine-dimension-none);
   inset-inline-end: var(--pine-dimension-none);

package/dist/collection/components/pds-avatar/pds-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-avatar.js","sourceRoot":"","sources":["../../../src/components/pds-avatar/pds-avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n  tag: 'pds-avatar',\n  styleUrls: ['pds-avatar.scss'],\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAssetWrapper = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n\n    return (\n      <div style={style} part=\"asset-wrapper\">\n        {this.renderIconOrImage()}\n        {this.renderBadge()}\n      </div>\n    )\n  };\n\n  private renderAvatar = () => {\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\" aria-label=\"Avatar dropdown trigger\">\n        {this.renderAssetWrapper()}\n        </button>\n        :\n        this.renderAssetWrapper()\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon color=\"var(--pine-color-purple-600)\" class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => (\n    this.image\n      ? <img alt={this.alt} src={this.image} />\n      // Percentage is average size of icon in relation to total avatar size\n      // of all preset sizes found in Figma.\n      // Used to allow icons to scale to container size\n      : <pds-icon color=\"var(--pine-color-mercury-500)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"pds-avatar.js","sourceRoot":"","sources":["../../../../src/components/pds-avatar/pds-avatar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { checkCircleFilled, userFilled } from '@pine-ds/icons/icons';\n\n/**\n * @part image - The main image element that represents the avatar component.\n*/\n@Component({\n  tag: 'pds-avatar',\n  styleUrls: ['pds-avatar.scss'],\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAssetWrapper = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n\n    return (\n      <div style={style} part=\"asset-wrapper\">\n        {this.renderIconOrImage()}\n        {this.renderBadge()}\n      </div>\n    )\n  };\n\n  private renderAvatar = () => {\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\" aria-label=\"Avatar dropdown trigger\">\n        {this.renderAssetWrapper()}\n        </button>\n        :\n        this.renderAssetWrapper()\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon color=\"var(--pine-color-purple-600)\" class=\"pds-avatar__badge\" icon={checkCircleFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => (\n    this.image\n      ? <img alt={this.alt} src={this.image} />\n      // Percentage is average size of icon in relation to total avatar size\n      // of all preset sizes found in Figma.\n      // Used to allow icons to scale to container size\n      : <pds-icon color=\"var(--pine-color-mercury-500)\" icon={userFilled} size=\"33.53%\"></pds-icon>\n  );\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-avatar/stories/pds-avatar.stories.js

@@ -1,7 +1,6 @@
 import { html } from 'lit';
 import imgFile from '../assets/demi_wilkinson.jpg';
 
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
 
 export default {
   args: {
@@ -13,7 +12,6 @@ export default {
     size: null,
     variant: 'customer',
   },
-  argTypes: extractArgTypes('pds-avatar'),
   component: 'pds-avatar',
   title: 'components/Avatar',
 }