@fluentui/web-components 2.5.11 → 3.0.0-alpha.2

package/dist/esm/styles/direction.js

@@ -1,73 +0,0 @@
-import { direction as directionDesignToken } from '../design-tokens';
-/**
- * Behavior to conditionally apply LTR and RTL stylesheets. To determine which to apply,
- * the behavior will use the nearest DesignSystemProvider's 'direction' design system value.
- *
- * @public
- * @example
- * ```ts
- * import { css } from "@microsoft/fast-element";
- * import { DirectionalStyleSheetBehavior } from "@microsoft/fast-foundation";
- *
- * css`
- *  // ...
- * `.withBehaviors(new DirectionalStyleSheetBehavior(
- *   css`:host { content: "ltr"}`),
- *   css`:host { content: "rtl"}`),
- * )
- * ```
- */
-export class DirectionalStyleSheetBehavior {
-    constructor(ltr, rtl) {
-        this.cache = new WeakMap();
-        this.ltr = ltr;
-        this.rtl = rtl;
-    }
-    /**
-     * @internal
-     */
-    bind(source) {
-        this.attach(source);
-    }
-    /**
-     * @internal
-     */
-    unbind(source) {
-        const cache = this.cache.get(source);
-        if (cache) {
-            directionDesignToken.unsubscribe(cache);
-        }
-    }
-    attach(source) {
-        const subscriber = this.cache.get(source) || new DirectionalStyleSheetBehaviorSubscription(this.ltr, this.rtl, source);
-        const value = directionDesignToken.getValueFor(source);
-        directionDesignToken.subscribe(subscriber);
-        subscriber.attach(value);
-        this.cache.set(source, subscriber);
-    }
-}
-/**
- * Subscription for {@link DirectionalStyleSheetBehavior}
- */
-class DirectionalStyleSheetBehaviorSubscription {
-    constructor(ltr, rtl, source) {
-        this.ltr = ltr;
-        this.rtl = rtl;
-        this.source = source;
-        this.attached = null;
-    }
-    handleChange({ target, token }) {
-        this.attach(token.getValueFor(this.source));
-    }
-    attach(direction) {
-        if (this.attached !== this[direction]) {
-            if (this.attached !== null) {
-                this.source.$fastController.removeStyles(this.attached);
-            }
-            this.attached = this[direction];
-            if (this.attached !== null) {
-                this.source.$fastController.addStyles(this.attached);
-            }
-        }
-    }
-}

package/dist/esm/styles/elevation.js

@@ -1,74 +0,0 @@
-import { DesignToken } from '@microsoft/fast-foundation';
-/**
- * Define shadow algorithms.
- *
- * TODO: The --background-luminance will need to be derived from JavaScript. For now
- * this is hard-coded to a 1, the relative luminance of pure white.
- * https://github.com/microsoft/fast/issues/2778
- * opacity was `calc(.11 * (2 - var(--background-luminance, 1)))`
- *
- * @internal
- * @deprecated Use elevationShadow design token
- */
-export const ambientShadow = '0 0 2px rgba(0, 0, 0, 0.14)';
-/**
- * @internal
- * @deprecated Use elevationShadow design token
- */
-export const directionalShadow = '0 calc(var(--elevation) * 0.5px) calc((var(--elevation) * 1px)) rgba(0, 0, 0, 0.2)';
-/**
- * Applies the box-shadow CSS rule set to the elevation formula.
- * Control this formula with the --elevation CSS Custom Property
- * by setting --elevation to a number.
- *
- * @public
- * @deprecated Use elevationShadow design token
- */
-export const elevation = `box-shadow: ${ambientShadow}, ${directionalShadow};`;
-/**
- * @public
- */
-export const elevationShadowRecipe = DesignToken.create({
-    name: 'elevation-shadow',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element, size, reference) => {
-        let ambientOpacity = 0.12;
-        let directionalOpacity = 0.14;
-        if (size > 16) {
-            ambientOpacity = 0.2;
-            directionalOpacity = 0.24;
-        }
-        const ambient = `0 0 2px rgba(0, 0, 0, ${ambientOpacity})`;
-        const directional = `0 calc(${size} * 0.5px) calc((${size} * 1px)) rgba(0, 0, 0, ${directionalOpacity})`;
-        return `${ambient}, ${directional}`;
-    },
-});
-/** @public */
-export const elevationShadowCardRestSize = DesignToken.create('elevation-shadow-card-rest-size').withDefault(4);
-/** @public */
-export const elevationShadowCardHoverSize = DesignToken.create('elevation-shadow-card-hover-size').withDefault(8);
-/** @public */
-export const elevationShadowCardActiveSize = DesignToken.create('elevation-shadow-card-active-size').withDefault(0);
-/** @public */
-export const elevationShadowCardFocusSize = DesignToken.create('elevation-shadow-card-focus-size').withDefault(8);
-/** @public */
-export const elevationShadowCardRest = DesignToken.create('elevation-shadow-card-rest').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardRestSize.getValueFor(element)));
-/** @public */
-export const elevationShadowCardHover = DesignToken.create('elevation-shadow-card-hover').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardHoverSize.getValueFor(element)));
-/** @public */
-export const elevationShadowCardActive = DesignToken.create('elevation-shadow-card-active').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardActiveSize.getValueFor(element)));
-/** @public */
-export const elevationShadowCardFocus = DesignToken.create('elevation-shadow-card-focus').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardFocusSize.getValueFor(element)));
-/** @public */
-export const elevationShadowTooltipSize = DesignToken.create('elevation-shadow-tooltip-size').withDefault(16);
-/** @public */
-export const elevationShadowTooltip = DesignToken.create('elevation-shadow-tooltip').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowTooltipSize.getValueFor(element)));
-/** @public */
-export const elevationShadowFlyoutSize = DesignToken.create('elevation-shadow-flyout-size').withDefault(32);
-/** @public */
-export const elevationShadowFlyout = DesignToken.create('elevation-shadow-flyout').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowFlyoutSize.getValueFor(element)));
-/** @public */
-export const elevationShadowDialogSize = DesignToken.create('elevation-shadow-dialog-size').withDefault(128);
-/** @public */
-export const elevationShadowDialog = DesignToken.create('elevation-shadow-dialog').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowDialogSize.getValueFor(element)));

package/dist/esm/styles/focus.js

@@ -1,21 +0,0 @@
-import { cssPartial } from '@microsoft/fast-element';
-import { focusStrokeOuter, focusStrokeWidth, strokeWidth } from '../design-tokens';
-/**
- * Partial CSS for the focus treatment for most typical sized components like Button, Menu Item, etc.
- *
- * @public
- */
-export const focusTreatmentBase = cssPartial `
-  outline: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter};
-  outline-offset: calc(${focusStrokeWidth} * -1px);
-`;
-/**
- * Partial CSS for the focus treatment for tighter components with spacing constraints, like Checkbox
- * and Radio, or plain text like Hypertext appearance Anchor or Breadcrumb Item.
- *
- * @public
- */
-export const focusTreatmentTight = cssPartial `
-  outline: calc(${focusStrokeWidth} * 1px) solid ${focusStrokeOuter};
-  outline-offset: calc(${strokeWidth} * 1px);
-`;

package/dist/esm/styles/patterns/button.styles.js

@@ -1,427 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { heightNumber } from '../size';
-import { accentFillActive, accentFillHover, accentFillRest, accentForegroundActive, accentForegroundHover, accentForegroundRest, accentStrokeControlActive, accentStrokeControlHover, accentStrokeControlRest, controlCornerRadius, density, designUnit, focusStrokeInner, focusStrokeWidth, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeActive, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, neutralStrokeHover, neutralStrokeRest, strokeWidth, } from '../../design-tokens';
-import { typeRampBase } from '../../styles/patterns/type-ramp';
-import { focusTreatmentBase, focusTreatmentTight } from '../focus';
-/**
- * The base styles for button controls, without `appearance` visual differences.
- *
- * @internal
- */
-export const baseButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
-    ${display('inline-flex')}
-    
-    :host {
-      position: relative;
-      box-sizing: border-box;
-      ${typeRampBase}
-      height: calc(${heightNumber} * 1px);
-      min-width: calc(${heightNumber} * 1px);
-      color: ${neutralForegroundRest};
-      border-radius: calc(${controlCornerRadius} * 1px);
-      fill: currentcolor;
-    }
-
-    .control {
-      border: calc(${strokeWidth} * 1px) solid transparent;
-      flex-grow: 1;
-      box-sizing: border-box;
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);
-      white-space: nowrap;
-      outline: none;
-      text-decoration: none;
-      color: inherit;
-      border-radius: inherit;
-      fill: inherit;
-      font-family: inherit;
-    }
-
-    .control,
-    .end,
-    .start {
-      font: inherit;
-    }
-
-    .control.icon-only {
-      padding: 0;
-      line-height: 0;
-    }
-
-    .control:${focusVisible} {
-      ${focusTreatmentBase}
-    }
-
-    .control::-moz-focus-inner {
-      border: 0;
-    }
-
-    .content {
-      pointer-events: none;
-    }
-
-    .start,
-    .end {
-      display: flex;
-      pointer-events: none;
-    }
-
-    .start {
-      margin-inline-end: 11px;
-    }
-
-    .end {
-      margin-inline-start: 11px;
-    }
-  `;
-/**
- * @internal
- */
-export const NeutralButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
-    .control {
-      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
-        border-box ${neutralStrokeControlRest};
-    }
-
-    :host(${interactivitySelector}:hover) .control {
-      background: padding-box linear-gradient(${neutralFillHover}, ${neutralFillHover}),
-        border-box ${neutralStrokeControlHover};
-    }
-
-    :host(${interactivitySelector}:active) .control {
-      background: padding-box linear-gradient(${neutralFillActive}, ${neutralFillActive}),
-        border-box ${neutralStrokeControlActive};
-    }
-
-    :host(${nonInteractivitySelector}) .control {
-      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
-        border-box ${neutralStrokeRest};
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .control {
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.ButtonText};
-          color: ${SystemColors.ButtonText};
-        }
-
-        :host(${interactivitySelector}:hover) .control,
-        :host(${interactivitySelector}:active) .control {
-          forced-color-adjust: none;
-          background: ${SystemColors.HighlightText};
-          border-color: ${SystemColors.Highlight};
-          color: ${SystemColors.Highlight};
-        }
-
-        :host(${nonInteractivitySelector}) .control {
-          background: transparent;
-          border-color: ${SystemColors.GrayText};
-          color: ${SystemColors.GrayText};
-        }
-
-        .control:${focusVisible} {
-          outline-color: ${SystemColors.CanvasText};
-        }
-
-        :host([href]) .control {
-          background: transparent;
-          border-color: ${SystemColors.LinkText};
-          color: ${SystemColors.LinkText};
-        }
-
-        :host([href]:hover) .control,
-        :host([href]:active) .control {
-          background: transparent;
-          border-color: ${SystemColors.CanvasText};
-          color: ${SystemColors.CanvasText};
-        }
-    `));
-/**
- * @internal
- */
-export const AccentButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
-    .control {
-      background: padding-box linear-gradient(${accentFillRest}, ${accentFillRest}),
-        border-box ${accentStrokeControlRest};
-      color: ${foregroundOnAccentRest};
-    }
-
-    :host(${interactivitySelector}:hover) .control {
-      background: padding-box linear-gradient(${accentFillHover}, ${accentFillHover}),
-        border-box ${accentStrokeControlHover};
-      color: ${foregroundOnAccentHover};
-    }
-
-    :host(${interactivitySelector}:active) .control {
-      background: padding-box linear-gradient(${accentFillActive}, ${accentFillActive}),
-        border-box ${accentStrokeControlActive};
-      color: ${foregroundOnAccentActive};
-    }
-
-    :host(${nonInteractivitySelector}) .control {
-      background: ${accentFillRest};
-    }
-
-    .control:${focusVisible} {
-      box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${focusStrokeInner} inset !important;
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .control {
-          forced-color-adjust: none;
-          background: ${SystemColors.Highlight};
-          color: ${SystemColors.HighlightText};
-        }
-
-        :host(${interactivitySelector}:hover) .control,
-        :host(${interactivitySelector}:active) .control {
-          background: ${SystemColors.HighlightText};
-          border-color: ${SystemColors.Highlight};
-          color: ${SystemColors.Highlight};
-        }
-
-        :host(${nonInteractivitySelector}) .control {
-          background: transparent;
-          border-color: ${SystemColors.GrayText};
-          color: ${SystemColors.GrayText};
-        }
-
-        .control:${focusVisible} {
-          outline-color: ${SystemColors.CanvasText};
-          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) ${SystemColors.HighlightText} inset !important;
-        }
-
-        :host([href]) .control {
-          background: ${SystemColors.LinkText};
-          color: ${SystemColors.HighlightText};
-        }
-
-        :host([href]:hover) .control,
-        :host([href]:active) .control {
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.LinkText};
-          color: ${SystemColors.LinkText};
-        }
-      `));
-/**
- * @internal
- */
-export const HypertextStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
-    :host {
-      height: auto;
-      font-family: inherit;
-      font-size: inherit;
-      line-height: inherit;
-      min-width: 0;
-    }
-
-    .control {
-      display: inline;
-      padding: 0;
-      border: none;
-      box-shadow: none;
-      line-height: 1;
-    }
-
-    :host(${interactivitySelector}) .control {
-      color: ${accentForegroundRest};
-      text-decoration: underline 1px;
-    }
-
-    :host(${interactivitySelector}:hover) .control {
-      color: ${accentForegroundHover};
-      text-decoration: none;
-    }
-
-    :host(${interactivitySelector}:active) .control {
-      color: ${accentForegroundActive};
-      text-decoration: none;
-    }
-
-    .control:${focusVisible} {
-      ${focusTreatmentTight}
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host(${interactivitySelector}) .control {
-          color: ${SystemColors.LinkText};
-        }
-
-        :host(${interactivitySelector}:hover) .control,
-        :host(${interactivitySelector}:active) .control {
-          color: ${SystemColors.CanvasText};
-        }
-
-        .control:${focusVisible} {
-          outline-color: ${SystemColors.CanvasText};
-        }
-      `));
-/**
- * @internal
- */
-export const LightweightButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
-    :host {
-      color: ${accentForegroundRest};
-    }
-
-    .control {
-      background: ${neutralFillStealthRest};
-    }
-
-    :host(${interactivitySelector}:hover) .control {
-      background: ${neutralFillStealthHover};
-      color: ${accentForegroundHover};
-    }
-
-    :host(${interactivitySelector}:active) .control {
-      background: ${neutralFillStealthActive};
-      color: ${accentForegroundActive};
-    }
-
-    :host(${nonInteractivitySelector}) .control {
-      background: ${neutralFillStealthRest};
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        :host {
-          color: ${SystemColors.ButtonText};
-        }
-
-        .control {
-          forced-color-adjust: none;
-          background: transparent;
-        }
-
-        :host(${interactivitySelector}:hover) .control,
-        :host(${interactivitySelector}:active) .control {
-          background: transparent;
-          border-color: ${SystemColors.ButtonText};
-          color: ${SystemColors.ButtonText};
-        }
-
-        :host(${nonInteractivitySelector}) .control {
-          background: transparent;
-          color: ${SystemColors.GrayText};
-        }
-
-        .control:${focusVisible} {
-          outline-color: ${SystemColors.CanvasText};
-        }
-
-        :host([href]) .control {
-          color: ${SystemColors.LinkText};
-        }
-
-        :host([href]:hover) .control,
-        :host([href]:active) .control {
-          border-color: ${SystemColors.LinkText};
-          color: ${SystemColors.LinkText};
-        }
-      `));
-/**
- * @internal
- */
-export const OutlineButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
-    .control {
-      background: transparent !important;
-      border-color: ${neutralStrokeRest};
-    }
-
-    :host(${interactivitySelector}:hover) .control {
-      border-color: ${neutralStrokeHover};
-    }
-
-    :host(${interactivitySelector}:active) .control {
-      border-color: ${neutralStrokeActive};
-    }
-
-    :host(${nonInteractivitySelector}) .control {
-      background: transparent !important;
-      border-color: ${neutralStrokeRest};
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .control {
-          border-color: ${SystemColors.ButtonText};
-          color: ${SystemColors.ButtonText};
-        }
-
-        :host(${interactivitySelector}:hover) .control,
-        :host(${interactivitySelector}:active) .control {
-          background: ${SystemColors.HighlightText};
-          border-color: ${SystemColors.Highlight};
-          color: ${SystemColors.Highlight};
-        }
-
-        :host(${nonInteractivitySelector}) .control {
-          border-color: ${SystemColors.GrayText};
-          color: ${SystemColors.GrayText};
-        }
-
-        .control:${focusVisible} {
-          outline-color: ${SystemColors.CanvasText};
-        }
-
-        :host([href]) .control {
-          border-color: ${SystemColors.LinkText};
-          color: ${SystemColors.LinkText};
-        }
-
-        :host([href]:hover) .control,
-        :host([href]:active) .control {
-          border-color: ${SystemColors.CanvasText};
-          color: ${SystemColors.CanvasText};
-        }
-      `));
-/**
- * @internal
- */
-export const StealthButtonStyles = (context, definition, interactivitySelector, nonInteractivitySelector = '[disabled]') => css `
-    .control {
-      background: ${neutralFillStealthRest};
-    }
-
-    :host(${interactivitySelector}:hover) .control {
-      background: ${neutralFillStealthHover};
-    }
-
-    :host(${interactivitySelector}:active) .control {
-      background: ${neutralFillStealthActive};
-    }
-
-    :host(${nonInteractivitySelector}) .control {
-      background: ${neutralFillStealthRest};
-    }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
-        .control {
-          forced-color-adjust: none;
-          background: transparent;
-          color: ${SystemColors.ButtonText};
-        }
-
-        :host(${interactivitySelector}:hover) .control,
-        :host(${interactivitySelector}:active) .control {
-          background: transparent;
-          border-color: ${SystemColors.ButtonText};
-          color: ${SystemColors.ButtonText};
-        }
-
-        :host(${nonInteractivitySelector}) .control {
-          background: transparent;
-          color: ${SystemColors.GrayText};
-        }
-        
-        .control:${focusVisible} {
-          outline-color: ${SystemColors.CanvasText};
-        }
-
-        :host([href]) .control {
-          color: ${SystemColors.LinkText};
-        }
-
-        :host([href]:hover) .control,
-        :host([href]:active) .control {
-          background: transparent;
-          border-color: ${SystemColors.LinkText};
-          color: ${SystemColors.LinkText};
-        }
-      `));

package/dist/esm/styles/patterns/index.js

@@ -1,3 +0,0 @@
-export * from './button.styles';
-export * from './input.styles';
-export * from './type-ramp';