@fabric-msft/copilot-web 7.0.0

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

@@ -0,0 +1,122 @@
+import { __classPrivateFieldGet } from 'tslib';
+import { SendButtonEventNames } from './send-button.options.js';
+import { DesignSystem } from '../design-system.js';
+import { Button, ButtonDefinition } from '@fabric-msft/fabric-web';
+
+var _SendButton_instances, _SendButton_attachListeners, _SendButton_detachListeners;
+/**
+ * SendButton
+ * @summary A send button component that provides message sending interaction. Extends Fabric UX Button component to provide send-specific behavior with customizable icons and accessibility support.
+ *
+ * @example
+ * ```html
+ * <fabric-send-button
+ *   disabled
+ *   size="large"
+ *   appearance="primary"
+ *   aria-label="Send message"
+ *   icon-only
+ *   aria-disabled="true"
+ * >
+ *   <span slot="start">Start content</span>
+ *   <span slot="end">End content</span>
+ *   <span slot="icon">Custom Icon</span>
+ * </fabric-send-button>
+ * ```
+ *
+ * @attr {boolean} disabled - Whether the button is disabled
+ * @attr {"small" | "medium" | "large" | undefined} size - The size of the button
+ * @attr {"primary" | "outline" | "subtle" | "transparent" | undefined} appearance - The appearance of the button, defaults to "transparent"
+ * @attr {"circular" | "rounded" | "square" | undefined} shape - The shape of the button
+ * @attr {string} aria-label - The accessible label for the button
+ * @attr {boolean} icon-only - Whether the button shows only an icon
+ * @attr {string} aria-disabled - Indicates if the button is disabled for accessibility
+ *
+ * @prop {boolean} disabled - Whether the button is disabled
+ * @prop {string} size - The size of the button
+ * @prop {string} appearance - The appearance of the button, defaults to "transparent"
+ * @prop {string} shape - The shape of the button
+ * @prop {string} ariaLabel - The accessible label for the button
+ * @prop {boolean} iconOnly - Whether the button shows only an icon
+ * @prop {string} ariaDisabled - Indicates if the button is disabled for accessibility
+ *
+ * @slot - The default slot for button content
+ * @slot start - Content which can be provided before the button content
+ * @slot end - Content which can be provided after the button content
+ * @slot icon - Slot for custom send icon, defaults to ArrowCircleRightFilled
+ *
+ * @csspart send-button - The main button container
+ * @csspart content - The button content container
+ *
+ * @cssprop --submit-button-color - The color of the submit/send button icon
+ *
+ * @internal connectedCallback - Lifecycle callback when component is connected to DOM
+ * @internal disconnectedCallback - Lifecycle callback when component is disconnected from DOM
+ *
+ * @method clickHandler - Handles click events for the button
+ * @method keypressHandler - Handles keypress events for the button (inherited from Button)
+ * @method press - Presses the button (inherited from Button)
+ * @method resetForm - Resets the associated form (inherited from Button)
+ *
+ * @fires send - Fires when the send action is triggered
+ *
+ * @extends Button from @fabric-msft/fabric-web
+ * @tagname fabric-send-button
+ * @public
+ */
+class SendButton extends Button {
+  constructor() {
+    super(...arguments);
+    _SendButton_instances.add(this);
+    /**
+     * Emits the send event.
+     *
+     * @public
+     */
+    this.emitSendEvent = () => {
+      this.dispatchEvent(new CustomEvent(SendButtonEventNames.send, {
+        bubbles: true,
+        composed: true
+      }));
+    };
+  }
+  /**
+   * Handles click events for the button.
+   * @public
+   */
+  clickHandler(e) {
+    super.clickHandler(e);
+    this.emitSendEvent();
+    return true;
+  }
+  /**
+   * Lifecycle callback when component is connected to the DOM.
+   * Initializes elements and registers required components.
+   *
+   * @public
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    ButtonDefinition.define(DesignSystem.registry);
+    __classPrivateFieldGet(this, _SendButton_instances, "m", _SendButton_attachListeners).call(this);
+  }
+  /**
+   * Lifecycle callback when component is disconnected from the DOM.
+   * Removes event listeners to prevent memory leaks.
+   *
+   * @public
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __classPrivateFieldGet(this, _SendButton_instances, "m", _SendButton_detachListeners).call(this);
+  }
+}
+_SendButton_instances = new WeakSet(), _SendButton_attachListeners = function _SendButton_attachListeners() {
+  this.addEventListener("click", this.clickHandler);
+  this.addEventListener("keypress", this.keypressHandler);
+}, _SendButton_detachListeners = function _SendButton_detachListeners() {
+  this.removeEventListener("click", this.clickHandler);
+  this.removeEventListener("keypress", this.keypressHandler);
+};
+
+export { SendButton };

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

@@ -0,0 +1 @@
+{"version":3,"file":"send-button.js","sourceRoot":"","sources":["../../../../src/components/send-button/send-button.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,MAAM,OAAO,UAAW,SAAQ,MAAM;IAAtC;;;QACE;;;;WAIG;QACK,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,oBAAoB,CAAC,IAAI,EAAE;gBACzC,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC,CAAC;IAsDJ,CAAC;IApDC;;;OAGG;IACI,YAAY,CAAC,CAAQ;QAC1B,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC;IACd,CAAC;IAoBD;;;;;OAKG;IACI,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,gBAAgB,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAE/C,uBAAA,IAAI,0DAAiB,MAArB,IAAI,CAAmB,CAAC;IAC1B,CAAC;IAED;;;;;OAKG;IACI,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,uBAAA,IAAI,0DAAiB,MAArB,IAAI,CAAmB,CAAC;IAC1B,CAAC;CACF;;IArCG,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAClD,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;AAC1D,CAAC;IAOC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IACrD,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;AAC7D,CAAC"}

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

@@ -0,0 +1,30 @@
+import { ButtonAppearances, ButtonShapes, ButtonSizes, ButtonFormTargets, ButtonTypes } from '@fabric-msft/fabric-web';
+
+/**
+ * SendButton specific event names.
+ */
+const SendButtonEventNames = {
+  send: "send"
+};
+/** Appearance values for {@link Button}. */
+const SendButtonAppearances = {
+  ...ButtonAppearances
+};
+/** Shape values for {@link Button}. */
+const SendButtonShapes = {
+  ...ButtonShapes
+};
+/** Size values for {@link Button}. */
+const SendButtonSizes = {
+  ...ButtonSizes
+};
+/** Form target values for {@link Button}. */
+const SendButtonFormTargets = {
+  ...ButtonFormTargets
+};
+/** Button type values for {@link Button}. */
+const SendButtonTypes = {
+  ...ButtonTypes
+};
+
+export { SendButtonAppearances, SendButtonEventNames, SendButtonFormTargets, SendButtonShapes, SendButtonSizes, SendButtonTypes };

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

@@ -0,0 +1 @@
+{"version":3,"file":"send-button.options.js","sourceRoot":"","sources":["../../../../src/components/send-button/send-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;;GAEG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,IAAI,EAAE,MAAM,EAAW,CAAC;AAE9D,4CAA4C;AAC5C,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,GAAG,uBAAuB;CAClB,CAAC;AAKX,uCAAuC;AACvC,MAAM,CAAC,MAAM,gBAAgB,GAAG,EAAE,GAAG,kBAAkB,EAAW,CAAC;AAKnE,sCAAsC;AACtC,MAAM,CAAC,MAAM,eAAe,GAAG,EAAE,GAAG,iBAAiB,EAAW,CAAC;AAKjE,6CAA6C;AAC7C,MAAM,CAAC,MAAM,qBAAqB,GAAG,EAAE,GAAG,uBAAuB,EAAW,CAAC;AAK7E,6CAA6C;AAC7C,MAAM,CAAC,MAAM,eAAe,GAAG,EAAE,GAAG,iBAAiB,EAAW,CAAC"}

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

@@ -0,0 +1,12 @@
+import { fontSizeBase500, fontSizeBase600, colorNeutralForegroundDisabled, colorBrandBackground, colorNeutralForegroundInverted, spacingHorizontalXS } from '@fluentui/web-components';
+import { ButtonStyles } from '@fabric-msft/fabric-web';
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+
+const styles = css`
+  ${display("block")}
+  ${ButtonStyles}
+
+  :host{width:fit-content}svg{font-size:${fontSizeBase500}}:host([size="large"]) svg{font-size:${fontSizeBase600}}:host([disabled]) .send-button,:host([disabled]) svg path{color:${colorNeutralForegroundDisabled};fill:${colorNeutralForegroundDisabled};pointer-events:none;cursor:not-allowed}svg path{fill:var(--submit-button-color,${colorBrandBackground})}:host([appearance="primary"]) svg path{fill:${colorNeutralForegroundInverted}}.content{display:flex;align-items:center;justify-content:center;gap:${spacingHorizontalXS}}:host([icon-only]) .content{gap:0}:host([icon-only]) .text{display:none}`;
+
+export { styles };

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

@@ -0,0 +1 @@
+{"version":3,"file":"send-button.styles.js","sourceRoot":"","sources":["../../../../src/components/send-button/send-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,8BAA8B,EAC9B,8BAA8B,EAC9B,mBAAmB,EACnB,eAAe,EACf,eAAe,EAChB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,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;IAChB,YAAY;;;;;;;;iBAQC,eAAe;;;;;iBAKf,eAAe;;;;;aAKnB,8BAA8B;YAC/B,8BAA8B;;;;;;uCAMH,oBAAoB;;;;YAI/C,8BAA8B;;;;;;;WAO/B,mBAAmB;;;;;;;;;;CAU7B,CAAC"}

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

@@ -0,0 +1,16 @@
+import { html } from '@microsoft/fast-element';
+
+const sendSVG = html`<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 21 21"><path d="M10.5 18.1992C14.9183 18.1992 18.5 14.6175 18.5 10.1992C18.5 5.78094 14.9183 2.19922 10.5 2.19922C6.08172 2.19922 2.5 5.78094 2.5 10.1992C2.5 14.6175 6.08172 18.1992 10.5 18.1992ZM11.3536 13.5528C11.1583 13.748 10.8417 13.748 10.6464 13.5528C10.4512 13.3575 10.4512 13.0409 10.6464 12.8457L12.7929 10.6992H7C6.72386 10.6992 6.5 10.4754 6.5 10.1992C6.5 9.92308 6.72386 9.69922 7 9.69922H12.7929L10.6464 7.55277C10.4512 7.35751 10.4512 7.04093 10.6464 6.84566C10.8417 6.6504 11.1583 6.6504 11.3536 6.84566L14.3536 9.84566C14.5488 10.0409 14.5488 10.3575 14.3536 10.5528L11.3536 13.5528Z" fill="currentColor" /></svg>`;
+/**
+ * The template for the {@link @fabric-msft/copilot-web#(SendButton:class)} component.
+ * @public
+ */
+function sendButtonTemplate() {
+  return html`<template class="send-button" part="send-button" tabindex="${x => {
+    var _a;
+    return x.disabled ? null : (_a = x.tabIndex) !== null && _a !== void 0 ? _a : 0;
+  }}"><span class="content" part="content"><slot></slot>${sendSVG}</span></template>`;
+}
+const template = sendButtonTemplate();
+
+export { sendButtonTemplate, template };

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

@@ -0,0 +1 @@
+{"version":3,"file":"send-button.template.js","sourceRoot":"","sources":["../../../../src/components/send-button/send-button.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI/C,MAAM,OAAO,GAAG,IAAI,CAAA;;;;;;;;;;;;CAYnB,CAAC;AAEF;;;GAGG;AACH,MAAM,UAAU,kBAAkB;IAGhC,OAAO,IAAI,CAAG;;;;kBAIE,CAAC,CAAC,EAAE,EAAE,WAAC,OAAA,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAA,CAAC,CAAC,QAAQ,mCAAI,CAAC,CAAC,CAAC,CAAA,EAAA;;;;UAItD,OAAO;;;GAGd,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAoC,kBAAkB,EAAE,CAAC"}

package/esm/components/shared-component-options/index.js

@@ -0,0 +1,2 @@
+export { HeadingLevels } from "./shared-options";
+//# sourceMappingURL=index.js.map

package/esm/components/shared-component-options/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/shared-component-options/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAqB,MAAM,kBAAkB,CAAC"}

package/esm/components/shared-component-options/shared-options.js

@@ -0,0 +1,14 @@
+/**
+ * The heading level variations for components with headers
+ * @public
+ */
+const HeadingLevels = {
+  1: 1,
+  2: 2,
+  3: 3,
+  4: 4,
+  5: 5,
+  6: 6
+};
+
+export { HeadingLevels };

package/esm/components/shared-component-options/shared-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-options.js","sourceRoot":"","sources":["../../../../src/components/shared-component-options/shared-options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;CACI,CAAC"}

package/esm/components/sidecar-shell/define.js

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

package/esm/components/sidecar-shell/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../../src/components/sidecar-shell/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAErF,sBAAsB,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC"}

package/esm/components/sidecar-shell/index.js

@@ -0,0 +1,6 @@
+export { SidecarShell } from "./sidecar-shell.js";
+export { definition as SidecarShellDefinition } from "./sidecar-shell.definition.js";
+export { template as SidecarShellTemplate } from "./sidecar-shell.template.js";
+export { styles as SidecarShellStyles } from "./sidecar-shell.styles.js";
+export { SidecarShellEventNames } from "./sidecar-shell.options.js";
+//# sourceMappingURL=index.js.map

package/esm/components/sidecar-shell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/sidecar-shell/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,UAAU,IAAI,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,EAAE,QAAQ,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,MAAM,IAAI,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC"}

package/esm/components/sidecar-shell/sidecar-shell.definition.js

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

package/esm/components/sidecar-shell/sidecar-shell.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidecar-shell.definition.js","sourceRoot":"","sources":["../../../../src/components/sidecar-shell/sidecar-shell.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC;IAC7C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,gBAAgB;IAC5C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,cAAc,EAAE,IAAI;QACpB,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/sidecar-shell/sidecar-shell.js

@@ -0,0 +1,169 @@
+import { __decorate } from 'tslib';
+import { attr, observable, FASTElement } from '@microsoft/fast-element';
+import { SidecarShellEventNames } from './sidecar-shell.options.js';
+
+/**
+ * SidecarShell
+ * @summary A sidecar shell component that provides a collapsible side panel with header, content, and footer sections. The sidecar can be opened, closed, detached, and reattached to provide flexible layout options with keyboard navigation and accessibility support.
+ *
+ * @example
+ * ```html
+ * <fabric-sidecar-shell open>
+ *   <div slot="start">Start Content</div>
+ *   <div slot="header">Header Content</div>
+ *   <div slot="content">Main Content</div>
+ *   <div slot="footer">Footer Content</div>
+ *   <div slot="footer-optional">Optional Footer Content</div>
+ *   <div slot="end">End Content</div>
+ * </fabric-sidecar-shell>
+ * ```
+ *
+ * @attr {boolean} open - Controls whether the sidecar is open or closed
+ * @attr {boolean} detach - Controls whether the sidecar is detached from the page
+ *
+ * @prop {boolean} open - Controls whether the sidecar is open or closed
+ * @prop {boolean} detach - Controls whether the sidecar is detached from the page
+ * @prop {Array<HTMLElement>} header - Collection of elements in the header slot
+ * @prop {Array<HTMLElement>} content - Collection of elements in the content slot
+ * @prop {Array<HTMLElement>} footer - Collection of elements in the footer slot
+ * @prop {Array<HTMLElement>} footerOptional - Collection of elements in the optional footer slot
+ *
+ * @slot start - Content displayed at the start of the sidecar
+ * @slot header - Content displayed in the header section
+ * @slot content - Main content area of the sidecar
+ * @slot footer - Content displayed in the footer section
+ * @slot footer-optional - Optional content displayed in the footer
+ * @slot end - Content displayed at the end of the sidecar
+ *
+ * @csspart header - Container for the header content
+ * @csspart content - Container for the main content
+ * @csspart footer - Container for the footer content
+ * @csspart slot - Default slot container when no content is provided
+ *
+ * @cssprop --sidecar-width - Custom property for controlling the sidecar width
+ *
+ * @method openChanged - Emits events when the open state changes
+ * @method toggleSidecar - Toggles the open state of the sidecar
+ * @method dismissSidecar - Closes the sidecar
+ * @method openSidecar - Opens the sidecar
+ * @method detachSidecar - Detaches the sidecar from the side of the screen
+ * @method attachSidecar - Re-attaches the sidecar to the side of the screen
+ * @method connectedCallback - Lifecycle callback when component is connected to DOM
+ *
+ * @fires open-sidecar-shell-changed - Fires when the sidecar open state changes
+ * @fires dismiss-sidecar-shell - Fires when the sidecar is dismissed
+ * @fires close-sidecar-shell - Fires when the sidecar is closed
+ * @fires open-sidecar-shell - Fires when the sidecar is opened
+ * @fires detach-sidecar-shell - Fires when the sidecar is detached
+ * @fires attach-sidecar-shell - Fires when the sidecar is attached
+ *
+ * @extends FASTElement
+ * @tagname fabric-sidecar-shell
+ * @public
+ */
+class SidecarShell extends FASTElement {
+  constructor() {
+    super(...arguments);
+    /**
+     * Controls whether the sidecar is open or closed
+     * @type {boolean}
+     * @public
+     */
+    this.open = false;
+    /**
+     * Controls whether the sidecar is detached from the page
+     * @type {boolean}
+     * @public
+     */
+    this.detach = false;
+    /**
+     * Collection of elements in the header slot
+     * @type {Array<HTMLElement>}
+     * @internal
+     */
+    this.header = [];
+    /**
+     * Collection of elements in the content slot
+     * @type {Array<HTMLElement>}
+     * @internal
+     */
+    this.content = [];
+    /**
+     * Collection of elements in the footer slot
+     * @type {Array<HTMLElement>}
+     * @internal
+     */
+    this.footer = [];
+    /**
+     * Collection of elements in the optional footer slot
+     * @type {Array<HTMLElement>}
+     * @internal
+     */
+    this.footerOptional = [];
+  }
+  /**
+   * Emits events when the open state changes
+   * @internal
+   */
+  openChanged() {
+    this.$emit(SidecarShellEventNames.openChanged);
+  }
+  /**
+   * Toggles the open state of the sidecar
+   * @public
+   */
+  toggleSidecar() {
+    this.open = !this.open;
+  }
+  /**
+   * Closes the sidecar
+   * @public
+   */
+  dismissSidecar() {
+    this.open = false;
+  }
+  /**
+   * Opens the sidecar
+   * @public
+   */
+  openSidecar() {
+    this.open = true;
+  }
+  /**
+   * Detaches the sidecar from the side of the screen
+   * @public
+   */
+  detachSidecar() {
+    this.detach = true;
+  }
+  /**
+   * Re-attaches the sidecar to the side of the screen
+   * @public
+   */
+  attachSidecar() {
+    this.detach = false;
+  }
+  /**
+   * Sets up event listeners when component is connected to DOM
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener(SidecarShellEventNames.dismiss, this.dismissSidecar);
+    this.addEventListener(SidecarShellEventNames.open, this.openSidecar);
+    this.addEventListener(SidecarShellEventNames.detach, this.detachSidecar);
+    this.addEventListener(SidecarShellEventNames.attach, this.attachSidecar);
+  }
+}
+__decorate([attr({
+  mode: "boolean"
+})], SidecarShell.prototype, "open", void 0);
+__decorate([attr({
+  mode: "boolean"
+})], SidecarShell.prototype, "detach", void 0);
+__decorate([observable], SidecarShell.prototype, "header", void 0);
+__decorate([observable], SidecarShell.prototype, "content", void 0);
+__decorate([observable], SidecarShell.prototype, "footer", void 0);
+__decorate([observable], SidecarShell.prototype, "footerOptional", void 0);
+
+export { SidecarShell };

package/esm/components/sidecar-shell/sidecar-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidecar-shell.js","sourceRoot":"","sources":["../../../../src/components/sidecar-shell/sidecar-shell.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,MAAM,OAAO,YAAa,SAAQ,WAAW;IAA7C;;QACE;;;;WAIG;QAEI,SAAI,GAAY,KAAK,CAAC;QAU7B;;;;WAIG;QAEI,WAAM,GAAY,KAAK,CAAC;QAE/B;;;;WAIG;QAEI,WAAM,GAAkB,EAAE,CAAC;QAElC;;;;WAIG;QAEI,YAAO,GAAkB,EAAE,CAAC;QAEnC;;;;WAIG;QAEI,WAAM,GAAkB,EAAE,CAAC;QAElC;;;;WAIG;QAEI,mBAAc,GAAkB,EAAE,CAAC;IAsD5C,CAAC;IApGC;;;OAGG;IACI,WAAW;QAChB,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,WAAW,CAAC,CAAC;IACjD,CAAC;IA0CD;;;OAGG;IACI,aAAa;QAClB,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB,CAAC;IAED;;;OAGG;IACI,cAAc;QACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED;;;OAGG;IACI,WAAW;QAChB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED;;;OAGG;IACI,aAAa;QAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAED;;;OAGG;IACI,aAAa;QAClB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC;IAED;;;OAGG;IACH,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3E,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACrE,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzE,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,MAAM,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC3E,CAAC;CACF;AAtGQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;0CACG;AAgBtB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CACK;AAQxB;IADN,UAAU;4CACuB;AAQ3B;IADN,UAAU;6CACwB;AAQ5B;IADN,UAAU;4CACuB;AAQ3B;IADN,UAAU;oDAC+B"}

package/esm/components/sidecar-shell/sidecar-shell.options.js

@@ -0,0 +1,13 @@
+/**
+ * Sidecar Shell event names
+ */
+const SidecarShellEventNames = {
+  dismiss: "dismiss-sidecar-shell",
+  close: "close-sidecar-shell",
+  open: "open-sidecar-shell",
+  openChanged: "open-sidecar-shell-changed",
+  detach: "detach-sidecar-shell",
+  attach: "attach-sidecar-shell"
+};
+
+export { SidecarShellEventNames };

package/esm/components/sidecar-shell/sidecar-shell.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidecar-shell.options.js","sourceRoot":"","sources":["../../../../src/components/sidecar-shell/sidecar-shell.options.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,OAAO,EAAE,uBAAuB;IAChC,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,oBAAoB;IAC1B,WAAW,EAAE,4BAA4B;IACzC,MAAM,EAAE,sBAAsB;IAC9B,MAAM,EAAE,sBAAsB;CACtB,CAAC"}

package/esm/components/sidecar-shell/sidecar-shell.styles.js

@@ -0,0 +1,9 @@
+import { fontFamilyBase, fontSizeBase300, colorNeutralForeground1, colorNeutralStroke3, colorNeutralBackground2, durationFast, curveAccelerateMid, curveDecelerateMid, display } from '@fluentui/web-components';
+import { css } from '@microsoft/fast-element';
+
+const styles = css`
+  ${display("flex")}
+
+  :host{--sidecar-width:320px;font-family:${fontFamilyBase};font-size:${fontSizeBase300};color:${colorNeutralForeground1};display:flex;flex-shrink:0;flex-direction:column;overflow:hidden;height:100%;width:0px;border-inline-start:1px solid ${colorNeutralStroke3};background:${colorNeutralBackground2};transition-property:width;transition-duration:${durationFast};transition-timing-function:${curveAccelerateMid};position:relative}@media (max-width:320px){:host{--sidecar-width:100%}}:host([open]){transition-timing-function:${curveDecelerateMid};width:var(--sidecar-width)}:host .header{width:var(--sidecar-width);height:64px;flex-shrink:0}:host([no-header]) .header{display:none}:host .content{width:var(--sidecar-width);overflow:auto;flex-grow:1}:host .footer{width:var(--sidecar-width);flex-shrink:0;min-height:92px;}:host([no-footer]) .footer{display:none}`;
+
+export { styles };

package/esm/components/sidecar-shell/sidecar-shell.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidecar-shell.styles.js","sourceRoot":"","sources":["../../../../src/components/sidecar-shell/sidecar-shell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,OAAO,EACR,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAqB;IAC1C,OAAO,CAAC,MAAM,CAAC;;;;mBAIA,cAAc;iBAChB,eAAe;aACnB,uBAAuB;;;;;;;qCAOC,mBAAmB;kBACtC,uBAAuB;;2BAEd,YAAY;kCACL,kBAAkB;;;;;;;;;;;kCAWlB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BnD,CAAC"}

package/esm/components/sidecar-shell/sidecar-shell.template.js

@@ -0,0 +1,12 @@
+import { slotted, when, html } from '@microsoft/fast-element';
+
+/**
+ * The template for the SidecarShell component.
+ * @public
+ */
+function SidecarShellTemplate() {
+  return html`<template ?open="${x => x.open}" tabindex="${x => x.open ? 0 : -1}"><slot name="start"></slot><div class="header"><slot name="header" ${slotted("header")}></slot></div><div class="content"><slot name="content" ${slotted("content")}></slot>${when(x => x.content.length === 0, html`<slot part="slot"></slot>`)}</div><div class="footer"><div class="footer-optional"><slot name="footer-optional" ${slotted("footerOptional")}></slot></div><slot name="footer" ${slotted("footer")}></slot></div><slot name="end"></slot></template>`;
+}
+const template = SidecarShellTemplate();
+
+export { SidecarShellTemplate, template };

package/esm/components/sidecar-shell/sidecar-shell.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidecar-shell.template.js","sourceRoot":"","sources":["../../../../src/components/sidecar-shell/sidecar-shell.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAI9D;;;GAGG;AACH,MAAM,UAAU,oBAAoB;IAGlC,OAAO,IAAI,CAAG;uBACO,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,eAAe,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;8BAG7C,OAAO,CAAC,QAAQ,CAAC;;;;+BAIhB,OAAO,CAAC,SAAS,CAAC;UACvC,IAAI,CACJ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC,EAC7B,IAAI,CAAA;;WAEH,CACF;;;;;yCAKgC,OAAO,CAAC,gBAAgB,CAAC;;8BAEpC,OAAO,CAAC,QAAQ,CAAC;;;;GAI5C,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GACnB,oBAAoB,EAAE,CAAC"}

package/esm/components/sidecar-shell-header/define.js

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

package/esm/components/sidecar-shell-header/define.js.map

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

package/esm/components/sidecar-shell-header/index.js

@@ -0,0 +1,5 @@
+export { SidecarShellHeader } from "./sidecar-shell-header.js";
+export { definition as SidecarShellHeaderDefinition } from "./sidecar-shell-header.definition.js";
+export { template as SidecarShellHeaderTemplate } from "./sidecar-shell-header.template.js";
+export { styles as SidecarShellHeaderStyles } from "./sidecar-shell-header.styles.js";
+//# sourceMappingURL=index.js.map

package/esm/components/sidecar-shell-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/sidecar-shell-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,UAAU,IAAI,4BAA4B,EAAE,MAAM,sCAAsC,CAAC;AAClG,OAAO,EAAE,QAAQ,IAAI,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAC5F,OAAO,EAAE,MAAM,IAAI,wBAAwB,EAAE,MAAM,kCAAkC,CAAC"}

package/esm/components/sidecar-shell-header/sidecar-shell-header.definition.js

@@ -0,0 +1,28 @@
+import { ButtonDefinition } from '@fluentui/web-components';
+import { composeDefinitions, fromFAST } from '@fabric-msft/fabric-web';
+import { DesignSystem } from '../design-system.js';
+import { SidecarShellHeader } from './sidecar-shell-header.js';
+import { styles } from './sidecar-shell-header.styles.js';
+import { template } from './sidecar-shell-header.template.js';
+
+/** @internal */
+const SidecarShellHeaderDefinition = SidecarShellHeader.compose({
+  name: `${DesignSystem.prefix}-sidecar-shell-header`,
+  template,
+  styles,
+  shadowOptions: {
+    delegatesFocus: true,
+    mode: DesignSystem.shadowRootMode
+  }
+});
+/**
+ * Composed element definition for `<fabric-sidecar-shell-header>`, registering
+ * the `fluent-button` dependency before the element itself.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fabric-sidecar-shell-header>`
+ */
+const definition = composeDefinitions(fromFAST(SidecarShellHeaderDefinition), fromFAST(ButtonDefinition));
+
+export { definition };

package/esm/components/sidecar-shell-header/sidecar-shell-header.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidecar-shell-header.definition.js","sourceRoot":"","sources":["../../../../src/components/sidecar-shell-header/sidecar-shell-header.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,gBAAgB;AAChB,MAAM,4BAA4B,GAAG,kBAAkB,CAAC,OAAO,CAAC;IAC9D,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,uBAAuB;IACnD,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,4BAA4B,CAAC,EACtC,QAAQ,CAAC,gBAAgB,CAAC,CAC3B,CAAC"}

package/esm/components/sidecar-shell-header/sidecar-shell-header.js

@@ -0,0 +1,71 @@
+import { ButtonDefinition } from '@fluentui/web-components';
+import { FASTElement } from '@microsoft/fast-element';
+import { DesignSystem } from '../design-system.js';
+import { SidecarShellEventNames } from '../sidecar-shell/sidecar-shell.options.js';
+
+/**
+ * SidecarShellHeader
+ * @summary A sidecar shell header component that provides basic interactivity, identification, and branding to the sidecar assistive pane. Includes functionality for dismissing and detaching the sidecar with accessibility support and event handling.
+ *
+ * @example
+ * ```html
+ * <fabric-sidecar-shell-header>
+ *   <div slot="icon">Custom Icon</div>
+ *   <span slot="title">Custom Title</span>
+ *   <div slot="badges">Badge Content</div>
+ *   <button slot="detach">Detach</button>
+ *   <button slot="overflow">Overflow</button>
+ * </fabric-sidecar-shell-header>
+ * ```
+ *
+ * @slot icon - The icon displayed at the start of the header, defaults to M365 icon
+ * @slot title - The title text displayed in the header, defaults to "fluent"
+ * @slot badges - Container for badge elements
+ * @slot detach - Optional detach button slot
+ * @slot overflow - Optional overflow menu button slot
+ *
+ * @csspart icon - The icon container
+ * @csspart title - The title container
+ * @csspart badges - The badges container
+ * @csspart detach - The detach button container
+ * @csspart overflow - The overflow button container
+ * @csspart dismiss - The dismiss button container
+ *
+ * @method dismissSidecar - Emits a dismiss event to close the sidecar
+ * @method detachSidecar - Emits a detach event to detach the sidecar
+ * @method connectedCallback - Lifecycle callback when component is connected to DOM
+ *
+ * @fires dismissSidecarShell - Fires when the dismiss button is clicked
+ * @fires detachSidecarShell - Fires when the detach button is clicked
+ *
+ * @extends FASTElement
+ * @tagname fabric-sidecar-shell-header
+ * @public
+ */
+class SidecarShellHeader extends FASTElement {
+  /**
+   * Emits a dismiss event to close the sidecar
+   * @public
+   */
+  dismissSidecar() {
+    this.$emit(SidecarShellEventNames.dismiss);
+  }
+  /**
+   * Emits a detach event to detach the sidecar
+   * @public
+   */
+  detachSidecar() {
+    this.$emit(SidecarShellEventNames.detach);
+  }
+  /**
+   * Sets up component when connected to DOM
+   * Registers the ButtonDefinition with the DesignSystem registry
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    ButtonDefinition.define(DesignSystem.registry);
+  }
+}
+
+export { SidecarShellHeader };

package/esm/components/sidecar-shell-header/sidecar-shell-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidecar-shell-header.js","sourceRoot":"","sources":["../../../../src/components/sidecar-shell-header/sidecar-shell-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2CAA2C,CAAC;AAEnF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,OAAO,kBAAmB,SAAQ,WAAW;IACjD;;;OAGG;IACI,cAAc;QACnB,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAC7C,CAAC;IAED;;;OAGG;IACI,aAAa;QAClB,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,MAAM,CAAC,CAAC;IAC5C,CAAC;IAED;;;;OAIG;IACH,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,gBAAgB,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACjD,CAAC;CACF"}