@fluentui/web-components 3.0.0-beta.99 → 3.0.0-rc.10

package/dist/esm/tabs/tabs.styles.js

@@ -1,230 +0,0 @@
-import { css } from '@microsoft/fast-element';
-import { display } from '../utils/index.js';
-import { borderRadiusCircular, borderRadiusMedium, colorCompoundBrandForeground1Hover, colorNeutralForeground1, colorNeutralForeground1Hover, colorNeutralForeground2, colorNeutralForegroundDisabled, colorSubtleBackgroundHover, colorSubtleBackgroundPressed, curveDecelerateMax, durationSlow, fontFamilyBase, fontSizeBase300, fontSizeBase400, lineHeightBase300, lineHeightBase400, spacingHorizontalMNudge, spacingHorizontalSNudge, spacingVerticalL, spacingVerticalMNudge, spacingVerticalS, spacingVerticalSNudge, spacingVerticalXXS, strokeWidthThicker, } from '../theme/design-tokens.js';
-export const styles = css `
-  ${display('grid')}
-
-  :host {
-    box-sizing: border-box;
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    color: ${colorNeutralForeground2};
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto 1fr;
-  }
-
-  :host([disabled]) {
-    cursor: not-allowed;
-    color: ${colorNeutralForegroundDisabled};
-  }
-
-  :host([disabled]) ::slotted(fluent-tab) {
-    pointer-events: none;
-    cursor: not-allowed;
-    color: ${colorNeutralForegroundDisabled};
-  }
-  :host([disabled]) ::slotted(fluent-tab:after) {
-    background-color: ${colorNeutralForegroundDisabled};
-  }
-  :host([disabled]) ::slotted(fluent-tab[aria-selected='true'])::after {
-    background-color: ${colorNeutralForegroundDisabled};
-  }
-  :host([disabled]) ::slotted(fluent-tab:hover):before {
-    content: unset;
-  }
-
-  :host ::slotted(fluent-tab) {
-    border-radius: ${borderRadiusMedium};
-  }
-
-  :host ::slotted(fluent-tab[aria-selected='true'])::before {
-    background-color: ${colorNeutralForegroundDisabled};
-  }
-
-  .tablist {
-    display: grid;
-    grid-template-rows: auto auto;
-    grid-template-columns: auto;
-    position: relative;
-    width: max-content;
-    align-self: end;
-    box-sizing: border-box;
-  }
-  ::slotted([slot='start']),
-  ::slotted([slot='end']) {
-    display: flex;
-    align-self: center;
-  }
-  ::slotted([slot='start']) {
-    margin-inline-end: 11px;
-  }
-  ::slotted([slot='end']) {
-    margin-inline-start: 11px;
-  }
-
-  .tabpanel {
-    grid-row: 2;
-    grid-column-start: 1;
-    grid-column-end: 4;
-    position: relative;
-  }
-  :host([orientation='vertical']) {
-    grid-template-rows: auto 1fr auto;
-    grid-template-columns: auto 1fr;
-  }
-  :host([orientation='vertical']) .tablist {
-    grid-row-start: 2;
-    grid-row-end: 2;
-    display: grid;
-    grid-template-rows: auto;
-    grid-template-columns: auto 1fr;
-    position: relative;
-    width: max-content;
-    justify-self: end;
-    align-self: flex-start;
-    width: 100%;
-  }
-  :host([orientation='vertical']) .tabpanel {
-    grid-column: 2;
-    grid-row-start: 1;
-    grid-row-end: 4;
-  }
-  :host([orientation='vertical']) ::slotted([slot='end']) {
-    grid-row: 3;
-  }
-
-  :host([appearance='subtle']) ::slotted(fluent-tab:hover) {
-    background-color: ${colorSubtleBackgroundHover};
-    color: ${colorNeutralForeground1Hover};
-    fill: ${colorCompoundBrandForeground1Hover};
-  }
-
-  :host([appearance='subtle']) ::slotted(fluent-tab:active) {
-    background-color: ${colorSubtleBackgroundPressed};
-    fill: ${colorSubtleBackgroundPressed};
-    color: ${colorNeutralForeground1};
-  }
-
-  :host([size='small']) ::slotted(fluent-tab) {
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    padding: ${spacingVerticalSNudge} ${spacingHorizontalSNudge};
-  }
-
-  :host([size='large']) ::slotted(fluent-tab) {
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
-    padding: ${spacingVerticalL} ${spacingHorizontalMNudge};
-  }
-
-  /* indicator animation  */
-  :host ::slotted(fluent-tab[data-animate='true'])::after {
-    transition-property: transform;
-    transition-duration: ${durationSlow};
-    transition-timing-function: ${curveDecelerateMax};
-  }
-  :host ::slotted(fluent-tab)::after {
-    height: ${strokeWidthThicker};
-    margin-top: auto;
-    transform-origin: left;
-    transform: translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale));
-  }
-  :host([orientation='vertical']) ::slotted(fluent-tab)::after {
-    width: ${strokeWidthThicker};
-    height: unset;
-    margin-top: unset;
-    transform-origin: top;
-    transform: translateY(var(--tabIndicatorOffset)) scaleY(var(--tabIndicatorScale));
-  }
-
-  /* ::before adds a secondary indicator placeholder that appears right after click on the active tab */
-  :host ::slotted(fluent-tab)::before {
-    height: ${strokeWidthThicker};
-    border-radius: ${borderRadiusCircular};
-    content: '';
-    inset: 0;
-    position: absolute;
-    margin-top: auto;
-  }
-  :host([orientation='vertical']) ::slotted(fluent-tab)::before {
-    height: unset;
-    width: ${strokeWidthThicker};
-    margin-inline-end: auto;
-    transform-origin: top;
-  }
-
-  :host ::slotted(fluent-tab[aria-selected='false']:hover)::after {
-    height: ${strokeWidthThicker};
-    margin-top: auto;
-    transform-origin: left;
-  }
-  :host([orientation='vertical']) ::slotted(fluent-tab[aria-selected='false']:hover)::after {
-    height: unset;
-    margin-inline-end: auto;
-    transform-origin: top;
-    width: ${strokeWidthThicker};
-  }
-
-  :host([orientation='vertical']) ::slotted(fluent-tab) {
-    align-items: flex-start;
-    grid-column: 2;
-    padding-top: ${spacingVerticalSNudge};
-    padding-bottom: ${spacingVerticalSNudge};
-  }
-  :host([orientation='vertical'][size='small']) ::slotted(fluent-tab) {
-    padding-top: ${spacingVerticalXXS};
-    padding-bottom: ${spacingVerticalXXS};
-  }
-  :host([orientation='vertical'][size='large']) ::slotted(fluent-tab) {
-    padding-top: ${spacingVerticalS};
-    padding-bottom: ${spacingVerticalS};
-  }
-
-  /* horizontal spacing for indicator */
-  :host([size='small']) ::slotted(fluent-tab)::after,
-  :host([size='small']) ::slotted(fluent-tab)::before,
-  :host([size='small']) ::slotted(fluent-tab:hover)::after {
-    right: ${spacingHorizontalSNudge};
-    left: ${spacingHorizontalSNudge};
-  }
-  :host ::slotted(fluent-tab)::after,
-  :host ::slotted(fluent-tab)::before,
-  :host ::slotted(fluent-tab:hover)::after {
-    right: ${spacingHorizontalMNudge};
-    left: ${spacingHorizontalMNudge};
-  }
-  :host([size='large']) ::slotted(fluent-tab)::after,
-  :host([size='large']) ::slotted(fluent-tab)::before,
-  :host([size='large']) ::slotted(fluent-tab:hover)::after {
-    right: ${spacingHorizontalMNudge};
-    left: ${spacingHorizontalMNudge};
-  }
-
-  /* vertical spacing for indicator */
-  :host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::after,
-  :host([orientation='vertical'][size='small']) ::slotted(fluent-tab)::before,
-  :host([orientation='vertical'][size='small']) ::slotted(fluent-tab:hover)::after {
-    right: 0;
-    left: 0;
-    top: ${spacingVerticalSNudge};
-    bottom: ${spacingVerticalSNudge};
-  }
-  :host([orientation='vertical']) ::slotted(fluent-tab)::after,
-  :host([orientation='vertical']) ::slotted(fluent-tab)::before,
-  :host([orientation='vertical']) ::slotted(fluent-tab:hover)::after {
-    right: 0;
-    left: 0;
-    top: ${spacingVerticalS};
-    bottom: ${spacingVerticalS};
-  }
-  :host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::after,
-  :host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::before,
-  :host([orientation='vertical'][size='large']) ::slotted(fluent-tab:hover)::after {
-    right: 0;
-    left: 0;
-    top: ${spacingVerticalMNudge};
-    bottom: ${spacingVerticalMNudge};
-  }
-`;
-//# sourceMappingURL=tabs.styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tabs.styles.js","sourceRoot":"","sources":["../../../src/tabs/tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,kCAAkC,EAClC,uBAAuB,EACvB,4BAA4B,EAC5B,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,4BAA4B,EAC5B,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;mBAIA,cAAc;iBAChB,eAAe;mBACb,iBAAiB;aACvB,uBAAuB;;;;;;;aAOvB,8BAA8B;;;;;;aAM9B,8BAA8B;;;wBAGnB,8BAA8B;;;wBAG9B,8BAA8B;;;;;;;qBAOjC,kBAAkB;;;;wBAIf,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwD9B,0BAA0B;aACrC,4BAA4B;YAC7B,kCAAkC;;;;wBAItB,4BAA4B;YACxC,4BAA4B;aAC3B,uBAAuB;;;;iBAInB,eAAe;mBACb,iBAAiB;eACrB,qBAAqB,IAAI,uBAAuB;;;;iBAI9C,eAAe;mBACb,iBAAiB;eACrB,gBAAgB,IAAI,uBAAuB;;;;;;2BAM/B,YAAY;kCACL,kBAAkB;;;cAGtC,kBAAkB;;;;;;aAMnB,kBAAkB;;;;;;;;;cASjB,kBAAkB;qBACX,oBAAoB;;;;;;;;aAQ5B,kBAAkB;;;;;;cAMjB,kBAAkB;;;;;;;;aAQnB,kBAAkB;;;;;;mBAMZ,qBAAqB;sBAClB,qBAAqB;;;mBAGxB,kBAAkB;sBACf,kBAAkB;;;mBAGrB,gBAAgB;sBACb,gBAAgB;;;;;;;aAOzB,uBAAuB;YACxB,uBAAuB;;;;;aAKtB,uBAAuB;YACxB,uBAAuB;;;;;aAKtB,uBAAuB;YACxB,uBAAuB;;;;;;;;;WASxB,qBAAqB;cAClB,qBAAqB;;;;;;;WAOxB,gBAAgB;cACb,gBAAgB;;;;;;;WAOnB,qBAAqB;cAClB,qBAAqB;;CAElC,CAAC"}

package/dist/esm/tabs/tabs.template.js

@@ -1,19 +0,0 @@
-import { html, slotted } from '@microsoft/fast-element';
-import { endSlotTemplate, startSlotTemplate } from '../patterns/index.js';
-/**
- * @deprecated - Use tablist instead
- */
-export function tabsTemplate(options = {}) {
-    return html `
-    ${startSlotTemplate(options)}
-    <div class="tablist" part="tablist" role="tablist">
-      <slot name="tab" ${slotted('tabs')}></slot>
-    </div>
-    ${endSlotTemplate(options)}
-    <div class="tabpanel" part="tabpanel">
-      <slot name="tabpanel" ${slotted('tabpanels')}></slot>
-    </div>
-  `;
-}
-export const template = tabsTemplate({});
-//# sourceMappingURL=tabs.template.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"tabs.template.js","sourceRoot":"","sources":["../../../src/tabs/tabs.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAI1E;;GAEG;AACH,MAAM,UAAU,YAAY,CAAiB,UAAuB,EAAE;IACpE,OAAO,IAAI,CAAG;MACV,iBAAiB,CAAC,OAAO,CAAC;;yBAEP,OAAO,CAAC,MAAM,CAAC;;MAElC,eAAe,CAAC,OAAO,CAAC;;8BAEA,OAAO,CAAC,WAAW,CAAC;;GAE/C,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,YAAY,CAAC,EAAE,CAAC,CAAC"}