@fabric-msft/fabric-web 0.1.0-beta

package/esm/components/teaching-bubble/teaching-bubble.definition.js

@@ -0,0 +1,19 @@
+import { DesignSystem } from "../design-system";
+import { TeachingBubble } from "./teaching-bubble";
+import { styles } from "./teaching-bubble.styles";
+import { template } from "./teaching-bubble.template";
+/**
+ *
+ * @public
+ * @remarks
+ * HTML Element: <fabric-teaching-bubble>
+ */
+export const definition = TeachingBubble.compose({
+    name: `${DesignSystem.prefix}-teaching-bubble`,
+    template,
+    styles,
+    shadowOptions: {
+        mode: DesignSystem.shadowRootMode,
+    },
+});
+//# sourceMappingURL=teaching-bubble.definition.js.map

package/esm/components/teaching-bubble/teaching-bubble.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaching-bubble.definition.js","sourceRoot":"","sources":["../../../../src/components/teaching-bubble/teaching-bubble.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,OAAO,CAAC;IAC/C,IAAI,EAAE,GAAG,YAAY,CAAC,MAAM,kBAAkB;IAC9C,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACb,IAAI,EAAE,YAAY,CAAC,cAAc;KAClC;CACF,CAAC,CAAC"}

package/esm/components/teaching-bubble/teaching-bubble.js

@@ -0,0 +1,444 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { arrow, autoPlacement, autoUpdate, computePosition, offset, } from "@floating-ui/dom";
+import { FASTElement, Updates, attr, observable, } from "@microsoft/fast-element";
+import { keyEscape, keyTab } from "@microsoft/fast-web-utilities";
+import { isTabbable } from "tabbable";
+/**
+ * A TeachingBubble Custom HTML Element.
+ * @public
+ * @class
+ * @extends FASTElement
+ *
+ * @remarks
+ * HTML Element: \<fabric-teaching-bubble\>
+ * Roles: Implements {@link https://www.w3.org/TR/wai-aria-1.1/#tooltip | ARIA tooltip } on internal container.
+ * Composition: TeachingBubble
+ *
+ * @slot default - The slot for bubble content
+ * @slot footer - The slot for bubble footer
+ * @slot close - The slot for close button
+ * @slot image - The slot for image
+ * @slot heading - The slot for heading
+ *
+ * @attr {string} target - The ID of the element that the teaching bubble is attached to.
+ * @attr {TeachingBubblePlacement} placement - The placement of the teaching bubble relative to the target.
+ * @attr {boolean} open - Determines whether the teaching bubble is open.
+ * @attr {boolean} disable-trap-focus - Determines whether focus trapping is disabled.
+ * @attr {TeachingBubbleSize} size - The size of the teaching bubble.
+ *
+ * @csspart content - The content container for the teaching bubble
+ * @csspart footer - The footer container for the teaching bubble
+ * @csspart heading - The heading container for the teaching bubble
+ * @csspart close - The close button container for the teaching bubble
+ * @csspart image - The image container for the teaching bubble
+ * @csspart arrow - The arrow container for the teaching bubble
+ *
+ * @fires openchange - Fires a custom 'openchange' event when the open state changes
+ * @fires dismiss - Fires a custom 'dismiss' event when the teaching bubble is dismissed
+ *
+ * @public
+ */
+export class TeachingBubble extends FASTElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The target element that the teaching bubble is attached to.
+         * @type {string}
+         * @default ""
+         */
+        this.target = "";
+        /**
+         * Determines whether focus trapping is disabled or not.
+         * @type {boolean}
+         */
+        this.disableTrapFocus = false;
+        /**
+         * Determines whether the teaching bubble is currently trapping focus or not.
+         * @type {boolean}
+         */
+        this.isTrappingFocus = false;
+        /**
+         * Determines whether the teaching bubble should trap focus or not.
+         * @type {boolean}
+         */
+        this.trapFocus = false;
+        /**
+         * Useful for cleanup task of floating UI auto update from dom.
+         * @type {boolean}
+         */
+        this.cleanAutoUpdate = null;
+        /**
+         * @public
+         * Method to show bubble.
+         */
+        this.show = () => {
+            this.updatePosition();
+            // Auto updates the position of anchored Teaching Bubble to its reference element on resize.
+            this.cleanAutoUpdate = autoUpdate(this.targetEl, this.currentEl, this.updatePosition);
+            this.open = true;
+            this.trapFocus = true;
+            this.updateTrapFocus(true);
+        };
+        /**
+         * @public
+         * Method to hide bubble.
+         * @param dismiss - Determines whether the teaching bubble should be dismissed or not.
+         */
+        this.hide = (dismiss = false) => {
+            var _a;
+            this.open = false;
+            (_a = this.currentEl) === null || _a === void 0 ? void 0 : _a.setAttribute("hidden", "");
+            if (dismiss) {
+                this.$emit("dismiss");
+            }
+        };
+        this.renderResolver = null;
+        this.renderPromise = new Promise((resolve) => {
+            this.renderResolver = resolve;
+        });
+        /**
+         * @private
+         * Method to set the target, current and arrow elements.
+         */
+        this.setElements = () => {
+            var _a;
+            this.targetEl = document.getElementById(this.target);
+            this.currentEl = this;
+            this.arrowEl = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById("arrow");
+        };
+        /**
+         * @private
+         * Method to update position when element is rendered in the dom.
+         */
+        this.updatePosition = () => {
+            this.setElements();
+            // Initial position of the Teaching Bubble popup.
+            const computeObj = this.placement
+                ? {
+                    placement: this.placement,
+                    middleware: [
+                        offset(10),
+                        arrow({
+                            element: this.arrowEl,
+                            padding: 4, // Prevents arrow from overflowing the corners, matches border radius of bubble.
+                        }),
+                    ],
+                }
+                : {
+                    middleware: [
+                        autoPlacement({ autoAlignment: true }),
+                        offset(10),
+                        arrow({
+                            element: this.arrowEl,
+                            padding: 4,
+                        }),
+                    ],
+                };
+            if (this.targetEl && this.currentEl) {
+                computePosition(this.targetEl, this.currentEl, computeObj).then(({ x, y, placement, middlewareData }) => {
+                    var _a;
+                    if (!(this.currentEl instanceof HTMLElement)) {
+                        return;
+                    }
+                    Object.assign(this.currentEl.style, {
+                        left: `${x}px`,
+                        top: `${y}px`,
+                    });
+                    // Accessing the arrow x and y position.
+                    const { x: arrowX, y: arrowY } = ((_a = middlewareData.arrow) !== null && _a !== void 0 ? _a : {});
+                    const staticSide = {
+                        top: "bottom",
+                        right: "left",
+                        bottom: "top",
+                        left: "right",
+                    }[placement.split("-")[0]];
+                    Object.assign(this.arrowEl.style, {
+                        left: arrowX != null ? `${arrowX}px` : "",
+                        top: arrowY != null ? `${arrowY}px` : "",
+                        right: "",
+                        bottom: "",
+                        [staticSide]: "-8px",
+                    });
+                });
+            }
+        };
+        /**
+         * @private
+         * Handles keydown events on the document
+         * @param e - The keydown event
+         */
+        this.handleDocumentKeydown = (e) => {
+            if (!e.defaultPrevented && this.open) {
+                switch (e.key) {
+                    case keyTab:
+                        this.handleTabKeyDown(e);
+                        break;
+                    case keyEscape:
+                        this.hide(true);
+                        break;
+                    default:
+                        return true;
+                }
+            }
+        };
+        /**
+         * @private
+         * Handles tab keydown events
+         * @param e - The keydown event
+         */
+        this.handleTabKeyDown = (e) => {
+            if (!this.trapFocus || !this.open) {
+                return;
+            }
+            const bounds = this.getTabQueueBounds();
+            if (bounds.length === 1) {
+                bounds[0].focus();
+                e.preventDefault();
+                return;
+            }
+            if (e.shiftKey && e.target === bounds[0]) {
+                bounds[bounds.length - 1].focus();
+                e.preventDefault();
+            }
+            else if (!e.shiftKey && e.target === bounds[bounds.length - 1]) {
+                bounds[0].focus();
+                e.preventDefault();
+            }
+            return;
+        };
+        /**
+         * @private
+         * Gets the bounds of the tab queue
+         * @returns (HTMLElement | SVGElement)[]
+         */
+        this.getTabQueueBounds = () => {
+            const bounds = [];
+            return TeachingBubble.reduceTabbableItems(bounds, this);
+        };
+        /**
+         * @private
+         * Updates the state of focus trapping
+         * @param shouldTrapFocusOverride - Optional override for whether focus should be trapped
+         */
+        this.updateTrapFocus = (shouldTrapFocusOverride) => {
+            const shouldTrapFocus = shouldTrapFocusOverride === undefined
+                ? this.shouldTrapFocus()
+                : shouldTrapFocusOverride;
+            if (shouldTrapFocus && !this.isTrappingFocus) {
+                this.isTrappingFocus = true;
+                // Add an event listener for focusin events if we are trapping focus
+                document.addEventListener("focusin", this.handleDocumentFocus);
+                Updates.enqueue(() => {
+                    if (this.shouldForceFocus(document.activeElement)) {
+                        this.focusFirstElement();
+                    }
+                });
+            }
+            else if (!shouldTrapFocus && this.isTrappingFocus) {
+                this.isTrappingFocus = false;
+                // remove event listener if we are not trapping focus
+                document.removeEventListener("focusin", this.handleDocumentFocus);
+            }
+        };
+        /**
+         * @private
+         * Handles focus events on the document
+         * @param e - The focus event
+         */
+        this.handleDocumentFocus = (e) => {
+            if (!e.defaultPrevented && this.shouldForceFocus(e.target)) {
+                this.focusFirstElement();
+                e.preventDefault();
+            }
+        };
+        /**
+         * @private
+         * Focuses the first element in the tab queue
+         */
+        this.focusFirstElement = () => {
+            const bounds = this.getTabQueueBounds();
+            const teachingBubbleAllEls = document.getElementsByTagName("fabric-teaching-bubble");
+            let disableFocus = 0;
+            Array.from(teachingBubbleAllEls).forEach((el) => {
+                if (true === el.hasAttribute("open")) {
+                    disableFocus++;
+                }
+            });
+            // If more than one fabric-tabbable element present, then disable first focus.
+            if (disableFocus > 1) {
+                return;
+            }
+            if (bounds.length > 0) {
+                bounds[0].focus();
+            }
+            else {
+                if (this.currentEl instanceof HTMLElement) {
+                    this.currentEl.focus();
+                }
+            }
+        };
+        /**
+         * @private
+         * Determines if focus should be forced
+         * @param currentFocusElement - The currently focused element
+         * @returns boolean
+         */
+        this.shouldForceFocus = (currentFocusElement) => {
+            return this.isTrappingFocus && !this.contains(currentFocusElement);
+        };
+        /**
+         * @private
+         * Determines if focus should be trapped
+         * @returns boolean
+         */
+        this.shouldTrapFocus = () => {
+            return this.trapFocus && this.open;
+        };
+    }
+    /**
+     * @public
+     * Method gets called when the component is inserted into the document.
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.renderPromise.then(() => {
+            this.setElements();
+            this.initializePosition();
+            document.addEventListener("keydown", this.handleDocumentKeydown);
+            Updates.enqueue(() => {
+                this.updateTrapFocus();
+                this.disableTrapFocusHandler();
+            });
+        });
+        this.renderResolver();
+    }
+    /**
+     * @public
+     * Method to perform cleanup tasks.
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Remove the keydown event listener.
+        document.removeEventListener("keydown", this.handleDocumentKeydown);
+        document.removeEventListener("focusin", this.handleDocumentFocus);
+        this.updateTrapFocus(false);
+        if (this.cleanAutoUpdate) {
+            this.cleanAutoUpdate();
+        }
+        this.targetEl = null;
+        this.currentEl = null;
+        this.arrowEl = null;
+    }
+    /**
+     * @public
+     * Method called when the 'open' attribute changes.
+     */
+    openChanged() {
+        this.initializePosition();
+        Updates.enqueue(() => {
+            this.updateTrapFocus();
+            this.disableTrapFocusHandler();
+        });
+        this.$emit("openchange", this.open);
+    }
+    /**
+     * @private
+     * Reduces the list of tabbable items
+     * @param elements - The current list of elements
+     * @param element - The element to consider adding to the list
+     * @returns HTMLElement[]
+     */
+    static reduceTabbableItems(elements, element) {
+        if (element.getAttribute("tabindex") === "-1") {
+            return elements;
+        }
+        if (isTabbable(element) ||
+            (TeachingBubble.isFocusableFastElement(element) &&
+                TeachingBubble.hasTabbableShadow(element))) {
+            elements.push(element);
+            return elements;
+        }
+        return Array.from(element.children).reduce((elements, currentElement) => TeachingBubble.reduceTabbableItems(elements, currentElement), elements);
+    }
+    /**
+     * @private
+     * Determines if an element is a focusable FASTElement
+     * @param element - The element to check
+     * @returns boolean
+     */
+    static isFocusableFastElement(element) {
+        var _a, _b;
+        return !!((_b = (_a = element.$fastController) === null || _a === void 0 ? void 0 : _a.definition.shadowOptions) === null || _b === void 0 ? void 0 : _b.delegatesFocus);
+    }
+    /**
+     * @private
+     * Determines if an element has a tabbable shadow
+     * @param element - The element to check
+     * @returns boolean
+     */
+    static hasTabbableShadow(element) {
+        var _a, _b;
+        return Array.from((_b = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("*")) !== null && _b !== void 0 ? _b : []).some((x) => {
+            return isTabbable(x);
+        });
+    }
+    /**
+     * @private
+     * Method to check if attribute 'disable-trap-focus' is present or not.
+     */
+    disableTrapFocusHandler() {
+        if (this.disableTrapFocus) {
+            this.trapFocus = false;
+        }
+        else {
+            this.trapFocus = true;
+        }
+    }
+    /**
+     * @private
+     * Method to initialize the position of bubble.
+     */
+    initializePosition() {
+        this.open && this.targetEl && this.currentEl && this.arrowEl && this.show();
+        this.open || this.hide();
+    }
+}
+__decorate([
+    attr({ mode: "fromView" })
+], TeachingBubble.prototype, "target", void 0);
+__decorate([
+    attr({ mode: "fromView" })
+], TeachingBubble.prototype, "placement", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], TeachingBubble.prototype, "open", void 0);
+__decorate([
+    attr({ mode: "boolean", attribute: "disable-trap-focus" })
+], TeachingBubble.prototype, "disableTrapFocus", void 0);
+__decorate([
+    attr({ mode: "fromView" })
+], TeachingBubble.prototype, "size", void 0);
+__decorate([
+    observable
+], TeachingBubble.prototype, "targetEl", void 0);
+__decorate([
+    observable
+], TeachingBubble.prototype, "currentEl", void 0);
+__decorate([
+    observable
+], TeachingBubble.prototype, "arrowEl", void 0);
+__decorate([
+    observable
+], TeachingBubble.prototype, "isTrappingFocus", void 0);
+__decorate([
+    observable
+], TeachingBubble.prototype, "trapFocus", void 0);
+__decorate([
+    observable
+], TeachingBubble.prototype, "cleanAutoUpdate", void 0);
+//# sourceMappingURL=teaching-bubble.js.map

package/esm/components/teaching-bubble/teaching-bubble.js.map

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

package/esm/components/teaching-bubble/teaching-bubble.options.d.ts

@@ -0,0 +1,31 @@
+import { ValuesOf } from "@microsoft/fast-foundation";
+/**
+ * @public
+ * The size variations for the teaching bubble component.
+ */
+export declare const TeachingBubbleSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+/**
+ * @public
+ * The size types for the teaching bubble component.
+ */
+export declare type TeachingBubbleSize = ValuesOf<typeof TeachingBubbleSize>;
+export declare const TeachingBubblePlacement: {
+    readonly top: "top";
+    readonly bottom: "bottom";
+    readonly left: "left";
+    readonly right: "right";
+    readonly topStart: "top-start";
+    readonly topEnd: "top-end";
+    readonly bottomStart: "bottom-start";
+    readonly bottomEnd: "bottom-end";
+    readonly leftStart: "left-start";
+    readonly leftEnd: "left-end";
+    readonly rightStart: "right-start";
+    readonly rightEnd: "right-end";
+};
+export declare type TeachingBubblePlacement = ValuesOf<typeof TeachingBubblePlacement>;
+//# sourceMappingURL=teaching-bubble.options.d.ts.map

package/esm/components/teaching-bubble/teaching-bubble.options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaching-bubble.options.d.ts","sourceRoot":"","sources":["../../../../src/components/teaching-bubble/teaching-bubble.options.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD;;;GAGG;AACH,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC;AAEX;;;GAGG;AACH,oBAAY,kBAAkB,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAErE,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;CAa1B,CAAC;AAEX,oBAAY,uBAAuB,GAAG,QAAQ,CAAC,OAAO,uBAAuB,CAAC,CAAC"}

package/esm/components/teaching-bubble/teaching-bubble.options.js

@@ -0,0 +1,24 @@
+/**
+ * @public
+ * The size variations for the teaching bubble component.
+ */
+export const TeachingBubbleSize = {
+    small: "small",
+    medium: "medium",
+    large: "large"
+};
+export const TeachingBubblePlacement = {
+    top: "top",
+    bottom: "bottom",
+    left: "left",
+    right: "right",
+    topStart: "top-start",
+    topEnd: "top-end",
+    bottomStart: "bottom-start",
+    bottomEnd: "bottom-end",
+    leftStart: "left-start",
+    leftEnd: "left-end",
+    rightStart: "right-start",
+    rightEnd: "right-end"
+};
+//# sourceMappingURL=teaching-bubble.options.js.map

package/esm/components/teaching-bubble/teaching-bubble.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaching-bubble.options.js","sourceRoot":"","sources":["../../../../src/components/teaching-bubble/teaching-bubble.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAQX,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,WAAW;IACrB,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,cAAc;IAC3B,SAAS,EAAE,YAAY;IACvB,SAAS,EAAE,YAAY;IACvB,OAAO,EAAE,UAAU;IACnB,UAAU,EAAE,aAAa;IACzB,QAAQ,EAAE,WAAW;CACb,CAAC"}

package/esm/components/teaching-bubble/teaching-bubble.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;
+//# sourceMappingURL=teaching-bubble.styles.d.ts.map

package/esm/components/teaching-bubble/teaching-bubble.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaching-bubble.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/teaching-bubble/teaching-bubble.styles.ts"],"names":[],"mappings":"AAuBA,eAAO,MAAM,MAAM,iDA+FlB,CAAC"}

package/esm/components/teaching-bubble/teaching-bubble.styles.js

@@ -0,0 +1,100 @@
+import { borderRadiusMedium, borderRadiusSmall, colorBrandBackground, colorNeutralBackground1, fontFamilyBase, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontWeightRegular, fontWeightSemibold, lineHeightBase200, lineHeightBase300, lineHeightBase400, shadow16, spacingHorizontalL, spacingHorizontalM, spacingHorizontalS } from "@fluentui/web-components";
+import { css } from "@microsoft/fast-element";
+import { display } from "@microsoft/fast-foundation";
+export const styles = css `
+  :host {
+    position: absolute;
+    border: 1px solid ${colorBrandBackground};
+    border-radius: ${borderRadiusMedium};
+    background-color: ${colorBrandBackground};
+    color: ${colorNeutralBackground1};
+    padding: ${spacingHorizontalL};
+    box-shadow: ${shadow16};
+    max-width: 288px;
+  }
+
+  ::slotted(*) {
+    font-family: ${fontFamilyBase};
+    font-size: unset;
+    font-weight: ${fontWeightRegular};
+    line-height: ${lineHeightBase300};
+    margin: 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+  }
+
+  :host([size="small"]) ::slotted(*) {
+    font-size: ${fontSizeBase200};
+  }
+
+  :host([size="medium"]) ::slotted(*) {
+    font-size: ${fontSizeBase300};
+  }
+
+  :host([size="large"]) ::slotted(*) {
+    font-size: ${fontSizeBase400};
+  }
+
+  :host[hidden] {
+    ${display("none")}
+  }
+
+  slot[name="close"]::slotted(*) {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .content {
+    position: relative;
+  }
+
+  .heading {
+    margin-bottom: ${spacingHorizontalS};
+  }
+
+  .footer {
+  }
+
+  .arrow {
+    position: absolute;
+    background: ${colorBrandBackground};
+    width: 16px;
+    height: 16px;
+    transform: rotate(45deg);
+    border-radius: ${borderRadiusSmall};
+  }
+
+  slot[name="image"]::slotted(*) {
+    display: block;
+    margin-bottom: ${spacingHorizontalM};
+    width: 100%;
+    height: 100%;
+  }
+
+  slot[name="heading"]::slotted(*) {
+    font-weight: ${fontWeightSemibold};
+    line-height: ${lineHeightBase400};
+  }
+
+  :host([size="small"]) slot[name="heading"]::slotted(*) {
+    font-size: ${fontSizeBase300};
+  }
+
+  :host([size="medium"]) slot[name="heading"]::slotted(*) {
+    font-size: ${fontSizeBase400};
+  }
+
+  :host([size="large"]) slot[name="heading"]::slotted(*) {
+    font-size: ${fontSizeBase500};
+  }
+
+  slot[name="footer"]::slotted(*) {
+    line-height: ${lineHeightBase200};
+    margin-top: ${spacingHorizontalM};
+    padding-top: ${spacingHorizontalM};
+  }
+`;
+//# sourceMappingURL=teaching-bubble.styles.js.map

package/esm/components/teaching-bubble/teaching-bubble.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaching-bubble.styles.js","sourceRoot":"","sources":["../../../../src/components/teaching-bubble/teaching-bubble.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EACnB,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;;;wBAGD,oBAAoB;qBACvB,kBAAkB;wBACf,oBAAoB;aAC/B,uBAAuB;eACrB,kBAAkB;kBACf,QAAQ;;;;;mBAKP,cAAc;;mBAEd,iBAAiB;mBACjB,iBAAiB;;;;;;;;;iBASnB,eAAe;;;;iBAIf,eAAe;;;;iBAIf,eAAe;;;;MAI1B,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;qBAcA,kBAAkB;;;;;;;;kBAQrB,oBAAoB;;;;qBAIjB,iBAAiB;;;;;qBAKjB,kBAAkB;;;;;;mBAMpB,kBAAkB;mBAClB,iBAAiB;;;;iBAInB,eAAe;;;;iBAIf,eAAe;;;;iBAIf,eAAe;;;;mBAIb,iBAAiB;kBAClB,kBAAkB;mBACjB,kBAAkB;;CAEpC,CAAC"}

package/esm/components/teaching-bubble/teaching-bubble.template.d.ts

@@ -0,0 +1,5 @@
+import { ElementViewTemplate } from "@microsoft/fast-element";
+import { TeachingBubble } from "./teaching-bubble";
+export declare function teachingBubbleTemplate<T extends TeachingBubble>(): ElementViewTemplate<T>;
+export declare const template: ElementViewTemplate<TeachingBubble>;
+//# sourceMappingURL=teaching-bubble.template.d.ts.map

package/esm/components/teaching-bubble/teaching-bubble.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"teaching-bubble.template.d.ts","sourceRoot":"","sources":["../../../../src/components/teaching-bubble/teaching-bubble.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAQ,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,wBAAgB,sBAAsB,CACpC,CAAC,SAAS,cAAc,KACrB,mBAAmB,CAAC,CAAC,CAAC,CA0B1B;AAED,eAAO,MAAM,QAAQ,EAAE,mBAAmB,CAAC,cAAc,CAC/B,CAAC"}