@fabric-msft/copilot-web 7.0.0

package/esm/components/citation/citation.js

@@ -0,0 +1,340 @@
+import { __decorate } from 'tslib';
+import { PositioningShorthand, PopoverRepositionModes, PopoverDefinition } from '@fabric-msft/fabric-web';
+import { observable, attr, booleanConverter, FASTElement } from '@microsoft/fast-element';
+import { DesignSystem } from '../design-system.js';
+import '@fluentui/web-components';
+
+/**
+ * Citation
+ * @summary A citation component that provides context to references through an interactive element with popover functionality. It allows users to view reference information through hover or click interactions, with configurable positioning and behavior.
+ *
+ * @example
+ * ```html
+ * <fabric-citation
+ *   href="https://example.com"
+ *   size="medium"
+ *   popover-position="belowCenter"
+ *   reposition-mode="flip"
+ *   show="false"
+ *   target="_blank"
+ * >
+ *   <span slot="start">See also</span>
+ *   <span slot="index">1</span>
+ *   <span slot="end">for more information</span>
+ *   <fabric-citation-reference slot="popover" citation-href="https://example.com">
+ *     <span slot="index">1</span>
+ *     <span slot="label">Reference Title</span>
+ *     <span slot="metadata-text-one">Author Name</span>
+ *     <span slot="excerpt">Excerpt from the referenced material.</span>
+ *   </fabric-citation-reference>
+ * </fabric-citation>
+ * ```
+ *
+ * @attr {string | undefined} href - Link to the citation reference
+ * @attr {"small" | "medium" | "large" | undefined} size - Size variant of the citation
+ * @attr {PositioningShorthandValues} popover-position - Controls the position of the popover
+ * @attr {PopoverRepositionMode | undefined} reposition-mode - Controls how the popover repositions itself
+ * @attr {boolean | undefined} show - Controls visibility of the popover
+ * @attr {AnchorTarget} target - Target attribute for the citation link
+ *
+ * @prop {number} index - The numeric index of the citation
+ * @prop {Array<HTMLElement>} indexReference - Reference to the index slot elements
+ * @prop {Array<HTMLElement>} popoverContent - Collection of elements in the popover slot
+ * @prop {boolean} hasPopover - Whether the citation has popover content
+ * @prop {HTMLElement | undefined} popoverReference - Reference to the popover component
+ * @prop {string | undefined} href - Link to the citation reference
+ * @prop {"small" | "medium" | "large" | undefined} size - Size variant of the citation
+ * @prop {PositioningShorthandValues} popoverPosition - Controls the position of the popover
+ * @prop {PopoverRepositionMode | undefined} repositionMode - Controls how the popover repositions itself
+ * @prop {boolean | undefined} show - Controls visibility of the popover
+ * @prop {AnchorTarget} target - Target attribute for the citation link
+ *
+ * @slot start - Content displayed before the citation number
+ * @slot end - Content displayed after the citation number
+ * @slot index - The citation index number
+ * @slot popover - Content to be displayed in the popover when the citation is interacted with
+ *
+ * @csspart base - The base container of the citation
+ * @csspart popover-content - The content container within the popover
+ * @csspart citation-number - The clickable citation number element
+ * @csspart popover - The popover container element
+ * @csspart beak-shadow - The popover beak shadow element
+ *
+ * @method indexReferenceChanged - Updates the index when the index reference changes
+ * @method popoverContentChanged - Updates hasPopover when popover content changes
+ * @method popoverReferenceChanged - Sets up event listeners when popover reference changes
+ * @method handleHoverEnter - Handles mouse enter events for the citation
+ * @method handleHoverLeave - Handles mouse leave events for the citation
+ * @method emitMouseEnterEvent - Emits mouse enter event
+ * @method emitMouseLeaveEvent - Emits mouse leave event
+ * @method emitChangeEvent - Emits change event when popover visibility changes
+ * @method handleKeyEvents - Handles keyboard navigation events
+ * @method handlePopoverEnter - Handles mouse enter events for the popover
+ * @method handlePopoverLeave - Handles mouse leave events for the popover
+ * @method addMouseOverEventListeners - Adds mouse over event listeners
+ * @method removeMouseOverEventListeners - Removes mouse over event listeners
+ * @method addKeyboardEventListeners - Adds keyboard event listeners
+ * @method removeKeyboardEventListeners - Removes keyboard event listeners
+ * @method connectedCallback - Lifecycle callback when component is connected to DOM
+ * @method disconnectedCallback - Lifecycle callback when component is disconnected from DOM
+ *
+ * @fires mouseenter - Fires when the mouse enters the citation
+ * @fires mouseleave - Fires when the mouse leaves the citation
+ * @fires change - Fires when the popover visibility changes
+ *
+ * @extends FASTElement
+ * @tagname fabric-citation
+ * @public
+ */
+class Citation extends FASTElement {
+  /**
+   * Creates a new Citation instance and binds event handlers
+   */
+  constructor() {
+    super();
+    /**
+     * Controls the position of the popover
+     * @public
+     */
+    this.popoverPosition = PositioningShorthand.belowCenter;
+    /**
+     * Collection of elements in the popover slot
+     * @public
+     */
+    this.popoverContent = [];
+    /**
+     * Whether the citation has popover content
+     * @public
+     */
+    this.hasPopover = false;
+    /**
+     * Controls how the popover repositions itself
+     * @public
+     */
+    this.repositionMode = PopoverRepositionModes.flip;
+    /**
+     * Controls visibility of the popover
+     * @public
+     */
+    this.show = false;
+    /**
+     * Target attribute for the citation link
+     * @public
+     */
+    this.target = "_self";
+    /**
+     * Reference to the popover component
+     * @public
+     */
+    this.popoverReference = undefined;
+    /**
+     * Tracks if mouse is within popover
+     * @internal
+     */
+    this.mouseInPopover = true;
+    /**
+     * Handles mouse leave events on the citation
+     * @internal
+     */
+    this.handleHoverLeave = () => {
+      this.emitMouseLeaveEvent();
+      if (this.hasPopover && !this.mouseInPopover) {
+        this.show = false;
+        this.emitChangeEvent();
+      }
+    };
+    /**
+     * Handles mouse enter events on the popover
+     * @internal
+     */
+    this.handlePopoverEnter = () => {
+      this.mouseInPopover = true;
+    };
+    /**
+     * Handles mouse leave events on the popover
+     * @internal
+     */
+    this.handlePopoverLeave = () => {
+      this.mouseInPopover = false;
+      this.handleHoverLeave();
+    };
+    /**
+     * Adds mouse event listeners to citation and popover
+     * @internal
+     */
+    this.addMouseOverEventListeners = () => {
+      var _a;
+      const citationBase = (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.querySelector(".citation-number");
+      if (citationBase) {
+        citationBase.addEventListener("mouseenter", this.handleHoverEnter);
+        citationBase.addEventListener("mouseleave", this.handleHoverLeave);
+      }
+      const citationPopover = this.popoverReference;
+      if (citationPopover) {
+        citationPopover.addEventListener("mouseEnterPopover", this.handlePopoverEnter);
+        citationPopover.addEventListener("mouseLeavePopover", this.handlePopoverLeave);
+      }
+    };
+    this.handleHoverEnter = this.handleHoverEnter.bind(this);
+    this.handleHoverLeave = this.handleHoverLeave.bind(this);
+  }
+  /**
+   * Updates the index when the index reference changes
+   * @public
+   */
+  indexReferenceChanged() {
+    var _a, _b;
+    this.index = parseInt(((_b = (_a = this.indexReference) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.innerText) || "");
+  }
+  /**
+   * Updates hasPopover when popover content changes
+   * @public
+   */
+  popoverContentChanged() {
+    if (this.popoverContent.length > 0) {
+      this.hasPopover = true;
+    }
+  }
+  /**
+   * Sets up event listeners when popover reference changes
+   * @public
+   */
+  popoverReferenceChanged() {
+    if (this.popoverReference) {
+      this.addMouseOverEventListeners();
+      this.addKeyboardEventListeners();
+    }
+  }
+  /**
+   * Handles mouse enter events on the citation
+   * @internal
+   */
+  handleHoverEnter() {
+    this.mouseInPopover = true;
+    this.emitMouseEnterEvent();
+    if (this.hasPopover) {
+      this.show = true;
+      this.emitChangeEvent();
+    }
+  }
+  /**
+   * Emits mouseenter event
+   * @internal
+   */
+  emitMouseEnterEvent() {
+    this.dispatchEvent(new CustomEvent("mouseenter", {
+      detail: {
+        target: this
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /**
+   * Emits mouseleave event
+   * @internal
+   */
+  emitMouseLeaveEvent() {
+    this.dispatchEvent(new CustomEvent("mouseleave", {
+      detail: {
+        target: this
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /**
+   * Emits change event when popover visibility changes
+   * @internal
+   */
+  emitChangeEvent() {
+    this.dispatchEvent(new CustomEvent("change", {
+      detail: {
+        target: this,
+        show: this.show
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /**
+   * Handles keyboard events for accessibility
+   * @param event - The keyboard event
+   * @internal
+   */
+  handleKeyEvents(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      if (this.hasPopover) {
+        event.preventDefault();
+        this.show = !this.show;
+      }
+    }
+  }
+  /**
+   * Removes mouse event listeners from citation and popover
+   * @internal
+   */
+  removeMouseOverEventListeners() {
+    var _a;
+    const citationBase = (_a = this.popoverReference) === null || _a === void 0 ? void 0 : _a.querySelector(".citation-number");
+    if (citationBase) {
+      citationBase.removeEventListener("mouseenter", this.handleHoverEnter);
+      citationBase.removeEventListener("mouseleave", this.handleHoverLeave);
+    }
+    const citationPopover = this.popoverReference;
+    if (citationPopover) {
+      citationPopover.removeEventListener("mouseEnterPopover", this.handlePopoverEnter);
+      citationPopover.removeEventListener("mouseLeavePopover", this.handlePopoverLeave);
+    }
+  }
+  /**
+   * Adds keyboard event listeners
+   * @internal
+   */
+  addKeyboardEventListeners() {
+    this.addEventListener("keydown", this.handleKeyEvents);
+  }
+  /**
+   * Removes keyboard event listeners
+   * @internal
+   */
+  removeKeyboardEventListeners() {
+    this.removeEventListener("keydown", this.handleKeyEvents);
+  }
+  /**
+   * Sets up component when connected to DOM
+   * @public
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    PopoverDefinition.define(DesignSystem.registry);
+  }
+  /**
+   * Cleans up event listeners when disconnected from DOM
+   * @public
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeMouseOverEventListeners();
+    this.removeKeyboardEventListeners();
+  }
+}
+__decorate([observable], Citation.prototype, "index", void 0);
+__decorate([observable], Citation.prototype, "indexReference", void 0);
+__decorate([attr], Citation.prototype, "size", void 0);
+__decorate([attr], Citation.prototype, "href", void 0);
+__decorate([attr({
+  attribute: "popover-position"
+})], Citation.prototype, "popoverPosition", void 0);
+__decorate([observable], Citation.prototype, "popoverContent", void 0);
+__decorate([observable], Citation.prototype, "hasPopover", void 0);
+__decorate([attr({
+  attribute: "reposition-mode"
+})], Citation.prototype, "repositionMode", void 0);
+__decorate([attr({
+  converter: booleanConverter
+})], Citation.prototype, "show", void 0);
+__decorate([attr], Citation.prototype, "target", void 0);
+__decorate([observable], Citation.prototype, "popoverReference", void 0);
+
+export { Citation };

package/esm/components/citation/citation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"citation.js","sourceRoot":"","sources":["../../../../src/components/citation/citation.ts"],"names":[],"mappings":"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"}

package/esm/components/citation/citation.styles.js

@@ -0,0 +1,14 @@
+import { fontWeightRegular, fontFamilyBase, fontSizeBase100, lineHeightBase100, display } from '@fluentui/web-components';
+import { css } from '@microsoft/fast-element';
+import { citationNumberStyles } from './citation-number.styles.js';
+
+const styles = css`
+  ${display("flex")}
+
+  :host{font-weight:${fontWeightRegular};font-family:${fontFamilyBase};font-size:${fontSizeBase100};line-height:${lineHeightBase100};max-width:fit-content;position:relative}${citationNumberStyles}
+
+  :host([popover-position="above-start"]) ::part(popover){inset-inline-start:-18px;}:host([popover-position="above-start"]) ::part(beak-shadow):after{inset-inline-start:0px}:host([popover-position="below-start"]) ::part(popover){inset-inline-start:-18px;}:host([popover-position="below-start"]) ::part(beak-shadow):after{inset-inline-start:0px}:host([popover-position="above-end"]) ::part(popover){inset-inline-start:calc(
+      100% + 17px)}:host([popover-position="above-end"]) ::part(beak-shadow):after{inset-inline-end:0px}:host([popover-position="below-end"]) ::part(popover){inset-inline-start:calc(
+      100% + 17px)}:host([popover-position="below-end"]) ::part(beak-shadow):after{inset-inline-end:0px}:host([popover-position="end-top"]) ::part(popover){top:-14px;}:host([popover-position="end-top"]) ::part(beak-shadow):after{top:4px}:host([popover-position="start-top"]) ::part(popover){top:-14px;}:host([popover-position="start-top"]) ::part(beak-shadow):after{top:4px}:host([popover-position="end-bottom"]) ::part(popover){bottom:-14px;}:host([popover-position="end-bottom"]) ::part(beak-shadow):after{bottom:0px}:host([popover-position="start-bottom"]) ::part(popover){bottom:-14px;}:host([popover-position="start-bottom"]) ::part(beak-shadow):after{bottom:0px}`;
+
+export { styles };

package/esm/components/citation/citation.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"citation.styles.js","sourceRoot":"","sources":["../../../../src/components/citation/citation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACR,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;mBAGA,iBAAiB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;IAMhC,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DvB,CAAC"}

package/esm/components/citation/citation.template.js

@@ -0,0 +1,12 @@
+import { ref, slotted, html } from '@microsoft/fast-element';
+
+/**
+ * The template for the Citation component.
+ * @public
+ */
+function CitationTemplate() {
+  return html`<slot name="start"></slot><div class="base" part="base"><fabric-popover beak clickable="false" open="${x => x.show}" class="popover" position="${x => x.popoverPosition}" reposition-mode="${x => x.repositionMode}" anchor="citation-anchor" ${ref("popoverReference")}><div slot="popover-content" class="popover-content"><slot name="popover" ${slotted("popoverContent")}></slot></div><a tabindex="0" href="${x => x.href}" target="${x => x.target}" id="citation-anchor" class="citation-number" aria-label="${x => `Citation ${x.index}`}" slot="popover-trigger"><slot name="index" ${slotted("indexReference")}></slot></a></fabric-popover></div><slot name="end"></slot>`;
+}
+const template = CitationTemplate();
+
+export { CitationTemplate, template };

package/esm/components/citation/citation.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"citation.template.js","sourceRoot":"","sources":["../../../../src/components/citation/citation.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAI7D;;;GAGG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,IAAI,CAAG;;;;;;gBAMA,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;;oBAET,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe;2BACjB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc;;UAExC,GAAG,CAAC,kBAAkB,CAAC;;;iCAGA,OAAO,CAAC,gBAAgB,CAAC;;;;kBAIxC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;oBACX,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM;;;wBAGX,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE;;;+BAGrB,OAAO,CAAC,gBAAgB,CAAC;;;;;GAKrD,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAkC,gBAAgB,EAAE,CAAC"}

package/esm/components/citation/define.js

@@ -0,0 +1,4 @@
+import { DesignSystem } from "../design-system.js";
+import { definition } from "./citation.definition.js";
+definition.define(DesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/esm/components/citation/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/citation/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEtD,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/citation/index.js

@@ -0,0 +1,6 @@
+export { Citation } from "./citation.js";
+export { definition as CitationDefinition } from "./citation.definition.js";
+export { styles as CitationStyles } from "./citation.styles.js";
+export { template as CitationTemplate } from "./citation.template.js";
+export { PopoverDefinition, PopoverRepositionModes, PositioningShorthand } from "@fabric-msft/fabric-web";
+//# sourceMappingURL=index.js.map

package/esm/components/citation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/citation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EAAE,UAAU,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAE,QAAQ,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACtE,OAAO,EACL,iBAAiB,EACjB,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,yBAAyB,CAAC"}

package/esm/components/citation-reference/citation-reference.definition.js

@@ -0,0 +1,22 @@
+import { DesignSystem } from '../design-system.js';
+import { CitationReference } from './citation-reference.js';
+import { styles } from './citation-reference.styles.js';
+import { template } from './citation-reference.template.js';
+
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fabric-citation-reference\>
+ */
+const definition = CitationReference.compose({
+  name: `${DesignSystem.prefix}-citation-reference`,
+  template,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true,
+    mode: DesignSystem.shadowRootMode
+  }
+});
+
+export { definition };

package/esm/components/citation-reference/citation-reference.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"citation-reference.definition.js","sourceRoot":"","sources":["../../../../src/components/citation-reference/citation-reference.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,iBAAiB,CAAC,OAAO,CAAC;IAClD,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,qBAAqB;IACjD,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;QACpB,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/citation-reference/citation-reference.js

@@ -0,0 +1,204 @@
+import { __decorate } from 'tslib';
+import { observable, attr, FASTElement } from '@microsoft/fast-element';
+import '@microsoft/fast-foundation';
+
+// import { arrayConverter } from '../helpers/converters.js';
+/**
+ * CitationReference
+ * @summary A citation reference component that displays detailed information about a citation in a structured format. Used within citation popovers to show expanded reference information including metadata and excerpts with proper styling and accessibility.
+ *
+ * @example
+ * ```html
+ * <fabric-citation-reference
+ *   citation-href="https://example.com"
+ *   target="_blank"
+ * >
+ *   <span slot="index">1</span>
+ *   <svg slot="reference-icon" width="20" height="20" viewBox="0 0 20 20">
+ *     <path d="M18 7H15.5C14.673 7 14 6.327 14 5.5V2H6V18H18V7Z" fill="currentColor"/>
+ *   </svg>
+ *   <span slot="label">2023 Project Planning Document</span>
+ *   <span slot="metadata-icon-start">👤</span>
+ *   <span slot="metadata-text-one">John Smith</span>
+ *   <span slot="metadata-text-two">Last edited yesterday by Monica Kane</span>
+ *   <span slot="metadata-text-three">Page 15</span>
+ *   <span slot="metadata-icon-end">📅</span>
+ *   <span slot="excerpt">Summit Center is set to start pre-construction planning and site preparation for the new arena in Atlanta April 2023...</span>
+ * </fabric-citation-reference>
+ * ```
+ *
+ * @attr {string} citation-href - URL associated with the citation.
+ * @attr {AnchorTarget} target - Target attribute for the citation link.
+ *
+ * @prop {number} index - The numeric index of the citation.
+ * @prop {Array<HTMLElement>} indexReference - Reference to the index slot elements.
+ * @prop {Array<HTMLElement>} metadataTextOne - First metadata text elements.
+ * @prop {Array<HTMLElement>} metadataTextTwo - Second metadata text elements.
+ * @prop {Array<HTMLElement>} metadataTextThree - Third metadata text elements.
+ * @prop {boolean} hasMetadataTextOne - Whether first metadata text is present.
+ * @prop {boolean} hasMetadataTextTwo - Whether second metadata text is present.
+ * @prop {boolean} hasMetadataTextThree - Whether third metadata text is present.
+ * @prop {string | undefined} citationHref - URL associated with the citation.
+ * @prop {AnchorTarget} target - Target attribute for the citation link.
+ *
+ * @slot index - The citation index number.
+ * @slot reference-icon - Icon representing the reference type.
+ * @slot label - The title or label of the reference.
+ * @slot metadata-icon-start - Icon displayed at the start of metadata section.
+ * @slot metadata-text-one - First line of metadata text.
+ * @slot metadata-text-two - Second line of metadata text.
+ * @slot metadata-text-three - Third line of metadata text.
+ * @slot metadata-icon-end - Icon displayed at the end of metadata section.
+ * @slot excerpt - The reference content or excerpt text.
+ *
+ * @csspart base - The base container of the reference.
+ * @csspart reference-title-box - Container for the reference title section.
+ * @csspart reference-row - Container for each row of reference content.
+ * @csspart reference-icon - Container for the reference icon.
+ * @csspart reference-name - Container for the reference label.
+ * @csspart metadata-container - Container for all metadata content.
+ * @csspart metadata-text - Container for metadata text content.
+ * @csspart reference-quote - Container for the excerpt content.
+ * @csspart divider - Visual divider between metadata sections.
+ * @csspart citation-number - The clickable citation number element.
+ *
+ * @method indexReferenceChanged - Updates the index when the index reference changes.
+ * @method metadataTextOneChanged - Updates hasMetadataTextOne when first metadata text changes.
+ * @method metadataTextTwoChanged - Updates hasMetadataTextTwo when second metadata text changes.
+ * @method metadataTextThreeChanged - Updates hasMetadataTextThree when third metadata text changes.
+ * @method handleKeyboardNavigation - Handles keyboard navigation events for the citation reference.
+ * @method connectedCallback - Lifecycle callback when component is connected to DOM.
+ * @method disconnectedCallback - Lifecycle callback when component is disconnected from DOM.
+ *
+ * @fires click - Fires when the citation reference is clicked.
+ * @fires keydown - Fires when a key is pressed on the citation reference.
+ *
+ * @extends FASTElement
+ * @tagname fabric-citation-reference
+ * @public
+ */
+class CitationReference extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * Reference to the index slot elements
+     * @public
+     */
+    this.indexReference = [];
+    /**
+     * First metadata text elements
+     * @public
+     */
+    this.metadataTextOne = [];
+    /**
+     * Whether first metadata text is present
+     * @public
+     */
+    this.hasMetadataTextOne = false;
+    /**
+     * Second metadata text elements
+     */
+    this.metadataTextTwo = [];
+    /**
+     * Whether second metadata text is present
+     * @public
+     */
+    this.hasMetadataTextTwo = false;
+    /**
+     * Third metadata text elements
+     * @public
+     */
+    this.metadataTextThree = [];
+    /**
+     * Whether third metadata text is present
+     * @public
+     */
+    this.hasMetadataTextThree = false;
+    /**
+     * Target attribute for the citation link
+     * @public
+     */
+    this.target = "_self";
+  }
+  /**
+   * Updates the index when the index reference changes
+   * @public
+   */
+  indexReferenceChanged() {
+    var _a, _b;
+    this.index = parseInt(((_b = (_a = this.indexReference) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.innerText) || "");
+  }
+  /**
+   * Updates hasMetadataTextOne when first metadata text changes
+   * @public
+   */
+  metadataTextOneChanged() {
+    if (this.metadataTextOne.length > 0) {
+      this.hasMetadataTextOne = true;
+    } else this.hasMetadataTextOne = false;
+  }
+  /**
+   * Updates hasMetadataTextTwo when second metadata text changes
+   * @public
+   */
+  metadataTextTwoChanged() {
+    if (this.metadataTextTwo.length > 0) {
+      this.hasMetadataTextTwo = true;
+    } else this.hasMetadataTextTwo = false;
+  }
+  /**
+   * Updates hasMetadataTextThree when third metadata text changes
+   * @public
+   */
+  metadataTextThreeChanged() {
+    if (this.metadataTextThree && this.metadataTextThree.length > 0) {
+      this.hasMetadataTextThree = true;
+    } else this.hasMetadataTextThree = false;
+  }
+  /**
+   * Handles keyboard navigation events for the citation reference
+   * Opens the citation URL in the appropriate target when Space or Enter is pressed
+   * @param event - The keyboard event
+   * @public
+   */
+  handleKeyboardNavigation(event) {
+    if (this.citationHref && (event.key === "Space" || event.key === " " || event.key === "Enter")) {
+      if (window.top) {
+        window.top.location.href = this.citationHref;
+      } else {
+        window.location.href = this.citationHref;
+      }
+    }
+  }
+  /**
+   * Sets up component when connected to DOM
+   * Adds keyboard event listener
+   * @public
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("keydown", event => this.handleKeyboardNavigation(event));
+  }
+  /**
+   * Cleans up event listeners when disconnected from DOM
+   * @public
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", event => this.handleKeyboardNavigation(event));
+  }
+}
+__decorate([observable], CitationReference.prototype, "index", void 0);
+__decorate([observable], CitationReference.prototype, "indexReference", void 0);
+__decorate([attr({
+  attribute: "citation-href"
+})], CitationReference.prototype, "citationHref", void 0);
+__decorate([observable], CitationReference.prototype, "metadataTextOne", void 0);
+__decorate([observable], CitationReference.prototype, "hasMetadataTextOne", void 0);
+__decorate([observable], CitationReference.prototype, "metadataTextTwo", void 0);
+__decorate([observable], CitationReference.prototype, "hasMetadataTextTwo", void 0);
+__decorate([observable], CitationReference.prototype, "metadataTextThree", void 0);
+__decorate([observable], CitationReference.prototype, "hasMetadataTextThree", void 0);
+__decorate([attr], CitationReference.prototype, "target", void 0);
+
+export { CitationReference };

package/esm/components/citation-reference/citation-reference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"citation-reference.js","sourceRoot":"","sources":["../../../../src/components/citation-reference/citation-reference.ts"],"names":[],"mappings":"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"}

package/esm/components/citation-reference/citation-reference.styles.js

@@ -0,0 +1,12 @@
+import { fontFamilyBase, fontSizeBase200, fontWeightRegular, lineHeightBase200, colorNeutralForeground1, spacingHorizontalXS, spacingHorizontalSNudge, fontWeightSemibold, spacingVerticalXS, colorNeutralForeground3, fontSizeBase100, lineHeightBase100, colorNeutralStroke1, display } from '@fluentui/web-components';
+import { sizeVerticalXXL, sizeHorizontalMNudge } from '@fabric-msft/theme';
+import { css } from '@microsoft/fast-element';
+import { citationNumberStyles } from '../citation/citation-number.styles.js';
+
+const styles = css`
+  ${display("flex")}
+  ${citationNumberStyles}
+
+  .reference-row{display:flex;flex-direction:row;align-items:center}.base{font-family:${fontFamilyBase};font-size:${fontSizeBase200};font-weight:${fontWeightRegular};line-height:${lineHeightBase200};display:flex;flex-direction:column;color:${colorNeutralForeground1}}.citation-number{margin-inline-end:${spacingHorizontalXS}}.reference-name{flex-grow:1;padding-inline-end:${spacingHorizontalXS};padding-inline-start:${spacingHorizontalSNudge};font-weight:${fontWeightSemibold}}.reference-title-box{width:100%;height:${sizeVerticalXXL};color:${colorNeutralForeground1};margin:0 0 ${spacingVerticalXS} 0}.reference-icon{display:flex}.reference-quote{color:${colorNeutralForeground3}}.reference-name,.reference-actions,.expand-button{display:inline-block}.metadata-text{margin-bottom:${spacingVerticalXS}}::slotted([slot="metadata-text-one"]),::slotted([slot="metadata-text-two"]),::slotted([slot="metadata-text-three"]){display:inline-flex;align-items:center;font-size:${fontSizeBase100};line-height:${lineHeightBase100};font-weight:${fontWeightRegular}}.divider{display:inline-block;border-inline-end:1px solid ${colorNeutralStroke1};height:8px;width:1px;margin:0 ${spacingHorizontalSNudge}}fluent-button::part(content){width:${sizeHorizontalMNudge}}`;
+
+export { styles };