@ni/nimble-components 29.1.0 → 29.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (158) hide show
  1. package/dist/all-components-bundle.js +201 -167
  2. package/dist/all-components-bundle.js.map +1 -1
  3. package/dist/all-components-bundle.min.js +2859 -2844
  4. package/dist/all-components-bundle.min.js.map +1 -1
  5. package/dist/esm/anchor/styles.js +1 -1
  6. package/dist/esm/anchor/styles.js.map +1 -1
  7. package/dist/esm/anchor-menu-item/styles.js +1 -1
  8. package/dist/esm/anchor-menu-item/styles.js.map +1 -1
  9. package/dist/esm/anchor-tab/styles.js +1 -1
  10. package/dist/esm/anchor-tab/styles.js.map +1 -1
  11. package/dist/esm/anchor-tabs/styles.js +1 -1
  12. package/dist/esm/anchor-tabs/styles.js.map +1 -1
  13. package/dist/esm/anchor-tree-item/styles.js +1 -1
  14. package/dist/esm/anchor-tree-item/styles.js.map +1 -1
  15. package/dist/esm/anchored-region/styles.js +5 -2
  16. package/dist/esm/anchored-region/styles.js.map +1 -1
  17. package/dist/esm/banner/styles.js +1 -1
  18. package/dist/esm/banner/styles.js.map +1 -1
  19. package/dist/esm/breadcrumb/styles.js +1 -1
  20. package/dist/esm/breadcrumb/styles.js.map +1 -1
  21. package/dist/esm/breadcrumb-item/styles.js +1 -1
  22. package/dist/esm/breadcrumb-item/styles.js.map +1 -1
  23. package/dist/esm/card/styles.js +1 -1
  24. package/dist/esm/card/styles.js.map +1 -1
  25. package/dist/esm/card-button/styles.js +1 -1
  26. package/dist/esm/card-button/styles.js.map +1 -1
  27. package/dist/esm/checkbox/styles.js +1 -1
  28. package/dist/esm/checkbox/styles.js.map +1 -1
  29. package/dist/esm/dialog/styles.js +1 -1
  30. package/dist/esm/dialog/styles.js.map +1 -1
  31. package/dist/esm/drawer/styles.js +1 -1
  32. package/dist/esm/drawer/styles.js.map +1 -1
  33. package/dist/esm/icon-base/index.js +1 -2
  34. package/dist/esm/icon-base/index.js.map +1 -1
  35. package/dist/esm/icon-base/styles.js +1 -1
  36. package/dist/esm/icon-base/styles.js.map +1 -1
  37. package/dist/esm/label-provider/base/styles.d.ts +1 -0
  38. package/dist/esm/label-provider/base/styles.js +6 -0
  39. package/dist/esm/label-provider/base/styles.js.map +1 -0
  40. package/dist/esm/label-provider/core/index.js +3 -1
  41. package/dist/esm/label-provider/core/index.js.map +1 -1
  42. package/dist/esm/label-provider/rich-text/index.js +3 -1
  43. package/dist/esm/label-provider/rich-text/index.js.map +1 -1
  44. package/dist/esm/label-provider/table/index.js +3 -1
  45. package/dist/esm/label-provider/table/index.js.map +1 -1
  46. package/dist/esm/list-option/styles.js +1 -1
  47. package/dist/esm/list-option/styles.js.map +1 -1
  48. package/dist/esm/listbox/styles.js +1 -1
  49. package/dist/esm/listbox/styles.js.map +1 -1
  50. package/dist/esm/mapping/base/styles.d.ts +1 -0
  51. package/dist/esm/mapping/base/styles.js +6 -0
  52. package/dist/esm/mapping/base/styles.js.map +1 -0
  53. package/dist/esm/mapping/empty/index.js +3 -1
  54. package/dist/esm/mapping/empty/index.js.map +1 -1
  55. package/dist/esm/mapping/icon/index.js +3 -1
  56. package/dist/esm/mapping/icon/index.js.map +1 -1
  57. package/dist/esm/mapping/spinner/index.js +3 -1
  58. package/dist/esm/mapping/spinner/index.js.map +1 -1
  59. package/dist/esm/mapping/text/index.js +3 -1
  60. package/dist/esm/mapping/text/index.js.map +1 -1
  61. package/dist/esm/mapping/user/index.js +3 -1
  62. package/dist/esm/mapping/user/index.js.map +1 -1
  63. package/dist/esm/menu/styles.js +1 -1
  64. package/dist/esm/menu/styles.js.map +1 -1
  65. package/dist/esm/menu-button/styles.js +1 -1
  66. package/dist/esm/menu-button/styles.js.map +1 -1
  67. package/dist/esm/menu-item/styles.js +1 -1
  68. package/dist/esm/menu-item/styles.js.map +1 -1
  69. package/dist/esm/number-field/styles.js +1 -1
  70. package/dist/esm/number-field/styles.js.map +1 -1
  71. package/dist/esm/patterns/button/styles.js +1 -1
  72. package/dist/esm/patterns/button/styles.js.map +1 -1
  73. package/dist/esm/patterns/dropdown/styles.js +1 -1
  74. package/dist/esm/patterns/dropdown/styles.js.map +1 -1
  75. package/dist/esm/radio/styles.js +1 -1
  76. package/dist/esm/radio/styles.js.map +1 -1
  77. package/dist/esm/radio-group/styles.js +1 -1
  78. package/dist/esm/radio-group/styles.js.map +1 -1
  79. package/dist/esm/rich-text/editor/styles.js +1 -1
  80. package/dist/esm/rich-text/editor/styles.js.map +1 -1
  81. package/dist/esm/rich-text/viewer/styles.js +1 -1
  82. package/dist/esm/rich-text/viewer/styles.js.map +1 -1
  83. package/dist/esm/rich-text-mention/base/styles.d.ts +1 -0
  84. package/dist/esm/rich-text-mention/base/styles.js +6 -0
  85. package/dist/esm/rich-text-mention/base/styles.js.map +1 -0
  86. package/dist/esm/rich-text-mention/users/index.js +3 -1
  87. package/dist/esm/rich-text-mention/users/index.js.map +1 -1
  88. package/dist/esm/rich-text-mention/users/view/styles.js +1 -1
  89. package/dist/esm/rich-text-mention/users/view/styles.js.map +1 -1
  90. package/dist/esm/select/styles.js +2 -3
  91. package/dist/esm/select/styles.js.map +1 -1
  92. package/dist/esm/select/template.js +2 -2
  93. package/dist/esm/select/template.js.map +1 -1
  94. package/dist/esm/spinner/styles.js +1 -1
  95. package/dist/esm/spinner/styles.js.map +1 -1
  96. package/dist/esm/switch/styles.js +1 -1
  97. package/dist/esm/switch/styles.js.map +1 -1
  98. package/dist/esm/tab/styles.js +1 -1
  99. package/dist/esm/tab/styles.js.map +1 -1
  100. package/dist/esm/tab-panel/styles.js +1 -1
  101. package/dist/esm/tab-panel/styles.js.map +1 -1
  102. package/dist/esm/table/components/cell/styles.js +1 -3
  103. package/dist/esm/table/components/cell/styles.js.map +1 -1
  104. package/dist/esm/table/components/group-row/styles.js +1 -2
  105. package/dist/esm/table/components/group-row/styles.js.map +1 -1
  106. package/dist/esm/table/components/header/styles.js +1 -1
  107. package/dist/esm/table/components/header/styles.js.map +1 -1
  108. package/dist/esm/table/components/row/styles.js +2 -2
  109. package/dist/esm/table/components/row/styles.js.map +1 -1
  110. package/dist/esm/table/styles.js +1 -1
  111. package/dist/esm/table/styles.js.map +1 -1
  112. package/dist/esm/table-column/anchor/cell-view/styles.js +4 -0
  113. package/dist/esm/table-column/anchor/cell-view/styles.js.map +1 -1
  114. package/dist/esm/table-column/base/styles.js +2 -3
  115. package/dist/esm/table-column/base/styles.js.map +1 -1
  116. package/dist/esm/table-column/mapping/cell-view/styles.js +1 -1
  117. package/dist/esm/table-column/mapping/cell-view/styles.js.map +1 -1
  118. package/dist/esm/table-column/mapping/group-header-view/styles.js +1 -1
  119. package/dist/esm/table-column/mapping/group-header-view/styles.js.map +1 -1
  120. package/dist/esm/table-column/text-base/cell-view/styles.js +7 -0
  121. package/dist/esm/table-column/text-base/cell-view/styles.js.map +1 -1
  122. package/dist/esm/table-column/text-base/group-header-view/styles.js +3 -0
  123. package/dist/esm/table-column/text-base/group-header-view/styles.js.map +1 -1
  124. package/dist/esm/tabs/styles.js +1 -1
  125. package/dist/esm/tabs/styles.js.map +1 -1
  126. package/dist/esm/tabs-toolbar/styles.js +1 -1
  127. package/dist/esm/tabs-toolbar/styles.js.map +1 -1
  128. package/dist/esm/text-area/styles.js +1 -1
  129. package/dist/esm/text-area/styles.js.map +1 -1
  130. package/dist/esm/text-field/styles.js +1 -1
  131. package/dist/esm/text-field/styles.js.map +1 -1
  132. package/dist/esm/theme-provider/styles.js +2 -3
  133. package/dist/esm/theme-provider/styles.js.map +1 -1
  134. package/dist/esm/toolbar/styles.js +3 -0
  135. package/dist/esm/toolbar/styles.js.map +1 -1
  136. package/dist/esm/tooltip/styles.js +1 -1
  137. package/dist/esm/tooltip/styles.js.map +1 -1
  138. package/dist/esm/tree-item/styles.js +1 -1
  139. package/dist/esm/tree-item/styles.js.map +1 -1
  140. package/dist/esm/tree-view/styles.js +1 -1
  141. package/dist/esm/tree-view/styles.js.map +1 -1
  142. package/dist/esm/unit/base/styles.d.ts +1 -0
  143. package/dist/esm/unit/base/styles.js +6 -0
  144. package/dist/esm/unit/base/styles.js.map +1 -0
  145. package/dist/esm/unit/byte/index.js +3 -1
  146. package/dist/esm/unit/byte/index.js.map +1 -1
  147. package/dist/esm/unit/celsius/index.js +3 -1
  148. package/dist/esm/unit/celsius/index.js.map +1 -1
  149. package/dist/esm/unit/fahrenheit/index.js +3 -1
  150. package/dist/esm/unit/fahrenheit/index.js.map +1 -1
  151. package/dist/esm/unit/volt/index.js +3 -1
  152. package/dist/esm/unit/volt/index.js.map +1 -1
  153. package/dist/esm/utilities/style/display.d.ts +6 -0
  154. package/dist/esm/utilities/style/display.js +9 -0
  155. package/dist/esm/utilities/style/display.js.map +1 -0
  156. package/dist/esm/wafer-map/styles.js +3 -1
  157. package/dist/esm/wafer-map/styles.js.map +1 -1
  158. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;UASX,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;sBAkBR,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6B9B,iBAAiB;uBACZ,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;cAyBtB,gBAAgB;;kBAEZ,iBAAiB;;;mBAGhB,YAAY,CAAC,OAAO;;;;;wBAKf,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAkDZ,mBAAmB;;;;uBAIxB,eAAe;;;;;;;;;;;;;;;;UAgB5B,gBAAgB;;CAEzB,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n popupBorderColor,\n controlSlimHeight,\n mediumPadding,\n standardPadding,\n tableRowBorderColor,\n borderHoverColor\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { userSelectNone } from '../utilities/style/user-select';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\nimport { ZIndexLevels } from '../utilities/style/types';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n height: 480px;\n --ni-private-column-divider-width: 2px;\n --ni-private-column-divider-padding: 3px;\n }\n\n .disable-select {\n ${userSelectNone}\n }\n\n .table-container {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n width: 100%;\n font: ${bodyFont};\n color: ${bodyFontColor};\n cursor: var(--ni-private-table-cursor-override);\n }\n\n .glass-overlay {\n width: 100%;\n height: 100%;\n display: contents;\n pointer-events: var(--ni-private-glass-overlay-pointer-events);\n }\n\n .header-row-container {\n position: sticky;\n top: 0;\n }\n\n .header-row {\n display: flex;\n background: ${applicationBackgroundColor};\n position: relative;\n width: fit-content;\n min-width: max(\n 100%,\n calc(\n var(--ni-private-table-scrollable-min-width) +\n var(--ni-private-table-header-container-margin-right)\n )\n );\n left: var(--ni-private-table-scroll-x);\n align-items: center;\n }\n\n .header-row-action-container {\n display: flex;\n }\n\n .checkbox-container {\n display: flex;\n }\n\n .column-headers-container {\n display: grid;\n width: 100%;\n grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n }\n\n .collapse-all-button {\n height: ${controlSlimHeight};\n margin-left: ${mediumPadding};\n visibility: hidden;\n }\n\n .collapse-all-button.visible {\n visibility: visible;\n }\n\n .header-container {\n display: flex;\n align-items: center;\n position: relative;\n }\n\n .header-scrollbar-spacer {\n width: var(--ni-private-table-header-container-margin-right);\n }\n\n .header {\n flex: 1;\n overflow: hidden;\n }\n\n .column-divider {\n border-left: var(--ni-private-column-divider-width) solid\n ${popupBorderColor};\n display: none;\n height: ${controlSlimHeight};\n cursor: col-resize;\n position: absolute;\n z-index: ${ZIndexLevels.zIndex1};\n }\n\n .column-divider:hover,\n .column-divider.divider-active {\n border-color: ${borderHoverColor};\n }\n\n .column-divider.column-active.draggable,\n .header-container:hover .column-divider.draggable {\n display: block;\n }\n\n .column-divider::before {\n content: '';\n position: absolute;\n width: calc(\n var(--ni-private-column-divider-width) +\n (2 * var(--ni-private-column-divider-padding))\n );\n height: 100%;\n left: calc(\n -1 * (var(--ni-private-column-divider-width) +\n var(--ni-private-column-divider-padding))\n );\n }\n\n .column-divider.left {\n left: -1px;\n }\n\n .column-divider.right {\n left: calc(100% - 1px);\n }\n\n .table-viewport {\n overflow: auto;\n display: block;\n height: 100%;\n position: relative;\n }\n\n .table-scroll {\n pointer-events: none;\n position: absolute;\n top: 0px;\n width: 100%;\n height: var(--ni-private-table-scroll-height);\n }\n\n .table-row-container {\n width: fit-content;\n min-width: max(100%, var(--ni-private-table-scrollable-min-width));\n position: relative;\n top: var(--ni-private-table-row-container-top);\n background-color: ${tableRowBorderColor};\n }\n\n .selection-checkbox {\n margin-left: ${standardPadding};\n }\n\n .selection-checkbox::part(label) {\n padding-left: 0px;\n }\n\n .group-row {\n position: relative;\n }\n\n .row {\n position: relative;\n }\n\n .accessibly-hidden {\n ${accessiblyHidden}\n }\n`.withBehaviors(\n themeBehavior(\n Theme.color,\n css`\n .table-row-container::before {\n content: '';\n width: 100%;\n height: 100%;\n background-color: ${hexToRgbaCssColor(White, 0.1)};\n position: absolute;\n }\n `\n )\n);\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/table/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,eAAe,EACf,mBAAmB,EACnB,gBAAgB,EACnB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;UASX,cAAc;;;;;;;;gBAQR,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;sBAkBR,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA6B9B,iBAAiB;uBACZ,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;cAyBtB,gBAAgB;;kBAEZ,iBAAiB;;;mBAGhB,YAAY,CAAC,OAAO;;;;;wBAKf,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAkDZ,mBAAmB;;;;uBAIxB,eAAe;;;;;;;;;;;;;;;;UAgB5B,gBAAgB;;CAEzB,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;;oCAKyB,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;;SAGxD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n popupBorderColor,\n controlSlimHeight,\n mediumPadding,\n standardPadding,\n tableRowBorderColor,\n borderHoverColor\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { userSelectNone } from '../utilities/style/user-select';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\nimport { ZIndexLevels } from '../utilities/style/types';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n height: 480px;\n --ni-private-column-divider-width: 2px;\n --ni-private-column-divider-padding: 3px;\n }\n\n .disable-select {\n ${userSelectNone}\n }\n\n .table-container {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n width: 100%;\n font: ${bodyFont};\n color: ${bodyFontColor};\n cursor: var(--ni-private-table-cursor-override);\n }\n\n .glass-overlay {\n width: 100%;\n height: 100%;\n display: contents;\n pointer-events: var(--ni-private-glass-overlay-pointer-events);\n }\n\n .header-row-container {\n position: sticky;\n top: 0;\n }\n\n .header-row {\n display: flex;\n background: ${applicationBackgroundColor};\n position: relative;\n width: fit-content;\n min-width: max(\n 100%,\n calc(\n var(--ni-private-table-scrollable-min-width) +\n var(--ni-private-table-header-container-margin-right)\n )\n );\n left: var(--ni-private-table-scroll-x);\n align-items: center;\n }\n\n .header-row-action-container {\n display: flex;\n }\n\n .checkbox-container {\n display: flex;\n }\n\n .column-headers-container {\n display: grid;\n width: 100%;\n grid-template-columns: var(--ni-private-table-row-grid-columns) auto;\n }\n\n .collapse-all-button {\n height: ${controlSlimHeight};\n margin-left: ${mediumPadding};\n visibility: hidden;\n }\n\n .collapse-all-button.visible {\n visibility: visible;\n }\n\n .header-container {\n display: flex;\n align-items: center;\n position: relative;\n }\n\n .header-scrollbar-spacer {\n width: var(--ni-private-table-header-container-margin-right);\n }\n\n .header {\n flex: 1;\n overflow: hidden;\n }\n\n .column-divider {\n border-left: var(--ni-private-column-divider-width) solid\n ${popupBorderColor};\n display: none;\n height: ${controlSlimHeight};\n cursor: col-resize;\n position: absolute;\n z-index: ${ZIndexLevels.zIndex1};\n }\n\n .column-divider:hover,\n .column-divider.divider-active {\n border-color: ${borderHoverColor};\n }\n\n .column-divider.column-active.draggable,\n .header-container:hover .column-divider.draggable {\n display: block;\n }\n\n .column-divider::before {\n content: '';\n position: absolute;\n width: calc(\n var(--ni-private-column-divider-width) +\n (2 * var(--ni-private-column-divider-padding))\n );\n height: 100%;\n left: calc(\n -1 * (var(--ni-private-column-divider-width) +\n var(--ni-private-column-divider-padding))\n );\n }\n\n .column-divider.left {\n left: -1px;\n }\n\n .column-divider.right {\n left: calc(100% - 1px);\n }\n\n .table-viewport {\n overflow: auto;\n display: block;\n height: 100%;\n position: relative;\n }\n\n .table-scroll {\n pointer-events: none;\n position: absolute;\n top: 0px;\n width: 100%;\n height: var(--ni-private-table-scroll-height);\n }\n\n .table-row-container {\n width: fit-content;\n min-width: max(100%, var(--ni-private-table-scrollable-min-width));\n position: relative;\n top: var(--ni-private-table-row-container-top);\n background-color: ${tableRowBorderColor};\n }\n\n .selection-checkbox {\n margin-left: ${standardPadding};\n }\n\n .selection-checkbox::part(label) {\n padding-left: 0px;\n }\n\n .group-row {\n position: relative;\n }\n\n .row {\n position: relative;\n }\n\n .accessibly-hidden {\n ${accessiblyHidden}\n }\n`.withBehaviors(\n themeBehavior(\n Theme.color,\n css`\n .table-row-container::before {\n content: '';\n width: 100%;\n height: 100%;\n background-color: ${hexToRgbaCssColor(White, 0.1)};\n position: absolute;\n }\n `\n )\n);\n"]}
@@ -1,11 +1,15 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { bodyFont, bodyFontColor, placeholderFont, placeholderFontColor } from '../../../theme-provider/design-tokens';
3
+ import { display } from '../../../utilities/style/display';
3
4
  export const styles = css `
5
+ ${display('flex')}
6
+
4
7
  :host {
5
8
  width: fit-content;
6
9
  max-width: 100%;
7
10
  height: fit-content;
8
11
  align-self: center;
12
+ align-items: center;
9
13
  }
10
14
 
11
15
  nimble-anchor {
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;gBAeT,QAAQ;iBACP,aAAa;;;;;;;gBAOd,eAAe;iBACd,oBAAoB;;CAEpC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n bodyFont,\n bodyFontColor,\n placeholderFont,\n placeholderFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n :host {\n width: fit-content;\n max-width: 100%;\n height: fit-content;\n align-self: center;\n }\n\n nimble-anchor {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n span {\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n :host(.placeholder) span {\n font: ${placeholderFont};\n color: ${placeholderFontColor};\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/anchor/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;gBAiBL,QAAQ;iBACP,aAAa;;;;;;;gBAOd,eAAe;iBACd,oBAAoB;;CAEpC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n bodyFont,\n bodyFontColor,\n placeholderFont,\n placeholderFontColor\n} from '../../../theme-provider/design-tokens';\nimport { display } from '../../../utilities/style/display';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n width: fit-content;\n max-width: 100%;\n height: fit-content;\n align-self: center;\n align-items: center;\n }\n\n nimble-anchor {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n span {\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n :host(.placeholder) span {\n font: ${placeholderFont};\n color: ${placeholderFontColor};\n }\n`;\n"]}
@@ -1,8 +1,7 @@
1
1
  import { css } from '@microsoft/fast-element';
2
+ import { display } from '../../utilities/style/display';
2
3
  export const styles = css `
3
- :host {
4
- display: contents;
5
- }
4
+ ${display('contents')}
6
5
 
7
6
  .header-content {
8
7
  white-space: nowrap;
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/table-column/base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;CAUxB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\n\nexport const styles = css`\n :host {\n display: contents;\n }\n\n .header-content {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/table-column/base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,UAAU,CAAC;;;;;;;CAOxB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n ${display('contents')}\n\n .header-content {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n"]}
@@ -1,5 +1,5 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { display } from '@microsoft/fast-foundation';
2
+ import { display } from '../../../utilities/style/display';
3
3
  import { bodyFont, bodyFontColor, iconSize, smallPadding } from '../../../theme-provider/design-tokens';
4
4
  export const styles = css `
5
5
  ${display('inline-flex')}
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/mapping/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,YAAY,EACf,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;eAGb,YAAY;;;;;;iBAMV,QAAQ;kBACP,QAAQ;;;;;gBAKV,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n bodyFont,\n bodyFontColor,\n iconSize,\n smallPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n gap: ${smallPadding};\n align-items: center;\n }\n\n .reserve-icon-size {\n flex-shrink: 0;\n width: ${iconSize};\n height: ${iconSize};\n }\n\n .text {\n flex-shrink: 1;\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/mapping/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,YAAY,EACf,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;eAGb,YAAY;;;;;;iBAMV,QAAQ;kBACP,QAAQ;;;;;gBAKV,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n bodyFont,\n bodyFontColor,\n iconSize,\n smallPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n gap: ${smallPadding};\n align-items: center;\n }\n\n .reserve-icon-size {\n flex-shrink: 0;\n width: ${iconSize};\n height: ${iconSize};\n }\n\n .text {\n flex-shrink: 1;\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n"]}
@@ -1,5 +1,5 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { display } from '@microsoft/fast-foundation';
2
+ import { display } from '../../../utilities/style/display';
3
3
  import { bodyFont, bodyFontColor, iconSize, smallPadding } from '../../../theme-provider/design-tokens';
4
4
  export const styles = css `
5
5
  ${display('inline-flex')}
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/mapping/group-header-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,YAAY,EACf,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;eAGb,YAAY;;;;;;iBAMV,QAAQ;kBACP,QAAQ;;;;;gBAKV,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n bodyFont,\n bodyFontColor,\n iconSize,\n smallPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n gap: ${smallPadding};\n align-items: center;\n }\n\n .reserve-icon-size {\n flex-shrink: 0;\n width: ${iconSize};\n height: ${iconSize};\n }\n\n .text {\n flex-shrink: 1;\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/mapping/group-header-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EACH,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,YAAY,EACf,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;eAGb,YAAY;;;;;;iBAMV,QAAQ;kBACP,QAAQ;;;;;gBAKV,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../../utilities/style/display';\nimport {\n bodyFont,\n bodyFontColor,\n iconSize,\n smallPadding\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n gap: ${smallPadding};\n align-items: center;\n }\n\n .reserve-icon-size {\n flex-shrink: 0;\n width: ${iconSize};\n height: ${iconSize};\n }\n\n .text {\n flex-shrink: 1;\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n"]}
@@ -1,6 +1,13 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { bodyFont, bodyFontColor, placeholderFont, placeholderFontColor } from '../../../theme-provider/design-tokens';
3
+ import { display } from '../../../utilities/style/display';
3
4
  export const styles = css `
5
+ ${display('flex')}
6
+
7
+ :host {
8
+ align-items: center;
9
+ }
10
+
4
11
  :host(.right-align) {
5
12
  margin-left: auto;
6
13
  }
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;gBAMT,QAAQ;iBACP,aAAa;;;;;;;gBAOd,eAAe;iBACd,oBAAoB;;CAEpC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n bodyFont,\n bodyFontColor,\n placeholderFont,\n placeholderFontColor\n} from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n :host(.right-align) {\n margin-left: auto;\n }\n\n span {\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n :host(.placeholder) span {\n font: ${placeholderFont};\n color: ${placeholderFontColor};\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/cell-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,QAAQ,EACR,aAAa,EACb,eAAe,EACf,oBAAoB,EACvB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;gBAWL,QAAQ;iBACP,aAAa;;;;;;;gBAOd,eAAe;iBACd,oBAAoB;;CAEpC,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n bodyFont,\n bodyFontColor,\n placeholderFont,\n placeholderFontColor\n} from '../../../theme-provider/design-tokens';\nimport { display } from '../../../utilities/style/display';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n align-items: center;\n }\n\n :host(.right-align) {\n margin-left: auto;\n }\n\n span {\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n :host(.placeholder) span {\n font: ${placeholderFont};\n color: ${placeholderFontColor};\n }\n`;\n"]}
@@ -1,6 +1,9 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { bodyFont, bodyFontColor } from '../../../theme-provider/design-tokens';
3
+ import { display } from '../../../utilities/style/display';
3
4
  export const styles = css `
5
+ ${display('flex')}
6
+
4
7
  span {
5
8
  font: ${bodyFont};
6
9
  color: ${bodyFontColor};
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/group-header-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAEhF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;gBAET,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { bodyFont, bodyFontColor } from '../../../theme-provider/design-tokens';\n\nexport const styles = css`\n span {\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/table-column/text-base/group-header-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,MAAM,kCAAkC,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;iBACP,aAAa;;;;;CAK7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { bodyFont, bodyFontColor } from '../../../theme-provider/design-tokens';\nimport { display } from '../../../utilities/style/display';\n\nexport const styles = css`\n ${display('flex')}\n\n span {\n font: ${bodyFont};\n color: ${bodyFontColor};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n`;\n"]}
@@ -1,5 +1,5 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { display } from '@microsoft/fast-foundation';
2
+ import { display } from '../utilities/style/display';
3
3
  export const styles = css `
4
4
  ${display('grid')}
5
5
 
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BpB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\n\nexport const styles = css`\n ${display('grid')}\n\n :host {\n box-sizing: border-box;\n grid-template-columns: auto 1fr;\n grid-template-rows: auto 1fr;\n }\n\n [part='start'] {\n display: none;\n }\n\n .tablist {\n display: grid;\n grid-template-rows: auto auto;\n grid-template-columns: auto;\n width: max-content;\n align-self: end;\n }\n\n .tabpanel {\n grid-row: 2;\n grid-column-start: 1;\n grid-column-end: 4;\n overflow: auto;\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BpB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n ${display('grid')}\n\n :host {\n box-sizing: border-box;\n grid-template-columns: auto 1fr;\n grid-template-rows: auto 1fr;\n }\n\n [part='start'] {\n display: none;\n }\n\n .tablist {\n display: grid;\n grid-template-rows: auto auto;\n grid-template-columns: auto;\n width: max-content;\n align-self: end;\n }\n\n .tabpanel {\n grid-row: 2;\n grid-column-start: 1;\n grid-column-end: 4;\n overflow: auto;\n }\n`;\n"]}
@@ -1,5 +1,5 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { display } from '@microsoft/fast-foundation';
2
+ import { display } from '../utilities/style/display';
3
3
  import { bodyFont, bodyFontColor, borderRgbPartialColor, borderWidth, controlHeight, mediumPadding, smallPadding } from '../theme-provider/design-tokens';
4
4
  export const styles = css `
5
5
  ${display('flex')}
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;;gBAEf,QAAQ;iBACP,aAAa;;;;;;4BAMF,WAAW;mBACpB,qBAAqB;kBACtB,YAAY,IAAI,aAAa;;CAE9C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n bodyFont,\n bodyFontColor,\n borderRgbPartialColor,\n borderWidth,\n controlHeight,\n mediumPadding,\n smallPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n align-items: center;\n height: ${controlHeight};\n box-sizing: border-box;\n font: ${bodyFont};\n color: ${bodyFontColor};\n }\n\n .separator {\n display: inline-block;\n height: 24px;\n border-left: calc(${borderWidth} * 2) solid\n rgba(${borderRgbPartialColor}, 0.3);\n margin: ${smallPadding} ${mediumPadding};\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tabs-toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACf,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;kBAIH,aAAa;;gBAEf,QAAQ;iBACP,aAAa;;;;;;4BAMF,WAAW;mBACpB,qBAAqB;kBACtB,YAAY,IAAI,aAAa;;CAE9C,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n bodyFont,\n bodyFontColor,\n borderRgbPartialColor,\n borderWidth,\n controlHeight,\n mediumPadding,\n smallPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n align-items: center;\n height: ${controlHeight};\n box-sizing: border-box;\n font: ${bodyFont};\n color: ${bodyFontColor};\n }\n\n .separator {\n display: inline-block;\n height: 24px;\n border-left: calc(${borderWidth} * 2) solid\n rgba(${borderRgbPartialColor}, 0.3);\n margin: ${smallPadding} ${mediumPadding};\n }\n`;\n"]}
@@ -1,5 +1,5 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { display } from '@microsoft/fast-foundation';
2
+ import { display } from '../utilities/style/display';
3
3
  import { borderRgbPartialColor, borderHoverColor, borderWidth, smallDelay, bodyFontColor, bodyDisabledFontColor, controlLabelFont, controlLabelFontColor, bodyFont, controlLabelDisabledFontColor, iconSize, failColor, standardPadding, mediumPadding } from '../theme-provider/design-tokens';
4
4
  import { appearanceBehavior } from '../utilities/style/appearance';
5
5
  import { TextAreaAppearance } from './types';
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;mDAGqB,WAAW;;;;iBAI7C,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;4BAclB,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;kBAsBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;eAoB/B,aAAa;;;CAG3B,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;qCAE0B,qBAAqB;;;SAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;;;;yCASrB,qBAAqB;;;;uCAIvB,SAAS;;SAEvC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n smallDelay,\n bodyFontColor,\n bodyDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n bodyFont,\n controlLabelDisabledFontColor,\n iconSize,\n failColor,\n standardPadding,\n mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextAreaAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-flex')}\n ${errorStyles}\n\n :host {\n font: ${bodyFont};\n outline: none;\n ${userSelectNone}\n color: ${bodyFontColor};\n flex-direction: column;\n vertical-align: top;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n .label {\n display: block;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .container {\n display: flex;\n justify-content: center;\n position: relative;\n height: 100%;\n width: 100%;\n }\n\n .container::after {\n content: ' ';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n .container::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) .container::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) .container::after {\n width: 100%;\n }\n\n :host([disabled]:hover) .container::after,\n :host([readonly]:hover) .container::after {\n width: 0px;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n flex-grow: 1;\n outline: none;\n box-sizing: border-box;\n position: relative;\n color: inherit;\n border-radius: 0px;\n align-items: flex-end;\n border: ${borderWidth} solid transparent;\n min-width: 100px;\n min-height: calc(${iconSize} + ${standardPadding});\n padding: 8px;\n ${\n /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n }\n padding-right: calc(${iconSize});\n margin: 0px;\n resize: none;\n }\n\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n .control:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n .control[readonly],\n .control[readonly]:hover,\n .control[readonly]:hover:focus-within,\n .control[disabled],\n .control[disabled]:hover {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([error-visible]) .control {\n border-bottom-color: ${failColor};\n }\n\n :host([error-visible]) .control[readonly]:hover:focus-within {\n border-bottom-color: ${failColor};\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .control[disabled]::placeholder {\n color: ${controlLabelDisabledFontColor};\n }\n\n :host([resize='both']) .control {\n resize: both;\n }\n :host([resize='horizontal']) .control {\n resize: horizontal;\n }\n :host([resize='vertical']) .control {\n resize: vertical;\n }\n\n :host([error-visible]) .error-icon {\n display: none;\n }\n\n :host([error-visible]) .error-icon.scrollbar-width-calculated {\n display: inline-flex;\n position: absolute;\n top: ${mediumPadding};\n right: var(--ni-private-scrollbar-width);\n }\n`.withBehaviors(\n appearanceBehavior(\n TextAreaAppearance.outline,\n css`\n .control {\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n background-color: transparent;\n }\n `\n ),\n appearanceBehavior(\n TextAreaAppearance.block,\n css`\n .control {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([readonly]) .control {\n background-color: transparent;\n }\n\n :host([disabled]) .control {\n border-color: transparent;\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([error-visible][disabled]) .control {\n border-bottom-color: ${failColor};\n }\n `\n )\n);\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;mDAGqB,WAAW;;;;iBAI7C,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;4BAclB,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;kBAsBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;eAoB/B,aAAa;;;CAG3B,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;qCAE0B,qBAAqB;;;SAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;;;;yCASrB,qBAAqB;;;;uCAIvB,SAAS;;SAEvC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n smallDelay,\n bodyFontColor,\n bodyDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n bodyFont,\n controlLabelDisabledFontColor,\n iconSize,\n failColor,\n standardPadding,\n mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextAreaAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-flex')}\n ${errorStyles}\n\n :host {\n font: ${bodyFont};\n outline: none;\n ${userSelectNone}\n color: ${bodyFontColor};\n flex-direction: column;\n vertical-align: top;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n .label {\n display: block;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .container {\n display: flex;\n justify-content: center;\n position: relative;\n height: 100%;\n width: 100%;\n }\n\n .container::after {\n content: ' ';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n .container::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) .container::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) .container::after {\n width: 100%;\n }\n\n :host([disabled]:hover) .container::after,\n :host([readonly]:hover) .container::after {\n width: 0px;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n flex-grow: 1;\n outline: none;\n box-sizing: border-box;\n position: relative;\n color: inherit;\n border-radius: 0px;\n align-items: flex-end;\n border: ${borderWidth} solid transparent;\n min-width: 100px;\n min-height: calc(${iconSize} + ${standardPadding});\n padding: 8px;\n ${\n /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n }\n padding-right: calc(${iconSize});\n margin: 0px;\n resize: none;\n }\n\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n .control:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n .control[readonly],\n .control[readonly]:hover,\n .control[readonly]:hover:focus-within,\n .control[disabled],\n .control[disabled]:hover {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([error-visible]) .control {\n border-bottom-color: ${failColor};\n }\n\n :host([error-visible]) .control[readonly]:hover:focus-within {\n border-bottom-color: ${failColor};\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .control[disabled]::placeholder {\n color: ${controlLabelDisabledFontColor};\n }\n\n :host([resize='both']) .control {\n resize: both;\n }\n :host([resize='horizontal']) .control {\n resize: horizontal;\n }\n :host([resize='vertical']) .control {\n resize: vertical;\n }\n\n :host([error-visible]) .error-icon {\n display: none;\n }\n\n :host([error-visible]) .error-icon.scrollbar-width-calculated {\n display: inline-flex;\n position: absolute;\n top: ${mediumPadding};\n right: var(--ni-private-scrollbar-width);\n }\n`.withBehaviors(\n appearanceBehavior(\n TextAreaAppearance.outline,\n css`\n .control {\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n background-color: transparent;\n }\n `\n ),\n appearanceBehavior(\n TextAreaAppearance.block,\n css`\n .control {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([readonly]) .control {\n background-color: transparent;\n }\n\n :host([disabled]) .control {\n border-color: transparent;\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([error-visible][disabled]) .control {\n border-bottom-color: ${failColor};\n }\n `\n )\n);\n"]}
@@ -1,5 +1,5 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { display } from '@microsoft/fast-foundation';
2
+ import { display } from '../utilities/style/display';
3
3
  import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor, mediumPadding, iconColor } from '../theme-provider/design-tokens';
4
4
  import { appearanceBehavior } from '../utilities/style/appearance';
5
5
  import { TextFieldAppearance } from './types';
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,aAAa,EACb,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;eACvC,aAAa;mBACT,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;UAad,SAAS,CAAC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;UAyB3B;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\n\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n failColor,\n smallDelay,\n controlLabelFont,\n bodyFont,\n controlLabelFontColor,\n controlLabelDisabledFontColor,\n mediumPadding,\n iconColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextFieldAppearance } from './types';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-block')}\n ${errorStyles}\n\n :host {\n font: ${bodyFont};\n outline: none;\n ${userSelectNone}\n color: ${bodyFontColor};\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n --ni-private-height-within-border: calc(\n ${controlHeight} - 2 * ${borderWidth}\n );\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n .label {\n display: flex;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .root {\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-direction: row;\n border-radius: 0px;\n font: inherit;\n align-items: center;\n justify-content: center;\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n gap: ${mediumPadding};\n padding: ${borderWidth};\n }\n\n :host([readonly]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([error-visible]) .root {\n border-bottom-color: ${failColor};\n }\n\n .root:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([appearance='frameless'][full-bleed]) .root {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .root::before {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n :host([appearance='frameless'][full-bleed]) .root::before {\n display: none;\n }\n\n .root::after {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n :host([appearance='frameless'][full-bleed]) .root::after {\n display: none;\n }\n\n [part='start'] {\n display: contents;\n }\n\n slot[name='start']::slotted(*) {\n flex: none;\n ${iconColor.cssCustomProperty}: currentcolor;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n color: inherit;\n padding: 0px;\n height: var(--ni-private-height-within-border);\n width: 100%;\n margin-top: auto;\n margin-bottom: auto;\n border: none;\n text-overflow: ellipsis;\n }\n\n .control:hover,\n .control:focus,\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n .control:disabled {\n ${\n /* There's an issue with the input element where the ellipsized\n overflowed text is blank when scrolled into view, so just clip instead.\n See https://webcompat.com/issues/104481 */ ''\n }\n text-overflow: clip;\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .control[disabled]::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n [part='end'] {\n display: contents;\n }\n\n [part='end']::after {\n content: '';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n [part='end']::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) [part='end']::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) [part='end']::after {\n width: 100%;\n }\n\n :host([disabled]:hover) [part='end']::after,\n :host([readonly]:hover) [part='end']::after {\n width: 0px;\n }\n\n [part='actions'] {\n display: contents;\n }\n\n slot[name='actions']::slotted(*) {\n ${controlHeight.cssCustomProperty}: 24px;\n }\n`.withBehaviors(\n appearanceBehavior(\n TextFieldAppearance.underline,\n css`\n .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.block,\n css`\n .root {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .control {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\n }\n\n .root:focus-within,\n :host([error-visible]) .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host(:hover) .root {\n padding-bottom: 0;\n }\n\n :host([readonly]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n border-color: transparent;\n }\n\n :host([disabled]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.outline,\n css`\n .root {\n border-width: ${borderWidth};\n padding: 0;\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.frameless,\n css`\n .control {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\n }\n\n :host([readonly]) .root {\n border-color: transparent;\n }\n `\n ),\n themeBehavior(\n Theme.light,\n css`\n .control::-ms-reveal {\n filter: invert(0%);\n }\n `\n ),\n themeBehavior(\n [Theme.dark, Theme.color],\n css`\n .control::-ms-reveal {\n filter: invert(100%);\n }\n `\n )\n);\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,aAAa,EACb,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;eACvC,aAAa;mBACT,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;UAad,SAAS,CAAC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;UAyB3B;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n failColor,\n smallDelay,\n controlLabelFont,\n bodyFont,\n controlLabelFontColor,\n controlLabelDisabledFontColor,\n mediumPadding,\n iconColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextFieldAppearance } from './types';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-block')}\n ${errorStyles}\n\n :host {\n font: ${bodyFont};\n outline: none;\n ${userSelectNone}\n color: ${bodyFontColor};\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n --ni-private-height-within-border: calc(\n ${controlHeight} - 2 * ${borderWidth}\n );\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n .label {\n display: flex;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .root {\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-direction: row;\n border-radius: 0px;\n font: inherit;\n align-items: center;\n justify-content: center;\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n gap: ${mediumPadding};\n padding: ${borderWidth};\n }\n\n :host([readonly]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([error-visible]) .root {\n border-bottom-color: ${failColor};\n }\n\n .root:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([appearance='frameless'][full-bleed]) .root {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .root::before {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n :host([appearance='frameless'][full-bleed]) .root::before {\n display: none;\n }\n\n .root::after {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n :host([appearance='frameless'][full-bleed]) .root::after {\n display: none;\n }\n\n [part='start'] {\n display: contents;\n }\n\n slot[name='start']::slotted(*) {\n flex: none;\n ${iconColor.cssCustomProperty}: currentcolor;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n color: inherit;\n padding: 0px;\n height: var(--ni-private-height-within-border);\n width: 100%;\n margin-top: auto;\n margin-bottom: auto;\n border: none;\n text-overflow: ellipsis;\n }\n\n .control:hover,\n .control:focus,\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n .control:disabled {\n ${\n /* There's an issue with the input element where the ellipsized\n overflowed text is blank when scrolled into view, so just clip instead.\n See https://webcompat.com/issues/104481 */ ''\n }\n text-overflow: clip;\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .control[disabled]::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n [part='end'] {\n display: contents;\n }\n\n [part='end']::after {\n content: '';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n [part='end']::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) [part='end']::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) [part='end']::after {\n width: 100%;\n }\n\n :host([disabled]:hover) [part='end']::after,\n :host([readonly]:hover) [part='end']::after {\n width: 0px;\n }\n\n [part='actions'] {\n display: contents;\n }\n\n slot[name='actions']::slotted(*) {\n ${controlHeight.cssCustomProperty}: 24px;\n }\n`.withBehaviors(\n appearanceBehavior(\n TextFieldAppearance.underline,\n css`\n .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.block,\n css`\n .root {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .control {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\n }\n\n .root:focus-within,\n :host([error-visible]) .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host(:hover) .root {\n padding-bottom: 0;\n }\n\n :host([readonly]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n border-color: transparent;\n }\n\n :host([disabled]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.outline,\n css`\n .root {\n border-width: ${borderWidth};\n padding: 0;\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.frameless,\n css`\n .control {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\n }\n\n :host([readonly]) .root {\n border-color: transparent;\n }\n `\n ),\n themeBehavior(\n Theme.light,\n css`\n .control::-ms-reveal {\n filter: invert(0%);\n }\n `\n ),\n themeBehavior(\n [Theme.dark, Theme.color],\n css`\n .control::-ms-reveal {\n filter: invert(100%);\n }\n `\n )\n);\n"]}
@@ -1,7 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
+ import { display } from '../utilities/style/display';
2
3
  export const styles = css `
3
- :host {
4
- display: contents;
5
- }
4
+ ${display('contents')}
6
5
  `;
7
6
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/theme-provider/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\n\nexport const styles = css`\n :host {\n display: contents;\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/theme-provider/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,UAAU,CAAC;CACxB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n ${display('contents')}\n`;\n"]}
@@ -1,6 +1,9 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { applicationBackgroundColor, smallPadding, standardPadding } from '../theme-provider/design-tokens';
3
+ import { display } from '../utilities/style/display';
3
4
  export const styles = css `
5
+ ${display('inline')}
6
+
4
7
  .positioning-region {
5
8
  display: flex;
6
9
  padding: ${smallPadding} ${standardPadding};
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,0BAA0B,EAC1B,YAAY,EACZ,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;mBAGN,YAAY,IAAI,eAAe;;eAEnC,eAAe;sBACR,0BAA0B;;;;;;;;;eASjC,eAAe;;;;;;eAMf,eAAe;;;CAG7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n applicationBackgroundColor,\n smallPadding,\n standardPadding\n} from '../theme-provider/design-tokens';\n\nexport const styles = css`\n .positioning-region {\n display: flex;\n padding: ${smallPadding} ${standardPadding};\n align-items: center;\n gap: ${standardPadding};\n background: ${applicationBackgroundColor};\n }\n\n slot[name='label'] {\n display: none;\n }\n\n [part='start'] {\n display: flex;\n gap: ${standardPadding};\n margin-right: auto;\n }\n\n [part='end'] {\n display: flex;\n gap: ${standardPadding};\n margin-left: auto;\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/toolbar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,0BAA0B,EAC1B,YAAY,EACZ,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,QAAQ,CAAC;;;;mBAIJ,YAAY,IAAI,eAAe;;eAEnC,eAAe;sBACR,0BAA0B;;;;;;;;;eASjC,eAAe;;;;;;eAMf,eAAe;;;CAG7B,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n applicationBackgroundColor,\n smallPadding,\n standardPadding\n} from '../theme-provider/design-tokens';\nimport { display } from '../utilities/style/display';\n\nexport const styles = css`\n ${display('inline')}\n\n .positioning-region {\n display: flex;\n padding: ${smallPadding} ${standardPadding};\n align-items: center;\n gap: ${standardPadding};\n background: ${applicationBackgroundColor};\n }\n\n slot[name='label'] {\n display: none;\n }\n\n [part='start'] {\n display: flex;\n gap: ${standardPadding};\n margin-right: auto;\n }\n\n [part='end'] {\n display: flex;\n gap: ${standardPadding};\n margin-left: auto;\n }\n`;\n"]}
@@ -1,6 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { display } from '@microsoft/fast-foundation';
3
2
  import { BannerFail100DarkUi, Black15, Black85, Black91, ForestGreen, Information100DarkUi, Information100LightUi, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
3
+ import { display } from '../utilities/style/display';
4
4
  import { tooltipCaptionFont, tooltipCaptionFontColor, borderWidth, mediumPadding, smallPadding, elevation2BoxShadow } from '../theme-provider/design-tokens';
5
5
  import { Theme } from '../theme-provider/types';
6
6
  import { hexToRgbaCssColor } from '../utilities/style/colors';
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,kBAAkB;iBACjB,uBAAuB;;6CAEK,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;iDAC3B,OAAO;;;;;;;sBAOlC,mBAAmB;;kBAEvB,WAAW;;;wBAGL,aAAa;yBACZ,aAAa;uBACf,YAAY;;;;;;;;;;;;;;;;;;;CAmBlC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;qDAE0C,mBAAmB;yDACf,KAAK;;;;qDAIT,qBAAqB;yDACjB,KAAK;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;qDAE0C,iBAAiB,CAClD,OAAO,EACP,GAAG,CACN;yDACwC,OAAO;;;;qDAIX,oBAAoB;;;;qDAIpB,mBAAmB;;SAE/D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,WAAW;;;;qDAIM,iBAAiB,CAClD,KAAK,EACL,GAAG,CACN;yDACwC,iBAAiB,CACtD,KAAK,EACL,IAAI,CACP;;;;qDAIoC,KAAK;;;;qDAIL,KAAK;;;;;;SAMjD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport {\n BannerFail100DarkUi,\n Black15,\n Black85,\n Black91,\n ForestGreen,\n Information100DarkUi,\n Information100LightUi,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport {\n tooltipCaptionFont,\n tooltipCaptionFontColor,\n borderWidth,\n mediumPadding,\n smallPadding,\n elevation2BoxShadow\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n font: ${tooltipCaptionFont};\n color: ${tooltipCaptionFontColor};\n text-align: left;\n --ni-private-tooltip-border-color: ${hexToRgbaCssColor(Black91, 0.3)};\n --ni-private-tooltip-background-color: ${Black15};\n }\n\n .tooltip {\n box-sizing: border-box;\n flex-shrink: 0;\n max-width: 440px;\n box-shadow: ${elevation2BoxShadow};\n display: inline-flex;\n border: ${borderWidth} solid var(--ni-private-tooltip-border-color);\n background-color: var(--ni-private-tooltip-background-color);\n padding-bottom: 6px;\n padding-left: ${mediumPadding};\n padding-right: ${mediumPadding};\n padding-top: ${smallPadding};\n }\n\n .status-icon {\n display: none;\n width: 14px;\n height: 14px;\n padding-right: 8px;\n }\n\n :host([severity='error'][icon-visible]) [severity='error'] {\n display: flex;\n flex: 0 0 auto;\n }\n\n :host([severity='information'][icon-visible]) [severity='information'] {\n display: flex;\n flex: 0 0 auto;\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host([severity='error']) {\n --ni-private-tooltip-border-color: ${BannerFail100DarkUi};\n --ni-private-tooltip-background-color: ${White};\n }\n\n :host([severity='information']) {\n --ni-private-tooltip-border-color: ${Information100LightUi};\n --ni-private-tooltip-background-color: ${White};\n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n --ni-private-tooltip-border-color: ${hexToRgbaCssColor(\n Black15,\n 0.3\n )};\n --ni-private-tooltip-background-color: ${Black85};\n }\n\n :host([severity='information']) {\n --ni-private-tooltip-border-color: ${Information100DarkUi};\n }\n\n :host([severity='error']) {\n --ni-private-tooltip-border-color: ${BannerFail100DarkUi};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n .anchored-region {\n background-color: ${ForestGreen};\n }\n\n :host {\n --ni-private-tooltip-border-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-tooltip-background-color: ${hexToRgbaCssColor(\n White,\n 0.15\n )};\n }\n\n :host([severity='error']) {\n --ni-private-tooltip-border-color: ${White};\n }\n\n :host([severity='information']) {\n --ni-private-tooltip-border-color: ${White};\n }\n\n .status-icon {\n opacity: 0.6;\n }\n `\n )\n);\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,OAAO,EACP,OAAO,EACP,WAAW,EACX,oBAAoB,EACpB,qBAAqB,EACrB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,WAAW,EACX,aAAa,EACb,YAAY,EACZ,mBAAmB,EACtB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,kBAAkB;iBACjB,uBAAuB;;6CAEK,iBAAiB,CAAC,OAAO,EAAE,GAAG,CAAC;iDAC3B,OAAO;;;;;;;sBAOlC,mBAAmB;;kBAEvB,WAAW;;;wBAGL,aAAa;yBACZ,aAAa;uBACf,YAAY;;;;;;;;;;;;;;;;;;;CAmBlC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;qDAE0C,mBAAmB;yDACf,KAAK;;;;qDAIT,qBAAqB;yDACjB,KAAK;;SAErD,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;qDAE0C,iBAAiB,CAClD,OAAO,EACP,GAAG,CACN;yDACwC,OAAO;;;;qDAIX,oBAAoB;;;;qDAIpB,mBAAmB;;SAE/D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;oCAEyB,WAAW;;;;qDAIM,iBAAiB,CAClD,KAAK,EACL,GAAG,CACN;yDACwC,iBAAiB,CACtD,KAAK,EACL,IAAI,CACP;;;;qDAIoC,KAAK;;;;qDAIL,KAAK;;;;;;SAMjD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n BannerFail100DarkUi,\n Black15,\n Black85,\n Black91,\n ForestGreen,\n Information100DarkUi,\n Information100LightUi,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\nimport {\n tooltipCaptionFont,\n tooltipCaptionFontColor,\n borderWidth,\n mediumPadding,\n smallPadding,\n elevation2BoxShadow\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n font: ${tooltipCaptionFont};\n color: ${tooltipCaptionFontColor};\n text-align: left;\n --ni-private-tooltip-border-color: ${hexToRgbaCssColor(Black91, 0.3)};\n --ni-private-tooltip-background-color: ${Black15};\n }\n\n .tooltip {\n box-sizing: border-box;\n flex-shrink: 0;\n max-width: 440px;\n box-shadow: ${elevation2BoxShadow};\n display: inline-flex;\n border: ${borderWidth} solid var(--ni-private-tooltip-border-color);\n background-color: var(--ni-private-tooltip-background-color);\n padding-bottom: 6px;\n padding-left: ${mediumPadding};\n padding-right: ${mediumPadding};\n padding-top: ${smallPadding};\n }\n\n .status-icon {\n display: none;\n width: 14px;\n height: 14px;\n padding-right: 8px;\n }\n\n :host([severity='error'][icon-visible]) [severity='error'] {\n display: flex;\n flex: 0 0 auto;\n }\n\n :host([severity='information'][icon-visible]) [severity='information'] {\n display: flex;\n flex: 0 0 auto;\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host([severity='error']) {\n --ni-private-tooltip-border-color: ${BannerFail100DarkUi};\n --ni-private-tooltip-background-color: ${White};\n }\n\n :host([severity='information']) {\n --ni-private-tooltip-border-color: ${Information100LightUi};\n --ni-private-tooltip-background-color: ${White};\n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n --ni-private-tooltip-border-color: ${hexToRgbaCssColor(\n Black15,\n 0.3\n )};\n --ni-private-tooltip-background-color: ${Black85};\n }\n\n :host([severity='information']) {\n --ni-private-tooltip-border-color: ${Information100DarkUi};\n }\n\n :host([severity='error']) {\n --ni-private-tooltip-border-color: ${BannerFail100DarkUi};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n .anchored-region {\n background-color: ${ForestGreen};\n }\n\n :host {\n --ni-private-tooltip-border-color: ${hexToRgbaCssColor(\n White,\n 0.3\n )};\n --ni-private-tooltip-background-color: ${hexToRgbaCssColor(\n White,\n 0.15\n )};\n }\n\n :host([severity='error']) {\n --ni-private-tooltip-border-color: ${White};\n }\n\n :host([severity='information']) {\n --ni-private-tooltip-border-color: ${White};\n }\n\n .status-icon {\n opacity: 0.6;\n }\n `\n )\n);\n"]}
@@ -1,5 +1,5 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { display } from '@microsoft/fast-foundation';
2
+ import { display } from '../utilities/style/display';
3
3
  import { focusVisible } from '../utilities/style/focus';
4
4
  import { bodyFontColor, bodyFontFamily, bodyFontSize, bodyFontWeight, borderHoverColor, fillSelectedColor, fillHoverColor, fillHoverSelectedColor, borderWidth, iconSize, mediumDelay, bodyDisabledFontColor, iconColor } from '../theme-provider/design-tokens';
5
5
  import { groupSelectedAttribute } from '../tree-view/types';
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,aAAa,EACb,cAAc,EACd,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,QAAQ,EACR,WAAW,EACX,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;;iBAMb,qBAAqB;;;;MAIhC,CAAA,mCAAoC,EAAE;aAC/B,sBAAsB;sBACb,gBAAgB;;;;;;sBAMhB,WAAW;uBACV,QAAQ;;;;;;;uBAOR,QAAQ;;;;sBAIT,cAAc;;;aAGvB,sBAAsB;sBACb,sBAAsB;;;YAGhC,YAAY;kCACU,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;sBAKlC,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;;;;;qBAqBvB,YAAY;UACvB,cAAc;;+BAEO,QAAQ;;;YAG3B,YAAY;;;;;;;;iBAQP,QAAQ;kBACP,QAAQ;;;;;;;;;iBAST,QAAQ;kBACP,QAAQ;gCACM,WAAW;;;;;MAKrC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;MAGnB;AACE,uEAAuE,CAAC,EAC5E;;;+BAG2B,QAAQ;6BACV,QAAQ;;;;UAI3B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;cAMZ,QAAQ;;;;;;;;;;UAUZ;AACE;;;;GAIG,CAAC,EACR;iCACyB,QAAQ;;;;;;CAMxC,CAAC,aAAa,CACX,IAAI,6BAA6B;AAC7B,aAAa;AACb,GAAG,CAAA;;;;2BAIgB,QAAQ;;;;;;;;;;;SAW1B;AACD,aAAa;AACb,GAAG,CAAA;;;;2BAIgB,QAAQ;;;;;;;;;;;SAW1B,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n bodyFontColor,\n bodyFontFamily,\n bodyFontSize,\n bodyFontWeight,\n borderHoverColor,\n fillSelectedColor,\n fillHoverColor,\n fillHoverSelectedColor,\n borderWidth,\n iconSize,\n mediumDelay,\n bodyDisabledFontColor,\n iconColor\n} from '../theme-provider/design-tokens';\nimport { groupSelectedAttribute } from '../tree-view/types';\nimport { DirectionalStyleSheetBehavior } from '../utilities/style/direction';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('block')}\n\n :host {\n ${\n /* don't set font-size here or else it overrides what we set on .items */ ''\n }\n font-family: ${bodyFontFamily};\n font-weight: ${bodyFontWeight};\n contain: content;\n position: relative;\n outline: none;\n color: ${bodyFontColor};\n cursor: pointer;\n --ni-private-tree-item-nested-width: 0;\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n cursor: default;\n }\n\n ${/* this controls the side border */ ''}\n :host([${groupSelectedAttribute}])::after {\n background: ${borderHoverColor};\n border-radius: 0px;\n content: '';\n display: block;\n position: absolute;\n top: 0px;\n width: calc(${borderWidth} * 2);\n height: calc(${iconSize} * 2);\n }\n\n .positioning-region {\n display: flex;\n position: relative;\n box-sizing: border-box;\n height: calc(${iconSize} * 2);\n }\n\n .positioning-region:hover {\n background: ${fillHoverColor};\n }\n\n :host([${groupSelectedAttribute}]) .positioning-region:hover {\n background: ${fillHoverSelectedColor};\n }\n\n :host(${focusVisible}) .positioning-region {\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n outline: ${borderWidth} solid ${borderHoverColor};\n outline-offset: -2px;\n }\n\n :host([selected]) .positioning-region {\n background: ${fillSelectedColor};\n }\n\n :host([selected]) .positioning-region:hover {\n background: ${fillHoverSelectedColor};\n }\n\n :host([disabled]) .positioning-region:hover {\n background-color: transparent;\n }\n\n .positioning-region::before {\n content: '';\n display: block;\n width: var(--ni-private-tree-item-nested-width);\n flex-shrink: 0;\n }\n\n .content-region {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n width: 100%;\n padding-left: 10px;\n font: inherit;\n font-size: ${bodyFontSize};\n ${userSelectNone}\n position: relative;\n margin-inline-start: ${iconSize};\n }\n\n :host(${focusVisible}) .content-region {\n outline: none;\n }\n\n .expand-collapse-button {\n background: none;\n border: none;\n outline: none;\n width: ${iconSize};\n height: ${iconSize};\n padding: 0px;\n justify-content: center;\n align-items: center;\n margin-left: 10px;\n position: absolute;\n }\n\n .expand-collapse-button svg {\n width: ${iconSize};\n height: ${iconSize};\n transition: transform ${mediumDelay} ease-in;\n pointer-events: none;\n fill: currentcolor;\n }\n\n ${\n /* this rule keeps children without an icon text aligned with parents */ ''\n }\n [part=\"start\"] {\n width: ${iconSize};\n }\n\n ${\n /* the start class is applied when the corresponding slots is filled */ ''\n }\n .start {\n display: flex;\n margin-inline-start: ${iconSize};\n margin-inline-end: ${iconSize};\n }\n\n slot[name='start']::slotted(*) {\n ${iconColor.cssCustomProperty}: currentcolor;\n width: ${iconSize};\n height: ${iconSize};\n }\n\n ::slotted([role='treeitem']) {\n --ni-private-tree-item-nested-width: 1em;\n --ni-private-expand-collapse-button-nested-width: calc(\n ${iconSize} * -1\n );\n }\n\n [part='end'] {\n display: none;\n }\n\n .items {\n display: none;\n ${\n /*\n * this controls the nested indentation (by affecting .positioning-region::before)\n * it must minimally contain arithmetic with an em and a px value\n * make it larger or shorter by changing the px value\n */ ''\n }\n font-size: calc(1em + (${iconSize} * 2));\n }\n\n :host([expanded]) .items {\n display: block;\n }\n`.withBehaviors(\n new DirectionalStyleSheetBehavior(\n // ltr styles\n css`\n .expand-collapse-button {\n left: var(\n --ni-private-expand-collapse-button-nested-width,\n calc(${iconSize} * -1)\n );\n }\n\n .expand-collapse-button svg {\n transform: rotate(90deg);\n }\n\n :host([expanded]) .expand-collapse-button svg {\n transform: rotate(180deg);\n }\n `,\n // rtl styles\n css`\n .expand-collapse-button {\n right: var(\n --ni-private-expand-collapse-button-nested-width,\n calc(${iconSize} * -1)\n );\n }\n\n .expand-collapse-button svg {\n transform: rotate(180deg);\n }\n\n :host([expanded]) .expand-collapse-button svg {\n transform: rotate(135deg);\n }\n `\n )\n);\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EACH,aAAa,EACb,cAAc,EACd,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,WAAW,EACX,QAAQ,EACR,WAAW,EACX,qBAAqB,EACrB,SAAS,EACZ,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;;iBAMb,qBAAqB;;;;MAIhC,CAAA,mCAAoC,EAAE;aAC/B,sBAAsB;sBACb,gBAAgB;;;;;;sBAMhB,WAAW;uBACV,QAAQ;;;;;;;uBAOR,QAAQ;;;;sBAIT,cAAc;;;aAGvB,sBAAsB;sBACb,sBAAsB;;;YAGhC,YAAY;kCACU,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;sBAKlC,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;;;;;qBAqBvB,YAAY;UACvB,cAAc;;+BAEO,QAAQ;;;YAG3B,YAAY;;;;;;;;iBAQP,QAAQ;kBACP,QAAQ;;;;;;;;;iBAST,QAAQ;kBACP,QAAQ;gCACM,WAAW;;;;;MAKrC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;MAGnB;AACE,uEAAuE,CAAC,EAC5E;;;+BAG2B,QAAQ;6BACV,QAAQ;;;;UAI3B,SAAS,CAAC,iBAAiB;iBACpB,QAAQ;kBACP,QAAQ;;;;;;cAMZ,QAAQ;;;;;;;;;;UAUZ;AACE;;;;GAIG,CAAC,EACR;iCACyB,QAAQ;;;;;;CAMxC,CAAC,aAAa,CACX,IAAI,6BAA6B;AAC7B,aAAa;AACb,GAAG,CAAA;;;;2BAIgB,QAAQ;;;;;;;;;;;SAW1B;AACD,aAAa;AACb,GAAG,CAAA;;;;2BAIgB,QAAQ;;;;;;;;;;;SAW1B,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\nimport {\n bodyFontColor,\n bodyFontFamily,\n bodyFontSize,\n bodyFontWeight,\n borderHoverColor,\n fillSelectedColor,\n fillHoverColor,\n fillHoverSelectedColor,\n borderWidth,\n iconSize,\n mediumDelay,\n bodyDisabledFontColor,\n iconColor\n} from '../theme-provider/design-tokens';\nimport { groupSelectedAttribute } from '../tree-view/types';\nimport { DirectionalStyleSheetBehavior } from '../utilities/style/direction';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('block')}\n\n :host {\n ${\n /* don't set font-size here or else it overrides what we set on .items */ ''\n }\n font-family: ${bodyFontFamily};\n font-weight: ${bodyFontWeight};\n contain: content;\n position: relative;\n outline: none;\n color: ${bodyFontColor};\n cursor: pointer;\n --ni-private-tree-item-nested-width: 0;\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n cursor: default;\n }\n\n ${/* this controls the side border */ ''}\n :host([${groupSelectedAttribute}])::after {\n background: ${borderHoverColor};\n border-radius: 0px;\n content: '';\n display: block;\n position: absolute;\n top: 0px;\n width: calc(${borderWidth} * 2);\n height: calc(${iconSize} * 2);\n }\n\n .positioning-region {\n display: flex;\n position: relative;\n box-sizing: border-box;\n height: calc(${iconSize} * 2);\n }\n\n .positioning-region:hover {\n background: ${fillHoverColor};\n }\n\n :host([${groupSelectedAttribute}]) .positioning-region:hover {\n background: ${fillHoverSelectedColor};\n }\n\n :host(${focusVisible}) .positioning-region {\n box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;\n outline: ${borderWidth} solid ${borderHoverColor};\n outline-offset: -2px;\n }\n\n :host([selected]) .positioning-region {\n background: ${fillSelectedColor};\n }\n\n :host([selected]) .positioning-region:hover {\n background: ${fillHoverSelectedColor};\n }\n\n :host([disabled]) .positioning-region:hover {\n background-color: transparent;\n }\n\n .positioning-region::before {\n content: '';\n display: block;\n width: var(--ni-private-tree-item-nested-width);\n flex-shrink: 0;\n }\n\n .content-region {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n width: 100%;\n padding-left: 10px;\n font: inherit;\n font-size: ${bodyFontSize};\n ${userSelectNone}\n position: relative;\n margin-inline-start: ${iconSize};\n }\n\n :host(${focusVisible}) .content-region {\n outline: none;\n }\n\n .expand-collapse-button {\n background: none;\n border: none;\n outline: none;\n width: ${iconSize};\n height: ${iconSize};\n padding: 0px;\n justify-content: center;\n align-items: center;\n margin-left: 10px;\n position: absolute;\n }\n\n .expand-collapse-button svg {\n width: ${iconSize};\n height: ${iconSize};\n transition: transform ${mediumDelay} ease-in;\n pointer-events: none;\n fill: currentcolor;\n }\n\n ${\n /* this rule keeps children without an icon text aligned with parents */ ''\n }\n [part=\"start\"] {\n width: ${iconSize};\n }\n\n ${\n /* the start class is applied when the corresponding slots is filled */ ''\n }\n .start {\n display: flex;\n margin-inline-start: ${iconSize};\n margin-inline-end: ${iconSize};\n }\n\n slot[name='start']::slotted(*) {\n ${iconColor.cssCustomProperty}: currentcolor;\n width: ${iconSize};\n height: ${iconSize};\n }\n\n ::slotted([role='treeitem']) {\n --ni-private-tree-item-nested-width: 1em;\n --ni-private-expand-collapse-button-nested-width: calc(\n ${iconSize} * -1\n );\n }\n\n [part='end'] {\n display: none;\n }\n\n .items {\n display: none;\n ${\n /*\n * this controls the nested indentation (by affecting .positioning-region::before)\n * it must minimally contain arithmetic with an em and a px value\n * make it larger or shorter by changing the px value\n */ ''\n }\n font-size: calc(1em + (${iconSize} * 2));\n }\n\n :host([expanded]) .items {\n display: block;\n }\n`.withBehaviors(\n new DirectionalStyleSheetBehavior(\n // ltr styles\n css`\n .expand-collapse-button {\n left: var(\n --ni-private-expand-collapse-button-nested-width,\n calc(${iconSize} * -1)\n );\n }\n\n .expand-collapse-button svg {\n transform: rotate(90deg);\n }\n\n :host([expanded]) .expand-collapse-button svg {\n transform: rotate(180deg);\n }\n `,\n // rtl styles\n css`\n .expand-collapse-button {\n right: var(\n --ni-private-expand-collapse-button-nested-width,\n calc(${iconSize} * -1)\n );\n }\n\n .expand-collapse-button svg {\n transform: rotate(180deg);\n }\n\n :host([expanded]) .expand-collapse-button svg {\n transform: rotate(135deg);\n }\n `\n )\n);\n"]}
@@ -1,5 +1,5 @@
1
1
  import { css } from '@microsoft/fast-element';
2
- import { display } from '@microsoft/fast-foundation';
2
+ import { display } from '../utilities/style/display';
3
3
  import { focusVisible } from '../utilities/style/focus';
4
4
  export const styles = css `
5
5
  ${display('flex')}
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;YAQT,YAAY;;;CAGvB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '@microsoft/fast-foundation';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n flex-direction: column;\n align-items: stretch;\n min-width: fit-content;\n font-size: 0;\n }\n :host(${focusVisible}) {\n outline: none;\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/tree-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;;;YAQT,YAAY;;;CAGvB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport { focusVisible } from '../utilities/style/focus';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n flex-direction: column;\n align-items: stretch;\n min-width: fit-content;\n font-size: 0;\n }\n :host(${focusVisible}) {\n outline: none;\n }\n`;\n"]}
@@ -0,0 +1 @@
1
+ export declare const styles: import("@microsoft/fast-element").ElementStyles;
@@ -0,0 +1,6 @@
1
+ import { css } from '@microsoft/fast-element';
2
+ import { display } from '../../utilities/style/display';
3
+ export const styles = css `
4
+ ${display('none')}
5
+ `;
6
+ //# sourceMappingURL=styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/unit/base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;CACpB,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n ${display('none')}\n`;\n"]}
@@ -5,6 +5,7 @@ import { template } from '../base/template';
5
5
  import { byte1024UnitScale } from '../../utilities/unit-format/unit-scale/byte-1024-unit-scale';
6
6
  import { byteUnitScale } from '../../utilities/unit-format/unit-scale/byte-unit-scale';
7
7
  import { Unit } from '../base/unit';
8
+ import { styles } from '../base/styles';
8
9
  /**
9
10
  * Element that provides a unit scale for conversion of bytes
10
11
  */
@@ -29,7 +30,8 @@ __decorate([
29
30
  ], UnitByte.prototype, "binary", void 0);
30
31
  const nimbleUnitByte = UnitByte.compose({
31
32
  baseName: 'unit-byte',
32
- template
33
+ template,
34
+ styles
33
35
  });
34
36
  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());
35
37
  export const unitByteTag = 'nimble-unit-byte';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/byte/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6DAA6D,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAQpC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,IAAI;IAQ9B;QACI,KAAK,EAAE,CAAC;QARZ;;;WAGG;QAEI,WAAM,GAAG,KAAK,CAAC;QAIlB,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC;IAC3C,CAAC;IAEO,aAAa;QACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,MAAM;YAChC,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,aAAa,CAAC;IACxB,CAAC;CACJ;AAZU;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACJ;AAc1B,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { byte1024UnitScale } from '../../utilities/unit-format/unit-scale/byte-1024-unit-scale';\nimport { byteUnitScale } from '../../utilities/unit-format/unit-scale/byte-unit-scale';\nimport { Unit } from '../base/unit';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-unit-byte': UnitByte;\n }\n}\n\n/**\n * Element that provides a unit scale for conversion of bytes\n */\nexport class UnitByte extends Unit {\n /**\n * Use binary (base 1024 scale with binary prefixes) instead of\n * the default of decimal (base 1000 scale with metric prefixes)\n */\n @attr({ mode: 'boolean' })\n public binary = false;\n\n public constructor() {\n super();\n this.resolvedUnitScale = byteUnitScale;\n }\n\n private binaryChanged(): void {\n this.resolvedUnitScale = this.binary\n ? byte1024UnitScale\n : byteUnitScale;\n }\n}\n\nconst nimbleUnitByte = UnitByte.compose({\n baseName: 'unit-byte',\n template\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());\nexport const unitByteTag = 'nimble-unit-byte';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/byte/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,6DAA6D,CAAC;AAChG,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,IAAI;IAQ9B;QACI,KAAK,EAAE,CAAC;QARZ;;;WAGG;QAEI,WAAM,GAAG,KAAK,CAAC;QAIlB,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC;IAC3C,CAAC;IAEO,aAAa;QACjB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,MAAM;YAChC,CAAC,CAAC,iBAAiB;YACnB,CAAC,CAAC,aAAa,CAAC;IACxB,CAAC;CACJ;AAZU;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;wCACJ;AAc1B,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["import { attr } from '@microsoft/fast-element';\nimport { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { byte1024UnitScale } from '../../utilities/unit-format/unit-scale/byte-1024-unit-scale';\nimport { byteUnitScale } from '../../utilities/unit-format/unit-scale/byte-unit-scale';\nimport { Unit } from '../base/unit';\nimport { styles } from '../base/styles';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-unit-byte': UnitByte;\n }\n}\n\n/**\n * Element that provides a unit scale for conversion of bytes\n */\nexport class UnitByte extends Unit {\n /**\n * Use binary (base 1024 scale with binary prefixes) instead of\n * the default of decimal (base 1000 scale with metric prefixes)\n */\n @attr({ mode: 'boolean' })\n public binary = false;\n\n public constructor() {\n super();\n this.resolvedUnitScale = byteUnitScale;\n }\n\n private binaryChanged(): void {\n this.resolvedUnitScale = this.binary\n ? byte1024UnitScale\n : byteUnitScale;\n }\n}\n\nconst nimbleUnitByte = UnitByte.compose({\n baseName: 'unit-byte',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitByte());\nexport const unitByteTag = 'nimble-unit-byte';\n"]}
@@ -2,6 +2,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
2
2
  import { template } from '../base/template';
3
3
  import { Unit } from '../base/unit';
4
4
  import { celsiusUnitScale } from '../../utilities/unit-format/unit-scale/celsius-unit-scale';
5
+ import { styles } from '../base/styles';
5
6
  /**
6
7
  * Element representing degrees Celsius unit
7
8
  */
@@ -13,7 +14,8 @@ export class UnitCelsius extends Unit {
13
14
  }
14
15
  const nimbleUnitCelsius = UnitCelsius.compose({
15
16
  baseName: 'unit-celsius',
16
- template
17
+ template,
18
+ styles
17
19
  });
18
20
  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitCelsius());
19
21
  export const unitCelsiusTag = 'nimble-unit-celsius';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/celsius/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2DAA2D,CAAC;AAQ7F;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,IAAI;IACjC;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC;IAC9C,CAAC;CACJ;AAED,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { Unit } from '../base/unit';\nimport { celsiusUnitScale } from '../../utilities/unit-format/unit-scale/celsius-unit-scale';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-unit-celsius': UnitCelsius;\n }\n}\n\n/**\n * Element representing degrees Celsius unit\n */\nexport class UnitCelsius extends Unit {\n public constructor() {\n super();\n this.resolvedUnitScale = celsiusUnitScale;\n }\n}\n\nconst nimbleUnitCelsius = UnitCelsius.compose({\n baseName: 'unit-celsius',\n template\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitCelsius());\nexport const unitCelsiusTag = 'nimble-unit-celsius';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/celsius/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2DAA2D,CAAC;AAC7F,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,IAAI;IACjC;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC;IAC9C,CAAC;CACJ;AAED,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAC;IAC1C,QAAQ,EAAE,cAAc;IACxB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { Unit } from '../base/unit';\nimport { celsiusUnitScale } from '../../utilities/unit-format/unit-scale/celsius-unit-scale';\nimport { styles } from '../base/styles';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-unit-celsius': UnitCelsius;\n }\n}\n\n/**\n * Element representing degrees Celsius unit\n */\nexport class UnitCelsius extends Unit {\n public constructor() {\n super();\n this.resolvedUnitScale = celsiusUnitScale;\n }\n}\n\nconst nimbleUnitCelsius = UnitCelsius.compose({\n baseName: 'unit-celsius',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitCelsius());\nexport const unitCelsiusTag = 'nimble-unit-celsius';\n"]}
@@ -2,6 +2,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
2
2
  import { template } from '../base/template';
3
3
  import { Unit } from '../base/unit';
4
4
  import { fahrenheitUnitScale } from '../../utilities/unit-format/unit-scale/fahrenheit-unit-scale';
5
+ import { styles } from '../base/styles';
5
6
  /**
6
7
  * Element representing degrees Fahrenheit unit
7
8
  */
@@ -13,7 +14,8 @@ export class UnitFahrenheit extends Unit {
13
14
  }
14
15
  const nimbleUnitFahrenheit = UnitFahrenheit.compose({
15
16
  baseName: 'unit-fahrenheit',
16
- template
17
+ template,
18
+ styles
17
19
  });
18
20
  DesignSystem.getOrCreate()
19
21
  .withPrefix('nimble')
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/fahrenheit/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AAQnG;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,IAAI;IACpC;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,iBAAiB,GAAG,mBAAmB,CAAC;IACjD,CAAC;CACJ;AAED,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC;IAChD,QAAQ,EAAE,iBAAiB;IAC3B,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { Unit } from '../base/unit';\nimport { fahrenheitUnitScale } from '../../utilities/unit-format/unit-scale/fahrenheit-unit-scale';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-unit-fahrenheit': UnitFahrenheit;\n }\n}\n\n/**\n * Element representing degrees Fahrenheit unit\n */\nexport class UnitFahrenheit extends Unit {\n public constructor() {\n super();\n this.resolvedUnitScale = fahrenheitUnitScale;\n }\n}\n\nconst nimbleUnitFahrenheit = UnitFahrenheit.compose({\n baseName: 'unit-fahrenheit',\n template\n});\n\nDesignSystem.getOrCreate()\n .withPrefix('nimble')\n .register(nimbleUnitFahrenheit());\nexport const unitFahrenheitTag = 'nimble-unit-fahrenheit';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/fahrenheit/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,MAAM,8DAA8D,CAAC;AACnG,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,IAAI;IACpC;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,iBAAiB,GAAG,mBAAmB,CAAC;IACjD,CAAC;CACJ;AAED,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC;IAChD,QAAQ,EAAE,iBAAiB;IAC3B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { Unit } from '../base/unit';\nimport { fahrenheitUnitScale } from '../../utilities/unit-format/unit-scale/fahrenheit-unit-scale';\nimport { styles } from '../base/styles';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-unit-fahrenheit': UnitFahrenheit;\n }\n}\n\n/**\n * Element representing degrees Fahrenheit unit\n */\nexport class UnitFahrenheit extends Unit {\n public constructor() {\n super();\n this.resolvedUnitScale = fahrenheitUnitScale;\n }\n}\n\nconst nimbleUnitFahrenheit = UnitFahrenheit.compose({\n baseName: 'unit-fahrenheit',\n template,\n styles\n});\n\nDesignSystem.getOrCreate()\n .withPrefix('nimble')\n .register(nimbleUnitFahrenheit());\nexport const unitFahrenheitTag = 'nimble-unit-fahrenheit';\n"]}
@@ -2,6 +2,7 @@ import { DesignSystem } from '@microsoft/fast-foundation';
2
2
  import { template } from '../base/template';
3
3
  import { Unit } from '../base/unit';
4
4
  import { voltUnitScale } from '../../utilities/unit-format/unit-scale/volt-unit-scale';
5
+ import { styles } from '../base/styles';
5
6
  /**
6
7
  * Element representing units for volts
7
8
  */
@@ -13,7 +14,8 @@ export class UnitVolt extends Unit {
13
14
  }
14
15
  const nimbleUnitVolt = UnitVolt.compose({
15
16
  baseName: 'unit-volt',
16
- template
17
+ template,
18
+ styles
17
19
  });
18
20
  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());
19
21
  export const unitVoltTag = 'nimble-unit-volt';
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/volt/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AAQvF;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,IAAI;IAC9B;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC;IAC3C,CAAC;CACJ;AAED,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;CACX,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { Unit } from '../base/unit';\nimport { voltUnitScale } from '../../utilities/unit-format/unit-scale/volt-unit-scale';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-unit-volt': UnitVolt;\n }\n}\n\n/**\n * Element representing units for volts\n */\nexport class UnitVolt extends Unit {\n public constructor() {\n super();\n this.resolvedUnitScale = voltUnitScale;\n }\n}\n\nconst nimbleUnitVolt = UnitVolt.compose({\n baseName: 'unit-volt',\n template\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());\nexport const unitVoltTag = 'nimble-unit-volt';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/unit/volt/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,wDAAwD,CAAC;AACvF,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAQxC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,IAAI;IAC9B;QACI,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,iBAAiB,GAAG,aAAa,CAAC;IAC3C,CAAC;CACJ;AAED,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC;IACpC,QAAQ,EAAE,WAAW;IACrB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["import { DesignSystem } from '@microsoft/fast-foundation';\nimport { template } from '../base/template';\nimport { Unit } from '../base/unit';\nimport { voltUnitScale } from '../../utilities/unit-format/unit-scale/volt-unit-scale';\nimport { styles } from '../base/styles';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-unit-volt': UnitVolt;\n }\n}\n\n/**\n * Element representing units for volts\n */\nexport class UnitVolt extends Unit {\n public constructor() {\n super();\n this.resolvedUnitScale = voltUnitScale;\n }\n}\n\nconst nimbleUnitVolt = UnitVolt.compose({\n baseName: 'unit-volt',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleUnitVolt());\nexport const unitVoltTag = 'nimble-unit-volt';\n"]}
@@ -0,0 +1,6 @@
1
+ import { display as foundationDisplay } from '@microsoft/fast-foundation';
2
+ /**
3
+ * This utility will generate the appropriate display style, as well as a style rule
4
+ * to hide the host element when its `hidden` attribute is set.
5
+ */
6
+ export declare const display: typeof foundationDisplay;