@fabric-msft/copilot-web 7.0.0

package/esm/components/bookmark-button/bookmark-button.js

@@ -0,0 +1,133 @@
+import { __decorate } from 'tslib';
+import { ToggleButton, ButtonDefinition } from '@fluentui/web-components';
+import { attr } from '@microsoft/fast-element';
+import { BookmarkButtonEventNames } from './bookmark-button.options.js';
+import { DesignSystem } from '../design-system.js';
+
+/**
+ * BookmarkButton
+ * @summary A bookmark button component that provides bookmark interaction functionality. Extends Fluent UI's ToggleButton to provide bookmark-specific behavior with visual feedback and event handling.
+ *
+ * @example
+ * ```html
+ * <fabric-bookmark-button
+ *   disabled="false"
+ *   pressed="true"
+ *   size="medium"
+ *   appearance="primary"
+ *   shape="rounded"
+ *   icon-only="true"
+ * >
+ *   <span slot="start">🔖</span>
+ *   <span slot="end">Bookmark</span>
+ * </fabric-bookmark-button>
+ * ```
+ *
+ * @attr {boolean | undefined} disabled - Whether the button is disabled.
+ * @attr {boolean} pressed - Whether the button is pressed indicating a bookmark.
+ * @attr {"small" | "medium" | "large" | undefined} size - The size of the button.
+ * @attr {"primary" | "outline" | "subtle" | undefined} appearance - The appearance of the button.
+ * @attr {"circular" | "rounded" | "square" | undefined} shape - The shape of the button.
+ * @attr {boolean | undefined} icon-only - Whether the button is icon only.
+ * @attr {string | undefined} name - The name of the button for form submission.
+ * @attr {string | undefined} form - The id of a form to associate the button to.
+ * @attr {string | undefined} type - The type of button (button, submit, reset).
+ * @attr {string | undefined} value - The value of the button.
+ * @attr {boolean | undefined} autofocus - Whether the button should get focus after page load.
+ * @attr {string | undefined} aria-label - Accessible label for the button.
+ * @attr {string | undefined} aria-describedby - ID of element that describes the button.
+ * @attr {string | undefined} aria-expanded - Whether the button controls expanded content.
+ * @attr {string | undefined} aria-pressed - Current pressed state for toggle buttons.
+ *
+ * @prop {boolean | undefined} disabled - Whether the button is disabled.
+ * @prop {boolean} pressed - Whether the button is pressed indicating a bookmark.
+ * @prop {string | undefined} size - The size of the button.
+ * @prop {string | undefined} appearance - The appearance of the button.
+ * @prop {string | undefined} shape - The shape of the button.
+ * @prop {boolean | undefined} iconOnly - Whether the button is icon only.
+ * @prop {string | undefined} name - The name of the button for form submission.
+ * @prop {string | undefined} form - The id of a form to associate the button to.
+ * @prop {string | undefined} type - The type of button (button, submit, reset).
+ * @prop {string | undefined} value - The value of the button.
+ * @prop {boolean | undefined} autofocus - Whether the button should get focus after page load.
+ *
+ * @slot start - Content displayed before the button content.
+ * @slot end - Content displayed after the button content.
+ * @slot - The default slot for button content.
+ *
+ * @csspart control - The button element.
+ * @csspart content - The content container.
+ * @csspart start - The start slot container.
+ * @csspart end - The end slot container.
+ *
+ * @method pressedChanged - Handles changes to the pressed state and emits bookmark event.
+ * @method handleClick - Handles click events, toggles pressed state and emits bookmark event.
+ * @method emitBookmarkEvent - Emits a bookmark toggle event with current state.
+ * @method connectedCallback - Lifecycle callback when component is connected to DOM.
+ * @method click - Programmatically triggers a click on the button.
+ * @method focus - Focuses the button element.
+ * @method blur - Removes focus from the button element.
+ *
+ * @fires bookmark-toggle - Fires when bookmark state changes.
+ * @fires click - Fires when the button is clicked.
+ * @fires change - Fires when the pressed state changes.
+ *
+ * @extends ToggleButton - Inherits from Fluent UI's ToggleButton.
+ * @tagname fabric-bookmark-button
+ * @public
+ */
+class BookmarkButton extends ToggleButton {
+  constructor() {
+    super(...arguments);
+    /**
+     * Whether the button is disabled.
+     *
+     * @public
+     */
+    this.disabled = false;
+    /**
+     * Handles click events on the bookmark button.
+     * Toggles the pressed state and emits a bookmark event.
+     *
+     * @public
+     */
+    this.handleClick = () => {
+      this.pressed = !this.pressed;
+      this.emitBookmarkEvent();
+    };
+    /**
+     * Emits a bookmark event.
+     *
+     * @public
+     */
+    this.emitBookmarkEvent = () => {
+      this.dispatchEvent(new CustomEvent(BookmarkButtonEventNames.bookmarkToggle, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          bookmark: this.pressed ? "bookmark" : "unbookmark"
+        }
+      }));
+    };
+  }
+  pressedChanged() {
+    this.emitBookmarkEvent();
+  }
+  /**
+   * Lifecycle callback when component is connected to the DOM.
+   * Initializes elements and registers required components.
+   *
+   * @public
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    if (!DesignSystem.registry.get("fluent-button")) {
+      ButtonDefinition.define(DesignSystem.registry);
+    }
+  }
+}
+__decorate([attr({
+  mode: "boolean"
+})], BookmarkButton.prototype, "disabled", void 0);
+
+export { BookmarkButton };

package/esm/components/bookmark-button/bookmark-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bookmark-button.js","sourceRoot":"","sources":["../../../../src/components/bookmark-button/bookmark-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,MAAM,OAAO,cAAe,SAAQ,YAAY;IAAhD;;QACE;;;;WAIG;QAEI,aAAQ,GAAY,KAAK,CAAC;QAMjC;;;;;WAKG;QACI,gBAAW,GAAG,GAAS,EAAE;YAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC,CAAC;QAEF;;;;WAIG;QACI,sBAAiB,GAAG,GAAS,EAAE;YACpC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,wBAAwB,CAAC,cAAc,EAAE;gBACvD,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE;oBACN,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;iBACnD;aACF,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;IAeJ,CAAC;IA7CQ,cAAc;QACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IA8BD;;;;;OAKG;IACI,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;YAChD,gBAAgB,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;CACF;AA/CQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDACO"}

package/esm/components/bookmark-button/bookmark-button.options.js

@@ -0,0 +1,30 @@
+import { ButtonAppearances, ButtonShapes, ButtonSizes, ButtonFormTargets, ButtonTypes } from '@fabric-msft/fabric-web';
+
+/** Appearance values for {@link Button}. */
+const BookmarkButtonAppearances = {
+  ...ButtonAppearances
+};
+/** Shape values for {@link Button}. */
+const BookmarkButtonShapes = {
+  ...ButtonShapes
+};
+/** Size values for {@link Button}. */
+const BookmarkButtonSizes = {
+  ...ButtonSizes
+};
+/** Form target values for {@link Button}. */
+const BookmarkButtonFormTargets = {
+  ...ButtonFormTargets
+};
+const BookmarkButtonTypes = {
+  ...ButtonTypes
+};
+/**
+ * @public
+ * BookmarkButton event names
+ */
+const BookmarkButtonEventNames = {
+  bookmarkToggle: "bookmark-toggle"
+};
+
+export { BookmarkButtonAppearances, BookmarkButtonEventNames, BookmarkButtonFormTargets, BookmarkButtonShapes, BookmarkButtonSizes, BookmarkButtonTypes };

package/esm/components/bookmark-button/bookmark-button.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bookmark-button.options.js","sourceRoot":"","sources":["../../../../src/components/bookmark-button/bookmark-button.options.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,IAAI,uBAAuB,EAC5C,YAAY,IAAI,kBAAkB,EAClC,WAAW,IAAI,iBAAiB,EAChC,iBAAiB,IAAI,uBAAuB,EAC5C,WAAW,IAAI,iBAAiB,EACjC,MAAM,yBAAyB,CAAC;AAGjC,4CAA4C;AAC5C,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,GAAG,uBAAuB;CAClB,CAAC;AAKX,MAAM,CAAC,MAAM,wBAAwB,GAAG,yBAAyB,CAAC;AAElE,uCAAuC;AACvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,GAAG,kBAAkB,EAAW,CAAC;AAKvE,sCAAsC;AACtC,MAAM,CAAC,MAAM,mBAAmB,GAAG,EAAE,GAAG,iBAAiB,EAAW,CAAC;AAIrE,6CAA6C;AAC7C,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,GAAG,uBAAuB;CAClB,CAAC;AAMX,MAAM,CAAC,MAAM,mBAAmB,GAAG,EAAE,GAAG,iBAAiB,EAAW,CAAC;AAIrE;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,cAAc,EAAE,iBAAiB;CACzB,CAAC"}

package/esm/components/bookmark-button/bookmark-button.styles.js

@@ -0,0 +1,10 @@
+import { colorNeutralForegroundDisabled, colorBrandForeground1, spacingHorizontalXXS, spacingHorizontalS, fontSizeBase400, fontSizeBase600, fontSizeBase500, spacingHorizontalXS } from '@fluentui/web-components';
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+
+const styles = css`
+  ${display("block")}
+
+  :host([disabled]),:host([disabled]) svg path{color:${colorNeutralForegroundDisabled};fill:${colorNeutralForegroundDisabled};pointer-events:none}:host([pressed]) svg path{fill:${colorBrandForeground1}}:host([size="small"]) ::part(content){gap:${spacingHorizontalXXS}}:host([size="large"]) ::part(content){gap:${spacingHorizontalS}}:host([size="small"]) svg{font-size:${fontSizeBase400}}:host([size="large"]) svg{font-size:${fontSizeBase600}}svg{font-size:${fontSizeBase500}}::part(content){display:flex;align-items:center;gap:${spacingHorizontalXS}}`;
+
+export { styles };

package/esm/components/bookmark-button/bookmark-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bookmark-button.styles.js","sourceRoot":"","sources":["../../../../src/components/bookmark-button/bookmark-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,8BAA8B,EAC9B,eAAe,EACf,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;aAGP,8BAA8B;YAC/B,8BAA8B;;;;;YAK9B,qBAAqB;;;;WAItB,oBAAoB;;;;WAIpB,kBAAkB;;;;iBAIZ,eAAe;;;;iBAIf,eAAe;;;;iBAIf,eAAe;;;;;;WAMrB,mBAAmB;;CAE7B,CAAC"}

package/esm/components/bookmark-button/bookmark-button.template.js

@@ -0,0 +1,14 @@
+import { html, when } from '@microsoft/fast-element';
+
+const bookmarkIconSVG = html`<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 4.5A2.5 2.5 0 0 1 6.5 2h7A2.5 2.5 0 0 1 16 4.5v13a.5.5 0 0 1-.8.4L10 14.12 4.8 17.9a.5.5 0 0 1-.8-.4v-13ZM6.5 3C5.67 3 5 3.67 5 4.5v12.02l4.7-3.42a.5.5 0 0 1 .6 0l4.7 3.42V4.5c0-.83-.67-1.5-1.5-1.5h-7Z" fill="currentColor"></path></svg>`;
+const unbookmarkIconSVG = html`<svg fill="currentColor" aria-hidden="true" width="1em" height="1em" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M4 4.5A2.5 2.5 0 0 1 6.5 2h7A2.5 2.5 0 0 1 16 4.5v13a.5.5 0 0 1-.8.4L10 14.12 4.8 17.9a.5.5 0 0 1-.8-.4v-13Z" fill="currentColor"></path></svg>`;
+/**
+ * The template for the {@link @fabric-msft/copilot-web#(BookmarkButton:class)} component.
+ * @public
+ */
+function bookmarkButtonTemplate() {
+  return html`<fluent-button role="button" size="${x => x.size}" appearance="${x => x.appearance}" shape="${x => x.shape}" class="bookmark-button" part="bookmark-button" @click="${x => x.handleClick()}" aria-label="${x => x.ariaLabel}" aria-disabled="${x => x.disabled}" ?disabled="${x => x.disabled}" ?pressed="${x => x.pressed}" ?icon-only="${x => x.iconOnly}">${when(x => x.pressed, html` ${unbookmarkIconSVG} `, html` ${bookmarkIconSVG} `)}</fluent-button>`;
+}
+const template = bookmarkButtonTemplate();
+
+export { bookmarkButtonTemplate, template };

package/esm/components/bookmark-button/bookmark-button.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bookmark-button.template.js","sourceRoot":"","sources":["../../../../src/components/bookmark-button/bookmark-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIrD,MAAM,eAAe,GAAG,IAAI,CAAA;;;;;;;;;;;;;;CAc3B,CAAC;AAEF,MAAM,iBAAiB,GAAG,IAAI,CAAA;;;;;;;;;;;;;;CAc7B,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,sBAAsB;IAGpC,OAAO,IAAI,CAAG;;;cAGF,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI;oBACP,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU;eACxB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK;;;gBAGb,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE;oBAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;uBACf,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACrB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;kBAClB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;oBACd,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ;;QAE7B,IAAI,CACJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,EAChB,IAAI,CAAA;YACA,iBAAiB;SACpB,EACD,IAAI,CAAA;YACA,eAAe;SAClB,CACF;;GAEJ,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GACnB,sBAAsB,EAAE,CAAC"}

package/esm/components/bookmark-button/define.js

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

package/esm/components/bookmark-button/define.js.map

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

package/esm/components/bookmark-button/index.js

@@ -0,0 +1,4 @@
+export { BookmarkButton } from "./bookmark-button.js";
+export { BookmarkButtonAppearances, BookmarkButtonShapes, BookmarkButtonSizes, BookmarkButtonFormTargets, BookmarkButtonEventNames, BookmarkButtonTypes } from "./bookmark-button.options.js";
+export { definition as BookmarkButtonDefinition } from "./bookmark-button.definition.js";
+//# sourceMappingURL=index.js.map

package/esm/components/bookmark-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/bookmark-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EACL,yBAAyB,EACzB,oBAAoB,EACpB,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACxB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAQtC,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,MAAM,iCAAiC,CAAC"}

package/esm/components/chain-of-thought/chain-of-thought.definition.js

@@ -0,0 +1,28 @@
+import { composeDefinitions, fromFAST } from '@fabric-msft/fabric-web';
+import { DesignSystem } from '../design-system.js';
+import { definition as definition$1 } from '../latency-loader/latency-loader.definition.js';
+import { ChainOfThought } from './chain-of-thought.js';
+import { styles } from './chain-of-thought.styles.js';
+import { template } from './chain-of-thought.template.js';
+
+/** @internal */
+const ChainOfThoughtDefinition = ChainOfThought.compose({
+  name: `${DesignSystem.prefix}-chain-of-thought`,
+  template,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true,
+    mode: DesignSystem.shadowRootMode
+  }
+});
+/**
+ * Composed element definition for `<fabric-chain-of-thought>`, registering the
+ * `fabric-latency-loader` dependency before the element itself.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fabric-chain-of-thought>`
+ */
+const definition = composeDefinitions(fromFAST(ChainOfThoughtDefinition), fromFAST(definition$1));
+
+export { definition };

package/esm/components/chain-of-thought/chain-of-thought.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chain-of-thought.definition.js","sourceRoot":"","sources":["../../../../src/components/chain-of-thought/chain-of-thought.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,MAAM,gDAAgD,CAAC;AACvG,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAE1D,gBAAgB;AAChB,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,CAAC;IACtD,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,mBAAmB;IAC/C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;QACpB,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC;AAEH;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAC1C,QAAQ,CAAC,wBAAwB,CAAC,EAClC,QAAQ,CAAC,uBAAuB,CAAC,CAClC,CAAC"}

package/esm/components/chain-of-thought/chain-of-thought.js

@@ -0,0 +1,392 @@
+import { __decorate } from 'tslib';
+import { attr, nullableNumberConverter, observable, FASTElement, Updates } from '@microsoft/fast-element';
+import '../chain-of-thought-step/chain-of-thought-step.js';
+import { ChainOfThoughtStepStates } from '../chain-of-thought-step/chain-of-thought-step.options.js';
+import { definition } from '../chain-of-thought-step/chain-of-thought-step.definition.js';
+import '../chain-of-thought-step/chain-of-thought-step.styles.js';
+import '../chain-of-thought-step/chain-of-thought-step.template.js';
+import { ChainOfThoughtStates, ChainOfThoughtSurfaces, ChainOfThoughtEventNames } from './chain-of-thought.options.js';
+import '@fluentui-copilot/pulsing-dot';
+import '@fluentui-contrib/houdini-utils';
+import { definition as definition$1 } from '../latency-loader/latency-loader.definition.js';
+import '../latency-loader/latency-loader.template.js';
+import '../latency-loader/latency-loader.styles.js';
+
+/**
+ * ChainOfThought
+ * @summary A slot-driven container that presents a progressive set of reasoning steps and a condensed “current step” view.
+ *
+ * @example
+ * ```html
+ * <fabric-chain-of-thought expanded="false" progress-message="Working...">
+ *   <fabric-chain-of-thought-step id="cot-step-0" state="active" expanded>
+ *     <span slot="header">Gathering context</span>
+ *     <span slot="description">Starting to pull together relevant sources</span>
+ *     <div slot="content">Optional rich content for this step.</div>
+ *   </fabric-chain-of-thought-step>
+ *   <fabric-chain-of-thought-step id="cot-step-1" state="complete">
+ *     <span slot="header">Considering research steps</span>
+ *     <span slot="description">Retrieving latest sales data…</span>
+ *   </fabric-chain-of-thought-step>
+ * </fabric-chain-of-thought>
+ * ```
+ *
+ * @attr {ChainOfThoughtState} state - Current execution state of the chain-of-thought (`active` | `complete`).
+ * @attr {ChainOfThoughtSurface} surface - Controls density/layout for immersive vs sidecar contexts.
+ * @attr {boolean} expanded - Whether the chain-of-thought view is expanded.
+ * @attr {string} active-progress-message - Message announced when reasoning starts (state becomes `active`).
+ * @attr {string} complete-progress-message - Message announced when reasoning completes (state becomes `complete`).
+ * @attr {number} current-step-index - Index of the current step in the slotted steps.
+ *
+ * @slot - Accepts one or more `fabric-chain-of-thought-step` elements.
+ *
+ * @fires cot-expand - Fires when the chain-of-thought expands/collapses with `{ expanded: boolean }` detail.
+ * @fires cot-reasoning-complete - Fires when the chain-of-thought finishes (state transitions from `active` to a non-active state).
+ * @fires cot-change - Fires when the slotted steps change with `{ steps: ChainOfThoughtStep[], currentStepIndex: number }` detail.
+ *
+ * @tagname fabric-chain-of-thought
+ *
+ * @public
+ */
+class ChainOfThought extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /** Persisted expansion state keyed by stable step id across slot rerenders */
+    this.expandedById = new Map();
+    /**
+     * Current execution state of the chain-of-thought.
+     * HTML Attribute: `state`
+     * Allowed values: `active` | `complete`
+     * @public
+     * @type {ChainOfThoughtState}
+     * @default "active"
+     */
+    this.state = ChainOfThoughtStates.active;
+    /**
+     * Controls density/layout for immersive vs sidecar contexts.
+     * @public
+     * @type {ChainOfThoughtSurface}
+     * @default "immersive"
+     */
+    this.surface = ChainOfThoughtSurfaces.immersive;
+    /**
+     * Whether the chain-of-thought view is expanded.
+     * @public
+     * @type {boolean}
+     * @default false
+     */
+    this.expanded = false;
+    /**
+     * Message announced when reasoning starts (state becomes `active`).
+     * @public
+     * @type {string}
+     * @default ""
+     * @remarks HTML Attribute: `progress-message`
+     */
+    this.activeProgressMessage = "";
+    /**
+     * Message announced when reasoning completes (state becomes `complete`).
+     * @public
+     * @type {string}
+     * @default ""
+     * @remarks HTML Attribute: `completed-progress-message`
+     */
+    this.completeProgressMessage = "";
+    /**
+     * Index of the current step in the slotted steps.
+     * @public
+     * @type {number}
+     * @default 0
+     * @remarks HTML Attribute: `current-step-index`
+     */
+    this.currentStepIndex = 0;
+    /**
+     * The set of slotted `fabric-chain-of-thought-step` elements.
+     *
+     * @public
+     */
+    this.slottedSteps = [];
+    /**
+     * Internal ID used for aria-controls / aria-labelledby wiring.
+     * @public
+     */
+    this.cotId = `cot-${Math.random().toString(36).slice(2)}`;
+  }
+  /**
+   * Called when the element is connected to the DOM.
+   * Ensures required child definitions are registered.
+   * @public
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    definition.define();
+    definition$1.define();
+    Updates.enqueue(() => {
+      if (this.state === ChainOfThoughtStates.active) {
+        this.announceProgress(this.activeProgressMessage);
+      }
+    });
+  }
+  /**
+   * Toggles the expanded state of the Chain of Thought.
+   * @public
+   */
+  toggleExpanded() {
+    this.expanded = !this.expanded;
+  }
+  /**
+   * Handles changes to the `surface` attribute.
+   * Propagates the updated surface to all slotted steps.
+   * @public
+   */
+  surfaceChanged(_oldValue, newValue) {
+    var _a;
+    if (!((_a = this.slottedSteps) === null || _a === void 0 ? void 0 : _a.length)) return;
+    for (const step of this.slottedSteps) {
+      step.surface = newValue;
+    }
+  }
+  /**
+   * Handles changes to the `expanded` attribute.
+   * Emits `cot-expand` and optionally scrolls the steps container into view.
+   * @public
+   */
+  expandedChanged(oldValue, newValue) {
+    if (newValue !== oldValue) {
+      this.emitCotExpand(newValue);
+      if (newValue) {
+        const scrollDelayMs = 200;
+        const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        window.setTimeout(() => {
+          requestAnimationFrame(() => {
+            this.scrollStepsContainerToBottom({
+              behavior: prefersReducedMotion ? "auto" : "smooth"
+            });
+          });
+        }, scrollDelayMs);
+      }
+    }
+  }
+  /**
+   * Handles changes to the `state` attribute.
+   * Starts announcements on activation and emits completion when transitioning away from `active`.
+   * @public
+   */
+  stateChanged(_oldValue, newValue) {
+    if (newValue === ChainOfThoughtStates.active) {
+      this.announceProgress(this.activeProgressMessage);
+      return;
+    } else if (newValue === ChainOfThoughtStates.complete) {
+      this.announceProgress(this.completeProgressMessage);
+      this.emitCotReasoningComplete();
+    }
+    // When complete, collapse the main panel (matches previous `completed` behavior).
+    if (newValue === ChainOfThoughtStates.complete) {
+      this.expanded = false;
+    }
+  }
+  /**
+   * Handles changes to the slotted steps collection.
+   * Captures expansion state from the previous steps, updates the current step index,
+   * and synchronizes the surface attribute to all new steps.
+   * @public
+   */
+  slottedStepsChanged(oldValue, newValue) {
+    if (oldValue === newValue) return;
+    this.captureExpandedState(oldValue);
+    this.currentStepIndex = newValue && newValue.length > 0 ? newValue.length - 1 : 0;
+    // Propagate current surface to all new steps
+    for (const step of newValue) {
+      if (step.surface != this.surface) {
+        step.surface = this.surface;
+      }
+    }
+    this.emitCotChange(newValue);
+  }
+  /**
+   * Handles changes to the `currentStepIndex` attribute.
+   * Updates step states and refreshes the current step summary region.
+   * @public
+   */
+  currentStepIndexChanged(_oldValue, newValue) {
+    // when the CoT is on the first step, it is collapsed by default
+    if (newValue === 0) {
+      this.expanded = false;
+      this.expandedById.clear();
+    }
+    if (this.slottedSteps && this.slottedSteps.length && this.currentStepIndex > this.slottedSteps.length - 1) {
+      this.currentStepIndex = this.slottedSteps.length - 1;
+    }
+    Updates.enqueue(() => {
+      this.updateStepStates();
+      this.updateCurrentStepContainer();
+    });
+  }
+  /**
+   * Emits the `cot-expand` event.
+   * @private
+   */
+  emitCotExpand(expanded) {
+    this.dispatchEvent(new CustomEvent(ChainOfThoughtEventNames.expand, {
+      detail: {
+        expanded
+      },
+      bubbles: true,
+      composed: true,
+      cancelable: false
+    }));
+  }
+  /**
+   * Emits the `cot-reasoning-complete` event.
+   * @private
+   */
+  emitCotReasoningComplete() {
+    this.dispatchEvent(new CustomEvent(ChainOfThoughtEventNames.complete, {
+      bubbles: true,
+      composed: true,
+      cancelable: false
+    }));
+  }
+  /**
+   * Emits the `cot-change` event.
+   * @private
+   */
+  emitCotChange(steps) {
+    this.dispatchEvent(new CustomEvent(ChainOfThoughtEventNames.change, {
+      detail: {
+        steps: steps,
+        currentStepIndex: this.currentStepIndex
+      },
+      bubbles: true,
+      composed: true,
+      cancelable: false
+    }));
+  }
+  /**
+   * Captures expansion state for a set of steps.
+   * Used to restore expansion when the slot is re-rendered.
+   * @private
+   */
+  captureExpandedState(steps) {
+    if (!steps || steps.length === 0) return;
+    for (const step of steps) {
+      this.expandedById.set(step.stepId, !!step.expanded);
+    }
+  }
+  /**
+   * Updates the condensed “current step” container using the current slotted step.
+   * @private
+   */
+  updateCurrentStepContainer() {
+    var _a;
+    if (!this.currentStepHeader || !this.currentStepDescription || !this.currentStepContent) return;
+    // Clear existing
+    this.currentStepHeader.textContent = "";
+    this.currentStepDescription.textContent = "";
+    while (this.currentStepContent.firstChild) this.currentStepContent.removeChild(this.currentStepContent.firstChild);
+    // If reasoning is complete, header should display text `Reasoning`
+    if (this.state === ChainOfThoughtStates.complete) {
+      this.currentStepHeader.textContent = "Reasoning";
+      return;
+    }
+    // Get current step from slotted steps
+    const step = (_a = this.slottedSteps) === null || _a === void 0 ? void 0 : _a[this.currentStepIndex];
+    if (!step) return;
+    //Update current step container based on current step
+    const headerText = step.slottedHeader[0];
+    const descriptionText = step.slottedDescription[0];
+    if (!headerText) return;
+    this.currentStepHeader.textContent = headerText.textContent;
+    if (descriptionText) {
+      this.currentStepDescription.textContent = descriptionText.textContent;
+    }
+    for (const node of step.slottedContent) {
+      this.currentStepContent.appendChild(node.cloneNode(true));
+    }
+  }
+  /**
+   * Updates each slotted step's `state` based on `currentStepIndex`.
+   * - Current step index → `active`
+   * - Any preceding step → `complete` (unless already `error`)
+   * - Subsequent steps remain unchanged
+   * @private
+   */
+  updateStepStates() {
+    const steps = this.slottedSteps;
+    if (!steps || steps.length === 0) return;
+    if (this.state === ChainOfThoughtStates.complete) {
+      for (const step of steps) {
+        step.expanded = true;
+        if (step.state !== ChainOfThoughtStepStates.error) {
+          step.state = ChainOfThoughtStepStates.complete;
+        }
+      }
+      return;
+    }
+    // mark current step as active and previous steps as complete (unless `error`)
+    for (let i = 0; i < steps.length; i++) {
+      const step = steps[i];
+      if (!step) continue;
+      if (step.state === ChainOfThoughtStepStates.error) continue;
+      if (this.expandedById.get(step.stepId) === true) {
+        step.expanded = true;
+      }
+      if (i === this.currentStepIndex && step.state != ChainOfThoughtStepStates.active) {
+        step.state = ChainOfThoughtStepStates.active;
+        step.expanded = true;
+      } else if (i < this.currentStepIndex && step.state != ChainOfThoughtStepStates.complete) {
+        step.state = ChainOfThoughtStepStates.complete;
+        step.expanded = false;
+      }
+    }
+  }
+  /**
+   * Scrolls the steps container to the bottom.
+   * @private
+   */
+  scrollStepsContainerToBottom(options) {
+    var _a;
+    if (!this.stepsContainer) return;
+    const top = this.stepsContainer.scrollHeight;
+    try {
+      this.stepsContainer.scrollTo({
+        top,
+        behavior: (_a = options === null || options === void 0 ? void 0 : options.behavior) !== null && _a !== void 0 ? _a : "auto"
+      });
+    } catch {
+      this.stepsContainer.scrollTop = top;
+    }
+  }
+  /**
+   * Announces a message in the live region for screen readers.
+   * @param message - The message to announce
+   * @private
+   */
+  announceProgress(message) {
+    var _a;
+    const liveRegion = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("[data-cot-status]");
+    if (!liveRegion || !message) return;
+    liveRegion.textContent = message;
+  }
+}
+__decorate([attr()], ChainOfThought.prototype, "state", void 0);
+__decorate([attr], ChainOfThought.prototype, "surface", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], ChainOfThought.prototype, "expanded", void 0);
+__decorate([attr({
+  attribute: "active-progress-message"
+})], ChainOfThought.prototype, "activeProgressMessage", void 0);
+__decorate([attr({
+  attribute: "complete-progress-message"
+})], ChainOfThought.prototype, "completeProgressMessage", void 0);
+__decorate([attr({
+  attribute: "current-step-index",
+  converter: nullableNumberConverter
+})], ChainOfThought.prototype, "currentStepIndex", void 0);
+__decorate([observable], ChainOfThought.prototype, "slottedSteps", void 0);
+__decorate([observable], ChainOfThought.prototype, "currentStepDescription", void 0);
+__decorate([observable], ChainOfThought.prototype, "currentStepContent", void 0);
+__decorate([observable], ChainOfThought.prototype, "currentStepHeader", void 0);
+
+export { ChainOfThought };