npm - @pine-ds/core - Versions diffs - 3.16.1 → 3.16.3 - Mend

@pine-ds/core 3.16.1 → 3.16.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (148) hide show

package/components/form.js CHANGED Viewed

@@ -34,6 +34,8 @@ const isRequired = (target, component) => {
  * @param type - The type value (string literal) or a getter function that returns the type
  */
 function exposeTypeProperty(element, type) {
+    if (Object.getOwnPropertyDescriptor(element, 'type'))
+        return;
     Object.defineProperty(element, 'type', {
         get: typeof type === 'function' ? type : () => type,
         enumerable: true,

package/components/form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"form.js","mappings":"AAAA;;AAEG;MACU,SAAS,GAAG,CAAC,EAAU,EAAE,WAAmB,KAAI;AAC3D,IAAA,OAAO,CAAG,EAAA,EAAE,CAAK,EAAA,EAAA,WAAW,UAAU;AACxC;AAEA;;AAEG;AACU,MAAA,iBAAiB,GAAG,CAAC,EAAU,EAAE,OAAgB,EAAE,aAAqB,KAAI;AACvF,IAAA,IAAI,CAAC,aAAa;QAAE;IAEpB,IAAI,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC;AAEvC,IAAA,IAAI,OAAO;AAAE,QAAA,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,OAAO,CAAC;AAE/C,IAAA,OAAO,SAAS;AAClB;AAEA;;AAEG;MACU,UAAU,GAAG,CAAC,MAAM,EAAE,SAAS,KAAI;AAC9C,IAAA,IAAK,CAAC,MAAM,IAAI,CAAC,SAAS;QAAG;AAC7B,IAAA,IAAI,SAAS,CAAC,QAAQ,KAAK,IAAI,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,KAAK,IAAI,SAAS,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,OAAO,GAAG,KAAK;;AAE7F;AAEA;;;;;;;AAOG;AACa,SAAA,kBAAkB,CAAC,OAAgB,EAAE,IAA6B,EAAA;AAChF,IAAA,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE;AACrC,QAAA,GAAG,EAAE,OAAO,IAAI,KAAK,UAAU,GAAG,IAAI,GAAG,MAAM,IAAI;AACnD,QAAA,UAAU,EAAE,IAAI;AAChB,QAAA,YAAY,EAAE;AACf,KAAA,CAAC;AACJ;;;;","names":[],"sources":["src/utils/form.ts"],"sourcesContent":["/*\n Create id for messaging\n /\nexport const messageId = (id: string, messageType: string) => {\n return `${id}__${messageType}-message`;\n};\n\n/\n Assign aria-description id to relate messages with form element\n /\nexport const assignDescription = (id: string, invalid: boolean, helperMessage: string) => {\n if (!helperMessage) return\n\n let relatedId = messageId(id, 'helper')\n\n if (invalid) relatedId = messageId(id, 'error');\n\n return relatedId;\n};\n\n/\n Updates the `invalid` prop of a form element based on it's values validity\n /\nexport const isRequired = (target, component) => {\n if ( !target \|\| !component ) return;\n if (component.required === true) {\n (target.checkValidity() === false) ? component.invalid = true : component.invalid = false;\n }\n}\n\n/\n Exposes a readonly type property on a custom form element to match native form element behavior.\n * This makes the type property enumerable and accessible via element.type, matching native HTML elements.\n * The property is non-configurable, preventing it from being redefined or deleted at runtime.\n \n @param element - The custom element to add the type property to\n * @param type - The type value (string literal) or a getter function that returns the type\n */\nexport function exposeTypeProperty(element: Element, type: string \| (() => string)) {\n Object.defineProperty(element, 'type', {\n get: typeof type === 'function' ? type : () => type,\n enumerable: true,\n configurable: false\n });\n}\n"],"version":3}
1	+ {"file":"form.js","mappings":"AAAA;;AAEG;MACU,SAAS,GAAG,CAAC,EAAU,EAAE,WAAmB,KAAI;AAC3D,IAAA,OAAO,CAAG,EAAA,EAAE,CAAK,EAAA,EAAA,WAAW,UAAU;AACxC;AAEA;;AAEG;AACU,MAAA,iBAAiB,GAAG,CAAC,EAAU,EAAE,OAAgB,EAAE,aAAqB,KAAI;AACvF,IAAA,IAAI,CAAC,aAAa;QAAE;IAEpB,IAAI,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC;AAEvC,IAAA,IAAI,OAAO;AAAE,QAAA,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,OAAO,CAAC;AAE/C,IAAA,OAAO,SAAS;AAClB;AAEA;;AAEG;MACU,UAAU,GAAG,CAAC,MAAM,EAAE,SAAS,KAAI;AAC9C,IAAA,IAAK,CAAC,MAAM,IAAI,CAAC,SAAS;QAAG;AAC7B,IAAA,IAAI,SAAS,CAAC,QAAQ,KAAK,IAAI,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,KAAK,IAAI,SAAS,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,OAAO,GAAG,KAAK;;AAE7F;AAEA;;;;;;;AAOG;AACa,SAAA,kBAAkB,CAAC,OAAgB,EAAE,IAA6B,EAAA;AAChF,IAAA,IAAI,MAAM,CAAC,wBAAwB,CAAC,OAAO,EAAE,MAAM,CAAC;QAAE;AAEtD,IAAA,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE;AACrC,QAAA,GAAG,EAAE,OAAO,IAAI,KAAK,UAAU,GAAG,IAAI,GAAG,MAAM,IAAI;AACnD,QAAA,UAAU,EAAE,IAAI;AAChB,QAAA,YAAY,EAAE;AACf,KAAA,CAAC;AACJ;;;;","names":[],"sources":["src/utils/form.ts"],"sourcesContent":["/*\n Create id for messaging\n /\nexport const messageId = (id: string, messageType: string) => {\n return `${id}__${messageType}-message`;\n};\n\n/\n Assign aria-description id to relate messages with form element\n /\nexport const assignDescription = (id: string, invalid: boolean, helperMessage: string) => {\n if (!helperMessage) return\n\n let relatedId = messageId(id, 'helper')\n\n if (invalid) relatedId = messageId(id, 'error');\n\n return relatedId;\n};\n\n/\n Updates the `invalid` prop of a form element based on it's values validity\n /\nexport const isRequired = (target, component) => {\n if ( !target \|\| !component ) return;\n if (component.required === true) {\n (target.checkValidity() === false) ? component.invalid = true : component.invalid = false;\n }\n}\n\n/\n Exposes a readonly type property on a custom form element to match native form element behavior.\n * This makes the type property enumerable and accessible via element.type, matching native HTML elements.\n * The property is non-configurable, preventing it from being redefined or deleted at runtime.\n \n @param element - The custom element to add the type property to\n * @param type - The type value (string literal) or a getter function that returns the type\n */\nexport function exposeTypeProperty(element: Element, type: string \| (() => string)) {\n if (Object.getOwnPropertyDescriptor(element, 'type')) return;\n\n Object.defineProperty(element, 'type', {\n get: typeof type === 'function' ? type : () => type,\n enumerable: true,\n configurable: false\n });\n}\n"],"version":3}

package/components/pds-button2.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { a as addCircle, c as caretDown } from './index2.js';
 import { d as defineCustomElement$2 } from './pds-icon2.js';
 import { d as defineCustomElement$1 } from './pds-loader2.js';
-const pdsButtonCss = ":host{--pds-button-background:var(--color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--button-loader-color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--color-background-default));border:var(--pds-button-border);border-color:var(--color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{border-color:var(--color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled);pointer-events:none}.pds-button--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-default:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--tertiary{--color-background-default:transparent;--color-background-hover:var(--pine-color-background-muted);--color-background-disabled:transparent;--color-border-default:transparent;--color-border-hover:var(--pine-color-background-muted);--color-border-disabled:transparent;--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--filter{--color-background-default:var(--pine-color-background-container);--color-background-hover:var(--pine-color-background-subtle);--color-background-disabled:var(--pine-color-white);--color-border-default:transparent;--color-border-hover:transparent;--color-border-focus:transparent;--color-text-default:var(--pine-color-text-secondary);--color-text-hover:var(--pine-color-text-hover);--color-text-disabled:var(--pine-color-text-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:disabled{background-color:var(--pine-color-background-container)}.pds-button--filter:hover{color:var(--color-text-hover)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:var(--pine-color-text);--button-loader-color:var(--pine-color-text);border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--small{min-height:var(--pine-dimension-400);padding:calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-button--micro{font-size:var(--pine-font-size-085);min-height:var(--pine-dimension-300);padding:var(--pine-dimension-025) var(--pine-dimension-xs)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-button--icon-only.pds-button--small{height:var(--pine-dimension-400);min-height:var(--pine-dimension-400);min-width:var(--pine-dimension-400);padding:var(--pine-dimension-2xs);width:var(--pine-dimension-400)}.pds-button--icon-only.pds-button--micro{height:var(--pine-dimension-300);min-height:var(--pine-dimension-300);min-width:var(--pine-dimension-300);padding:var(--pine-dimension-3xs);width:var(--pine-dimension-300)}";
+const pdsButtonCss = ":host{--pds-button-background:var(--color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--button-loader-color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--color-background-default));border:var(--pds-button-border);border-color:var(--color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{border-color:var(--color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled);pointer-events:none}.pds-button--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-default:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--tertiary{--color-background-default:transparent;--color-background-hover:var(--pine-color-background-muted);--color-background-disabled:transparent;--color-border-default:transparent;--color-border-hover:var(--pine-color-background-muted);--color-border-disabled:transparent;--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--filter{--color-background-default:var(--pine-color-background-container);--color-background-hover:var(--pine-color-background-subtle);--color-background-disabled:var(--pine-color-white);--color-border-default:transparent;--color-border-hover:transparent;--color-border-focus:transparent;--color-text-default:var(--pine-color-text-secondary);--color-text-hover:var(--pine-color-text-hover);--color-text-disabled:var(--pine-color-text-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:disabled{background-color:var(--pine-color-background-container)}.pds-button--filter:hover{color:var(--color-text-hover)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:var(--pine-color-text);--button-loader-color:var(--pine-color-text);border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__icon:not(:has(::slotted(*))){display:none}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--small{min-height:var(--pine-dimension-400);padding:calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-button--micro{font-size:var(--pine-font-size-085);min-height:var(--pine-dimension-300);padding:var(--pine-dimension-025) var(--pine-dimension-xs)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-button--icon-only.pds-button--small{height:var(--pine-dimension-400);min-height:var(--pine-dimension-400);min-width:var(--pine-dimension-400);padding:var(--pine-dimension-2xs);width:var(--pine-dimension-400)}.pds-button--icon-only.pds-button--micro{height:var(--pine-dimension-300);min-height:var(--pine-dimension-300);min-width:var(--pine-dimension-300);padding:var(--pine-dimension-3xs);width:var(--pine-dimension-300)}";
 const PdsButton = /*@__PURE__*/ proxyCustomElement(class PdsButton extends HTMLElement {
     constructor(registerHost) {
@@ -143,23 +143,18 @@ const PdsButton = /*@__PURE__*/ proxyCustomElement(class PdsButton extends HTMLE
         }
         return classNames.join(' ');
     }
-    hasSlotContent(slotName) {
-        const elements = this.el.querySelectorAll(`[slot="${slotName}"]`);
-        return elements.length > 0;
-    }
     renderStartContent() {
-        const hasIcon = this.icon && this.variant !== 'disclosure' && this.variant !== 'filter';
-        const hasStartSlot = this.hasSlotContent('start');
         if (this.variant === 'filter') {
             return (h("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', icon: addCircle, part: "icon", "aria-hidden": "true" }));
         }
-        else if (Boolean(hasIcon)) {
+        // Deprecated icon prop still takes precedence over start slot
+        const hasIcon = this.icon && this.variant !== 'disclosure';
+        if (Boolean(hasIcon)) {
             return (h("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', name: this.icon, part: "icon", "aria-hidden": "true" }));
         }
-        else if (Boolean(hasStartSlot)) {
-            return h("span", { class: `pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}` }, h("slot", { name: "start" }));
-        }
-        return null;
+        // Always render the start slot so slotted content is projected reliably.
+        // CSS hides the wrapper when no content is slotted (prevents empty gap space).
+        return h("span", { class: `pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}` }, h("slot", { name: "start" }));
     }
     renderEndContent() {
         if (this.iconOnly) {
@@ -168,10 +163,9 @@ const PdsButton = /*@__PURE__*/ proxyCustomElement(class PdsButton extends HTMLE
         if (this.variant === 'disclosure') {
             return (h("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', icon: caretDown, part: "caret", "aria-hidden": "true" }));
         }
-        else if (this.hasSlotContent('end')) {
-            return h("span", { class: `pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}` }, h("slot", { name: "end" }));
-        }
-        return null;
+        // Always render the end slot so slotted content is projected reliably.
+        // CSS hides the wrapper when no content is slotted (prevents empty gap space).
+        return h("span", { class: `pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}` }, h("slot", { name: "end" }));
     }
     render() {
         // Common props for both button and anchor elements

package/components/pds-button2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-button2.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":[":host {\n --pds-button-background: var(--color-background-default);\n --pds-button-border: var(--pine-border);\n --pds-button-border-radius: var(--pine-border-radius-full);\n --pds-button-border-radius-start-end: var(--pine-border-radius-full);\n --pds-button-border-radius-start-start: var(--pine-border-radius-full);\n --pds-button-border-radius-end-end: var(--pine-border-radius-full);\n --pds-button-border-radius-end-start: var(--pine-border-radius-full);\n --pds-button-min-height: var(--pine-dimension-450);\n --pds-button-outline-offset: var(--pine-border-width);\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n --button-loader-color: var(--color-text-default);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n:host([full-width=\"true\"]) {\n display: flex;\n width: 100%;\n\n a,\n button {\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__content {\n justify-content: center;\n text-align: center;\n }\n}\n\n:host([loading=\"true\"]) {\n cursor: wait;\n pointer-events: none;\n}\n\n:host([disabled=\"true\"]) {\n pointer-events: none;\n}\n\n.pds-button {\n --pds-loader-color: var(--color-text-default);\n align-items: center;\n background-color: var(--pds-button-background, var(--color-background-default));\n border: var(--pds-button-border);\n border-color: var(--color-border-default);\n border-radius: var(--pds-button-border-radius);\n /* stylelint-disable-next-line order/properties-alphabetical-order /\n border-end-end-radius: var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));\n border-end-start-radius: var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));\n border-start-end-radius: var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));\n border-start-start-radius: var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));\n box-sizing: border-box;\n color: var(--color-text-default);\n cursor: pointer;\n display: flex;\n font: var(--pine-typography-body-brand-label);\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pds-button-min-height);\n padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);\n position: relative;\n text-decoration: none;\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n border-color: var(--color-border-focus);\n box-shadow: var(--pds-button-box-shadow-focus, none);\n outline: var(--pds-button-outline-focus, var(--pine-outline-focus));\n outline-offset: var(--pds-button-outline-offset);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n pointer-events: none;\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--pine-color-primary);\n --color-background-hover: var(--pine-color-primary-hover);\n --color-background-disabled: var(--pine-color-primary-disabled);\n --color-border-default: var(--pine-color-primary);\n --color-border-hover: var(--pine-color-primary-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-primary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--pine-color-accent);\n --color-background-hover: var(--pine-color-accent-hover);\n --color-background-disabled: var(--pine-color-accent-disabled);\n --color-border-default: var(--pine-color-accent);\n --color-border-hover: var(--pine-color-accent-hover);\n / stylelint-disable-next-line pine-design-system/prefer-semantic-tokens /\n --color-text-default: var(--pine-color-white);\n --color-text-disabled: var(--pine-color-text-accent-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--pine-color-danger);\n --color-background-hover: var(--pine-color-danger-hover);\n --color-background-disabled: var(--pine-color-danger-disabled);\n --color-border-default: var(--pine-color-danger);\n --color-border-hover: var(--pine-color-danger-hover);\n / stylelint-disable-next-line pine-design-system/prefer-semantic-tokens /\n --color-text-default: var(--pine-color-white);\n --color-text-disabled: var(--pine-color-text-danger-disabled);\n --color-outline: var(--pine-color-focus-ring-danger);\n --button-loader-color: var(--pine-color-text-primary);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: var(--pine-color-secondary);\n --color-background-hover: var(--pine-color-secondary-hover);\n --color-background-disabled: var(--pine-color-secondary-disabled);\n --color-border-disabled: var(--pine-color-border-disabled);\n --color-border-focus: var(--pine-color-border);\n --color-border-hover: var(--pine-color-border-hover);\n --color-border-default: var(--pine-color-border);\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n\n &:hover {\n background-color: var(--pine-color-secondary-hover);\n }\n}\n\n.pds-button--tertiary {\n --color-background-default: transparent;\n --color-background-hover: var(--pine-color-background-muted);\n --color-background-disabled: transparent;\n --color-border-default: transparent;\n --color-border-hover: var(--pine-color-background-muted);\n --color-border-disabled: transparent;\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n}\n\n.pds-button--filter {\n --color-background-default: var(--pine-color-background-container);\n --color-background-hover: var(--pine-color-background-subtle);\n / stylelint-disable-next-line pine-design-system/prefer-semantic-tokens /\n --color-background-disabled: var(--pine-color-white);\n --color-border-default: transparent;\n --color-border-hover: transparent;\n --color-border-focus: transparent;\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-hover: var(--pine-color-text-hover);\n --color-text-disabled: var(--pine-color-text-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n --pds-button-border-radius: var(--pine-dimension-125);\n --pds-button-border-radius-start-end: var(--pine-dimension-125);\n --pds-button-border-radius-start-start: var(--pine-dimension-125);\n --pds-button-border-radius-end-end: var(--pine-dimension-125);\n --pds-button-border-radius-end-start: var(--pine-dimension-125);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n &:disabled {\n background-color: var(--pine-color-background-container);\n }\n\n &:hover {\n color: var(--color-text-hover);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: var(--pine-color-text);\n --button-loader-color: var(--pine-color-text);\n border-width: var(--pine-dimension-none);\n margin: var(--pine-dimension-none);\n min-height: auto;\n padding: var(--pine-dimension-none);\n width: inherit;\n}\n\n.pds-button__content {\n align-items: center;\n display: inline-flex;\n gap: var(--pine-dimension-xs);\n position: relative;\n width: 100%;\n}\n\n.pds-button__icon {\n display: inline-flex;\n}\n\n.pds-button__text {\n align-items: center;\n display: inline-flex;\n white-space: nowrap;\n}\n\n.pds-button__icon--hidden,\n.pds-button__text--hidden {\n opacity: 0;\n}\n\n.pds-button__loader {\n height: var(--pine-dimension-250);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--pine-dimension-250);\n}\n\n.pds-button--loading {\n cursor: wait;\n pointer-events: none;\n\n .pds-button__loader {\n pds-loader {\n --loader-color: var(--button-loader-color);\n }\n }\n}\n\n.pds-button--small {\n min-height: var(--pine-dimension-400);\n padding: calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm);\n}\n\n.pds-button--micro {\n font-size: var(--pine-font-size-085);\n min-height: var(--pine-dimension-300);\n padding: var(--pine-dimension-025) var(--pine-dimension-xs);\n}\n\n\n.pds-button--icon-only {\n align-items: center;\n border-radius: var(--pine-border-radius-full);\n height: var(--button-dimension);\n justify-content: center;\n min-height: var(--button-dimension);\n min-width: var(--button-dimension);\n padding: var(--pine-dimension-xs);\n width: var(--button-dimension);\n\n .pds-button__content {\n height: 100%;\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__text--hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n &.pds-button--small {\n height: var(--pine-dimension-400);\n min-height: var(--pine-dimension-400);\n min-width: var(--pine-dimension-400);\n padding: var(--pine-dimension-2xs);\n width: var(--pine-dimension-400);\n }\n\n &.pds-button--micro {\n height: var(--pine-dimension-300);\n min-height: var(--pine-dimension-300);\n min-width: var(--pine-dimension-300);\n padding: var(--pine-dimension-3xs);\n width: var(--pine-dimension-300);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Listen, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown, addCircle } from '@pine-ds/icons/icons';\n\n/\n @part button - Exposes the button element for styling.\n * @part button-content - Exposes the button content for styling.\n * @part button-text - Exposes the button text for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n * @part loader-svg - Exposes the loader SVG element for color customization. Appears only when loading.\n * @slot (default) - Button text.\n * @slot start - Content to display before the button text.\n * @slot end - Content to display after the button text.\n/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines the button's disabled state.\n * @defaultValue false\n /\n @Prop() disabled? = false;\n\n /\n Determines if the button should take up the full width of its container.\n * @defaultValue false\n /\n @Prop() fullWidth? = false;\n\n /\n If provided, renders the component as an anchor (`<a>`) element instead of a button.\n * When using href, button-specific props (type, name, value, loading) will be ignored.\n /\n @Prop() href?: string;\n\n /\n Displays a leading icon in the button. DEPRECATED.\n * @defaultValue null\n * @deprecated Use `start` slot instead.\n /\n @Prop() icon?: string = null;\n\n /\n When true, displays only the icon and visually hides the text (keeping it accessible).\n /\n @Prop() iconOnly? = false;\n\n /\n Determines if the button is in a loading state.\n * When true, displays a loader and hides the button text.\n * @defaultValue false\n /\n @Prop() loading? = false;\n\n /\n Provides the button with a submittable name.\n /\n @Prop() name?: string;\n\n /\n Specifies where to open the linked document when href is provided.\n * Only applies when href is set.\n /\n @Prop() target?: '_blank' \| '_self' \| '_parent' \| '_top';\n\n /\n Provides button with a type.\n * @defaultValue button\n /\n @Prop() type?: 'button' \| 'reset' \| 'submit' = 'button';\n\n /\n Provides button with a submittable value\n /\n @Prop() value?: string;\n\n /\n Sets the size of the button.\n * @defaultValue default\n /\n @Prop() size?: 'default' \| 'small' \| 'micro' = 'default';\n\n /\n Sets the style variant of the button.\n * @defaultValue primary\n /\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' \| 'accent' \| 'disclosure' \| 'destructive' \| 'unstyled' \| 'filter' = 'primary';\n\n @Event() pdsClick: EventEmitter<Event>;\n\n /\n Listen for Enter key presses on form inputs to trigger submit\n */\n @Listen('keydown', { target: 'body' })\n\n handleFormKeyDown(event: KeyboardEvent) {\n // Only handle Enter key for submit buttons that are not disabled\n if (event.key !== 'Enter' \|\| this.type !== 'submit' \|\| this.href \|\| this.disabled) {\n return;\n }\n\n const target = event.target as Element;\n\n // Ensure event.target is an Element with matches method before proceeding\n if (!target \|\| typeof target.matches !== 'function') {\n return;\n }\n const form = this.el.closest('form');\n\n // Check if the Enter key was pressed in a form input within the same form\n if (!form \|\| !target \|\| !form.contains(target)) {\n return;\n }\n\n // Check if target is a form input element (exclude reset buttons)\n const isFormInput = target.matches('input:not([type=\"submit\"]):not([type=\"button\"]):not([type=\"reset\"])') \|\|\n target.matches('pds-input') \|\|\n target.matches('pds-select') \|\|\n target.matches('pds-switch') \|\|\n target.matches('pds-checkbox') \|\|\n target.matches('pds-radio');\n\n if (isFormInput) {\n // Find all submit buttons in the form and check their actual properties\n const allSubmitButtons = Array.from(form.querySelectorAll('pds-button, button[type=\"submit\"], input[type=\"submit\"]'));\n const enabledSubmitButtons = allSubmitButtons.filter(button => {\n if (button.tagName.toLowerCase() === 'pds-button') {\n const pdsButton = button as HTMLPdsButtonElement;\n return pdsButton.type === 'submit' && !pdsButton.disabled;\n } else {\n return !button.hasAttribute('disabled');\n }\n });\n\n // Only synthesize click if this button is strictly the first enabled submit button\n if (enabledSubmitButtons.length > 0 && enabledSubmitButtons[0] === this.el) {\n event.preventDefault();\n this.el.click();\n }\n }\n }\n\n\n private handleClick = (ev: Event) => {\n if (this.loading) {\n ev.preventDefault();\n return;\n }\n\n // Prevent form submission for disabled buttons\n if (this.disabled) {\n ev.preventDefault();\n return;\n }\n\n if (!this.href && this.type != 'button') {\n // Handle form submission for Shadow DOM buttons\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form');\n if (form) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n form.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n this.pdsClick.emit(ev);\n };\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n if (this.size && this.size !== 'default') {\n classNames.push('pds-button--' + this.size);\n }\n\n if (this.iconOnly) {\n classNames.push('pds-button--icon-only');\n }\n\n if (this.loading) {\n classNames.push('pds-button--loading');\n }\n\n return classNames.join(' ');\n }\n\n private hasSlotContent(slotName: string): boolean {\n const elements = this.el.querySelectorAll(`[slot=\"${slotName}\"]`);\n return elements.length > 0;\n }\n\n private renderStartContent() {\n const hasIcon = this.icon && this.variant !== 'disclosure' && this.variant !== 'filter';\n const hasStartSlot = this.hasSlotContent('start');\n\n if (this.variant === 'filter') {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={addCircle} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (Boolean(hasIcon)) {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} name={this.icon} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (Boolean(hasStartSlot)) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"start\" /></span>;\n }\n\n return null;\n }\n\n private renderEndContent() {\n if (this.iconOnly) {\n return null;\n }\n\n if (this.variant === 'disclosure') {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={caretDown} part=\"caret\" aria-hidden=\"true\"></pds-icon>\n );\n } else if (this.hasSlotContent('end')) {\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"end\" /></span>;\n }\n\n return null;\n }\n\n render() {\n // Common props for both button and anchor elements\n const commonProps = {\n class: this.classNames(),\n part: 'button',\n };\n\n const attributes = () => {\n if (this.href) {\n return {\n // Anchor element props\n ...commonProps,\n href: this.disabled ? null : this.href,\n target: this.target,\n };\n }\n\n return {\n // Button element props\n ...commonProps,\n 'aria-busy': this.loading ? 'true' : null,\n 'aria-live': this.loading ? 'polite' : null,\n 'disabled': this.disabled,\n 'name': this.name,\n 'type': this.type,\n 'value': this.value,\n };\n };\n\n const ContentElement = this.href ? 'a' : 'button';\n\n // Hide text when loading or iconOnly is true\n const hideText = this.loading \|\| this.iconOnly;\n\n const content = (\n <div class=\"pds-button__content\" part=\"button-content\">\n {this.renderStartContent()}\n\n <span class={`pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`} part=\"button-text\">\n <slot />\n </span>\n\n {this.loading && (\n <span class=\"pds-button__loader\">\n <pds-loader is-loading={true} size=\"var(--pine-font-size-body-2xl)\" variant=\"spinner\" exportparts=\"loader-svg\">\n Loading...\n </pds-loader>\n </span>\n )}\n\n {this.renderEndContent()}\n </div>\n );\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <ContentElement {...attributes()}>\n {content}\n </ContentElement>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-button2.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,kqSAAkqS;;MCsB1qS,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;AALtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAaE;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAI,KAAK;AAEzB;;;AAGG;AACK,QAAA,IAAS,CAAA,SAAA,GAAI,KAAK;AAQ1B;;;;AAIG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,IAAI;AAE5B;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAI,KAAK;AAEzB;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAI,KAAK;AAaxB;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAmC,QAAQ;AAOvD;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAmC,SAAS;AAExD;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAA2G,SAAS;AAyD3H,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,EAAS,KAAI;AAClC,YAAA,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,EAAE,CAAC,cAAc,EAAE;gBACnB;;;AAIF,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,EAAE,CAAC,cAAc,EAAE;gBACnB;;YAGF,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE;;AAEvC,gBAAA,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;oBACzB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC;oBACpC,IAAI,IAAI,EAAE;wBACR,EAAE,CAAC,cAAc,EAAE;wBAEnB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AACnD,wBAAA,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;AAC3B,wBAAA,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;AACjC,wBAAA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC;wBAC5B,UAAU,CAAC,KAAK,EAAE;wBAClB,UAAU,CAAC,MAAM,EAAE;;;;AAIzB,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;AACxB,SAAC;AA+HF;AAjNC;;AAEG;AAGH,IAAA,iBAAiB,CAAC,KAAoB,EAAA;;QAEpC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjF;;AAGF,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAiB;;QAGtC,IAAI,CAAC,MAAM,IAAI,OAAO,MAAM,CAAC,OAAO,KAAK,UAAU,EAAE;YACnD;;QAEF,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC;;AAGpC,QAAA,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;YAC9C;;;AAIF,QAAA,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,qEAAqE,CAAC;AACtF,YAAA,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC;AAC3B,YAAA,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC;AAC5B,YAAA,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC;AAC5B,YAAA,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC;AAC9B,YAAA,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC;QAE9C,IAAI,WAAW,EAAE;;AAEf,YAAA,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,yDAAyD,CAAC,CAAC;YACrH,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,MAAM,CAAC,MAAM,IAAG;gBAC5D,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,YAAY,EAAE;oBACjD,MAAM,SAAS,GAAG,MAA8B;oBAChD,OAAO,SAAS,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,SAAS,CAAC,QAAQ;;qBACpD;AACL,oBAAA,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC;;AAE3C,aAAC,CAAC;;AAGF,YAAA,IAAI,oBAAoB,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,EAAE,EAAE;gBAC1E,KAAK,CAAC,cAAc,EAAE;AACtB,gBAAA,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE;;;;IAqCb,UAAU,GAAA;AAChB,QAAA,MAAM,UAAU,GAAG,CAAC,YAAY,CAAC;AAEjC,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC;;QAGhD,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;YACxC,UAAU,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC;;AAG7C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC;;AAG1C,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC;;AAGxC,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGrB,kBAAkB,GAAA;AACxB,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE;AAC7B,YAAA,QACE,CAAU,CAAA,UAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,0BAA0B,GAAG,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,MAAM,EAAa,aAAA,EAAA,MAAM,EAAY,CAAA;;;QAKhI,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY;AAC1D,QAAA,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;AACpB,YAAA,QACE,CAAA,CAAA,UAAA,EAAA,EAAU,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,0BAA0B,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,EAAA,aAAA,EAAa,MAAM,EAAA,CAAY;;;;AAMhI,QAAA,OAAO,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,CAAoB,iBAAA,EAAA,IAAI,CAAC,OAAO,GAAG,0BAA0B,GAAG,EAAE,CAAA,CAAE,EAAA,EAAE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CAAO;;IAGhH,gBAAgB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,OAAO,IAAI;;AAGb,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,EAAE;AACjC,YAAA,QACE,CAAU,CAAA,UAAA,EAAA,EAAA,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,0BAA0B,GAAG,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,EAAa,aAAA,EAAA,MAAM,EAAY,CAAA;;;;AAMjI,QAAA,OAAO,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,CAAoB,iBAAA,EAAA,IAAI,CAAC,OAAO,GAAG,0BAA0B,GAAG,EAAE,CAAA,CAAE,EAAA,EAAE,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,KAAK,EAAA,CAAG,CAAO;;IAGtH,MAAM,GAAA;;AAEJ,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;AACxB,YAAA,IAAI,EAAE,QAAQ;SACf;QAED,MAAM,UAAU,GAAG,MAAK;AACtB,YAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,gBAAA,OAEK,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,WAAW,KACd,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI,EACtC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,CAAA;;AAGJ,YAAA,OAEK,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,WAAW,CACd,EAAA,EAAA,WAAW,EAAE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,IAAI,EACzC,WAAW,EAAE,IAAI,CAAC,OAAO,GAAG,QAAQ,GAAG,IAAI,EAC3C,UAAU,EAAE,IAAI,CAAC,QAAQ,EACzB,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,MAAM,EAAE,IAAI,CAAC,IAAI,EACjB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,CAAA;AACJ,SAAC;AAED,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ;;QAGjD,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ;QAE9C,MAAM,OAAO,IACX,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,gBAAgB,EAAA,EACnD,IAAI,CAAC,kBAAkB,EAAE,EAE1B,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,CAAA,iBAAA,EAAoB,QAAQ,GAAG,0BAA0B,GAAG,EAAE,CAAA,CAAE,EAAE,IAAI,EAAC,aAAa,EAAA,EAC/F,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACH,EAEN,IAAI,CAAC,OAAO,KACX,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC9B,CAAA,CAAA,YAAA,EAAA,EAAA,YAAA,EAAwB,IAAI,EAAE,IAAI,EAAC,gCAAgC,EAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAC,YAAY,EAAA,EAAA,YAAA,CAEjG,CACR,CACR,EAEA,IAAI,CAAC,gBAAgB,EAAE,CACpB,CACP;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,eAAA,EACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAErB,CAAC,CAAA,cAAc,oBAAK,UAAU,EAAE,GAC7B,OAAO,CACO,CACZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":[":host {\n --pds-button-background: var(--color-background-default);\n --pds-button-border: var(--pine-border);\n --pds-button-border-radius: var(--pine-border-radius-full);\n --pds-button-border-radius-start-end: var(--pine-border-radius-full);\n --pds-button-border-radius-start-start: var(--pine-border-radius-full);\n --pds-button-border-radius-end-end: var(--pine-border-radius-full);\n --pds-button-border-radius-end-start: var(--pine-border-radius-full);\n --pds-button-min-height: var(--pine-dimension-450);\n --pds-button-outline-offset: var(--pine-border-width);\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n --button-loader-color: var(--color-text-default);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n:host([full-width=\"true\"]) {\n display: flex;\n width: 100%;\n\n a,\n button {\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__content {\n justify-content: center;\n text-align: center;\n }\n}\n\n:host([loading=\"true\"]) {\n cursor: wait;\n pointer-events: none;\n}\n\n:host([disabled=\"true\"]) {\n pointer-events: none;\n}\n\n.pds-button {\n --pds-loader-color: var(--color-text-default);\n align-items: center;\n background-color: var(--pds-button-background, var(--color-background-default));\n border: var(--pds-button-border);\n border-color: var(--color-border-default);\n border-radius: var(--pds-button-border-radius);\n /* stylelint-disable-next-line order/properties-alphabetical-order /\n border-end-end-radius: var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));\n border-end-start-radius: var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));\n border-start-end-radius: var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));\n border-start-start-radius: var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));\n box-sizing: border-box;\n color: var(--color-text-default);\n cursor: pointer;\n display: flex;\n font: var(--pine-typography-body-brand-label);\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--pds-button-min-height);\n padding: calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);\n position: relative;\n text-decoration: none;\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n border-color: var(--color-border-focus);\n box-shadow: var(--pds-button-box-shadow-focus, none);\n outline: var(--pds-button-outline-focus, var(--pine-outline-focus));\n outline-offset: var(--pds-button-outline-offset);\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n pointer-events: none;\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--pine-color-primary);\n --color-background-hover: var(--pine-color-primary-hover);\n --color-background-disabled: var(--pine-color-primary-disabled);\n --color-border-default: var(--pine-color-primary);\n --color-border-hover: var(--pine-color-primary-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-primary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--pine-color-accent);\n --color-background-hover: var(--pine-color-accent-hover);\n --color-background-disabled: var(--pine-color-accent-disabled);\n --color-border-default: var(--pine-color-accent);\n --color-border-hover: var(--pine-color-accent-hover);\n / stylelint-disable-next-line pine-design-system/prefer-semantic-tokens /\n --color-text-default: var(--pine-color-white);\n --color-text-disabled: var(--pine-color-text-accent-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--pine-color-danger);\n --color-background-hover: var(--pine-color-danger-hover);\n --color-background-disabled: var(--pine-color-danger-disabled);\n --color-border-default: var(--pine-color-danger);\n --color-border-hover: var(--pine-color-danger-hover);\n / stylelint-disable-next-line pine-design-system/prefer-semantic-tokens /\n --color-text-default: var(--pine-color-white);\n --color-text-disabled: var(--pine-color-text-danger-disabled);\n --color-outline: var(--pine-color-focus-ring-danger);\n --button-loader-color: var(--pine-color-text-primary);\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: var(--pine-color-secondary);\n --color-background-hover: var(--pine-color-secondary-hover);\n --color-background-disabled: var(--pine-color-secondary-disabled);\n --color-border-disabled: var(--pine-color-border-disabled);\n --color-border-focus: var(--pine-color-border);\n --color-border-hover: var(--pine-color-border-hover);\n --color-border-default: var(--pine-color-border);\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n\n &:hover {\n background-color: var(--pine-color-secondary-hover);\n }\n}\n\n.pds-button--tertiary {\n --color-background-default: transparent;\n --color-background-hover: var(--pine-color-background-muted);\n --color-background-disabled: transparent;\n --color-border-default: transparent;\n --color-border-hover: var(--pine-color-background-muted);\n --color-border-disabled: transparent;\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n}\n\n.pds-button--filter {\n --color-background-default: var(--pine-color-background-container);\n --color-background-hover: var(--pine-color-background-subtle);\n / stylelint-disable-next-line pine-design-system/prefer-semantic-tokens /\n --color-background-disabled: var(--pine-color-white);\n --color-border-default: transparent;\n --color-border-hover: transparent;\n --color-border-focus: transparent;\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-hover: var(--pine-color-text-hover);\n --color-text-disabled: var(--pine-color-text-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n --pds-button-border-radius: var(--pine-dimension-125);\n --pds-button-border-radius-start-end: var(--pine-dimension-125);\n --pds-button-border-radius-start-start: var(--pine-dimension-125);\n --pds-button-border-radius-end-end: var(--pine-dimension-125);\n --pds-button-border-radius-end-start: var(--pine-dimension-125);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n &:disabled {\n background-color: var(--pine-color-background-container);\n }\n\n &:hover {\n color: var(--color-text-hover);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: var(--pine-color-text);\n --button-loader-color: var(--pine-color-text);\n border-width: var(--pine-dimension-none);\n margin: var(--pine-dimension-none);\n min-height: auto;\n padding: var(--pine-dimension-none);\n width: inherit;\n}\n\n.pds-button__content {\n align-items: center;\n display: inline-flex;\n gap: var(--pine-dimension-xs);\n position: relative;\n width: 100%;\n}\n\n.pds-button__icon {\n display: inline-flex;\n\n // Hide slot wrapper when no content is slotted to prevent empty flex gap space.\n // Named slots (start/end) are always rendered in the shadow DOM so the browser\n // can project light DOM content reliably regardless of render timing.\n &:not(:has(::slotted())) {\n display: none;\n }\n}\n\n.pds-button__text {\n align-items: center;\n display: inline-flex;\n white-space: nowrap;\n}\n\n.pds-button__icon--hidden,\n.pds-button__text--hidden {\n opacity: 0;\n}\n\n.pds-button__loader {\n height: var(--pine-dimension-250);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--pine-dimension-250);\n}\n\n.pds-button--loading {\n cursor: wait;\n pointer-events: none;\n\n .pds-button__loader {\n pds-loader {\n --loader-color: var(--button-loader-color);\n }\n }\n}\n\n.pds-button--small {\n min-height: var(--pine-dimension-400);\n padding: calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm);\n}\n\n.pds-button--micro {\n font-size: var(--pine-font-size-085);\n min-height: var(--pine-dimension-300);\n padding: var(--pine-dimension-025) var(--pine-dimension-xs);\n}\n\n\n.pds-button--icon-only {\n align-items: center;\n border-radius: var(--pine-border-radius-full);\n height: var(--button-dimension);\n justify-content: center;\n min-height: var(--button-dimension);\n min-width: var(--button-dimension);\n padding: var(--pine-dimension-xs);\n width: var(--button-dimension);\n\n .pds-button__content {\n height: 100%;\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__text--hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n &.pds-button--small {\n height: var(--pine-dimension-400);\n min-height: var(--pine-dimension-400);\n min-width: var(--pine-dimension-400);\n padding: var(--pine-dimension-2xs);\n width: var(--pine-dimension-400);\n }\n\n &.pds-button--micro {\n height: var(--pine-dimension-300);\n min-height: var(--pine-dimension-300);\n min-width: var(--pine-dimension-300);\n padding: var(--pine-dimension-3xs);\n width: var(--pine-dimension-300);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Listen, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown, addCircle } from '@pine-ds/icons/icons';\n\n/*\n @part button - Exposes the button element for styling.\n * @part button-content - Exposes the button content for styling.\n * @part button-text - Exposes the button text for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n * @part loader-svg - Exposes the loader SVG element for color customization. Appears only when loading.\n * @slot (default) - Button text.\n * @slot start - Content to display before the button text.\n * @slot end - Content to display after the button text.\n/\n\n@Component({\n tag: 'pds-button',\n styleUrls: ['pds-button.scss'],\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /\n A unique identifier used for the underlying component `id` attribute.\n /\n @Prop() componentId: string;\n\n /\n Determines the button's disabled state.\n * @defaultValue false\n /\n @Prop() disabled? = false;\n\n /\n Determines if the button should take up the full width of its container.\n * @defaultValue false\n /\n @Prop() fullWidth? = false;\n\n /\n If provided, renders the component as an anchor (`<a>`) element instead of a button.\n * When using href, button-specific props (type, name, value, loading) will be ignored.\n /\n @Prop() href?: string;\n\n /\n Displays a leading icon in the button. DEPRECATED.\n * @defaultValue null\n * @deprecated Use `start` slot instead.\n /\n @Prop() icon?: string = null;\n\n /\n When true, displays only the icon and visually hides the text (keeping it accessible).\n /\n @Prop() iconOnly? = false;\n\n /\n Determines if the button is in a loading state.\n * When true, displays a loader and hides the button text.\n * @defaultValue false\n /\n @Prop() loading? = false;\n\n /\n Provides the button with a submittable name.\n /\n @Prop() name?: string;\n\n /\n Specifies where to open the linked document when href is provided.\n * Only applies when href is set.\n /\n @Prop() target?: '_blank' \| '_self' \| '_parent' \| '_top';\n\n /\n Provides button with a type.\n * @defaultValue button\n /\n @Prop() type?: 'button' \| 'reset' \| 'submit' = 'button';\n\n /\n Provides button with a submittable value\n /\n @Prop() value?: string;\n\n /\n Sets the size of the button.\n * @defaultValue default\n /\n @Prop() size?: 'default' \| 'small' \| 'micro' = 'default';\n\n /\n Sets the style variant of the button.\n * @defaultValue primary\n /\n @Prop() variant: 'primary' \| 'secondary' \| 'tertiary' \| 'accent' \| 'disclosure' \| 'destructive' \| 'unstyled' \| 'filter' = 'primary';\n\n @Event() pdsClick: EventEmitter<Event>;\n\n /\n Listen for Enter key presses on form inputs to trigger submit\n */\n @Listen('keydown', { target: 'body' })\n\n handleFormKeyDown(event: KeyboardEvent) {\n // Only handle Enter key for submit buttons that are not disabled\n if (event.key !== 'Enter' \|\| this.type !== 'submit' \|\| this.href \|\| this.disabled) {\n return;\n }\n\n const target = event.target as Element;\n\n // Ensure event.target is an Element with matches method before proceeding\n if (!target \|\| typeof target.matches !== 'function') {\n return;\n }\n const form = this.el.closest('form');\n\n // Check if the Enter key was pressed in a form input within the same form\n if (!form \|\| !target \|\| !form.contains(target)) {\n return;\n }\n\n // Check if target is a form input element (exclude reset buttons)\n const isFormInput = target.matches('input:not([type=\"submit\"]):not([type=\"button\"]):not([type=\"reset\"])') \|\|\n target.matches('pds-input') \|\|\n target.matches('pds-select') \|\|\n target.matches('pds-switch') \|\|\n target.matches('pds-checkbox') \|\|\n target.matches('pds-radio');\n\n if (isFormInput) {\n // Find all submit buttons in the form and check their actual properties\n const allSubmitButtons = Array.from(form.querySelectorAll('pds-button, button[type=\"submit\"], input[type=\"submit\"]'));\n const enabledSubmitButtons = allSubmitButtons.filter(button => {\n if (button.tagName.toLowerCase() === 'pds-button') {\n const pdsButton = button as HTMLPdsButtonElement;\n return pdsButton.type === 'submit' && !pdsButton.disabled;\n } else {\n return !button.hasAttribute('disabled');\n }\n });\n\n // Only synthesize click if this button is strictly the first enabled submit button\n if (enabledSubmitButtons.length > 0 && enabledSubmitButtons[0] === this.el) {\n event.preventDefault();\n this.el.click();\n }\n }\n }\n\n\n private handleClick = (ev: Event) => {\n if (this.loading) {\n ev.preventDefault();\n return;\n }\n\n // Prevent form submission for disabled buttons\n if (this.disabled) {\n ev.preventDefault();\n return;\n }\n\n if (!this.href && this.type != 'button') {\n // Handle form submission for Shadow DOM buttons\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form');\n if (form) {\n ev.preventDefault();\n\n const fakeButton = document.createElement('button');\n fakeButton.type = this.type;\n fakeButton.style.display = 'none';\n form.appendChild(fakeButton);\n fakeButton.click();\n fakeButton.remove();\n }\n }\n }\n this.pdsClick.emit(ev);\n };\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n if (this.size && this.size !== 'default') {\n classNames.push('pds-button--' + this.size);\n }\n\n if (this.iconOnly) {\n classNames.push('pds-button--icon-only');\n }\n\n if (this.loading) {\n classNames.push('pds-button--loading');\n }\n\n return classNames.join(' ');\n }\n\n private renderStartContent() {\n if (this.variant === 'filter') {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={addCircle} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n );\n }\n\n // Deprecated icon prop still takes precedence over start slot\n const hasIcon = this.icon && this.variant !== 'disclosure';\n if (Boolean(hasIcon)) {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} name={this.icon} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n );\n }\n\n // Always render the start slot so slotted content is projected reliably.\n // CSS hides the wrapper when no content is slotted (prevents empty gap space).\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"start\" /></span>;\n }\n\n private renderEndContent() {\n if (this.iconOnly) {\n return null;\n }\n\n if (this.variant === 'disclosure') {\n return (\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={caretDown} part=\"caret\" aria-hidden=\"true\"></pds-icon>\n );\n }\n\n // Always render the end slot so slotted content is projected reliably.\n // CSS hides the wrapper when no content is slotted (prevents empty gap space).\n return <span class={`pds-button__icon ${this.loading ? 'pds-button__icon--hidden' : ''}`}><slot name=\"end\" /></span>;\n }\n\n render() {\n // Common props for both button and anchor elements\n const commonProps = {\n class: this.classNames(),\n part: 'button',\n };\n\n const attributes = () => {\n if (this.href) {\n return {\n // Anchor element props\n ...commonProps,\n href: this.disabled ? null : this.href,\n target: this.target,\n };\n }\n\n return {\n // Button element props\n ...commonProps,\n 'aria-busy': this.loading ? 'true' : null,\n 'aria-live': this.loading ? 'polite' : null,\n 'disabled': this.disabled,\n 'name': this.name,\n 'type': this.type,\n 'value': this.value,\n };\n };\n\n const ContentElement = this.href ? 'a' : 'button';\n\n // Hide text when loading or iconOnly is true\n const hideText = this.loading \|\| this.iconOnly;\n\n const content = (\n <div class=\"pds-button__content\" part=\"button-content\">\n {this.renderStartContent()}\n\n <span class={`pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`} part=\"button-text\">\n <slot />\n </span>\n\n {this.loading && (\n <span class=\"pds-button__loader\">\n <pds-loader is-loading={true} size=\"var(--pine-font-size-body-2xl)\" variant=\"spinner\" exportparts=\"loader-svg\">\n Loading...\n </pds-loader>\n </span>\n )}\n\n {this.renderEndContent()}\n </div>\n );\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <ContentElement {...attributes()}>\n {content}\n </ContentElement>\n </Host>\n );\n }\n}\n"],"version":3}

package/components/pds-dropdown-menu-item.js CHANGED Viewed

@@ -80,14 +80,14 @@ const PdsDropdownMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class PdsDropdown
             }, 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: '2a0603c754506f9ff9293db0868342a057265b64', 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: '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()));
     }
     get host() { return this; }
     static get style() { return pdsDropdownMenuItemCss; }
 }, [257, "pds-dropdown-menu-item", {
         "componentId": [1, "component-id"],
         "destructive": [4],
-        "disabled": [4],
+        "disabled": [516],
         "href": [1],
         "external": [516],
         "target": [513],

package/components/pds-dropdown-menu-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-dropdown-menu-item.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,soEAAsoE;;MCQxpEA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAA,WAAA,CAAA;AALhC,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAaE;;;AAGG;AACK,QAAA,IAAW,CAAA,WAAA,GAAY,KAAK;AAEpC;;;AAGG;~~AACK~~,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;~~AAQjC~~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","names":["PdsDropdownMenuItem","__stencil_proxyCustomElement"],"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() 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"],"version":3}
1	+ {"file":"pds-dropdown-menu-item.js","mappings":"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","names":["PdsDropdownMenuItem","__stencil_proxyCustomElement"],"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"],"version":3}

package/components/pds-dropdown-menu.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom.js';
 import { d as defineCustomElement$2 } from './pds-box2.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);-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);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);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]){cursor:not-allowed;opacity:0.5;pointer-events:none}";
 const PdsDropdownMenu$1 = /*@__PURE__*/ proxyCustomElement(class PdsDropdownMenu extends HTMLElement {
     constructor(registerHost) {

package/components/pds-dropdown-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-dropdown-menu.js","mappings":"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","names":["PdsDropdownMenu","__stencil_proxyCustomElement"],"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);\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);\n gap: var(--pine-dimension-xs);\n margin: calc(var(--pine-border-width) + 2px);\n padding: var(--pine-dimension-xs);\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"],"version":3}
1	+ {"file":"pds-dropdown-menu.js","mappings":"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","names":["PdsDropdownMenu","__stencil_proxyCustomElement"],"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"],"version":3}

package/dist/cjs/{form-hmpgbT1I.js → form-DUqlzovE.js} RENAMED Viewed

@@ -36,6 +36,8 @@ const isRequired = (target, component) => {
  * @param type - The type value (string literal) or a getter function that returns the type
  */
 function exposeTypeProperty(element, type) {
+    if (Object.getOwnPropertyDescriptor(element, 'type'))
+        return;
     Object.defineProperty(element, 'type', {
         get: typeof type === 'function' ? type : () => type,
         enumerable: true,
@@ -47,6 +49,6 @@ exports.assignDescription = assignDescription;
 exports.exposeTypeProperty = exposeTypeProperty;
 exports.isRequired = isRequired;
 exports.messageId = messageId;
-//# sourceMappingURL=form-hmpgbT1I.js.map
+//# sourceMappingURL=form-DUqlzovE.js.map
-//# sourceMappingURL=form-hmpgbT1I.js.map
+//# sourceMappingURL=form-DUqlzovE.js.map

package/dist/{esm-es5/form-DwjNklzi.js.map → cjs/form-DUqlzovE.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"form-~~DwjNklzi~~.js","sources":["src/utils/form.ts"],"sourcesContent":["/*\n Create id for messaging\n /\nexport const messageId = (id: string, messageType: string) => {\n return `${id}__${messageType}-message`;\n};\n\n/\n Assign aria-description id to relate messages with form element\n /\nexport const assignDescription = (id: string, invalid: boolean, helperMessage: string) => {\n if (!helperMessage) return\n\n let relatedId = messageId(id, 'helper')\n\n if (invalid) relatedId = messageId(id, 'error');\n\n return relatedId;\n};\n\n/\n Updates the `invalid` prop of a form element based on it's values validity\n /\nexport const isRequired = (target, component) => {\n if ( !target \|\| !component ) return;\n if (component.required === true) {\n (target.checkValidity() === false) ? component.invalid = true : component.invalid = false;\n }\n}\n\n/\n Exposes a readonly type property on a custom form element to match native form element behavior.\n * This makes the type property enumerable and accessible via element.type, matching native HTML elements.\n * The property is non-configurable, preventing it from being redefined or deleted at runtime.\n \n @param element - The custom element to add the type property to\n * @param type - The type value (string literal) or a getter function that returns the type\n */\nexport function exposeTypeProperty(element: Element, type: string \| (() => string)) {\n Object.defineProperty(element, 'type', {\n get: typeof type === 'function' ? type : () => type,\n enumerable: true,\n configurable: false\n });\n}\n"],"names":[],"mappings":"AAAA;;AAEG;MACU,SAAS,GAAG,CAAC,EAAU,EAAE,WAAmB,KAAI;AAC3D,IAAA,OAAO,CAAG,EAAA,EAAE,CAAK,EAAA,EAAA,WAAW,UAAU;AACxC;AAEA;;AAEG;AACU,MAAA,iBAAiB,GAAG,CAAC,EAAU,EAAE,OAAgB,EAAE,aAAqB,KAAI;AACvF,IAAA,IAAI,CAAC,aAAa;QAAE;IAEpB,IAAI,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC;AAEvC,IAAA,IAAI,OAAO;AAAE,QAAA,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,OAAO,CAAC;AAE/C,IAAA,OAAO,SAAS;AAClB;AAEA;;AAEG;MACU,UAAU,GAAG,CAAC,MAAM,EAAE,SAAS,KAAI;AAC9C,IAAA,IAAK,CAAC,MAAM,IAAI,CAAC,SAAS;QAAG;AAC7B,IAAA,IAAI,SAAS,CAAC,QAAQ,KAAK,IAAI,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,KAAK,IAAI,SAAS,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,OAAO,GAAG,KAAK;;AAE7F;AAEA;;;;;;;AAOG;AACa,SAAA,kBAAkB,CAAC,OAAgB,EAAE,IAA6B,EAAA;AAChF,IAAA,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE;AACrC,QAAA,GAAG,EAAE,OAAO,IAAI,KAAK,UAAU,GAAG,IAAI,GAAG,MAAM,IAAI;AACnD,QAAA,UAAU,EAAE,IAAI;AAChB,QAAA,YAAY,EAAE;AACf,KAAA,CAAC;AACJ~~;;;;~~"}
1	+ {"version":3,"file":"form-DUqlzovE.js","sources":["src/utils/form.ts"],"sourcesContent":["/*\n Create id for messaging\n /\nexport const messageId = (id: string, messageType: string) => {\n return `${id}__${messageType}-message`;\n};\n\n/\n Assign aria-description id to relate messages with form element\n /\nexport const assignDescription = (id: string, invalid: boolean, helperMessage: string) => {\n if (!helperMessage) return\n\n let relatedId = messageId(id, 'helper')\n\n if (invalid) relatedId = messageId(id, 'error');\n\n return relatedId;\n};\n\n/\n Updates the `invalid` prop of a form element based on it's values validity\n /\nexport const isRequired = (target, component) => {\n if ( !target \|\| !component ) return;\n if (component.required === true) {\n (target.checkValidity() === false) ? component.invalid = true : component.invalid = false;\n }\n}\n\n/\n Exposes a readonly type property on a custom form element to match native form element behavior.\n * This makes the type property enumerable and accessible via element.type, matching native HTML elements.\n * The property is non-configurable, preventing it from being redefined or deleted at runtime.\n \n @param element - The custom element to add the type property to\n * @param type - The type value (string literal) or a getter function that returns the type\n */\nexport function exposeTypeProperty(element: Element, type: string \| (() => string)) {\n if (Object.getOwnPropertyDescriptor(element, 'type')) return;\n\n Object.defineProperty(element, 'type', {\n get: typeof type === 'function' ? type : () => type,\n enumerable: true,\n configurable: false\n });\n}\n"],"names":[],"mappings":";;AAAA;;AAEG;MACU,SAAS,GAAG,CAAC,EAAU,EAAE,WAAmB,KAAI;AAC3D,IAAA,OAAO,CAAG,EAAA,EAAE,CAAK,EAAA,EAAA,WAAW,UAAU;AACxC;AAEA;;AAEG;AACU,MAAA,iBAAiB,GAAG,CAAC,EAAU,EAAE,OAAgB,EAAE,aAAqB,KAAI;AACvF,IAAA,IAAI,CAAC,aAAa;QAAE;IAEpB,IAAI,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,QAAQ,CAAC;AAEvC,IAAA,IAAI,OAAO;AAAE,QAAA,SAAS,GAAG,SAAS,CAAC,EAAE,EAAE,OAAO,CAAC;AAE/C,IAAA,OAAO,SAAS;AAClB;AAEA;;AAEG;MACU,UAAU,GAAG,CAAC,MAAM,EAAE,SAAS,KAAI;AAC9C,IAAA,IAAK,CAAC,MAAM,IAAI,CAAC,SAAS;QAAG;AAC7B,IAAA,IAAI,SAAS,CAAC,QAAQ,KAAK,IAAI,EAAE;QAC/B,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,KAAK,IAAI,SAAS,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,OAAO,GAAG,KAAK;;AAE7F;AAEA;;;;;;;AAOG;AACa,SAAA,kBAAkB,CAAC,OAAgB,EAAE,IAA6B,EAAA;AAChF,IAAA,IAAI,MAAM,CAAC,wBAAwB,CAAC,OAAO,EAAE,MAAM,CAAC;QAAE;AAEtD,IAAA,MAAM,CAAC,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE;AACrC,QAAA,GAAG,EAAE,OAAO,IAAI,KAAK,UAAU,GAAG,IAAI,GAAG,MAAM,IAAI;AACnD,QAAA,UAAU,EAAE,IAAI;AAChB,QAAA,YAAY,EAAE;AACf,KAAA,CAAC;AACJ;;;;;;;"}