@fluentui/web-components 2.5.12 → 3.0.0-alpha.10

package/dist/esm/switch/switch.styles.js

@@ -1,213 +1,114 @@
 import { css } from '@microsoft/fast-element';
-import { SystemColors } from '@microsoft/fast-web-utilities';
-import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { DirectionalStyleSheetBehavior, heightNumber } from '../styles';
-import { accentFillActive, accentFillHover, accentFillRest, bodyFont, designUnit, disabledOpacity, foregroundOnAccentActive, foregroundOnAccentHover, foregroundOnAccentRest, neutralFillInputAltActive, neutralFillInputAltFocus, neutralFillInputAltHover, neutralFillInputAltRest, neutralForegroundRest, neutralStrokeStrongActive, neutralStrokeStrongHover, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
-import { typeRampBase } from '../styles/patterns/type-ramp';
-import { focusTreatmentTight } from '../styles/focus';
-export const switchStyles = (context, definition) => css `
-    :host([hidden]) {
-      display: none;
-    }
-
-    ${display('inline-flex')} :host {
-      align-items: center;
-      outline: none;
-      font-family: ${bodyFont};
-      ${
-/*
- * Chromium likes to select label text or the default slot when
- * the checkbox is clicked. Maybe there is a better solution here?
- */ ''} user-select: none;
-    }
-
-    :host(.disabled) {
-      opacity: ${disabledOpacity};
-    }
-
-    :host(.disabled) .label,
-    :host(.readonly) .label,
-    :host(.disabled) .switch,
-    :host(.readonly) .switch,
-    :host(.disabled) .status-message,
-    :host(.readonly) .status-message {
-      cursor: ${disabledCursor};
-    }
-
-    .switch {
-      position: relative;
-      box-sizing: border-box;
-      width: calc(((${heightNumber} / 2) + ${designUnit}) * 2px);
-      height: calc(((${heightNumber} / 2) + ${designUnit}) * 1px);
-      background: ${neutralFillInputAltRest};
-      border-radius: calc(${heightNumber} * 1px);
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeStrongRest};
-      cursor: pointer;
-    }
-
-    :host(:not(.disabled):hover) .switch {
-      background: ${neutralFillInputAltHover};
-      border-color: ${neutralStrokeStrongHover};
-    }
-
-    :host(:not(.disabled):active) .switch {
-      background: ${neutralFillInputAltActive};
-      border-color: ${neutralStrokeStrongActive};
-    }
-
-    :host(:${focusVisible}) .switch {
-      ${focusTreatmentTight}
-      background: ${neutralFillInputAltFocus};
-    }
-
-    :host(.checked) .switch {
-      background: ${accentFillRest};
-      border-color: transparent;
-    }
-
-    :host(.checked:not(.disabled):hover) .switch {
-      background: ${accentFillHover};
-      border-color: transparent;
-    }
-
-    :host(.checked:not(.disabled):active) .switch {
-      background: ${accentFillActive};
-      border-color: transparent;
-    }
-
-    slot[name='switch'] {
-      position: absolute;
-      display: flex;
-      border: 1px solid transparent; /* Spacing included in the transform reference box */
-      fill: ${neutralForegroundRest};
-      transition: all 0.2s ease-in-out;
-    }
-
-    .status-message {
-      color: ${neutralForegroundRest};
-      cursor: pointer;
-      ${typeRampBase}
-    }
-
-    .label__hidden {
-      display: none;
-      visibility: hidden;
-    }
-
-    .label {
-      color: ${neutralForegroundRest};
-      ${typeRampBase}
-      margin-inline-end: calc(${designUnit} * 2px + 2px);
-      cursor: pointer;
-    }
-
-    ::slotted([slot="checked-message"]),
-    ::slotted([slot="unchecked-message"]) {
-        margin-inline-start: calc(${designUnit} * 2px + 2px);
-    }
-
-    :host(.checked) .switch {
-      background: ${accentFillRest};
-    }
-
-    :host(.checked) .switch slot[name='switch'] {
-      fill: ${foregroundOnAccentRest};
-      filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.15));
-    }
-
-    :host(.checked:not(.disabled)) .switch:hover {
-      background: ${accentFillHover};
-    }
-
-    :host(.checked:not(.disabled)) .switch:hover slot[name='switch'] {
-      fill: ${foregroundOnAccentHover};
-    }
-
-    :host(.checked:not(.disabled)) .switch:active {
-      background: ${accentFillActive};
-    }
-
-    :host(.checked:not(.disabled)) .switch:active slot[name='switch'] {
-      fill: ${foregroundOnAccentActive};
-    }
-
-    .unchecked-message {
-      display: block;
-    }
-
-    .checked-message {
-      display: none;
-    }
-
-    :host(.checked) .unchecked-message {
-      display: none;
-    }
-
-    :host(.checked) .checked-message {
-      display: block;
-    }
-  `.withBehaviors(new DirectionalStyleSheetBehavior(css `
-        slot[name='switch'] {
-          left: 0;
-        }
-
-        :host(.checked) slot[name='switch'] {
-          left: 100%;
-          transform: translateX(-100%);
-        }
-      `, css `
-        slot[name='switch'] {
-          right: 0;
-        }
-
-        :host(.checked) slot[name='switch'] {
-          right: 100%;
-          transform: translateX(100%);
-        }
-      `), forcedColorsStylesheetBehavior(css `
-        :host(:not(.disabled)) .switch slot[name='switch'] {
-          forced-color-adjust: none;
-          fill: ${SystemColors.FieldText};
-        }
-        .switch {
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.FieldText};
-        }
-        :host(.checked) .switch {
-          background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.Highlight};
-        }
-        :host(:not(.disabled):hover) .switch ,
-        :host(:not(.disabled):active) .switch,
-        :host(.checked:not(.disabled):hover) .switch {
-          background: ${SystemColors.HighlightText};
-          border-color: ${SystemColors.Highlight};
-        }
-        :host(.checked:not(.disabled)) .switch slot[name="switch"] {
-          fill: ${SystemColors.HighlightText};
-        }
-        :host(.checked:not(.disabled):hover) .switch slot[name='switch'] {
-          fill: ${SystemColors.Highlight};
-        }
-        :host(:${focusVisible}) .switch {
-          forced-color-adjust: none;
-          background: ${SystemColors.Field}; 
-          border-color: ${SystemColors.Highlight};
-          outline-color: ${SystemColors.FieldText};
-        }
-        :host(.disabled) {
-          opacity: 1;
-        }
-        :host(.disabled) slot[name='switch'] {
-          forced-color-adjust: none;
-          fill: ${SystemColors.GrayText};
-        }
-        :host(.disabled) .switch {
-          background: ${SystemColors.Field};
-          border-color: ${SystemColors.GrayText};
-        }
-        .status-message,
-        .label {
-          color: ${SystemColors.FieldText};
-        }
-      `));
+import { display } from '@microsoft/fast-foundation';
+import { borderRadiusCircular, colorCompoundBrandBackground, colorCompoundBrandBackgroundHover, colorCompoundBrandBackgroundPressed, colorNeutralBackgroundDisabled, colorNeutralForeground1, colorNeutralForeground3, colorNeutralForeground3Hover, colorNeutralForeground3Pressed, colorNeutralForegroundDisabled, colorNeutralForegroundInverted, colorNeutralForegroundInvertedHover, colorNeutralForegroundInvertedPressed, colorNeutralStrokeAccessible, colorNeutralStrokeAccessibleHover, colorNeutralStrokeAccessiblePressed, colorNeutralStrokeDisabled, colorTransparentBackground, curveEasyEase, durationNormal, fontFamilyBase, fontSizeBase300, fontWeightRegular, lineHeightBase300, spacingHorizontalS, spacingHorizontalXS, spacingHorizontalXXS, spacingVerticalS, spacingVerticalXS, } from '../theme/design-tokens.js';
+export const styles = css `
+  ${display('inline-flex')}
+
+  :host {
+    align-items: center;
+    flex-direction: row-reverse;
+    outline: none;
+    user-select: none;
+  }
+  :host([label-position='before']) {
+    flex-direction: row;
+  }
+  :host([label-position='above']) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  :host([disabled]) .label,
+  :host([readonly]) .label,
+  :host([readonly]) .switch,
+  :host([disabled]) .switch {
+    cursor: not-allowed;
+  }
+  .label {
+    position: relative;
+    color: ${colorNeutralForeground1};
+    line-height: ${lineHeightBase300};
+    font-size: ${fontSizeBase300};
+    font-weight: ${fontWeightRegular};
+    font-family: ${fontFamilyBase};
+    padding: ${spacingVerticalXS} ${spacingHorizontalXS};
+    cursor: pointer;
+  }
+  .label__hidden {
+    display: none;
+  }
+  .switch {
+    display: flex;
+    align-items: center;
+    padding: 0 ${spacingHorizontalXXS};
+    box-sizing: border-box;
+    width: 40px;
+    height: 20px;
+    background-color: ${colorTransparentBackground};
+    border: 1px solid ${colorNeutralStrokeAccessible};
+    border-radius: ${borderRadiusCircular};
+    outline: none;
+    cursor: pointer;
+    margin: ${spacingVerticalS} ${spacingHorizontalS};
+  }
+  :host(:hover) .switch {
+    background: none;
+    border-color: ${colorNeutralStrokeAccessibleHover};
+  }
+  :host(:active) .switch {
+    border-color: ${colorNeutralStrokeAccessiblePressed};
+  }
+  :host([disabled]) .switch,
+  :host([readonly]) .switch {
+    border: 1px solid ${colorNeutralStrokeDisabled};
+    background-color: none;
+    pointer: default;
+  }
+  :host([aria-checked='true']) .switch {
+    background: ${colorCompoundBrandBackground};
+  }
+  :host([aria-checked='true']:hover) .switch {
+    background: ${colorCompoundBrandBackgroundHover};
+    border-color: ${colorCompoundBrandBackgroundHover};
+  }
+  :host([aria-checked='true']:active) .switch {
+    background: ${colorCompoundBrandBackgroundPressed};
+    border-color: ${colorCompoundBrandBackgroundPressed};
+  }
+  :host([aria-checked='true'][disabled]) .switch {
+    background: ${colorNeutralBackgroundDisabled};
+    border-color: ${colorNeutralStrokeDisabled};
+  }
+  .checked-indicator {
+    height: 14px;
+    width: 14px;
+    border-radius: 50%;
+    background-color: ${colorNeutralForeground3};
+    transition-duration: ${durationNormal};
+    transition-timing-function: ${curveEasyEase};
+    transition-property: transform;
+  }
+  :host([aria-checked='true']) .checked-indicator {
+    background-color: ${colorNeutralForegroundInverted};
+    transform: translateX(20px);
+  }
+  :host([aria-checked='true']:hover) .checked-indicator {
+    background: ${colorNeutralForegroundInvertedHover};
+  }
+  :host([aria-checked='true']:active) .checked-indicator {
+    background: ${colorNeutralForegroundInvertedPressed};
+  }
+  :host(:hover) .checked-indicator {
+    background-color: ${colorNeutralForeground3Hover};
+  }
+  :host(:active) .checked-indicator {
+    background-color: ${colorNeutralForeground3Pressed};
+  }
+  :host([disabled]) .checked-indicator,
+  :host([readonly]) .checked-indicator {
+    background: ${colorNeutralForegroundDisabled};
+  }
+  :host([aria-checked='true'][disabled]) .checked-indicator {
+    background: ${colorNeutralForegroundDisabled};
+  }
+`;
+//# sourceMappingURL=switch.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../../src/switch/switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,oBAAoB,EACpB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,mCAAmC,EACnC,qCAAqC,EACrC,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,0BAA0B,EAC1B,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;aAuBb,uBAAuB;mBACjB,iBAAiB;iBACnB,eAAe;mBACb,iBAAiB;mBACjB,cAAc;eAClB,iBAAiB,IAAI,mBAAmB;;;;;;;;;iBAStC,oBAAoB;;;;wBAIb,0BAA0B;wBAC1B,4BAA4B;qBAC/B,oBAAoB;;;cAG3B,gBAAgB,IAAI,kBAAkB;;;;oBAIhC,iCAAiC;;;oBAGjC,mCAAmC;;;;wBAI/B,0BAA0B;;;;;kBAKhC,4BAA4B;;;kBAG5B,iCAAiC;oBAC/B,iCAAiC;;;kBAGnC,mCAAmC;oBACjC,mCAAmC;;;kBAGrC,8BAA8B;oBAC5B,0BAA0B;;;;;;wBAMtB,uBAAuB;2BACpB,cAAc;kCACP,aAAa;;;;wBAIvB,8BAA8B;;;;kBAIpC,mCAAmC;;;kBAGnC,qCAAqC;;;wBAG/B,4BAA4B;;;wBAG5B,8BAA8B;;;;kBAIpC,8BAA8B;;;kBAG9B,8BAA8B;;CAE/C,CAAC"}

package/dist/esm/switch/switch.template.js

@@ -0,0 +1,5 @@
+import { switchTemplate } from '@microsoft/fast-foundation';
+export const template = switchTemplate({
+    switch: `<span class="checked-indicator" part="checked-indicator"></span>`,
+});
+//# sourceMappingURL=switch.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.template.js","sourceRoot":"","sources":["../../../src/switch/switch.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG5D,MAAM,CAAC,MAAM,QAAQ,GAAgC,cAAc,CAAC;IAClE,MAAM,EAAE,kEAAkE;CAC3E,CAAC,CAAC"}

package/dist/esm/text/define.js

@@ -0,0 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { definition } from './text.definition.js';
+definition.define(FluentDesignSystem.registry);
+//# sourceMappingURL=define.js.map

package/dist/esm/text/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/text/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}

package/dist/esm/text/index.js

@@ -0,0 +1,6 @@
+export * from './text.js';
+export * from './text.options.js';
+export { template as TextTemplate } from './text.template.js';
+export { styles as TextStyles } from './text.styles.js';
+export { definition as TextDefinition } from './text.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/esm/text/text.definition.js

@@ -0,0 +1,18 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { Text } from './text.js';
+import { styles } from './text.styles.js';
+import { template } from './text.template.js';
+/**
+ * The Fluent Text Element.
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-text\>
+ */
+export const definition = Text.compose({
+    name: `${FluentDesignSystem.prefix}-text`,
+    template,
+    styles,
+});
+//# sourceMappingURL=text.definition.js.map

package/dist/esm/text/text.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.definition.js","sourceRoot":"","sources":["../../../src/text/text.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;IACrC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,OAAO;IACzC,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}

package/dist/esm/text/text.js

@@ -0,0 +1,92 @@
+import { __decorate } from "tslib";
+import { attr, FASTElement } from '@microsoft/fast-element';
+/**
+ * The base class used for constructing a fluent-text custom element
+ * @public
+ */
+export class Text extends FASTElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The text will not wrap
+         * NOTE: In Fluent UI React v9 this is "wrap"
+         * Boolean attributes which default to true in HTML can't be switched off in the DOM
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: nowrap
+         */
+        this.nowrap = false;
+        /**
+         * The text truncates
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: truncate
+         */
+        this.truncate = false;
+        /**
+         * The text style is italic
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: italic
+         */
+        this.italic = false;
+        /**
+         * The text style is underline
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: underline
+         */
+        this.underline = false;
+        /**
+         * The text style is strikethrough
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: strikethrough
+         */
+        this.strikethrough = false;
+        /**
+         * An text can take up the width of its container.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: block
+         */
+        this.block = false;
+    }
+}
+__decorate([
+    attr({ mode: 'boolean' })
+], Text.prototype, "nowrap", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Text.prototype, "truncate", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Text.prototype, "italic", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Text.prototype, "underline", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Text.prototype, "strikethrough", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], Text.prototype, "block", void 0);
+__decorate([
+    attr
+], Text.prototype, "size", void 0);
+__decorate([
+    attr
+], Text.prototype, "font", void 0);
+__decorate([
+    attr
+], Text.prototype, "weight", void 0);
+__decorate([
+    attr
+], Text.prototype, "align", void 0);
+//# sourceMappingURL=text.js.map

package/dist/esm/text/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/text/text.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;GAGG;AACH,MAAM,OAAO,IAAK,SAAQ,WAAW;IAArC;;QACE;;;;;;;;WAQG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAE1B;;;;;;WAMG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;;;;;WAMG;QAEH,cAAS,GAAY,KAAK,CAAC;QAE3B;;;;;;WAMG;QAEH,kBAAa,GAAY,KAAK,CAAC;QAE/B;;;;;;WAMG;QAEH,UAAK,GAAY,KAAK,CAAC;IA0CzB,CAAC;CAAA;AA5FC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACF;AAUxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACA;AAU1B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACF;AAUxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACC;AAU3B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACK;AAU/B;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;mCACH;AAWvB;IADC,IAAI;kCACW;AAUhB;IADC,IAAI;kCACW;AAUhB;IADC,IAAI;oCACe;AAUpB;IADC,IAAI;mCACa"}

package/dist/esm/text/text.options.js

@@ -0,0 +1,46 @@
+/**
+ * TextSize constants
+ * @public
+ */
+export const TextSize = {
+    _100: '100',
+    _200: '200',
+    _300: '300',
+    _400: '400',
+    _500: '500',
+    _600: '600',
+    _700: '700',
+    _800: '800',
+    _900: '900',
+    _1000: '1000',
+};
+/**
+ * TextFont Constants
+ * @public
+ */
+export const TextFont = {
+    base: 'base',
+    numeric: 'numeric',
+    monospace: 'monospace',
+};
+/**
+ * TextWeight Constants
+ * @public
+ */
+export const TextWeight = {
+    medium: 'medium',
+    regular: 'regular',
+    semibold: 'semibold',
+    bold: 'bold',
+};
+/**
+ * TextAlign Constants
+ * @public
+ */
+export const TextAlign = {
+    start: 'start',
+    end: 'end',
+    center: 'center',
+    justify: 'justify',
+};
+//# sourceMappingURL=text.options.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.options.js","sourceRoot":"","sources":["../../../src/text/text.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,MAAM;CACL,CAAC;AASX;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;CACd,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IACpB,IAAI,EAAE,MAAM;CACJ,CAAC;AAQX;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,KAAK,EAAE,OAAO;IACd,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;CACV,CAAC"}

package/dist/esm/text/text.styles.js

@@ -0,0 +1,107 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { fontFamilyBase, fontFamilyMonospace, fontFamilyNumeric, fontSizeBase100, fontSizeBase200, fontSizeBase300, fontSizeBase400, fontSizeBase500, fontSizeBase600, fontSizeHero1000, fontSizeHero700, fontSizeHero800, fontSizeHero900, fontWeightBold, fontWeightMedium, fontWeightRegular, fontWeightSemibold, lineHeightBase100, lineHeightBase200, lineHeightBase300, lineHeightBase400, lineHeightBase500, lineHeightBase600, lineHeightHero1000, lineHeightHero700, lineHeightHero800, lineHeightHero900, } from '../theme/design-tokens.js';
+/** Text styles
+ * @public
+ */
+export const styles = css `
+  ${display('inline')}
+
+  ::slotted(*) {
+    font-family: ${fontFamilyBase};
+    font-size: ${fontSizeBase300};
+    line-height: ${lineHeightBase300};
+    font-weight: ${fontWeightRegular};
+    text-align: start;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: clip;
+    margin: 0;
+    display: inline;
+  }
+
+  :host([nowrap]) ::slotted(*) {
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  :host([truncate]) ::slotted(*) {
+    text-overflow: ellipsis;
+  }
+  :host([block]),
+  :host([block]) ::slotted(*) {
+    display: block;
+  }
+  :host([italic]) ::slotted(*) {
+    font-style: italic;
+  }
+  :host([underline]) ::slotted(*) {
+    text-decoration-line: underline;
+  }
+  :host([strikethrough]) ::slotted(*) {
+    text-decoration-line: line-through;
+  }
+  :host([underline][strikethrough]) ::slotted(*) {
+    text-decoration-line: line-through underline;
+  }
+  :host([size='100']) ::slotted(*) {
+    font-size: ${fontSizeBase100};
+    line-height: ${lineHeightBase100};
+  }
+  :host([size='200']) ::slotted(*) {
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+  }
+  :host([size='400']) ::slotted(*) {
+    font-size: ${fontSizeBase400};
+    line-height: ${lineHeightBase400};
+  }
+  :host([size='500']) ::slotted(*) {
+    font-size: ${fontSizeBase500};
+    line-height: ${lineHeightBase500};
+  }
+  :host([size='600']) ::slotted(*) {
+    font-size: ${fontSizeBase600};
+    line-height: ${lineHeightBase600};
+  }
+  :host([size='700']) ::slotted(*) {
+    font-size: ${fontSizeHero700};
+    line-height: ${lineHeightHero700};
+  }
+  :host([size='800']) ::slotted(*) {
+    font-size: ${fontSizeHero800};
+    line-height: ${lineHeightHero800};
+  }
+  :host([size='900']) ::slotted(*) {
+    font-size: ${fontSizeHero900};
+    line-height: ${lineHeightHero900};
+  }
+  :host([size='1000']) ::slotted(*) {
+    font-size: ${fontSizeHero1000};
+    line-height: ${lineHeightHero1000};
+  }
+  :host([font='monospace']) ::slotted(*) {
+    font-family: ${fontFamilyMonospace};
+  }
+  :host([font='numeric']) ::slotted(*) {
+    font-family: ${fontFamilyNumeric};
+  }
+  :host([weight='medium']) ::slotted(*) {
+    font-weight: ${fontWeightMedium};
+  }
+  :host([weight='semibold']) ::slotted(*) {
+    font-weight: ${fontWeightSemibold};
+  }
+  :host([weight='bold']) ::slotted(*) {
+    font-weight: ${fontWeightBold};
+  }
+  :host([align='center']) ::slotted(*) {
+    text-align: center;
+  }
+  :host([align='end']) ::slotted(*) {
+    text-align: end;
+  }
+  :host([align='justify']) ::slotted(*) {
+    text-align: justify;
+  }
+`;
+//# sourceMappingURL=text.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;mBAGF,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiCnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,gBAAgB;mBACd,kBAAkB;;;mBAGlB,mBAAmB;;;mBAGnB,iBAAiB;;;mBAGjB,gBAAgB;;;mBAGhB,kBAAkB;;;mBAGlB,cAAc;;;;;;;;;;;CAWhC,CAAC"}

package/dist/esm/text/text.template.js

@@ -0,0 +1,6 @@
+import { html } from '@microsoft/fast-element';
+/**
+ * @internal
+ */
+export const template = html `<slot></slot>`;
+//# sourceMappingURL=text.template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.template.js","sourceRoot":"","sources":["../../../src/text/text.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpE;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA8B,IAAI,CAAM,eAAe,CAAC"}