@fluid-topics/ftds-popover 2.2.7 → 2.2.9

package/build/ftds-popover.js

@@ -20,7 +20,7 @@ export class FtdsPopover extends FtLitElement {
         super(...arguments);
         this.closeButtonLabel = "close info";
         this.openButtonIcon = FtdsIcons.QUESTION;
-        this.openButtonIconVariant = FtdsIconVariants.solid;
+        this.openButtonIconVariant = FtdsIconVariants.regular;
         this.openButtonLabel = "more info";
         this.openButtonTooltipPosition = "bottom";
         this.opened = false;
@@ -107,11 +107,15 @@ export class FtdsPopover extends FtLitElement {
             <ftds-button @focusin=${this.close}
                          secondary
                          part="opening-button"
-                         icon="${this.openButtonIcon}"
-                         variant="${this.openButtonIconVariant}"
-                         size="${this.openButtonSize}" family="${this.openButtonFamily}"
-                         label="${this.openButtonLabel}" tooltipposition="${this.openButtonTooltipPosition}"
-                         aria-haspopup="true" aria-expanded="${this.opened}" aria-controls="${this.wrapperId}"
+                         .icon=${this.openButtonIcon}
+                         .iconVariant=${this.openButtonIconVariant}
+                         .family=${this.openButtonFamily}
+                         .label=${this.openButtonLabel}
+                         .tooltipPosition=${this.openButtonTooltipPosition}
+                         size="${this.openButtonSize}"
+                         aria-haspopup="true"
+                         aria-expanded="${this.opened}"
+                         aria-controls="${this.wrapperId}"
                          @click=${this.open}>
             </ftds-button>
         `;
@@ -236,10 +240,10 @@ __decorate([
     property()
 ], FtdsPopover.prototype, "closeButtonLabel", void 0);
 __decorate([
-    property()
+    property({ type: FtdsIcons })
 ], FtdsPopover.prototype, "openButtonIcon", void 0);
 __decorate([
-    property()
+    property({ type: FtdsIconVariants })
 ], FtdsPopover.prototype, "openButtonIconVariant", void 0);
 __decorate([
     property()

package/build/ftds-popover.light.js

@@ -2093,7 +2093,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
     .hidden {
         display: none;
     }
-`;var ii=E(Cr());var Q=function(e,t,n,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,n):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,n,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(i=(a<3?s(i):a>3?s(t,n,i):s(t,n))||i);return a>3&&i&&Object.defineProperty(t,n,i),i},B=class extends hr.FtLitElement{constructor(){super(...arguments),this.closeButtonLabel="close info",this.openButtonIcon=p.QUESTION,this.openButtonIconVariant=u.solid,this.openButtonLabel="more info",this.openButtonTooltipPosition="bottom",this.opened=!1,this.hidden=!1,this.openButtonFamily=Je.info,this.isTriggerSlotAssigned=!1,this.heading="",this.margins=rn.default,this.wrapperId="ftds-popover-wrapper",this.headingId="ftds-popover-heading",this.contentId="ftds-popover-content",this.maxWidth=G.maxWidth,this.openButtonSize=Be.small,this.onTriggerSlotChange=()=>{var t,n;let o=(n=(t=this.triggerSlot)===null||t===void 0?void 0:t.assignedElements())!==null&&n!==void 0?n:[];this.isTriggerSlotAssigned=o.length>0},this.onTriggerKeydown=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.open())},this.watchFocusIn=t=>{this.popoverWrapper&&!t.composedPath().includes(this.popoverWrapper)&&this.close()},this.watchEscapeKey=t=>{var n;t.key==="Escape"&&(this.close(),(n=this.openingElement)===null||n===void 0||n.focus())}}get openingElement(){var t;let n=(t=this.triggerSlot)===null||t===void 0?void 0:t.assignedElements();return n?.length&&n[0]instanceof HTMLElement?n[0]:this.openingButton}render(){let t={opened:this.opened};return this.hidden?_e.nothing:_e.html`
+`;var ii=E(Cr());var Q=function(e,t,n,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,n):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(e,t,n,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(i=(a<3?s(i):a>3?s(t,n,i):s(t,n))||i);return a>3&&i&&Object.defineProperty(t,n,i),i},B=class extends hr.FtLitElement{constructor(){super(...arguments),this.closeButtonLabel="close info",this.openButtonIcon=p.QUESTION,this.openButtonIconVariant=u.regular,this.openButtonLabel="more info",this.openButtonTooltipPosition="bottom",this.opened=!1,this.hidden=!1,this.openButtonFamily=Je.info,this.isTriggerSlotAssigned=!1,this.heading="",this.margins=rn.default,this.wrapperId="ftds-popover-wrapper",this.headingId="ftds-popover-heading",this.contentId="ftds-popover-content",this.maxWidth=G.maxWidth,this.openButtonSize=Be.small,this.onTriggerSlotChange=()=>{var t,n;let o=(n=(t=this.triggerSlot)===null||t===void 0?void 0:t.assignedElements())!==null&&n!==void 0?n:[];this.isTriggerSlotAssigned=o.length>0},this.onTriggerKeydown=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.open())},this.watchFocusIn=t=>{this.popoverWrapper&&!t.composedPath().includes(this.popoverWrapper)&&this.close()},this.watchEscapeKey=t=>{var n;t.key==="Escape"&&(this.close(),(n=this.openingElement)===null||n===void 0||n.focus())}}get openingElement(){var t;let n=(t=this.triggerSlot)===null||t===void 0?void 0:t.assignedElements();return n?.length&&n[0]instanceof HTMLElement?n[0]:this.openingButton}render(){let t={opened:this.opened};return this.hidden?_e.nothing:_e.html`
             <div part="root-container" class="${(0,ii.classMap)(t)}">
                 <slot name="trigger"
                       @slotchange=${this.onTriggerSlotChange}
@@ -2121,11 +2121,15 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
             <ftds-button @focusin=${this.close}
                          secondary
                          part="opening-button"
-                         icon="${this.openButtonIcon}"
-                         variant="${this.openButtonIconVariant}"
-                         size="${this.openButtonSize}" family="${this.openButtonFamily}"
-                         label="${this.openButtonLabel}" tooltipposition="${this.openButtonTooltipPosition}"
-                         aria-haspopup="true" aria-expanded="${this.opened}" aria-controls="${this.wrapperId}"
+                         .icon=${this.openButtonIcon}
+                         .iconVariant=${this.openButtonIconVariant}
+                         .family=${this.openButtonFamily}
+                         .label=${this.openButtonLabel}
+                         .tooltipPosition=${this.openButtonTooltipPosition}
+                         size="${this.openButtonSize}"
+                         aria-haspopup="true"
+                         aria-expanded="${this.opened}"
+                         aria-controls="${this.wrapperId}"
                          @click=${this.open}>
             </ftds-button>
         `}renderClosingButton(){return _e.html`
@@ -2160,7 +2164,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
             <div part="popover-sections">
                 <slot name="sections" part="popover-sections-slot"></slot>
             </div>
-        `}hideUnusedSlots(){var t,n,o;(t=this.popoverLinkTypography)===null||t===void 0||t.classList.toggle("hidden",this.hasEmptySlot(this.slottedLinkContent)),(n=this.popoverContentDiv)===null||n===void 0||n.classList.toggle("hidden",this.hasEmptySlot(this.popoverContentSlot)),(o=this.popoverSectionsDiv)===null||o===void 0||o.classList.toggle("hidden",this.hasEmptySlot(this.popoverSectionsSlot))}hasEmptySlot(t){return(0,hr.unslotText)(t).trim().length===0}updated(t){super.updated(t),t.has("opened")&&(this.opened?setTimeout(()=>{this.positionWrapper(),document.addEventListener("keydown",this.watchEscapeKey),document.addEventListener("focusin",this.watchFocusIn)},0):(document.removeEventListener("keydown",this.watchEscapeKey),document.removeEventListener("focusin",this.watchFocusIn)))}close(){this.opened=!1,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!1}}))}open(){this.opened=!0,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!0}}))}closeAndFocusOpeningButton(){var t;this.close(),(t=this.openingElement)===null||t===void 0||t.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&this.openingElement instanceof U&&this.openingElement.showTooltip()}async positionWrapper(){var t,n;if(this.popoverWrapper){if(this.popoverWrapper.classList.remove("positioned"),this.popoverWrapper.style.left="",this.popoverWrapper.style.top="",this.openingElement){let i={placement:"bottom-start",allowedPlacements:["bottom-start","right-start","bottom-end","right-end","left-start","left-end","top-start","top-end"],maxWidthCssVariable:this.maxWidth},{x:s,y:l}=await(0,hr.computeOffsetAutoPosition)(this.openingElement,this.popoverWrapper,i);this.popoverWrapper.style.left=`${s}px`,this.popoverWrapper.style.top=`${l}px`}this.popoverWrapper.classList.add("positioned")}this.hideUnusedSlots(),(t=this.closingButton)===null||t===void 0||t.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&((n=this.closingButton)===null||n===void 0||n.showTooltip())}};B.styles=C0;B.elementDefinitions={"ftds-typography":me,"ftds-button":U};Q([(0,K.property)()],B.prototype,"closeButtonLabel",void 0);Q([(0,K.property)()],B.prototype,"openButtonIcon",void 0);Q([(0,K.property)()],B.prototype,"openButtonIconVariant",void 0);Q([(0,K.property)()],B.prototype,"openButtonLabel",void 0);Q([(0,K.property)()],B.prototype,"openButtonTooltipPosition",void 0);Q([(0,K.property)({type:Boolean})],B.prototype,"opened",void 0);Q([(0,K.property)({type:Boolean})],B.prototype,"hidden",void 0);Q([(0,K.property)({type:Je})],B.prototype,"openButtonFamily",void 0);Q([(0,K.state)()],B.prototype,"isTriggerSlotAssigned",void 0);Q([(0,K.property)()],B.prototype,"heading",void 0);Q([(0,K.property)()],B.prototype,"margins",void 0);Q([(0,K.query)('[part="wrapper"]')],B.prototype,"popoverWrapper",void 0);Q([(0,K.query)('slot[name="trigger"]')],B.prototype,"triggerSlot",void 0);Q([(0,K.query)('[part="opening-button"]')],B.prototype,"openingButton",void 0);Q([(0,K.query)('[part="closing-button"]')],B.prototype,"closingButton",void 0);Q([(0,K.query)('[part="content"]')],B.prototype,"popoverContentDiv",void 0);Q([(0,K.query)('[part="popover-content-slot"]')],B.prototype,"popoverContentSlot",void 0);Q([(0,K.query)('[part="popover-link"]')],B.prototype,"slottedLinkContent",void 0);Q([(0,K.query)('[part="popover-link-typography"]')],B.prototype,"popoverLinkTypography",void 0);Q([(0,K.query)('[part="popover-sections"]')],B.prototype,"popoverSectionsDiv",void 0);Q([(0,K.query)('[part="popover-sections-slot"]')],B.prototype,"popoverSectionsSlot",void 0);var nn=E(q()),on=E(ce()),Lo=E(P());var E0=E(q());var L0=E0.css`
+        `}hideUnusedSlots(){var t,n,o;(t=this.popoverLinkTypography)===null||t===void 0||t.classList.toggle("hidden",this.hasEmptySlot(this.slottedLinkContent)),(n=this.popoverContentDiv)===null||n===void 0||n.classList.toggle("hidden",this.hasEmptySlot(this.popoverContentSlot)),(o=this.popoverSectionsDiv)===null||o===void 0||o.classList.toggle("hidden",this.hasEmptySlot(this.popoverSectionsSlot))}hasEmptySlot(t){return(0,hr.unslotText)(t).trim().length===0}updated(t){super.updated(t),t.has("opened")&&(this.opened?setTimeout(()=>{this.positionWrapper(),document.addEventListener("keydown",this.watchEscapeKey),document.addEventListener("focusin",this.watchFocusIn)},0):(document.removeEventListener("keydown",this.watchEscapeKey),document.removeEventListener("focusin",this.watchFocusIn)))}close(){this.opened=!1,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!1}}))}open(){this.opened=!0,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!0}}))}closeAndFocusOpeningButton(){var t;this.close(),(t=this.openingElement)===null||t===void 0||t.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&this.openingElement instanceof U&&this.openingElement.showTooltip()}async positionWrapper(){var t,n;if(this.popoverWrapper){if(this.popoverWrapper.classList.remove("positioned"),this.popoverWrapper.style.left="",this.popoverWrapper.style.top="",this.openingElement){let i={placement:"bottom-start",allowedPlacements:["bottom-start","right-start","bottom-end","right-end","left-start","left-end","top-start","top-end"],maxWidthCssVariable:this.maxWidth},{x:s,y:l}=await(0,hr.computeOffsetAutoPosition)(this.openingElement,this.popoverWrapper,i);this.popoverWrapper.style.left=`${s}px`,this.popoverWrapper.style.top=`${l}px`}this.popoverWrapper.classList.add("positioned")}this.hideUnusedSlots(),(t=this.closingButton)===null||t===void 0||t.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&((n=this.closingButton)===null||n===void 0||n.showTooltip())}};B.styles=C0;B.elementDefinitions={"ftds-typography":me,"ftds-button":U};Q([(0,K.property)()],B.prototype,"closeButtonLabel",void 0);Q([(0,K.property)({type:p})],B.prototype,"openButtonIcon",void 0);Q([(0,K.property)({type:u})],B.prototype,"openButtonIconVariant",void 0);Q([(0,K.property)()],B.prototype,"openButtonLabel",void 0);Q([(0,K.property)()],B.prototype,"openButtonTooltipPosition",void 0);Q([(0,K.property)({type:Boolean})],B.prototype,"opened",void 0);Q([(0,K.property)({type:Boolean})],B.prototype,"hidden",void 0);Q([(0,K.property)({type:Je})],B.prototype,"openButtonFamily",void 0);Q([(0,K.state)()],B.prototype,"isTriggerSlotAssigned",void 0);Q([(0,K.property)()],B.prototype,"heading",void 0);Q([(0,K.property)()],B.prototype,"margins",void 0);Q([(0,K.query)('[part="wrapper"]')],B.prototype,"popoverWrapper",void 0);Q([(0,K.query)('slot[name="trigger"]')],B.prototype,"triggerSlot",void 0);Q([(0,K.query)('[part="opening-button"]')],B.prototype,"openingButton",void 0);Q([(0,K.query)('[part="closing-button"]')],B.prototype,"closingButton",void 0);Q([(0,K.query)('[part="content"]')],B.prototype,"popoverContentDiv",void 0);Q([(0,K.query)('[part="popover-content-slot"]')],B.prototype,"popoverContentSlot",void 0);Q([(0,K.query)('[part="popover-link"]')],B.prototype,"slottedLinkContent",void 0);Q([(0,K.query)('[part="popover-link-typography"]')],B.prototype,"popoverLinkTypography",void 0);Q([(0,K.query)('[part="popover-sections"]')],B.prototype,"popoverSectionsDiv",void 0);Q([(0,K.query)('[part="popover-sections-slot"]')],B.prototype,"popoverSectionsSlot",void 0);var nn=E(q()),on=E(ce()),Lo=E(P());var E0=E(q());var L0=E0.css`
     .ftds-popover-section--heading ftds-typography {
         flex-grow: 1;
         flex-shrink: 1;

package/build/ftds-popover.min.js

@@ -2173,7 +2173,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
     .hidden {
         display: none;
     }
-`;var ie=function(t,e,r,o){var a=arguments.length,i=a<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(t,e,r,o);else for(var c=t.length-1;c>=0;c--)(s=t[c])&&(i=(a<3?s(i):a>3?s(e,r,i):s(e,r))||i);return a>3&&i&&Object.defineProperty(e,r,i),i},Z=class extends q{constructor(){super(...arguments),this.closeButtonLabel="close info",this.openButtonIcon=h.QUESTION,this.openButtonIconVariant=p.solid,this.openButtonLabel="more info",this.openButtonTooltipPosition="bottom",this.opened=!1,this.hidden=!1,this.openButtonFamily=Fe.info,this.isTriggerSlotAssigned=!1,this.heading="",this.margins=Po.default,this.wrapperId="ftds-popover-wrapper",this.headingId="ftds-popover-heading",this.contentId="ftds-popover-content",this.maxWidth=X.maxWidth,this.openButtonSize=ke.small,this.onTriggerSlotChange=()=>{var e,r;let o=(r=(e=this.triggerSlot)===null||e===void 0?void 0:e.assignedElements())!==null&&r!==void 0?r:[];this.isTriggerSlotAssigned=o.length>0},this.onTriggerKeydown=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.open())},this.watchFocusIn=e=>{this.popoverWrapper&&!e.composedPath().includes(this.popoverWrapper)&&this.close()},this.watchEscapeKey=e=>{var r;e.key==="Escape"&&(this.close(),(r=this.openingElement)===null||r===void 0||r.focus())}}get openingElement(){var e;let r=(e=this.triggerSlot)===null||e===void 0?void 0:e.assignedElements();return r?.length&&r[0]instanceof HTMLElement?r[0]:this.openingButton}render(){let e={opened:this.opened};return this.hidden?j:W`
+`;var ie=function(t,e,r,o){var a=arguments.length,i=a<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(t,e,r,o);else for(var c=t.length-1;c>=0;c--)(s=t[c])&&(i=(a<3?s(i):a>3?s(e,r,i):s(e,r))||i);return a>3&&i&&Object.defineProperty(e,r,i),i},Z=class extends q{constructor(){super(...arguments),this.closeButtonLabel="close info",this.openButtonIcon=h.QUESTION,this.openButtonIconVariant=p.regular,this.openButtonLabel="more info",this.openButtonTooltipPosition="bottom",this.opened=!1,this.hidden=!1,this.openButtonFamily=Fe.info,this.isTriggerSlotAssigned=!1,this.heading="",this.margins=Po.default,this.wrapperId="ftds-popover-wrapper",this.headingId="ftds-popover-heading",this.contentId="ftds-popover-content",this.maxWidth=X.maxWidth,this.openButtonSize=ke.small,this.onTriggerSlotChange=()=>{var e,r;let o=(r=(e=this.triggerSlot)===null||e===void 0?void 0:e.assignedElements())!==null&&r!==void 0?r:[];this.isTriggerSlotAssigned=o.length>0},this.onTriggerKeydown=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.open())},this.watchFocusIn=e=>{this.popoverWrapper&&!e.composedPath().includes(this.popoverWrapper)&&this.close()},this.watchEscapeKey=e=>{var r;e.key==="Escape"&&(this.close(),(r=this.openingElement)===null||r===void 0||r.focus())}}get openingElement(){var e;let r=(e=this.triggerSlot)===null||e===void 0?void 0:e.assignedElements();return r?.length&&r[0]instanceof HTMLElement?r[0]:this.openingButton}render(){let e={opened:this.opened};return this.hidden?j:W`
             <div part="root-container" class="${De(e)}">
                 <slot name="trigger"
                       @slotchange=${this.onTriggerSlotChange}
@@ -2201,11 +2201,15 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
             <ftds-button @focusin=${this.close}
                          secondary
                          part="opening-button"
-                         icon="${this.openButtonIcon}"
-                         variant="${this.openButtonIconVariant}"
-                         size="${this.openButtonSize}" family="${this.openButtonFamily}"
-                         label="${this.openButtonLabel}" tooltipposition="${this.openButtonTooltipPosition}"
-                         aria-haspopup="true" aria-expanded="${this.opened}" aria-controls="${this.wrapperId}"
+                         .icon=${this.openButtonIcon}
+                         .iconVariant=${this.openButtonIconVariant}
+                         .family=${this.openButtonFamily}
+                         .label=${this.openButtonLabel}
+                         .tooltipPosition=${this.openButtonTooltipPosition}
+                         size="${this.openButtonSize}"
+                         aria-haspopup="true"
+                         aria-expanded="${this.opened}"
+                         aria-controls="${this.wrapperId}"
                          @click=${this.open}>
             </ftds-button>
         `}renderClosingButton(){return W`
@@ -2240,7 +2244,7 @@ If it declares any Font Awesome CSS pseudo-elements, they will not be rendered a
             <div part="popover-sections">
                 <slot name="sections" part="popover-sections-slot"></slot>
             </div>
-        `}hideUnusedSlots(){var e,r,o;(e=this.popoverLinkTypography)===null||e===void 0||e.classList.toggle("hidden",this.hasEmptySlot(this.slottedLinkContent)),(r=this.popoverContentDiv)===null||r===void 0||r.classList.toggle("hidden",this.hasEmptySlot(this.popoverContentSlot)),(o=this.popoverSectionsDiv)===null||o===void 0||o.classList.toggle("hidden",this.hasEmptySlot(this.popoverSectionsSlot))}hasEmptySlot(e){return gt(e).trim().length===0}updated(e){super.updated(e),e.has("opened")&&(this.opened?setTimeout(()=>{this.positionWrapper(),document.addEventListener("keydown",this.watchEscapeKey),document.addEventListener("focusin",this.watchFocusIn)},0):(document.removeEventListener("keydown",this.watchEscapeKey),document.removeEventListener("focusin",this.watchFocusIn)))}close(){this.opened=!1,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!1}}))}open(){this.opened=!0,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!0}}))}closeAndFocusOpeningButton(){var e;this.close(),(e=this.openingElement)===null||e===void 0||e.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&this.openingElement instanceof K&&this.openingElement.showTooltip()}async positionWrapper(){var e,r;if(this.popoverWrapper){if(this.popoverWrapper.classList.remove("positioned"),this.popoverWrapper.style.left="",this.popoverWrapper.style.top="",this.openingElement){let i={placement:"bottom-start",allowedPlacements:["bottom-start","right-start","bottom-end","right-end","left-start","left-end","top-start","top-end"],maxWidthCssVariable:this.maxWidth},{x:s,y:c}=await xi(this.openingElement,this.popoverWrapper,i);this.popoverWrapper.style.left=`${s}px`,this.popoverWrapper.style.top=`${c}px`}this.popoverWrapper.classList.add("positioned")}this.hideUnusedSlots(),(e=this.closingButton)===null||e===void 0||e.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&((r=this.closingButton)===null||r===void 0||r.showTooltip())}};Z.styles=X0;Z.elementDefinitions={"ftds-typography":we,"ftds-button":K};ie([A()],Z.prototype,"closeButtonLabel",void 0);ie([A()],Z.prototype,"openButtonIcon",void 0);ie([A()],Z.prototype,"openButtonIconVariant",void 0);ie([A()],Z.prototype,"openButtonLabel",void 0);ie([A()],Z.prototype,"openButtonTooltipPosition",void 0);ie([A({type:Boolean})],Z.prototype,"opened",void 0);ie([A({type:Boolean})],Z.prototype,"hidden",void 0);ie([A({type:Fe})],Z.prototype,"openButtonFamily",void 0);ie([Q()],Z.prototype,"isTriggerSlotAssigned",void 0);ie([A()],Z.prototype,"heading",void 0);ie([A()],Z.prototype,"margins",void 0);ie([Y('[part="wrapper"]')],Z.prototype,"popoverWrapper",void 0);ie([Y('slot[name="trigger"]')],Z.prototype,"triggerSlot",void 0);ie([Y('[part="opening-button"]')],Z.prototype,"openingButton",void 0);ie([Y('[part="closing-button"]')],Z.prototype,"closingButton",void 0);ie([Y('[part="content"]')],Z.prototype,"popoverContentDiv",void 0);ie([Y('[part="popover-content-slot"]')],Z.prototype,"popoverContentSlot",void 0);ie([Y('[part="popover-link"]')],Z.prototype,"slottedLinkContent",void 0);ie([Y('[part="popover-link-typography"]')],Z.prototype,"popoverLinkTypography",void 0);ie([Y('[part="popover-sections"]')],Z.prototype,"popoverSectionsDiv",void 0);ie([Y('[part="popover-sections-slot"]')],Z.prototype,"popoverSectionsSlot",void 0);var Q0=F`
+        `}hideUnusedSlots(){var e,r,o;(e=this.popoverLinkTypography)===null||e===void 0||e.classList.toggle("hidden",this.hasEmptySlot(this.slottedLinkContent)),(r=this.popoverContentDiv)===null||r===void 0||r.classList.toggle("hidden",this.hasEmptySlot(this.popoverContentSlot)),(o=this.popoverSectionsDiv)===null||o===void 0||o.classList.toggle("hidden",this.hasEmptySlot(this.popoverSectionsSlot))}hasEmptySlot(e){return gt(e).trim().length===0}updated(e){super.updated(e),e.has("opened")&&(this.opened?setTimeout(()=>{this.positionWrapper(),document.addEventListener("keydown",this.watchEscapeKey),document.addEventListener("focusin",this.watchFocusIn)},0):(document.removeEventListener("keydown",this.watchEscapeKey),document.removeEventListener("focusin",this.watchFocusIn)))}close(){this.opened=!1,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!1}}))}open(){this.opened=!0,this.dispatchEvent(new CustomEvent("opened-changed",{detail:{opened:!0}}))}closeAndFocusOpeningButton(){var e;this.close(),(e=this.openingElement)===null||e===void 0||e.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&this.openingElement instanceof K&&this.openingElement.showTooltip()}async positionWrapper(){var e,r;if(this.popoverWrapper){if(this.popoverWrapper.classList.remove("positioned"),this.popoverWrapper.style.left="",this.popoverWrapper.style.top="",this.openingElement){let i={placement:"bottom-start",allowedPlacements:["bottom-start","right-start","bottom-end","right-end","left-start","left-end","top-start","top-end"],maxWidthCssVariable:this.maxWidth},{x:s,y:c}=await xi(this.openingElement,this.popoverWrapper,i);this.popoverWrapper.style.left=`${s}px`,this.popoverWrapper.style.top=`${c}px`}this.popoverWrapper.classList.add("positioned")}this.hideUnusedSlots(),(e=this.closingButton)===null||e===void 0||e.focus(),window.FluidTopicsA11yHints.isKeyboardNavigation&&((r=this.closingButton)===null||r===void 0||r.showTooltip())}};Z.styles=X0;Z.elementDefinitions={"ftds-typography":we,"ftds-button":K};ie([A()],Z.prototype,"closeButtonLabel",void 0);ie([A({type:h})],Z.prototype,"openButtonIcon",void 0);ie([A({type:p})],Z.prototype,"openButtonIconVariant",void 0);ie([A()],Z.prototype,"openButtonLabel",void 0);ie([A()],Z.prototype,"openButtonTooltipPosition",void 0);ie([A({type:Boolean})],Z.prototype,"opened",void 0);ie([A({type:Boolean})],Z.prototype,"hidden",void 0);ie([A({type:Fe})],Z.prototype,"openButtonFamily",void 0);ie([Q()],Z.prototype,"isTriggerSlotAssigned",void 0);ie([A()],Z.prototype,"heading",void 0);ie([A()],Z.prototype,"margins",void 0);ie([Y('[part="wrapper"]')],Z.prototype,"popoverWrapper",void 0);ie([Y('slot[name="trigger"]')],Z.prototype,"triggerSlot",void 0);ie([Y('[part="opening-button"]')],Z.prototype,"openingButton",void 0);ie([Y('[part="closing-button"]')],Z.prototype,"closingButton",void 0);ie([Y('[part="content"]')],Z.prototype,"popoverContentDiv",void 0);ie([Y('[part="popover-content-slot"]')],Z.prototype,"popoverContentSlot",void 0);ie([Y('[part="popover-link"]')],Z.prototype,"slottedLinkContent",void 0);ie([Y('[part="popover-link-typography"]')],Z.prototype,"popoverLinkTypography",void 0);ie([Y('[part="popover-sections"]')],Z.prototype,"popoverSectionsDiv",void 0);ie([Y('[part="popover-sections-slot"]')],Z.prototype,"popoverSectionsSlot",void 0);var Q0=F`
     .ftds-popover-section--heading ftds-typography {
         flex-grow: 1;
         flex-shrink: 1;

package/build/ftds-popover.properties.d.ts

@@ -1,4 +1,6 @@
 import { Position } from "@fluid-topics/ft-tooltip";
+import { FtdsIcons, FtdsIconVariants } from "@fluid-topics/ftds-icon";
+import { DesignSystemFamily } from "@fluid-topics/design-system-variables";
 export interface FtdsPopoverProperties {
     heading?: string;
     opened?: boolean;
@@ -7,6 +9,9 @@ export interface FtdsPopoverProperties {
     openButtonLabel?: string;
     openButtonTooltipPosition?: Position;
     margins?: FtdsPopoverMargins;
+    openButtonIcon?: FtdsIcons;
+    openButtonIconVariant?: FtdsIconVariants;
+    openButtonFamily?: DesignSystemFamily;
 }
 export declare enum FtdsPopoverMargins {
     default = "default",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fluid-topics/ftds-popover",
-    "version": "2.2.7",
+    "version": "2.2.9",
     "description": "The design system popover component",
     "keywords": [
         "Lit"
@@ -21,15 +21,15 @@
     "dependencies": {
         "@floating-ui/dom": "1.8.0",
         "@fluid-topics/design-system-variables": "3.8.0",
-        "@fluid-topics/ft-tooltip": "2.2.7",
-        "@fluid-topics/ft-wc-utils": "2.2.7",
-        "@fluid-topics/ftds-button": "2.2.7",
-        "@fluid-topics/ftds-icon": "2.2.7",
-        "@fluid-topics/ftds-typography": "2.2.7",
+        "@fluid-topics/ft-tooltip": "2.2.9",
+        "@fluid-topics/ft-wc-utils": "2.2.9",
+        "@fluid-topics/ftds-button": "2.2.9",
+        "@fluid-topics/ftds-icon": "2.2.9",
+        "@fluid-topics/ftds-typography": "2.2.9",
         "lit": "3.3.3"
     },
     "devDependencies": {
-        "@fluid-topics/ft-wc-test-utils": "2.2.7"
+        "@fluid-topics/ft-wc-test-utils": "2.2.9"
     },
-    "gitHead": "dff67505fe1e41bc42e0bdfafc7060ca40f8dc9d"
+    "gitHead": "e12bf480f5ee00623f87caff8c918fccae85585c"
 }