@fluentui/web-components 3.0.0-beta.72 → 3.0.0-beta.74

package/dist/esm/tooltip/tooltip.options.js

@@ -0,0 +1,19 @@
+/**
+ * The TooltipPositioning options and their corresponding CSS values
+ * @public
+ */
+export const TooltipPositioningOption = {
+    'above-start': 'block-start span-inline-end',
+    above: 'block-start',
+    'above-end': 'block-start span-inline-start',
+    'below-start': 'block-end span-inline-end',
+    below: 'block-end',
+    'below-end': 'block-end span-inline-start',
+    'before-top': 'inline-start span-block-end',
+    before: 'inline-start',
+    'before-bottom': 'inline-start span-block-start',
+    'after-top': 'inline-end span-block-end',
+    after: 'inline-end',
+    'after-bottom': 'inline-end span-block-start',
+};
+//# sourceMappingURL=tooltip.options.js.map

package/dist/esm/tooltip/tooltip.options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.options.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,aAAa,EAAE,6BAA6B;IAC5C,KAAK,EAAE,aAAa;IACpB,WAAW,EAAE,+BAA+B;IAC5C,aAAa,EAAE,2BAA2B;IAC1C,KAAK,EAAE,WAAW;IAClB,WAAW,EAAE,6BAA6B;IAC1C,YAAY,EAAE,6BAA6B;IAC3C,MAAM,EAAE,cAAc;IACtB,eAAe,EAAE,+BAA+B;IAChD,WAAW,EAAE,2BAA2B;IACxC,KAAK,EAAE,YAAY;IACnB,cAAc,EAAE,6BAA6B;CACrC,CAAC"}

package/dist/esm/tooltip/tooltip.styles.js

@@ -0,0 +1,95 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '../utils/display.js';
+import { borderRadiusMedium, colorNeutralBackground1, colorNeutralForeground1, colorNeutralShadowAmbient, colorNeutralShadowKey, colorTransparentStroke, fontFamilyBase, fontSizeBase200, lineHeightBase200, spacingHorizontalMNudge, spacingHorizontalXS, spacingVerticalXS, } from '../theme/design-tokens.js';
+import { TooltipPositioningOption } from './tooltip.options.js';
+/**
+ * Styles for the tooltip component
+ * @public
+ */
+export const styles = css `
+  ${display('inline-flex')}
+
+  :host(:not(:popover-open)) {
+    display: none;
+  }
+
+  :host {
+    --position-area: block-start;
+    --position-try-options: flip-block;
+    --block-offset: ${spacingVerticalXS};
+    --inline-offset: ${spacingHorizontalXS};
+    background: ${colorNeutralBackground1};
+    border-radius: ${borderRadiusMedium};
+    border: 1px solid ${colorTransparentStroke};
+    box-sizing: border-box;
+    color: ${colorNeutralForeground1};
+    display: inline-flex;
+    filter: drop-shadow(0 0 2px ${colorNeutralShadowAmbient}) drop-shadow(0 4px 8px ${colorNeutralShadowKey});
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase200};
+    inset: unset;
+    line-height: ${lineHeightBase200};
+    margin: unset; /* Remove browser default for [popover] */
+    max-width: 240px;
+    padding: 4px ${spacingHorizontalMNudge} 6px;
+    position: absolute;
+    position-area: var(--position-area);
+    position-try-options: var(--position-try-options);
+    width: auto;
+    z-index: 1;
+  }
+
+  @supports (inset-area: block-start) {
+    :host {
+      inset-area: var(--position-area);
+      position-try-fallbacks: var(--position-try-options);
+    }
+  }
+
+  :host(:is([positioning^='above'], [positioning^='below'], :not([positioning]))) {
+    margin-block: var(--block-offset);
+  }
+
+  :host(:is([positioning^='before'], [positioning^='after'])) {
+    margin-inline: var(--inline-offset);
+    --position-try-options: flip-inline;
+  }
+
+  :host([positioning='above-start']) {
+    --position-area: ${TooltipPositioningOption['above-start']};
+  }
+  :host([positioning='above']) {
+    --position-area: ${TooltipPositioningOption.above};
+  }
+  :host([positioning='above-end']) {
+    --position-area: ${TooltipPositioningOption['above-end']};
+  }
+  :host([positioning='below-start']) {
+    --position-area: ${TooltipPositioningOption['below-start']};
+  }
+  :host([positioning='below']) {
+    --position-area: ${TooltipPositioningOption.below};
+  }
+  :host([positioning='below-end']) {
+    --position-area: ${TooltipPositioningOption.below};
+  }
+  :host([positioning='before-top']) {
+    --position-area: ${TooltipPositioningOption['before-top']};
+  }
+  :host([positioning='before']) {
+    --position-area: ${TooltipPositioningOption.before};
+  }
+  :host([positioning='before-bottom']) {
+    --position-area: ${TooltipPositioningOption['before-bottom']};
+  }
+  :host([positioning='after-top']) {
+    --position-area: ${TooltipPositioningOption['after-top']};
+  }
+  :host([positioning='after']) {
+    --position-area: ${TooltipPositioningOption.after};
+  }
+  :host([positioning='after-bottom']) {
+    --position-area: ${TooltipPositioningOption['after-bottom']};
+  }
+`;
+//# sourceMappingURL=tooltip.styles.js.map

package/dist/esm/tooltip/tooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.styles.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,yBAAyB,EACzB,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,mBAAmB,EACnB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;sBASJ,iBAAiB;uBAChB,mBAAmB;kBACxB,uBAAuB;qBACpB,kBAAkB;wBACf,sBAAsB;;aAEjC,uBAAuB;;kCAEF,yBAAyB,2BAA2B,qBAAqB;mBACxF,cAAc;iBAChB,eAAe;;mBAEb,iBAAiB;;;mBAGjB,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;uBAyBnB,wBAAwB,CAAC,aAAa,CAAC;;;uBAGvC,wBAAwB,CAAC,KAAK;;;uBAG9B,wBAAwB,CAAC,WAAW,CAAC;;;uBAGrC,wBAAwB,CAAC,aAAa,CAAC;;;uBAGvC,wBAAwB,CAAC,KAAK;;;uBAG9B,wBAAwB,CAAC,KAAK;;;uBAG9B,wBAAwB,CAAC,YAAY,CAAC;;;uBAGtC,wBAAwB,CAAC,MAAM;;;uBAG/B,wBAAwB,CAAC,eAAe,CAAC;;;uBAGzC,wBAAwB,CAAC,WAAW,CAAC;;;uBAGrC,wBAAwB,CAAC,KAAK;;;uBAG9B,wBAAwB,CAAC,cAAc,CAAC;;CAE9D,CAAC"}

package/dist/esm/tooltip/tooltip.template.js

@@ -0,0 +1,11 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * Template for the tooltip component
+ * @public
+ */
+export const template = html `
+  <template popover aria-hidden="true">
+    <slot></slot>
+  </template>
+`;
+//# sourceMappingURL=tooltip.template.js.map

package/dist/esm/tooltip/tooltip.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.template.js","sourceRoot":"","sources":["../../../src/tooltip/tooltip.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;;;;CAIpC,CAAC"}

package/dist/web-components.d.ts

@@ -2484,6 +2484,22 @@ export declare class BaseTextInput extends FASTElement {
      * HTML Attribute: `autofocus`
      */
     autofocus: boolean;
+    /**
+     * The current value of the input.
+     * @public
+     * @remarks
+     * HTML Attribute: `current-value`
+     */
+    currentValue: string;
+    /**
+     * Tracks the current value of the input.
+     *
+     * @param prev - the previous value
+     * @param next - the next value
+     *
+     * @internal
+     */
+    currentValueChanged(prev: string, next: string): void;
     /**
      * The default slotted content. This is the content that appears in the text field label.
      *
@@ -2655,12 +2671,6 @@ export declare class BaseTextInput extends FASTElement {
      * HTML Attribute: `type`
      */
     type: TextInputType;
-    /**
-     * The current value of the input.
-     *
-     * @internal
-     */
-    private _value;
     /**
      * A reference to the internal input element.
      *
@@ -9943,6 +9953,130 @@ export declare const ToggleButtonStyles: ElementStyles;
  */
 export declare const ToggleButtonTemplate: ElementViewTemplate<ToggleButton>;
 
+/**
+ * A Tooltip Custom HTML Element.
+ * Based on ARIA APG Tooltip Pattern {@link https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ }
+ * @public
+ */
+export declare class Tooltip extends FASTElement {
+    /**
+     * The attached element internals
+     */
+    elementInternals: ElementInternals;
+    /**
+     * The item ID
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: id
+     */
+    id: string;
+    /**
+     * Set the delay for the tooltip
+     */
+    delay?: number;
+    /**
+     * The default delay for the tooltip
+     * @internal
+     */
+    private defaultDelay;
+    /**
+     * Set the positioning of the tooltip
+     */
+    positioning?: TooltipPositioningOption;
+    /**
+     * The id of the anchor element for the tooltip
+     */
+    anchor: string;
+    /**
+     * Reference to the anchor element
+     * @internal
+     */
+    private get anchorElement();
+    /**
+     * Reference to the anchor positioning style element
+     * @internal
+     */
+    protected anchorPositioningStyleElement: HTMLStyleElement | null;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Shows the tooltip
+     * @param delay Number of milliseconds to delay showing the tooltip
+     * @internal
+     */
+    showTooltip(delay?: number): void;
+    /**
+     * Hide the tooltip
+     * @param delay Number of milliseconds to delay hiding the tooltip
+     * @internal
+     */
+    hideTooltip(delay?: number): void;
+    /**
+     * Show the tooltip on mouse enter
+     */
+    mouseenterAnchorHandler: () => void;
+    /**
+     * Hide the tooltip on mouse leave
+     */
+    mouseleaveAnchorHandler: () => void;
+    /**
+     * Show the tooltip on focus
+     */
+    focusAnchorHandler: () => void;
+    /**
+     * Hide the tooltip on blur
+     */
+    blurAnchorHandler: () => void;
+}
+
+/**
+ * The {@link Tooltip } custom element definition.
+ *
+ * @public
+ * @remarks
+ * HTML Element: `<fluent-tooltip>`
+ */
+export declare const TooltipDefinition: FASTElementDefinition<typeof Tooltip>;
+
+/**
+ * The TooltipPositioning options and their corresponding CSS values
+ * @public
+ */
+export declare const TooltipPositioningOption: {
+    readonly 'above-start': "block-start span-inline-end";
+    readonly above: "block-start";
+    readonly 'above-end': "block-start span-inline-start";
+    readonly 'below-start': "block-end span-inline-end";
+    readonly below: "block-end";
+    readonly 'below-end': "block-end span-inline-start";
+    readonly 'before-top': "inline-start span-block-end";
+    readonly before: "inline-start";
+    readonly 'before-bottom': "inline-start span-block-start";
+    readonly 'after-top': "inline-end span-block-end";
+    readonly after: "inline-end";
+    readonly 'after-bottom': "inline-end span-block-start";
+};
+
+/**
+ * The TooltipPositioning type
+ * @public
+ */
+export declare type TooltipPositioningOption = ValuesOf<typeof TooltipPositioningOption>;
+
+/**
+ * Styles for the tooltip component
+ * @public
+ */
+export declare const TooltipStyles: ElementStyles;
+
+/**
+ * Template for the tooltip component
+ * @public
+ */
+export declare const TooltipTemplate: ViewTemplate<Tooltip, any>;
+
 export declare const typographyBody1StrongerStyles: CSSDirective;
 
 export declare const typographyBody1StrongStyles: CSSDirective;