@pine-ds/core 3.18.0 → 3.19.0

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

@@ -63,7 +63,7 @@ const PdsDropdownMenuItem = class {
     }
     renderElement() {
         if (this.href !== undefined) {
-            return (h("pds-link", { href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
+            return (h("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
                     'pds-dropdown-menu-item__content': true,
                     'has-focus': this.hasFocus
                 }, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
@@ -74,7 +74,7 @@ const PdsDropdownMenuItem = class {
             }, tabIndex: this.disabled ? -1 : 0, type: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
     }
     render() {
-        return (h(Host, { key: 'a1a195326721b531676e281f54167d60031af418', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (h(Host, { key: 'cfe752ae18b068c88a0f4eee3293c3b0128e0ab1', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
     }
     get host() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"pds-dropdown-menu-item.entry.js","sources":["src/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.scss?tag=pds-dropdown-menu-item&encapsulation=shadow","src/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.tsx"],"sourcesContent":[":host {\n  cursor: pointer;\n  display: flex;\n  width: 100%; /* Ensure the host takes full width */\n}\n\n/* Make the disabled styles more specific and add !important to ensure they apply */\n:host(.is-disabled) {\n  cursor: not-allowed !important;\n  opacity: 0.5 !important;\n\n  .pds-dropdown-menu-item__content {\n    cursor: not-allowed !important;\n    pointer-events: none !important;\n  }\n}\n\n.pds-dropdown-menu-item__content {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pine-dimension-xs);\n  color: var(--pine-color-text);\n  display: flex;\n  flex-grow: 1; /* Make it grow to fill available space */\n  font: var(--pine-typography-body-medium);\n  gap: var(--pine-dimension-xs);\n  margin: calc(var(--pine-border-width) + 2px);\n  padding: var(--pine-dimension-xs);\n  text-align: start; /* Ensure text aligns properly */\n  width: 100%; /* Ensure full width */\n\n  &:hover {\n    background-color: var(--pine-color-background-muted);\n    color: var(--pine-color-text-hover);\n  }\n\n  /* Focus styles applied via class + browser focus */\n  &:focus,\n  &:focus-visible,\n  &.has-focus {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n}\n\n:host(.destructive) {\n  .pds-dropdown-menu-item__content {\n    // Set context variables so pds-link's shadow DOM picks up the destructive colors\n    --pds-context-link-color: var(--pine-color-danger);\n    --pds-context-link-color-hover: var(--pine-color-danger-hover);\n\n    align-items: center;\n    color: var(--pine-color-danger);\n\n    &:hover {\n      background-color: var(--pine-color-danger-disabled);\n      color: var(--pine-color-danger-hover);\n    }\n\n    &:focus,\n    &:focus-visible,\n    &.has-focus {\n      background-color: var(--pine-color-danger-disabled);\n      outline: var(--pine-outline-focus-danger);\n      outline-offset: var(--pine-border-width);\n    }\n  }\n}\n\n/* Remove outline on contained links using the custom property */\npds-link::part(link):focus,\npds-link::part(link):focus-visible {\n  box-shadow: none;\n  outline: none;\n}\n\npds-link::part(link) {\n  align-items: center;\n  display: flex;\n  gap: var(--pine-dimension-xs);\n  margin: calc(var(--pine-dimension-xs) * -1);\n  padding: var(--pine-dimension-xs);\n  text-decoration: none;\n  width: calc(100% + var(--pine-dimension-xs) * 2);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\n\n@Component({\n  tag: 'pds-dropdown-menu-item',\n  styleUrl: 'pds-dropdown-menu-item.scss',\n  shadow: true,\n})\nexport class PdsDropdownMenuItem implements BasePdsProps {\n  @Element() host: HTMLPdsDropdownMenuItemElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * It determines whether or not the dropdown-item is destructive.\n   * @defaultValue false\n   */\n  @Prop() destructive: boolean = false;\n\n  /**\n   * It determines whether or not the dropdown-item is disabled.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n\n  /**\n   *  If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Determines whether the link should open in a new tab and display an external icon.\n   * This is a simpler alternative to using `target=\"_blank\"` for the common case.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) external: boolean = false;\n\n  /**\n   * Specifies where to open the linked document when href is provided.\n   * Takes precedence over the `external` prop if both are set.\n   * Only applies when href is set.\n   * @defaultValue undefined\n   */\n  @Prop({ reflect: true }) target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Emitted when the dropdown-item is clicked.\n   *\n   */\n  @Event() pdsClick: EventEmitter<{itemIndex: number, item: HTMLPdsDropdownMenuItemElement, content: string}>;\n\n  /**\n   * Trigger the click event\n   */\n  @Method()\n  async clickItem() {\n    this.handleClick();\n  };\n\n\n  private handleClick() {\n    // Filter only pds-dropdown-menu-item elements and find the index of the current item\n    const menuItems = Array.from(this.host.parentNode.children).filter(\n      (child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item'\n    );\n    const itemIndex = menuItems.indexOf(this.host);\n\n    // Get the text content from the slotted content\n    const content = this.host.textContent?.trim() || '';\n\n    this.pdsClick.emit({\n      itemIndex,\n      item: this.host,\n      content\n    });\n  }\n\n  @State() hasFocus: boolean = false;\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n  }\n\n  private renderElement() {\n    if (this.href !== undefined) {\n      return (\n        <pds-link\n          href={this.disabled ? null : this.href}\n          external={this.external}\n          target={this.target}\n          class={{\n            'pds-dropdown-menu-item__content': true,\n            'has-focus': this.hasFocus\n          }}\n          tabIndex={this.disabled ? -1 : 0}\n          onKeyDown={this.handleKeyDown}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          <slot></slot>\n        </pds-link>\n      );\n    }\n\n    return (\n      <button\n        class={{\n          'pds-dropdown-menu-item__content': true,\n          'has-focus': this.hasFocus\n        }}\n        tabIndex={this.disabled ? -1 : 0}\n        type=\"button\"\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        disabled={this.disabled}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Handle keyboard events\n    if (!this.disabled && (event.key === 'Enter')) {\n      // Only prevent default for button elements or Space key\n      // For links with Enter key, we want the default navigation behavior\n      if (!this.href) {\n        event.preventDefault();\n      }\n      this.handleClick();\n    }\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}\n        class={{ 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }}\n        onClick={() => !this.disabled && this.handleClick()}\n        role=\"none\"\n        tabIndex={-1}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n          {this.renderElement()}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pds-dropdown-menu-item.entry.js","sources":["src/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.scss?tag=pds-dropdown-menu-item&encapsulation=shadow","src/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.tsx"],"sourcesContent":[":host {\n  cursor: pointer;\n  display: flex;\n  width: 100%; /* Ensure the host takes full width */\n}\n\n/* Make the disabled styles more specific and add !important to ensure they apply */\n:host(.is-disabled) {\n  cursor: not-allowed !important;\n  opacity: 0.5 !important;\n\n  .pds-dropdown-menu-item__content {\n    cursor: not-allowed !important;\n    pointer-events: none !important;\n  }\n}\n\n.pds-dropdown-menu-item__content {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pine-dimension-xs);\n  color: var(--pine-color-text);\n  display: flex;\n  flex-grow: 1; /* Make it grow to fill available space */\n  font: var(--pine-typography-body-medium);\n  gap: var(--pine-dimension-xs);\n  margin: calc(var(--pine-border-width) + 2px);\n  padding: var(--pine-dimension-xs);\n  text-align: start; /* Ensure text aligns properly */\n  width: 100%; /* Ensure full width */\n\n  &:hover {\n    background-color: var(--pine-color-background-muted);\n    color: var(--pine-color-text-hover);\n  }\n\n  /* Focus styles applied via class + browser focus */\n  &:focus,\n  &:focus-visible,\n  &.has-focus {\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width);\n  }\n}\n\n:host(.destructive) {\n  .pds-dropdown-menu-item__content {\n    // Set context variables so pds-link's shadow DOM picks up the destructive colors\n    --pds-context-link-color: var(--pine-color-danger);\n    --pds-context-link-color-hover: var(--pine-color-danger-hover);\n\n    align-items: center;\n    color: var(--pine-color-danger);\n\n    &:hover {\n      background-color: var(--pine-color-danger-disabled);\n      color: var(--pine-color-danger-hover);\n    }\n\n    &:focus,\n    &:focus-visible,\n    &.has-focus {\n      background-color: var(--pine-color-danger-disabled);\n      outline: var(--pine-outline-focus-danger);\n      outline-offset: var(--pine-border-width);\n    }\n  }\n}\n\n/* Remove outline on contained links using the custom property */\npds-link::part(link):focus,\npds-link::part(link):focus-visible {\n  box-shadow: none;\n  outline: none;\n}\n\npds-link::part(link) {\n  align-items: center;\n  display: flex;\n  gap: var(--pine-dimension-xs);\n  margin: calc(var(--pine-dimension-xs) * -1);\n  padding: var(--pine-dimension-xs);\n  text-decoration: none;\n  width: calc(100% + var(--pine-dimension-xs) * 2);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\n\n@Component({\n  tag: 'pds-dropdown-menu-item',\n  styleUrl: 'pds-dropdown-menu-item.scss',\n  shadow: true,\n})\nexport class PdsDropdownMenuItem implements BasePdsProps {\n  @Element() host: HTMLPdsDropdownMenuItemElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * It determines whether or not the dropdown-item is destructive.\n   * @defaultValue false\n   */\n  @Prop() destructive: boolean = false;\n\n  /**\n   * It determines whether or not the dropdown-item is disabled.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it.\n   * It can be used without a value to download with the default filename,\n   * or with a string value to suggest a specific filename for the download.\n   * Only applies when href is set.\n   */\n  @Prop() download?: string;\n\n  /**\n   *  If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.\n   */\n  @Prop() href: string | undefined;\n\n  /**\n   * Determines whether the link should open in a new tab and display an external icon.\n   * This is a simpler alternative to using `target=\"_blank\"` for the common case.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) external: boolean = false;\n\n  /**\n   * Specifies where to open the linked document when href is provided.\n   * Takes precedence over the `external` prop if both are set.\n   * Only applies when href is set.\n   * @defaultValue undefined\n   */\n  @Prop({ reflect: true }) target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Emitted when the dropdown-item is clicked.\n   *\n   */\n  @Event() pdsClick: EventEmitter<{itemIndex: number, item: HTMLPdsDropdownMenuItemElement, content: string}>;\n\n  /**\n   * Trigger the click event\n   */\n  @Method()\n  async clickItem() {\n    this.handleClick();\n  };\n\n\n  private handleClick() {\n    // Filter only pds-dropdown-menu-item elements and find the index of the current item\n    const menuItems = Array.from(this.host.parentNode.children).filter(\n      (child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item'\n    );\n    const itemIndex = menuItems.indexOf(this.host);\n\n    // Get the text content from the slotted content\n    const content = this.host.textContent?.trim() || '';\n\n    this.pdsClick.emit({\n      itemIndex,\n      item: this.host,\n      content\n    });\n  }\n\n  @State() hasFocus: boolean = false;\n\n  private handleFocus = () => {\n    this.hasFocus = true;\n  }\n\n  private handleBlur = () => {\n    this.hasFocus = false;\n  }\n\n  private renderElement() {\n    if (this.href !== undefined) {\n      return (\n        <pds-link\n          download={this.download}\n          href={this.disabled ? null : this.href}\n          external={this.external}\n          target={this.target}\n          class={{\n            'pds-dropdown-menu-item__content': true,\n            'has-focus': this.hasFocus\n          }}\n          tabIndex={this.disabled ? -1 : 0}\n          onKeyDown={this.handleKeyDown}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          <slot></slot>\n        </pds-link>\n      );\n    }\n\n    return (\n      <button\n        class={{\n          'pds-dropdown-menu-item__content': true,\n          'has-focus': this.hasFocus\n        }}\n        tabIndex={this.disabled ? -1 : 0}\n        type=\"button\"\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        disabled={this.disabled}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        <slot></slot>\n      </button>\n    );\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Handle keyboard events\n    if (!this.disabled && (event.key === 'Enter')) {\n      // Only prevent default for button elements or Space key\n      // For links with Enter key, we want the default navigation behavior\n      if (!this.href) {\n        event.preventDefault();\n      }\n      this.handleClick();\n    }\n  }\n\n  render() {\n    return (\n      <Host id={this.componentId}\n        class={{ 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }}\n        onClick={() => !this.disabled && this.handleClick()}\n        role=\"none\"\n        tabIndex={-1}\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n          {this.renderElement()}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, a as getElement } from './index-DHPhrb5T.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom-BO6p966C.js';
 
-const pdsDropdownMenuCss = ":host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-container);border-radius:var(--pine-dimension-xs);left:var(--pine-dimension-none);min-width:170px;padding:var(--pine-dimension-xs);position:fixed;z-index:var(--pine-z-index-overlay)}:host-context([data-theme=dark]) .pds-dropdown-menu--panel{border:var(--pine-border)}::slotted(a),::slotted(button){-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs) !important;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text) !important;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium) !important;gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px) !important;padding:var(--pine-dimension-xs) !important;text-align:start;text-decoration:none !important;width:calc(100% - (var(--pine-border-width) + 2px) * 2)}::slotted(.destructive){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]),::slotted([disabled]){cursor:not-allowed;opacity:0.5;pointer-events:none}";
+const pdsDropdownMenuCss = ":host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-container);border-radius:var(--pine-dimension-xs);left:var(--pine-dimension-none);min-width:170px;padding:var(--pine-dimension-xs);position:fixed;z-index:var(--pine-z-index-overlay)}:host-context([data-theme=dark]) .pds-dropdown-menu--panel{border:var(--pine-border)}::slotted(a),::slotted(button){-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs) !important;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text) !important;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium) !important;gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px) !important;padding:var(--pine-dimension-xs) !important;text-align:start;text-decoration:none !important;width:calc(100% - (var(--pine-border-width) + 2px) * 2)}::slotted(.destructive){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]),::slotted([disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.5;pointer-events:none}";
 
 const PdsDropdownMenu = class {
     constructor(hostRef) {

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

@@ -1 +1 @@
-{"version":3,"file":"pds-dropdown-menu.entry.js","sources":["src/components/pds-dropdown-menu/pds-dropdown-menu.scss?tag=pds-dropdown-menu&encapsulation=shadow","src/components/pds-dropdown-menu/pds-dropdown-menu.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.is-hidden {\n  display: none;\n}\n\n.pds-dropdown-menu--panel {\n  background-color: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-xs);\n  left: var(--pine-dimension-none);\n  min-width: 170px;\n  padding: var(--pine-dimension-xs);\n  position: fixed;\n  z-index: var(--pine-z-index-overlay);\n\n  :host-context([data-theme=\"dark\"]) & {\n    border: var(--pine-border);\n  }\n}\n\n// Styles for raw <a> and <button> elements slotted into the menu\n// These are allowed for edge cases requiring native browser/framework behavior\n// (e.g., Rails UJS, Turbo) that cannot work through Shadow DOM.\n//\n// Note: ::slotted() cannot be combined with pseudo-classes like :hover or :focus.\n// Raw elements will receive base styling here; hover/focus states must be handled\n// by the consuming application's CSS if needed.\n::slotted(a),\n::slotted(button) {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pine-dimension-xs) !important;\n  box-sizing: border-box;\n  color: var(--pine-color-text) !important;\n  cursor: pointer;\n  display: flex;\n  flex-grow: 1;\n  font: var(--pine-typography-body-medium) !important;\n  gap: var(--pine-dimension-xs);\n  margin: calc(var(--pine-border-width) + 2px) !important;\n  padding: var(--pine-dimension-xs) !important;\n  text-align: start;\n  text-decoration: none !important;\n  width: calc(100% - calc(var(--pine-border-width) + 2px) * 2);\n}\n\n// Destructive variant for raw elements\n::slotted(.destructive) {\n  color: var(--pine-color-danger) !important;\n}\n\n// Disabled state for raw elements (using attribute selectors, not pseudo-classes)\n::slotted([aria-disabled=\"true\"]),\n::slotted([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.5;\n  pointer-events: none;\n}\n","import { Component, Element, Host, h, Prop, Listen, State } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\nimport { PlacementType } from '@utils/types';\nimport {  computePosition,\n  flip,\n  offset,\n  shift,\n  autoUpdate,\n} from '@floating-ui/dom';\n\n/**\n * Union type for focusable menu items (component or raw elements)\n */\ntype MenuItemElement = HTMLPdsDropdownMenuItemElement | HTMLAnchorElement | HTMLButtonElement;\n\n/**\n * @part menu-panel - Exposes the dropdown menu container for styling.\n */\n@Component({\n  tag: 'pds-dropdown-menu',\n  styleUrl: 'pds-dropdown-menu.scss',\n  shadow: true,\n})\nexport class PdsDropdownMenu implements BasePdsProps {\n  private slotEl: HTMLSlotElement;\n  private triggerEl: HTMLElement;\n  private panelEl: HTMLPdsBoxElement;\n  private isOpen: boolean = false;\n  private menuItems: MenuItemElement[] = [];\n  private cleanupAutoUpdate: (() => void) | null = null;\n\n  @Element() host: HTMLPdsDropdownMenuElement;\n\n  @State() currentFocusIndex: number = -1;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The placement of the dropdown panel relative to the trigger.\n   */\n  @Prop() placement: PlacementType = 'bottom-start';\n\n  componentDidRender() {\n    this.panelEl = this.host.shadowRoot?.querySelector('pds-box') as HTMLPdsBoxElement;\n  }\n\n  disconnectedCallback() {\n    // Clean up auto-update when component is removed from DOM\n    if (this.cleanupAutoUpdate) {\n      this.cleanupAutoUpdate();\n      this.cleanupAutoUpdate = null;\n    }\n  }\n\n  private handleTriggerSlotChange = (event: Event) => {\n    this.slotEl = event.target as HTMLSlotElement;\n\n    // Get all elements assigned to this slot\n    const assignedElements = this.slotEl.assignedElements();\n\n    this.triggerEl = assignedElements[0] as HTMLElement;\n    this.triggerEl.onclick = this.handleClick;\n\n    // Add accessibility attributes to trigger\n    this.triggerEl.setAttribute('aria-haspopup', 'menu');\n    this.triggerEl.setAttribute('aria-expanded', 'false');\n  }\n\n  private handleSlotChange = (event: Event) => {\n    this.slotEl = event.target as HTMLSlotElement;\n\n    // Get all elements assigned to this slot\n    const assignedElements = this.slotEl.assignedElements();\n\n    // Allowed elements: pds-dropdown-menu-item, pds-dropdown-menu-separator, <a>, <button>\n    // Raw <a> and <button> elements are allowed for edge cases requiring native browser/framework\n    // behavior (e.g., Rails UJS, Turbo) that cannot work through Shadow DOM.\n    const allowedTags = ['pds-dropdown-menu-item', 'pds-dropdown-menu-separator', 'a', 'button'];\n    const invalidElements = assignedElements.filter(\n      el => !allowedTags.includes(el.tagName.toLowerCase())\n    );\n\n    if (invalidElements.length > 0) {\n      const invalidTags = invalidElements.map(el => el.tagName.toLowerCase()).join(', ');\n      console.warn(\n        `pds-dropdown-menu: Unexpected element(s) found: ${invalidTags}. ` +\n        `Expected: ${allowedTags.join(', ')}`\n      );\n    }\n\n    // Store all focusable items for keyboard navigation\n    // This includes pds-dropdown-menu-item components and raw <a>/<button> elements\n    this.menuItems = assignedElements.filter(el => {\n      const tag = el.tagName.toLowerCase();\n      return tag === 'pds-dropdown-menu-item' || tag === 'a' || tag === 'button';\n    }) as MenuItemElement[];\n  }\n\n  // Toggle dropdown open/closed\n  private toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n\n    if (this.isOpen) {\n      this.openDropdown();\n    } else {\n      this.closeDropdown();\n    }\n  }\n\n  // Open the dropdown and position it\n  private openDropdown = () => {\n    const updatePosition = () => {\n      computePosition(this.triggerEl, this.panelEl as HTMLElement, {\n        placement: this.placement,\n        strategy: 'fixed',\n        middleware: [offset(6), flip(), shift({padding: 5})],\n      }).then(({ x, y }) => {\n        Object.assign(this.panelEl.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n      });\n    };\n\n    // Initial position\n    updatePosition();\n\n    // Set up auto-update for window resize and scroll\n    this.cleanupAutoUpdate = autoUpdate(\n      this.triggerEl,\n      this.panelEl as HTMLElement,\n      updatePosition\n    );\n\n    this.host.shadowRoot?.querySelector('pds-box').classList.remove('is-hidden');\n    this.isOpen = true;\n\n    // Update ARIA attributes\n    this.triggerEl.setAttribute('aria-expanded', 'true');\n  }\n\n  // Close the dropdown\n  private closeDropdown = () => {\n    this.host.shadowRoot?.querySelector('pds-box').classList.add('is-hidden');\n    this.isOpen = false;\n\n    // Clean up auto-update\n    if (this.cleanupAutoUpdate) {\n      this.cleanupAutoUpdate();\n      this.cleanupAutoUpdate = null;\n    }\n\n    // Update ARIA attributes\n    this.triggerEl.setAttribute('aria-expanded', 'false');\n\n    // Reset focus index\n    this.currentFocusIndex = -1;\n\n    // Return focus to trigger\n    this.triggerEl.focus();\n  }\n\n  // Handle click on the trigger element\n  private handleClick = () => {\n    this.toggleDropdown();\n  }\n\n  // Check if a menu item is disabled (handles both component and raw elements)\n  private isItemDisabled(item: MenuItemElement): boolean {\n    const tagName = item.tagName.toLowerCase();\n\n    if (tagName === 'pds-dropdown-menu-item') {\n      return (item as HTMLPdsDropdownMenuItemElement).disabled;\n    } else if (tagName === 'button') {\n      return (item as HTMLButtonElement).disabled;\n    } else if (tagName === 'a') {\n      return item.getAttribute('aria-disabled') === 'true';\n    }\n    return false;\n  }\n\n  // Get the index of the currently focused menu item\n  private getFocusedItemIndex(): number {\n    const activeElement = document.activeElement as MenuItemElement | null;\n    if (!activeElement) return -1;\n\n    // For raw elements, check direct match\n    // For pds-dropdown-menu-item, also check if the active element is inside the shadow root\n    return this.menuItems.findIndex(item => {\n      if (item === activeElement) return true;\n\n      // Check if activeElement is inside the item's shadow root (for pds-dropdown-menu-item)\n      if (item.tagName.toLowerCase() === 'pds-dropdown-menu-item') {\n        const shadowRoot = (item as HTMLPdsDropdownMenuItemElement).shadowRoot;\n        if (shadowRoot?.contains(activeElement)) return true;\n      }\n\n      return false;\n    });\n  }\n\n  // Focus a specific menu item by index\n  private focusItemByIndex(index: number): void {\n    if (index >= 0 && index < this.menuItems.length) {\n      this.currentFocusIndex = index;\n      const item = this.menuItems[index];\n      const tagName = item.tagName.toLowerCase();\n\n      if (tagName === 'pds-dropdown-menu-item') {\n        // For pds-dropdown-menu-item, focus the inner element\n        const menuItem = item as HTMLPdsDropdownMenuItemElement;\n        const innerButton = menuItem.shadowRoot?.querySelector('button');\n        const innerLink = menuItem.shadowRoot?.querySelector('pds-link')?.shadowRoot?.querySelector('a')\n          || menuItem.shadowRoot?.querySelector('a');\n\n        if (innerButton) {\n          innerButton.focus();\n        } else if (innerLink) {\n          innerLink.focus();\n        } else {\n          // Fallback to focusing the host\n          menuItem.focus();\n        }\n      } else {\n        // For raw <a> or <button> elements, focus directly\n        (item as HTMLElement).focus();\n      }\n    }\n  }\n\n  // Focus the next menu item\n  private focusNextItem(): void {\n    let nextIndex = (this.currentFocusIndex + 1) % this.menuItems.length;\n\n    // Skip disabled items\n    let attempts = 0;\n    const maxAttempts = this.menuItems.length;\n\n    while (attempts < maxAttempts && this.isItemDisabled(this.menuItems[nextIndex])) {\n      nextIndex = (nextIndex + 1) % this.menuItems.length;\n      attempts++;\n    }\n\n    // Only focus if we found a non-disabled item\n    if (attempts < maxAttempts) {\n      this.focusItemByIndex(nextIndex);\n    }\n  }\n\n  // Focus the previous menu item\n  private focusPreviousItem(): void {\n    let prevIndex = this.currentFocusIndex <= 0\n      ? this.menuItems.length - 1\n      : this.currentFocusIndex - 1;\n\n    // Skip disabled items\n    let attempts = 0;\n    const maxAttempts = this.menuItems.length;\n\n    while (attempts < maxAttempts && this.isItemDisabled(this.menuItems[prevIndex])) {\n      prevIndex = prevIndex <= 0 ? this.menuItems.length - 1 : prevIndex - 1;\n      attempts++;\n    }\n\n    // Only focus if we found a non-disabled item\n    if (attempts < maxAttempts) {\n      this.focusItemByIndex(prevIndex);\n    }\n  }\n\n  // Handle keyboard events for the dropdown\n  @Listen('keydown', { target: 'window' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.isOpen) return;\n\n    switch (event.key) {\n      case 'Escape':\n        event.preventDefault();\n        this.closeDropdown();\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        this.focusNextItem();\n        break;\n\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusPreviousItem();\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        if (this.menuItems.length > 0) {\n          // Find first non-disabled item\n          let firstIndex = 0;\n          while (firstIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstIndex])) {\n            firstIndex++;\n          }\n          if (firstIndex < this.menuItems.length) {\n            this.focusItemByIndex(firstIndex);\n          }\n        }\n        break;\n\n      case 'End':\n        event.preventDefault();\n        if (this.menuItems.length > 0) {\n          // Find last non-disabled item\n          let lastIndex = this.menuItems.length - 1;\n          while (lastIndex >= 0 && this.isItemDisabled(this.menuItems[lastIndex])) {\n            lastIndex--;\n          }\n          if (lastIndex >= 0) {\n            this.focusItemByIndex(lastIndex);\n          }\n        }\n        break;\n\n      case 'Tab':\n        if (event.shiftKey) {\n          // Let Shift+Tab navigate naturally from first item to trigger\n          // For all other items, move to previous item\n          const currentIndex = this.getFocusedItemIndex();\n\n          if (currentIndex > 0) {\n            // If not on first item, prevent default and go to previous item\n            event.preventDefault();\n            this.focusPreviousItem(); // Use our method that skips disabled items\n          }\n          // If on first item or no item, let natural tab order move back to trigger\n        } else {\n          // Forward Tab navigation\n          const activeElement = document.activeElement;\n          const isTriggerFocused = activeElement === this.triggerEl;\n          const currentIndex = this.getFocusedItemIndex();\n\n          if (isTriggerFocused && this.menuItems.length > 0) {\n            // If trigger is focused, move to first non-disabled menu item\n            event.preventDefault();\n\n            // Find the first non-disabled item\n            let firstFocusableIndex = 0;\n            while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {\n              firstFocusableIndex++;\n            }\n\n            if (firstFocusableIndex < this.menuItems.length) {\n              this.focusItemByIndex(firstFocusableIndex);\n            }\n          } else if (currentIndex === -1 && this.menuItems.length > 0) {\n            // If no menu item is focused, focus the first non-disabled one\n            event.preventDefault();\n\n            // Find the first non-disabled item\n            let firstFocusableIndex = 0;\n            while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {\n              firstFocusableIndex++;\n            }\n\n            if (firstFocusableIndex < this.menuItems.length) {\n              this.focusItemByIndex(firstFocusableIndex);\n            }\n          } else if (currentIndex !== -1) {\n            // Use our method that skips disabled items\n            event.preventDefault();\n            this.focusNextItem();\n          }\n        }\n        break;\n    }\n  }\n\n  // Handle clicks outside the dropdown to close it\n  @Listen('click', { target: 'window' })\n  handleWindowClick(event: MouseEvent) {\n    if (this.isOpen && !this.host.contains(event.target as Node) && event.target !== this.triggerEl) {\n      this.closeDropdown();\n    }\n  }\n\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <slot\n          name=\"trigger\"\n          onSlotchange={this.handleTriggerSlotChange}\n        ></slot>\n        <pds-box\n          border-radius=\"sm\"\n          display=\"flex\"\n          direction=\"column\"\n          class=\"pds-dropdown-menu--panel is-hidden\"\n          shadow=\"100\"\n          role=\"menu\"\n          aria-orientation=\"vertical\"\n          part=\"menu-panel\"\n        >\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </pds-box>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pds-dropdown-menu.entry.js","sources":["src/components/pds-dropdown-menu/pds-dropdown-menu.scss?tag=pds-dropdown-menu&encapsulation=shadow","src/components/pds-dropdown-menu/pds-dropdown-menu.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.is-hidden {\n  display: none;\n}\n\n.pds-dropdown-menu--panel {\n  background-color: var(--pine-color-background-container);\n  border-radius: var(--pine-dimension-xs);\n  left: var(--pine-dimension-none);\n  min-width: 170px;\n  padding: var(--pine-dimension-xs);\n  position: fixed;\n  z-index: var(--pine-z-index-overlay);\n\n  :host-context([data-theme=\"dark\"]) & {\n    border: var(--pine-border);\n  }\n}\n\n// Styles for raw <a> and <button> elements slotted into the menu\n// These are allowed for edge cases requiring native browser/framework behavior\n// (e.g., Rails UJS, Turbo) that cannot work through Shadow DOM.\n//\n// Note: ::slotted() cannot be combined with pseudo-classes like :hover or :focus.\n// Raw elements will receive base styling here; hover/focus states must be handled\n// by the consuming application's CSS if needed.\n::slotted(a),\n::slotted(button) {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--pine-dimension-xs) !important;\n  box-sizing: border-box;\n  color: var(--pine-color-text) !important;\n  cursor: pointer;\n  display: flex;\n  flex-grow: 1;\n  font: var(--pine-typography-body-medium) !important;\n  gap: var(--pine-dimension-xs);\n  margin: calc(var(--pine-border-width) + 2px) !important;\n  padding: var(--pine-dimension-xs) !important;\n  text-align: start;\n  text-decoration: none !important;\n  width: calc(100% - calc(var(--pine-border-width) + 2px) * 2);\n}\n\n// Destructive variant for raw elements\n::slotted(.destructive) {\n  color: var(--pine-color-danger) !important;\n}\n\n// Disabled state for raw elements (using attribute selectors, not pseudo-classes)\n// ::slotted([disabled]) is an attribute-presence selector — it matches even when\n// disabled=\"false\" is set as a string (e.g. by React on custom elements). The\n// :not([disabled=\"false\"]) guard ensures only a truly-disabled attribute applies.\n::slotted([aria-disabled=\"true\"]),\n::slotted([disabled]:not([disabled=\"false\"])) {\n  cursor: not-allowed;\n  opacity: 0.5;\n  pointer-events: none;\n}\n","import { Component, Element, Host, h, Prop, Listen, State } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\nimport { PlacementType } from '@utils/types';\nimport {  computePosition,\n  flip,\n  offset,\n  shift,\n  autoUpdate,\n} from '@floating-ui/dom';\n\n/**\n * Union type for focusable menu items (component or raw elements)\n */\ntype MenuItemElement = HTMLPdsDropdownMenuItemElement | HTMLAnchorElement | HTMLButtonElement;\n\n/**\n * @part menu-panel - Exposes the dropdown menu container for styling.\n */\n@Component({\n  tag: 'pds-dropdown-menu',\n  styleUrl: 'pds-dropdown-menu.scss',\n  shadow: true,\n})\nexport class PdsDropdownMenu implements BasePdsProps {\n  private slotEl: HTMLSlotElement;\n  private triggerEl: HTMLElement;\n  private panelEl: HTMLPdsBoxElement;\n  private isOpen: boolean = false;\n  private menuItems: MenuItemElement[] = [];\n  private cleanupAutoUpdate: (() => void) | null = null;\n\n  @Element() host: HTMLPdsDropdownMenuElement;\n\n  @State() currentFocusIndex: number = -1;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * The placement of the dropdown panel relative to the trigger.\n   */\n  @Prop() placement: PlacementType = 'bottom-start';\n\n  componentDidRender() {\n    this.panelEl = this.host.shadowRoot?.querySelector('pds-box') as HTMLPdsBoxElement;\n  }\n\n  disconnectedCallback() {\n    // Clean up auto-update when component is removed from DOM\n    if (this.cleanupAutoUpdate) {\n      this.cleanupAutoUpdate();\n      this.cleanupAutoUpdate = null;\n    }\n  }\n\n  private handleTriggerSlotChange = (event: Event) => {\n    this.slotEl = event.target as HTMLSlotElement;\n\n    // Get all elements assigned to this slot\n    const assignedElements = this.slotEl.assignedElements();\n\n    this.triggerEl = assignedElements[0] as HTMLElement;\n    this.triggerEl.onclick = this.handleClick;\n\n    // Add accessibility attributes to trigger\n    this.triggerEl.setAttribute('aria-haspopup', 'menu');\n    this.triggerEl.setAttribute('aria-expanded', 'false');\n  }\n\n  private handleSlotChange = (event: Event) => {\n    this.slotEl = event.target as HTMLSlotElement;\n\n    // Get all elements assigned to this slot\n    const assignedElements = this.slotEl.assignedElements();\n\n    // Allowed elements: pds-dropdown-menu-item, pds-dropdown-menu-separator, <a>, <button>\n    // Raw <a> and <button> elements are allowed for edge cases requiring native browser/framework\n    // behavior (e.g., Rails UJS, Turbo) that cannot work through Shadow DOM.\n    const allowedTags = ['pds-dropdown-menu-item', 'pds-dropdown-menu-separator', 'a', 'button'];\n    const invalidElements = assignedElements.filter(\n      el => !allowedTags.includes(el.tagName.toLowerCase())\n    );\n\n    if (invalidElements.length > 0) {\n      const invalidTags = invalidElements.map(el => el.tagName.toLowerCase()).join(', ');\n      console.warn(\n        `pds-dropdown-menu: Unexpected element(s) found: ${invalidTags}. ` +\n        `Expected: ${allowedTags.join(', ')}`\n      );\n    }\n\n    // Store all focusable items for keyboard navigation\n    // This includes pds-dropdown-menu-item components and raw <a>/<button> elements\n    this.menuItems = assignedElements.filter(el => {\n      const tag = el.tagName.toLowerCase();\n      return tag === 'pds-dropdown-menu-item' || tag === 'a' || tag === 'button';\n    }) as MenuItemElement[];\n  }\n\n  // Toggle dropdown open/closed\n  private toggleDropdown = () => {\n    this.isOpen = !this.isOpen;\n\n    if (this.isOpen) {\n      this.openDropdown();\n    } else {\n      this.closeDropdown();\n    }\n  }\n\n  // Open the dropdown and position it\n  private openDropdown = () => {\n    const updatePosition = () => {\n      computePosition(this.triggerEl, this.panelEl as HTMLElement, {\n        placement: this.placement,\n        strategy: 'fixed',\n        middleware: [offset(6), flip(), shift({padding: 5})],\n      }).then(({ x, y }) => {\n        Object.assign(this.panelEl.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n      });\n    };\n\n    // Initial position\n    updatePosition();\n\n    // Set up auto-update for window resize and scroll\n    this.cleanupAutoUpdate = autoUpdate(\n      this.triggerEl,\n      this.panelEl as HTMLElement,\n      updatePosition\n    );\n\n    this.host.shadowRoot?.querySelector('pds-box').classList.remove('is-hidden');\n    this.isOpen = true;\n\n    // Update ARIA attributes\n    this.triggerEl.setAttribute('aria-expanded', 'true');\n  }\n\n  // Close the dropdown\n  private closeDropdown = () => {\n    this.host.shadowRoot?.querySelector('pds-box').classList.add('is-hidden');\n    this.isOpen = false;\n\n    // Clean up auto-update\n    if (this.cleanupAutoUpdate) {\n      this.cleanupAutoUpdate();\n      this.cleanupAutoUpdate = null;\n    }\n\n    // Update ARIA attributes\n    this.triggerEl.setAttribute('aria-expanded', 'false');\n\n    // Reset focus index\n    this.currentFocusIndex = -1;\n\n    // Return focus to trigger\n    this.triggerEl.focus();\n  }\n\n  // Handle click on the trigger element\n  private handleClick = () => {\n    this.toggleDropdown();\n  }\n\n  // Check if a menu item is disabled (handles both component and raw elements)\n  private isItemDisabled(item: MenuItemElement): boolean {\n    const tagName = item.tagName.toLowerCase();\n\n    if (tagName === 'pds-dropdown-menu-item') {\n      return (item as HTMLPdsDropdownMenuItemElement).disabled;\n    } else if (tagName === 'button') {\n      return (item as HTMLButtonElement).disabled;\n    } else if (tagName === 'a') {\n      return item.getAttribute('aria-disabled') === 'true';\n    }\n    return false;\n  }\n\n  // Get the index of the currently focused menu item\n  private getFocusedItemIndex(): number {\n    const activeElement = document.activeElement as MenuItemElement | null;\n    if (!activeElement) return -1;\n\n    // For raw elements, check direct match\n    // For pds-dropdown-menu-item, also check if the active element is inside the shadow root\n    return this.menuItems.findIndex(item => {\n      if (item === activeElement) return true;\n\n      // Check if activeElement is inside the item's shadow root (for pds-dropdown-menu-item)\n      if (item.tagName.toLowerCase() === 'pds-dropdown-menu-item') {\n        const shadowRoot = (item as HTMLPdsDropdownMenuItemElement).shadowRoot;\n        if (shadowRoot?.contains(activeElement)) return true;\n      }\n\n      return false;\n    });\n  }\n\n  // Focus a specific menu item by index\n  private focusItemByIndex(index: number): void {\n    if (index >= 0 && index < this.menuItems.length) {\n      this.currentFocusIndex = index;\n      const item = this.menuItems[index];\n      const tagName = item.tagName.toLowerCase();\n\n      if (tagName === 'pds-dropdown-menu-item') {\n        // For pds-dropdown-menu-item, focus the inner element\n        const menuItem = item as HTMLPdsDropdownMenuItemElement;\n        const innerButton = menuItem.shadowRoot?.querySelector('button');\n        const innerLink = menuItem.shadowRoot?.querySelector('pds-link')?.shadowRoot?.querySelector('a')\n          || menuItem.shadowRoot?.querySelector('a');\n\n        if (innerButton) {\n          innerButton.focus();\n        } else if (innerLink) {\n          innerLink.focus();\n        } else {\n          // Fallback to focusing the host\n          menuItem.focus();\n        }\n      } else {\n        // For raw <a> or <button> elements, focus directly\n        (item as HTMLElement).focus();\n      }\n    }\n  }\n\n  // Focus the next menu item\n  private focusNextItem(): void {\n    let nextIndex = (this.currentFocusIndex + 1) % this.menuItems.length;\n\n    // Skip disabled items\n    let attempts = 0;\n    const maxAttempts = this.menuItems.length;\n\n    while (attempts < maxAttempts && this.isItemDisabled(this.menuItems[nextIndex])) {\n      nextIndex = (nextIndex + 1) % this.menuItems.length;\n      attempts++;\n    }\n\n    // Only focus if we found a non-disabled item\n    if (attempts < maxAttempts) {\n      this.focusItemByIndex(nextIndex);\n    }\n  }\n\n  // Focus the previous menu item\n  private focusPreviousItem(): void {\n    let prevIndex = this.currentFocusIndex <= 0\n      ? this.menuItems.length - 1\n      : this.currentFocusIndex - 1;\n\n    // Skip disabled items\n    let attempts = 0;\n    const maxAttempts = this.menuItems.length;\n\n    while (attempts < maxAttempts && this.isItemDisabled(this.menuItems[prevIndex])) {\n      prevIndex = prevIndex <= 0 ? this.menuItems.length - 1 : prevIndex - 1;\n      attempts++;\n    }\n\n    // Only focus if we found a non-disabled item\n    if (attempts < maxAttempts) {\n      this.focusItemByIndex(prevIndex);\n    }\n  }\n\n  // Handle keyboard events for the dropdown\n  @Listen('keydown', { target: 'window' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.isOpen) return;\n\n    switch (event.key) {\n      case 'Escape':\n        event.preventDefault();\n        this.closeDropdown();\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        this.focusNextItem();\n        break;\n\n      case 'ArrowUp':\n        event.preventDefault();\n        this.focusPreviousItem();\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        if (this.menuItems.length > 0) {\n          // Find first non-disabled item\n          let firstIndex = 0;\n          while (firstIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstIndex])) {\n            firstIndex++;\n          }\n          if (firstIndex < this.menuItems.length) {\n            this.focusItemByIndex(firstIndex);\n          }\n        }\n        break;\n\n      case 'End':\n        event.preventDefault();\n        if (this.menuItems.length > 0) {\n          // Find last non-disabled item\n          let lastIndex = this.menuItems.length - 1;\n          while (lastIndex >= 0 && this.isItemDisabled(this.menuItems[lastIndex])) {\n            lastIndex--;\n          }\n          if (lastIndex >= 0) {\n            this.focusItemByIndex(lastIndex);\n          }\n        }\n        break;\n\n      case 'Tab':\n        if (event.shiftKey) {\n          // Let Shift+Tab navigate naturally from first item to trigger\n          // For all other items, move to previous item\n          const currentIndex = this.getFocusedItemIndex();\n\n          if (currentIndex > 0) {\n            // If not on first item, prevent default and go to previous item\n            event.preventDefault();\n            this.focusPreviousItem(); // Use our method that skips disabled items\n          }\n          // If on first item or no item, let natural tab order move back to trigger\n        } else {\n          // Forward Tab navigation\n          const activeElement = document.activeElement;\n          const isTriggerFocused = activeElement === this.triggerEl;\n          const currentIndex = this.getFocusedItemIndex();\n\n          if (isTriggerFocused && this.menuItems.length > 0) {\n            // If trigger is focused, move to first non-disabled menu item\n            event.preventDefault();\n\n            // Find the first non-disabled item\n            let firstFocusableIndex = 0;\n            while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {\n              firstFocusableIndex++;\n            }\n\n            if (firstFocusableIndex < this.menuItems.length) {\n              this.focusItemByIndex(firstFocusableIndex);\n            }\n          } else if (currentIndex === -1 && this.menuItems.length > 0) {\n            // If no menu item is focused, focus the first non-disabled one\n            event.preventDefault();\n\n            // Find the first non-disabled item\n            let firstFocusableIndex = 0;\n            while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {\n              firstFocusableIndex++;\n            }\n\n            if (firstFocusableIndex < this.menuItems.length) {\n              this.focusItemByIndex(firstFocusableIndex);\n            }\n          } else if (currentIndex !== -1) {\n            // Use our method that skips disabled items\n            event.preventDefault();\n            this.focusNextItem();\n          }\n        }\n        break;\n    }\n  }\n\n  // Handle clicks outside the dropdown to close it\n  @Listen('click', { target: 'window' })\n  handleWindowClick(event: MouseEvent) {\n    if (this.isOpen && !this.host.contains(event.target as Node) && event.target !== this.triggerEl) {\n      this.closeDropdown();\n    }\n  }\n\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <slot\n          name=\"trigger\"\n          onSlotchange={this.handleTriggerSlotChange}\n        ></slot>\n        <pds-box\n          border-radius=\"sm\"\n          display=\"flex\"\n          direction=\"column\"\n          class=\"pds-dropdown-menu--panel is-hidden\"\n          shadow=\"100\"\n          role=\"menu\"\n          aria-orientation=\"vertical\"\n          part=\"menu-panel\"\n        >\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </pds-box>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -49,8 +49,8 @@ const PdsLink = class {
         const targetValue = this.target || (this.external ? '_blank' : undefined);
         const showExternalIcon = this.external;
         const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (h("a", { key: '8c8c1f148aa53b20d232d9ad94d58333aa66553b', class: this.classNames(), href: this.href, id: this.componentId, part: "link", target: targetValue, rel: relValue, style: this.setLinkStyles() }, h("slot", { key: '9a803b0086b0c665f62ff9702d6a5c41c868c874' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: 'f9c752a279e427d2caa6771cf19a989622cd2110', icon: launch, size: this.fontSize })));
+        return (h("a", { key: '7d42e0a140af1093ea3019556e607036be5b274b', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", target: targetValue, rel: relValue, style: this.setLinkStyles() }, h("slot", { key: '7a8e0c7393c87817350fc380fac2aed3ee7c338c' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: 'f2486339296564d5d07e0c6c4cf83cb2566b8f24', icon: launch, size: this.fontSize })));
     }
 };
 PdsLink.style = pdsLinkCss;

package/dist/esm/pds-link.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-link.entry.js","sources":["src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":[":host {\n  display: inline;\n\n  pds-icon {\n    margin-inline-start: var(--pine-dimension-2xs);\n  }\n}\n\n.pds-link {\n  align-items: center;\n  // Priority: 1) explicit --color prop, 2) context variable, 3) default\n  color: var(--color, var(--pds-context-link-color, var(--pine-color-text)));\n  display: inline-flex;\n  font-weight: var(--pine-font-weight-medium);\n\n  &:focus-visible {\n    border-radius: var(--pine-dimension-2xs);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width-thick);\n    position: relative;\n  }\n\n  &:hover {\n    color: var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));\n    text-decoration: none;\n  }\n\n  :host([color=\"secondary\"]) & {\n    color: var(--pine-color-text-primary);\n\n    &:hover {\n      color: var(--pine-color-text-inverse-secondary);\n    }\n  }\n\n  :host([color=\"accent\"]) & {\n    color: var(--pine-color-accent);\n\n    &:hover {\n      color: var(--pine-color-accent-hover);\n    }\n  }\n\n  :host([color=\"danger\"]) & {\n    color: var(--pine-color-danger);\n\n    &:hover {\n      color: var(--pine-color-danger-hover);\n    }\n  }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n  font-size: var(--pine-font-size-body-xs);\n\n  pds-icon {\n    height: var(--pine-dimension-xs);\n    width: var(--pine-dimension-xs);\n  }\n}\n\n.pds-link--md {\n  font-size: var(--pine-font-size-body-sm);\n\n  pds-icon {\n    height: var(--pine-dimension-xs);\n    width: var(--pine-dimension-xs);\n  }\n}\n\n.pds-link--lg {\n  font-size: var(--pine-font-size-body-md);\n\n  pds-icon {\n    height: var(--pine-dimension-sm);\n    width: var(--pine-dimension-sm);\n  }\n}\n\n.pds-link--plain {\n  text-decoration: none;\n\n  &:hover {\n    color: var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));\n    text-decoration: underline;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrls: ['pds-link.scss'],\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * Sets the link color.\n   */\n  @Prop() color?: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the link should open in a new tab.\n   * @defaultValue false\n   * @deprecated Consider using the `target` prop for more control. This prop will be maintained for backward compatibility.\n   */\n  @Prop() external = false;\n\n  /**\n   * Specifies where to open the linked document.\n   * @defaultValue undefined\n   * @example\n   * <pds-link href=\"https://example.com\" target=\"_blank\">Opens in new tab</pds-link>\n   */\n  @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Sets the link variant styles.\n   * @defaultValue inline\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   * The font size of the link's text.\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private setLinkStyles() {\n    if (!this.color) return;\n\n    const linkColors = {\n      secondary: 'var(--pine-color-text-primary)',\n      accent: 'var(--pine-color-accent)',\n      danger: 'var(--pine-color-danger)',\n    }\n\n    const linkStyles = setColor(this.color, linkColors);\n\n    return linkStyles;\n  }\n\n  render() {\n    const targetValue = this.target || (this.external ? '_blank' : undefined);\n    const showExternalIcon = this.external;\n    const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        part=\"link\"\n        target={targetValue}\n        rel={relValue}\n        style={this.setLinkStyles()}\n      >\n        <slot>{this.href}</slot>\n        {showExternalIcon &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,4nDAA4nD;;MCcloD,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAgBE;;;;AAIG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAUxB;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,QAAQ;AAE9C;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAuB,IAAI;AAyD5C;IAlDS,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC;AAE/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC;;AAG/C,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;;AAG9C,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGrB,aAAa,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE;AAEjB,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,SAAS,EAAE,gCAAgC;AAC3C,YAAA,MAAM,EAAE,0BAA0B;AAClC,YAAA,MAAM,EAAE,0BAA0B;SACnC;QAED,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;AAEnD,QAAA,OAAO,UAAU;;IAGnB,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AACzE,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ;AACtC,QAAA,MAAM,QAAQ,GAAG,WAAW,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS;AAE7E,QAAA,QACE,CACE,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,WAAW,EACnB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EAE3B,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,CAAQ,EACvB,gBAAgB;YACf,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAa,CAExD;;;;;;;"}
+{"version":3,"file":"pds-link.entry.js","sources":["src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":[":host {\n  display: inline;\n\n  pds-icon {\n    margin-inline-start: var(--pine-dimension-2xs);\n  }\n}\n\n.pds-link {\n  align-items: center;\n  // Priority: 1) explicit --color prop, 2) context variable, 3) default\n  color: var(--color, var(--pds-context-link-color, var(--pine-color-text)));\n  display: inline-flex;\n  font-weight: var(--pine-font-weight-medium);\n\n  &:focus-visible {\n    border-radius: var(--pine-dimension-2xs);\n    outline: var(--pine-outline-focus);\n    outline-offset: var(--pine-border-width-thick);\n    position: relative;\n  }\n\n  &:hover {\n    color: var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));\n    text-decoration: none;\n  }\n\n  :host([color=\"secondary\"]) & {\n    color: var(--pine-color-text-primary);\n\n    &:hover {\n      color: var(--pine-color-text-inverse-secondary);\n    }\n  }\n\n  :host([color=\"accent\"]) & {\n    color: var(--pine-color-accent);\n\n    &:hover {\n      color: var(--pine-color-accent-hover);\n    }\n  }\n\n  :host([color=\"danger\"]) & {\n    color: var(--pine-color-danger);\n\n    &:hover {\n      color: var(--pine-color-danger-hover);\n    }\n  }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n  font-size: var(--pine-font-size-body-xs);\n\n  pds-icon {\n    height: var(--pine-dimension-xs);\n    width: var(--pine-dimension-xs);\n  }\n}\n\n.pds-link--md {\n  font-size: var(--pine-font-size-body-sm);\n\n  pds-icon {\n    height: var(--pine-dimension-xs);\n    width: var(--pine-dimension-xs);\n  }\n}\n\n.pds-link--lg {\n  font-size: var(--pine-font-size-body-md);\n\n  pds-icon {\n    height: var(--pine-dimension-sm);\n    width: var(--pine-dimension-sm);\n  }\n}\n\n.pds-link--plain {\n  text-decoration: none;\n\n  &:hover {\n    color: var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));\n    text-decoration: underline;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { setColor } from '../../utils/utils';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - Link element styles.\n * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrls: ['pds-link.scss'],\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * Sets the link color.\n   */\n  @Prop() color?: string;\n\n  /**\n   * Prompts the user to save the linked URL instead of navigating to it.\n   * It can be used without a value to download with the default filename,\n   * or with a string value to suggest a specific filename for the download.\n   */\n  @Prop() download?: string;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the link should open in a new tab.\n   * @defaultValue false\n   * @deprecated Consider using the `target` prop for more control. This prop will be maintained for backward compatibility.\n   */\n  @Prop() external = false;\n\n  /**\n   * Specifies where to open the linked document.\n   * @defaultValue undefined\n   * @example\n   * <pds-link href=\"https://example.com\" target=\"_blank\">Opens in new tab</pds-link>\n   */\n  @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * Sets the link variant styles.\n   * @defaultValue inline\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   * The font size of the link's text.\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private setLinkStyles() {\n    if (!this.color) return;\n\n    const linkColors = {\n      secondary: 'var(--pine-color-text-primary)',\n      accent: 'var(--pine-color-accent)',\n      danger: 'var(--pine-color-danger)',\n    }\n\n    const linkStyles = setColor(this.color, linkColors);\n\n    return linkStyles;\n  }\n\n  render() {\n    const targetValue = this.target || (this.external ? '_blank' : undefined);\n    const showExternalIcon = this.external;\n    const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;\n\n    return (\n      <a\n        class={this.classNames()}\n        download={this.download}\n        href={this.href}\n        id={this.componentId}\n        part=\"link\"\n        target={targetValue}\n        rel={relValue}\n        style={this.setLinkStyles()}\n      >\n        <slot>{this.href}</slot>\n        {showExternalIcon &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,UAAU,GAAG,4nDAA4nD;;MCcloD,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAuBE;;;;AAIG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAUxB;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAuB,QAAQ;AAE9C;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAuB,IAAI;AA0D5C;IAnDS,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC;AAE/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC;;AAG/C,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC;;AAG9C,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGrB,aAAa,GAAA;QACnB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE;AAEjB,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,SAAS,EAAE,gCAAgC;AAC3C,YAAA,MAAM,EAAE,0BAA0B;AAClC,YAAA,MAAM,EAAE,0BAA0B;SACnC;QAED,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC;AAEnD,QAAA,OAAO,UAAU;;IAGnB,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;AACzE,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ;AACtC,QAAA,MAAM,QAAQ,GAAG,WAAW,KAAK,QAAQ,GAAG,qBAAqB,GAAG,SAAS;AAE7E,QAAA,QACE,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,WAAW,EACnB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAA,EAE3B,CAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,IAAI,CAAQ,EACvB,gBAAgB;YACf,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAA,CAAa,CAExD;;;;;;;"}

package/dist/esm/pds-multiselect.entry.js

@@ -4,7 +4,7 @@ import { d as debounceEvent } from './utils-tJa4KYNO.js';
 import { a as assignDescription, m as messageId } from './form-CN-lL5QG.js';
 import { e as enlarge, b as danger } from './index-BFkDH5XU.js';
 
-const pdsMultiselectCss = ":host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-550);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color 0.2s ease, -webkit-box-shadow 0.2s ease;transition:border-color 0.2s ease, -webkit-box-shadow 0.2s ease;transition:border-color 0.2s ease, box-shadow 0.2s ease;transition:border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__panel{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover,.pds-multiselect__option.pds-multiselect__option--highlighted{background:var(--pine-color-background-muted)}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}";
+const pdsMultiselectCss = ":host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color 0.2s ease, -webkit-box-shadow 0.2s ease;transition:border-color 0.2s ease, -webkit-box-shadow 0.2s ease;transition:border-color 0.2s ease, box-shadow 0.2s ease;transition:border-color 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__panel{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover,.pds-multiselect__option.pds-multiselect__option--highlighted{background:var(--pine-color-background-muted)}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}";
 
 const PdsMultiselect = class {
     constructor(hostRef) {